Page MenuHomePhabricator

[web] Introduce `Label` component
ClosedPublic

Authored by jacek on Mar 9 2022, 4:33 AM.
Tags
None
Referenced Files
F2908054: D3378.diff
Sun, Oct 6, 1:25 PM
Unknown Object (File)
Mon, Sep 23, 8:55 AM
Unknown Object (File)
Mon, Sep 23, 8:55 AM
Unknown Object (File)
Mon, Sep 23, 8:54 AM
Unknown Object (File)
Mon, Sep 23, 8:54 AM
Unknown Object (File)
Mon, Sep 23, 8:54 AM
Unknown Object (File)
Thu, Sep 19, 2:38 AM
Unknown Object (File)
Sat, Sep 14, 9:08 PM

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.