Page MenuHomePhabricator

[web] Introduce `Label` component
ClosedPublic

Authored by jacek on Mar 9 2022, 4:33 AM.
Tags
None
Referenced Files
F3486346: D3378.diff
Wed, Dec 18, 4:40 AM
Unknown Object (File)
Fri, Dec 13, 5:19 PM
Unknown Object (File)
Mon, Dec 9, 7:26 AM
Unknown Object (File)
Thu, Nov 28, 11:09 AM
Unknown Object (File)
Thu, Nov 28, 11:09 AM
Unknown Object (File)
Thu, Nov 28, 11:09 AM
Unknown Object (File)
Thu, Nov 28, 11:09 AM
Unknown Object (File)
Thu, Nov 28, 11:08 AM

Details

Summary

Introduce a simple label component (for e.g. displaying member's role). It will be used in the next diff.

Screenshot_Google Chrome_2022-03-09_144255.png (96×418 px, 16 KB)

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

Test Plan

No changes in the app. The component will appear in members modal.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

Looks good to me! Are there corresponding designs on Figma? I don't remember seeing a label component, but I could be wrong. Would be good to include a link/screenshot in the description if there are designs.

web/components/label.react.js
15–28 ↗(On Diff #10194)

I wonder if it would be easier to understand as something like:

const {size, color, bg, children} = props;

const labelStyle = React.useMemo(() => {
  fontSize: size ?? '12px',
  color: color ?? 'var(--label-default-color)`
  background: bg ?? 'var(--label-default-bg)'
}, [bg, color, size]);

Not suggesting we should make the change.. just curious what you think

This revision is now accepted and ready to land.Mar 9 2022, 8:37 PM
web/components/label.react.js
15–28 ↗(On Diff #10194)

Note that you need parens () around the curly braces in the block {} to directly return an object, eg.:

const returnsObject = () => ({
  key1: 'one',
  key2: 'two',
});
This revision was automatically updated to reflect the committed changes.