chore(web): Add LayerSectionField component #534
Conversation
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## main #534 +/- ##
==========================================
+ Coverage 26.65% 27.26% +0.60%
==========================================
Files 1342 1344 +2
Lines 144699 144751 +52
Branches 3485 3541 +56
==========================================
+ Hits 38571 39467 +896
+ Misses 105005 104161 -844
Partials 1123 1123
Flags with carried forward coverage won't be shown. Click here to find out more.
|
| icon="layerAdd" | ||
| size={14} | ||
| color={theme.general.content.main} | ||
| onClick={onClickLayerAdd} |
There was a problem hiding this comment.
Since the LayerAddFrame has padding, it would probably be nice to be able to click more than just the icon, so can you move the onClick to this component? 🙏🏻
Can you also add a :hover: { cursor: "pointer"; } so we know its clickable
| const handleAction = useCallback(() => { | ||
| onAction?.(layer.id); | ||
| }, [layer.id, onAction]); |
There was a problem hiding this comment.
I think this needs stopPropagation(). Right now if I click the action button this AND handleActive are executed.
| const handleVisible = useCallback(() => { | ||
| onVisible?.(layer.id); | ||
| }, [layer.id, onVisible]); |
There was a problem hiding this comment.
I think this needs stopPropagation(). Right now if I click the visibility button this AND handleActive are executed.
| ${props => (props.active ? "background: " + props.theme.general.select + ";" : "")} | ||
| ${props => (props.active ? "border-radius: 4px;" : "")} | ||
| &:hover {${props => | ||
| props.active ? "" : "background: " + props.theme.general.bg.weak + "; border-radius: 0px;"} |
There was a problem hiding this comment.
(optional) same as #533 (comment)
| const ItemVisibilityIcon = styled(Icon)` | ||
| padding-left: 30%; | ||
| padding-right: 33.44%; | ||
| padding-top: 30%; | ||
| padding-bottom: 27.34%; | ||
| `; |
There was a problem hiding this comment.
Could you use flex instead of this padding?
Overview
Add LayerSectionField component
https://deploy-preview-534--reearth-web.netlify.app/storybook/?path=/story/beta-components-layersectionfield--default