Tabs component adapted to the new design system (#537)

CartoDB · Nov 22, 2022 · 43da365 · 43da365
1 parent c985726
commit 43da365
Show file tree

Hide file tree

Showing 6 changed files with 301 additions and 84 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Tabs component adapted to the new design system [#537](https://github.com/CartoDB/carto-react/pull/537/)
 - Tooltip component adapted to the new design system [#536](https://github.com/CartoDB/carto-react/pull/536/)
 - Switch component adapted to the new design system [#534](https://github.com/CartoDB/carto-react/pull/534/)
 - Design review of Toggle component [#533](https://github.com/CartoDB/carto-react/pull/533)

diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js
@@ -387,6 +387,9 @@ export const buttonsOverrides = {
 
           '&:not(:first-of-type)': {
             marginLeft: 0
+          },
+          '& + .MuiDivider-root': {
+            height: sizeMedium
           }
         }
       },

diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -15,63 +15,64 @@ export const navigationOverrides = {
   // Tabs
   MuiTabs: {
     defaultProps: {
-      indicatorColor: 'primary',
-      textColor: 'primary',
+      iconPosition: 'start',
       TabIndicatorProps: {
         classes: {
           colorPrimary: 'colorPrimary'
         }
       }
     },
     styleOverrides: {
-      indicator: {
-        height: 4,
-        '&.colorPrimary': {
-          backgroundColor: commonPalette.text.primary
-        }
-      },
-
-      vertical: {
-        '& .MuiTabs-indicator': {
-          width: 4
-        },
+      root: ({ ownerState }) => ({
+        borderBottom: `1px solid ${commonPalette.black[12]}`,
 
-        '& .MuiTab-root': {
-          padding: getSpacing(0, 2),
+        ...(ownerState.variant !== 'fullWidth' && {
+          display: 'inline-flex'
+        })
+      }),
 
-          '& .MuiTab-wrapper': {
-            alignItems: 'flex-start'
-          }
-        }
+      vertical: {
+        borderBottom: 0
       }
     }
   },
 
   // Tab
   MuiTab: {
+    defaultProps: {
+      iconPosition: 'start'
+    },
+
     styleOverrides: {
       root: {
-        padding: getSpacing(0, 1),
-        marginRight: getSpacing(3),
-        minWidth: '56px!important',
-        '&[class*="MuiTab-labelIcon"]': {
-          flexFlow: 'row',
-          alignItems: 'center'
+        minHeight: getSpacing(6),
+        minWidth: getSpacing(6),
+        padding: getSpacing(0, 2),
+        paddingTop: '2px',
+        borderBottom: '2px solid transparent',
+        ...themeTypography.subtitle2,
+        color: commonPalette.text.primary,
+        transition: 'border 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+
+        '&:hover': {
+          borderBottomColor: commonPalette.text.primary
         },
-        '&[class*="MuiTab-labelIcon"] .MuiSvgIcon-root': {
-          marginRight: getSpacing(1),
-          marginBottom: 0
-        }
-      },
-      textColorPrimary: {
-        color: commonPalette.primary.main,
-        opacity: 1,
         '&.Mui-selected': {
-          color: commonPalette.text.primary
+          pointerEvents: 'none'
         },
-        '&.Mui-disabled': {
-          color: commonPalette.action.disabled
+        '.MuiTabs-vertical &': {
+          paddingTop: 0,
+          borderBottom: 0,
+          paddingLeft: '2px',
+          borderRight: '2px solid transparent',
+
+          '&:hover': {
+            borderRightColor: commonPalette.text.primary
+          }
         }
+      },
+      wrapped: {
+        maxWidth: '240px'
       }
     }
   },

diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js
@@ -113,7 +113,7 @@ const ToggleRow = ({ label, divider, fullWidth, ...rest }) => {
   );
 };
 
-const SizesTemplate = (args) => {
+const IconTemplate = (args) => {
   return (
     <Grid container alignItems='center' spacing={4}>
       <Grid item>
@@ -174,6 +174,9 @@ const DividedTemplate = (args) => {
       <Grid item>
         <ToggleRow divider />
       </Grid>
+      <Grid item>
+        <ToggleRow divider size='small' />
+      </Grid>
     </Grid>
   );
 };
@@ -224,20 +227,20 @@ const BehaviorTemplate = (args) => {
 
 export const Playground = ToggleRow.bind({});
 
-export const Sizes = SizesTemplate.bind({});
+export const Icon = IconTemplate.bind({});
 
 export const Text = TextTemplate.bind({});
 
-export const HorizontalGroup = GroupTemplate.bind({});
-
-export const HorizontalTextGroup = GroupTemplate.bind({});
-HorizontalTextGroup.args = { label: 'Text' };
-
 export const VerticalGroup = VerticalGroupTemplate.bind({});
 VerticalGroup.args = { orientation: 'vertical' };
 
+export const HorizontalGroup = GroupTemplate.bind({});
+
 export const DividedGroup = DividedTemplate.bind({});
 
+export const HorizontalTextGroup = GroupTemplate.bind({});
+HorizontalTextGroup.args = { label: 'Text' };
+
 export const MultipleSelectionGroup = GroupTemplate.bind({});
 MultipleSelectionGroup.args = { exclusive: false };
 

diff --git a/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js
@@ -2,9 +2,10 @@ import React from 'react';
 import { Box, Grid, IconButton, Tooltip } from '@mui/material';
 import { InfoOutlined } from '@mui/icons-material';
 import makeStyles from '@mui/styles/makeStyles';
-import Typography from '../../../src/components/atoms/Typography';
-import TooltipData from '../../../src/components/organisms/TooltipData';
 import { commonPalette } from '../../../src/theme/sections/palette';
+import TooltipData from '../../../src/components/organisms/TooltipData';
+import Typography from '../../../src/components/atoms/Typography';
+import Button from '../../../src/components/atoms/Button';
 
 const options = {
   title: 'Molecules/Tooltip',
@@ -33,7 +34,7 @@ const options = {
       url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257'
     },
     status: {
-      type: 'readyToReview'
+      type: 'validated'
     }
   }
 };
@@ -247,9 +248,7 @@ const TooltipBehaviorTemplate = (args) => {
             arrow={false}
             title='When followCursor is true, Tooltip should have arrow={false} property too'
           >
-            <IconButton>
-              <InfoOutlined />
-            </IconButton>
+            <Button variant='outlined'>{'Long Button'}</Button>
           </Tooltip>
         </Box>
       </Grid>