-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remember currentColor
icon="layerAdd" | ||
size={14} | ||
color={theme.general.content.main} | ||
onClick={onClickLayerAdd} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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