Migrate 'LegendWidgetUI' component from makeStyles to styled-component + cleanup

CHANGELOG.md

@@ -12,6 +12,7 @@
 - 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)
 

packages/react-ui/src/widgets/legend/LegendWidgetUI.js

@@ -1,6 +1,5 @@
 import React, { createRef, Fragment } from 'react';
-import { Box, Button, Collapse, Divider, Grid, SvgIcon } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, Button, Collapse, Divider, Grid, styled, SvgIcon } from '@mui/material';
 import LegendWrapper from './LegendWrapper';
 import LegendCategories from './LegendCategories';
 import LegendIcon from './LegendIcon';
@@ -28,13 +27,11 @@ const LayersIcon = () => (
   </SvgIcon>
 );
 
-const useStyles = makeStyles((theme) => ({
-  legend: {
-    minWidth: '240px',
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1],
-    borderRadius: 4
-  }
+const LegendBox = styled(Box)(({ theme }) => ({
+  minWidth: theme.spacing(30),
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  borderRadius: theme.spacing(0.5)
 }));
 
 function LegendWidgetUI({
@@ -49,11 +46,10 @@ function LegendWidgetUI({
   onChangeLegendRowCollapsed,
   title
 }) {
-  const classes = useStyles();
   const isSingle = layers.length === 1;
 
   return (
-    <Box className={`${classes.legend} ${className}`}>
+    <LegendBox className={className}>
       <LegendContainer
         isSingle={isSingle}
         collapsed={collapsed}
@@ -69,7 +65,7 @@ function LegendWidgetUI({
           onChangeCollapsed={onChangeLegendRowCollapsed}
         />
       </LegendContainer>
-    </Box>
+    </LegendBox>
   );
 }
 
@@ -96,22 +92,25 @@ 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)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: theme.spacing(4.5)
+}));
+
+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'
@@ -120,9 +119,6 @@ const useStylesLegendContainer = makeStyles((theme) => ({
 
 function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, title }) {
   const wrapper = createRef();
-  const classes = useStylesLegendContainer({
-    collapsed
-  });
 
   const handleExpandClick = () => {
     if (onChangeCollapsed) onChangeCollapsed(!collapsed);
@@ -132,26 +128,18 @@ function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, tit
     children
   ) : (
     <>
-      <Collapse
-        ref={wrapper}
-        in={!collapsed}
-        timeout='auto'
-        unmountOnExit
-        classes={{
-          wrapperInner: classes.wrapperInner
-        }}
-      >
+      <CollapseWrapper ref={wrapper} in={!collapsed} timeout='auto' unmountOnExit>
         {children}
-      </Collapse>
-      <Grid container className={classes.header}>
-        <Button
-          className={classes.button}
+      </CollapseWrapper>
+      <Header container>
+        <HeaderButton
+          collapsed={collapsed}
           endIcon={<LayersIcon />}
           onClick={handleExpandClick}
         >
           <Typography variant='subtitle1'>{title}</Typography>
-        </Button>
-      </Grid>
+        </HeaderButton>
+      </Header>
     </>
   );
 }