Page MenuHomePhabricator

[web] Introduce `Label` component
ClosedPublic

Authored by jacek on Mar 9 2022, 4:33 AM.
Tags
None
Referenced Files
F3487475: D3378.id10522.diff
Wed, Dec 18, 8:01 AM
F3487208: D3378.id10864.diff
Wed, Dec 18, 7:17 AM
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

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
Branch
jacek/label
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

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

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.