Page MenuHomePhabricator

[web] Introducing `ModalLabel` component
AbandonedPublic

Authored by jakub on Sep 12 2022, 7:11 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 5, 1:19 PM
Unknown Object (File)
Fri, Apr 5, 9:34 AM
Unknown Object (File)
Fri, Apr 5, 9:33 AM
Unknown Object (File)
Fri, Apr 5, 9:32 AM
Unknown Object (File)
Fri, Apr 5, 9:22 AM
Unknown Object (File)
Fri, Mar 29, 8:10 PM
Unknown Object (File)
Mar 18 2024, 4:41 PM
Unknown Object (File)
Mar 5 2024, 5:33 AM

Details

Reviewers
tomek
atul
ashoat
Summary

Depends on D5110

Introducing a simple ModalLabel component, which will be used in e.g. SubchannelComposer

Screenshot 2022-09-12 at 16.04.34.png (105×235 px, 4 KB)

Figma:
https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1077%3A70464

Test Plan

This component will be used in next diffs (firstly in SubchannelComposer). Currently, no changes in the app.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

jakub retitled this revision from [web] Introducing ModalLabel to [web] Introducing `ModalLabel` component.Sep 12 2022, 8:22 AM
jakub edited the summary of this revision. (Show Details)
jakub edited the test plan for this revision. (Show Details)
jakub added reviewers: tomek, atul, ashoat.
atul requested changes to this revision.Sep 15 2022, 7:35 AM

Looks good at a high level! Requested two changes to maintain consistency with the rest of the codebase

web/components/modal-label.react.js
3 ↗(On Diff #16585)

We use

import * as React from 'react';

elsewhere in the codebase

8 ↗(On Diff #16585)

nice catch making this read only

11–15 ↗(On Diff #16585)

We use the function keyword for React components elsewhere in the codebase

eg

function ModalLabel(props: Props): React.Node {
  return <h1>Blah</h1>;
}
This revision now requires changes to proceed.Sep 15 2022, 7:35 AM

I should not be a first-pass reviewer except for the cases listed here

tomek requested changes to this revision.Sep 16 2022, 10:53 AM

Overall I'm not really sure if introducing components that are that simple is beneficial. It is just a simple div with a class, so maybe it would be better to just have div with a class where this component would be used? (not sure, it depends on the rest of the stack).

Usually, when we have a component which renders a single prop, we can consider using children instead - that is more reusable, but not sure if it applies here.

web/components/modal-label.css
2

Usually rem should be preferred over px, but in our case we're using px almost everywhere, and the consistency is more important.

This revision now requires changes to proceed.Sep 16 2022, 10:53 AM

After discussion in real life, I decided to abandon this diff and include this component directly to ComposeSubchannel