From 3f49109305ad360b965c978758c406f46d8ffb0c Mon Sep 17 00:00:00 2001 From: Janto Date: Wed, 12 Apr 2023 08:41:14 +0200 Subject: [PATCH 1/7] feat: migrate 'LegendWidgetUI' component from makeStyles to styled-component + cleanup --- .../src/widgets/legend/LegendWidgetUI.js | 77 +++++++++---------- 1 file changed, 37 insertions(+), 40 deletions(-) diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 6d2c42584..db5de076c 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -1,5 +1,5 @@ import React, { createRef, Fragment } from 'react'; -import { Box, Button, Collapse, Divider, Grid, SvgIcon } from '@mui/material'; +import { Box, Button, Collapse, Divider, Grid, styled, SvgIcon } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import LegendWrapper from './LegendWrapper'; import LegendCategories from './LegendCategories'; @@ -28,13 +28,12 @@ const LayersIcon = () => ( ); -const useStyles = makeStyles((theme) => ({ - legend: { - minWidth: '240px', - backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], - borderRadius: 4 - } + +const LegendBox = styled(Box)(({theme}) => ({ + minWidth: '240px', + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[1], + borderRadius: 4 })); function LegendWidgetUI({ @@ -49,11 +48,10 @@ function LegendWidgetUI({ onChangeLegendRowCollapsed, title }) { - const classes = useStyles(); const isSingle = layers.length === 1; return ( - + - + ); } @@ -96,33 +94,35 @@ LegendWidgetUI.propTypes = { export default LegendWidgetUI; -const useStylesLegendContainer = makeStyles((theme) => ({ - header: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - height: '36px' - }, - button: { - flex: '1 1 auto', - justifyContent: 'space-between', - padding: theme.spacing(0.75, 1.25, 0.75, 3), - borderTop: ({ collapsed }) => - collapsed ? 'none' : `1px solid ${theme.palette.divider}`, - cursor: 'pointer' - }, - wrapperInner: { + +const Header = styled(Grid)(() => ({ + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: '36px' +})); + +const HeaderButton = styled(Button, { + shouldForwardProp: (prop) => prop !== 'collapsed' +})(({theme, collapsed}) => ({ + flex: '1 1 auto', + justifyContent: 'space-between', + padding: theme.spacing(0.75, 1.25, 0.75, 3), + borderTop: collapsed ? 'none' : `1px solid ${theme.palette.divider}`, + cursor: 'pointer' +})); + +const CollapseWrapper = styled(Collapse)(() => ({ + '.MuiCollapse-wrapperInner': { maxHeight: 'max(350px, 80vh)', overflowY: 'auto', overflowX: 'hidden' } })); + function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, title }) { const wrapper = createRef(); - const classes = useStylesLegendContainer({ - collapsed - }); const handleExpandClick = () => { if (onChangeCollapsed) onChangeCollapsed(!collapsed); @@ -132,26 +132,23 @@ function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, tit children ) : ( <> - {children} - - - - + + ); } From e69cf355b09a1d2f230848e5077211a660e35958 Mon Sep 17 00:00:00 2001 From: Janto Date: Wed, 12 Apr 2023 08:45:40 +0200 Subject: [PATCH 2/7] chore: update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a415c7e1d..10cf26547 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ - Note component cleaned styles from makeStyles [#630](https://github.com/CartoDB/carto-react/pull/630) - OpacityControl component migrated from makeStyles to styled-components + cleanup [#631](https://github.com/CartoDB/carto-react/pull/631) +- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) + ## 2.0 ### 2.0.0 (2023-04-05) From fbcdfd93735de80ff3b2aa9e2f33ae4ff0ec3440 Mon Sep 17 00:00:00 2001 From: Janto Date: Wed, 12 Apr 2023 16:48:45 +0200 Subject: [PATCH 3/7] fix: px to theme.spacing --- packages/react-ui/src/widgets/legend/LegendWidgetUI.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index db5de076c..65ef58319 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -1,6 +1,5 @@ import React, { createRef, Fragment } from 'react'; import { Box, Button, Collapse, Divider, Grid, styled, SvgIcon } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import LegendWrapper from './LegendWrapper'; import LegendCategories from './LegendCategories'; import LegendIcon from './LegendIcon'; @@ -33,7 +32,7 @@ const LegendBox = styled(Box)(({theme}) => ({ minWidth: '240px', backgroundColor: theme.palette.background.paper, boxShadow: theme.shadows[1], - borderRadius: 4 + borderRadius: theme.spacing(0.5), })); function LegendWidgetUI({ @@ -95,11 +94,11 @@ LegendWidgetUI.propTypes = { export default LegendWidgetUI; -const Header = styled(Grid)(() => ({ +const Header = styled(Grid)(({ theme }) => ({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - height: '36px' + height: theme.spacing(4.5) })); const HeaderButton = styled(Button, { From 780c51a1c8fdeda43edbe4688d3bbf74083e116f Mon Sep 17 00:00:00 2001 From: Alberto Arana Date: Thu, 13 Apr 2023 10:17:34 +0200 Subject: [PATCH 4/7] fix: LengendWidgetUI styles --- .../src/widgets/legend/LegendWidgetUI.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 65ef58319..33442f15e 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -27,12 +27,11 @@ const LayersIcon = () => ( ); - -const LegendBox = styled(Box)(({theme}) => ({ +const LegendBox = styled(Box)(({ theme }) => ({ minWidth: '240px', backgroundColor: theme.palette.background.paper, boxShadow: theme.shadows[1], - borderRadius: theme.spacing(0.5), + borderRadius: theme.spacing(0.5) })); function LegendWidgetUI({ @@ -93,7 +92,6 @@ LegendWidgetUI.propTypes = { export default LegendWidgetUI; - const Header = styled(Grid)(({ theme }) => ({ flexDirection: 'row', alignItems: 'center', @@ -103,7 +101,7 @@ const Header = styled(Grid)(({ theme }) => ({ const HeaderButton = styled(Button, { shouldForwardProp: (prop) => prop !== 'collapsed' -})(({theme, collapsed}) => ({ +})(({ theme, collapsed }) => ({ flex: '1 1 auto', justifyContent: 'space-between', padding: theme.spacing(0.75, 1.25, 0.75, 3), @@ -119,7 +117,6 @@ const CollapseWrapper = styled(Collapse)(() => ({ } })); - function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, title }) { const wrapper = createRef(); @@ -131,17 +128,12 @@ function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, tit children ) : ( <> - + {children}
} onClick={handleExpandClick} > From 34e0c788322a1ad24175c8e35ba290d26a0428ac Mon Sep 17 00:00:00 2001 From: Janto Date: Fri, 14 Apr 2023 11:06:57 +0200 Subject: [PATCH 5/7] fix: review PR sugestions --- CHANGELOG.md | 1 - packages/react-ui/src/widgets/legend/LegendWidgetUI.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 763eb9b76..b3ac276a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,6 @@ - Storybook documentation and fixes [#629](https://github.com/CartoDB/carto-react/pull/629) - Note component cleaned styles from makeStyles [#630](https://github.com/CartoDB/carto-react/pull/630) - OpacityControl component migrated from makeStyles to styled-components + cleanup [#631](https://github.com/CartoDB/carto-react/pull/631) - - LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) ## 2.0 diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 33442f15e..f70a090d3 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -28,7 +28,7 @@ const LayersIcon = () => ( ); const LegendBox = styled(Box)(({ theme }) => ({ - minWidth: '240px', + minWidth: theme.spacing(30), backgroundColor: theme.palette.background.paper, boxShadow: theme.shadows[1], borderRadius: theme.spacing(0.5) From e3beb756595532992422e767708b407229a3ec82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Apr 2023 19:06:33 +0200 Subject: [PATCH 6/7] Cleanup --- CHANGELOG.md | 2 +- .../storybook/stories/widgetsUI/LegendWidgetUI.stories.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea6722091..dd70831e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634) - LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635) - LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636) +- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) ## 2.0 @@ -25,7 +26,6 @@ - Storybook documentation and fixes [#629](https://github.com/CartoDB/carto-react/pull/629) - Note component cleaned styles from makeStyles [#630](https://github.com/CartoDB/carto-react/pull/630) - OpacityControl component migrated from makeStyles to styled-components + cleanup [#631](https://github.com/CartoDB/carto-react/pull/631) -- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) ### 2.0.0 (2023-04-05) diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js index d781d09cb..794e7d8fe 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI'; -import CartoIcon from '../../assets/carto-symbol.svg'; const options = { title: 'Organisms/Widgets/LegendWidgetUI', From e82150eaf19d50fe1bd450448f5297ee9d892835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Apr 2023 19:10:30 +0200 Subject: [PATCH 7/7] Add missing key to list --- packages/react-ui/src/widgets/legend/LegendProportion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index d50c1b8f4..5905864e2 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -42,7 +42,7 @@ function LegendProportion({ legend }) { {[...Array(4)].map((circle, index) => ( - + ))}