polishing and bugfixing

CartoDB · May 20, 2024 · f95ae6d · f95ae6d
1 parent aee6ed1
commit f95ae6d
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 59 deletions.
diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js
@@ -1,58 +1,52 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import useImperativeIntl from '../../../hooks/useImperativeIntl';
-import { Box, Link, styled } from '@mui/material';
-import Typography from '../../atoms/Typography';
+import { Box, Checkbox, Link, styled } from '@mui/material';
 
 const FiltersRoot = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(0.5),
-  marginLeft: 'auto',
-  pointerEvents: 'auto'
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  height: theme.spacing(4),
+  marginBottom: theme.spacing(1),
+  padding: theme.spacing(1, 0),
+  backgroundColor: theme.palette.background.paper,
+  borderBottom: `1px solid ${theme.palette.divider}`
 }));
 
 const LinkFilter = styled(Link)(({ disabled, theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  width: '100%',
+  height: '100%',
+  padding: theme.spacing(0.5, 1.5),
+  textAlign: 'initial',
+
   ...(disabled && { pointerEvents: 'none', color: theme.palette.text.disabled })
 }));
 
-function Filters({
-  showFilters,
-  areAllSelected,
-  areAnySelected,
-  selectAll,
-  unselectAll,
-  selectAllDisabled
-}) {
+function Filters({ areAllSelected, areAnySelected, selectAll, selectAllDisabled }) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
 
-  if (!showFilters) {
-    return null;
-  }
-
   return (
     <FiltersRoot>
       <LinkFilter
-        variant='caption'
+        variant='body2'
+        color='textPrimary'
         component='button'
+        underline='none'
         disabled={areAllSelected || selectAllDisabled}
         onClick={selectAll}
       >
-        {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })}
-      </LinkFilter>
-      <Typography variant='caption' weight='strong' color='text.hint'>
-        •
-      </Typography>
-      <LinkFilter
-        variant='caption'
-        component='button'
-        onClick={unselectAll}
-        disabled={!areAnySelected}
-      >
-        {intlConfig.formatMessage({
-          id: 'c4r.form.selectNone'
-        })}
+        <Checkbox
+          checked={areAllSelected}
+          indeterminate={areAnySelected && !areAllSelected}
+        />
+        <span>{intlConfig.formatMessage({ id: 'c4r.form.selectAll' })}</span>
       </LinkFilter>
     </FiltersRoot>
   );

diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js b/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js
@@ -2,7 +2,16 @@ import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import useImperativeIntl from '../../../hooks/useImperativeIntl';
-import { Checkbox, ListItemText, MenuItem, Tooltip, styled } from '@mui/material';
+import {
+  Checkbox,
+  IconButton,
+  InputAdornment,
+  ListItemText,
+  MenuItem,
+  Tooltip,
+  styled
+} from '@mui/material';
+import { Cancel } from '@mui/icons-material';
 
 import SelectField from '../../atoms/SelectField';
 import Typography from '../../atoms/Typography';
@@ -20,6 +29,20 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
   }
 }));
 
+const UnselectButton = styled(InputAdornment)(({ theme }) => ({
+  display: 'none',
+  position: 'absolute',
+  top: theme.spacing(2),
+  right: theme.spacing(3.5),
+
+  '.MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &': {
+    display: 'flex'
+  },
+  '.MuiSvgIcon-root': {
+    color: theme.palette.text.hint
+  }
+}));
+
 const MultipleSelectField = forwardRef(
   (
     {
@@ -121,17 +144,25 @@ const MultipleSelectField = forwardRef(
         renderValue={() => renderValue}
         onChange={handleChange}
         size={size}
-        labelSecondary={
+        endAdornment={
+          showFilters &&
+          areAnySelected && (
+            <UnselectButton position='end'>
+              <IconButton onClick={unselectAll} size='small'>
+                <Cancel />
+              </IconButton>
+            </UnselectButton>
+          )
+        }
+      >
+        {showFilters && (
           <Filters
-            showFilters={showFilters}
             areAllSelected={areAllSelected}
             areAnySelected={areAnySelected}
             selectAll={selectAll}
-            unselectAll={unselectAll}
             selectAllDisabled={selectAllDisabled}
           />
-        }
-      >
+        )}
         {options?.map((option) => {
           const item = (
             <StyledMenuItem

diff --git a/packages/react-ui/src/localization/en.js b/packages/react-ui/src/localization/en.js
@@ -1,7 +1,7 @@
 const locales = {
   c4r: {
     form: {
-      selectAll: 'All',
+      selectAll: 'Select all',
       selectNone: 'None',
       allSelected: 'All selected',
       noneSelected: 'None selected',

diff --git a/packages/react-ui/src/localization/es.js b/packages/react-ui/src/localization/es.js
@@ -1,7 +1,7 @@
 const locales = {
   c4r: {
     form: {
-      selectAll: 'Todos',
+      selectAll: 'Seleccionar todos',
       selectNone: 'Ninguno',
       allSelected: 'Todos seleccionados',
       noneSelected: 'Ninguno seleccionado',

diff --git a/packages/react-ui/src/localization/id.js b/packages/react-ui/src/localization/id.js
@@ -1,7 +1,7 @@
 const locales = {
   c4r: {
     form: {
-      selectAll: 'All',
+      selectAll: 'Select all',
       selectNone: 'None',
       allSelected: 'All selected',
       noneSelected: 'None selected',

diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -9,6 +9,11 @@ export const navigationOverrides = {
           minWidth: theme.spacing(8), // 64px, defined by design
           maxHeight: theme.spacing(39) // 312px, defined by design
         }
+      }),
+      list: ({ theme }) => ({
+        '.MuiMenuItem-root': {
+          paddingRight: theme.spacing(3)
+        }
       })
     }
   },
@@ -81,7 +86,7 @@ export const navigationOverrides = {
             backgroundColor: theme.palette.action.disabledBackground
           }
         },
-        '& .MuiCheckbox-root, & > .MuiSvgIcon-root': {
+        '& > .MuiSvgIcon-root': {
           marginRight: theme.spacing(1)
         },
         '.MuiMenu-paper-sizeSmall &': {
@@ -161,13 +166,11 @@ export const navigationOverrides = {
   MuiListItemIcon: {
     styleOverrides: {
       root: ({ theme }) => ({
-        marginRight: theme.spacing(1),
-
         '& .MuiSvgIcon-root': {
           fontSize: ICON_SIZE_LARGE
         },
         '.MuiMenuItem-root.MuiButtonBase-root &': {
-          minWidth: theme.spacing(2.25)
+          minWidth: ICON_SIZE_MEDIUM
         }
       })
     }

diff --git a/packages/react-ui/storybook/stories/molecules/MiltipleSelectField.stories.js b/packages/react-ui/storybook/stories/molecules/MiltipleSelectField.stories.js
@@ -108,6 +108,26 @@ const PlaygroundTemplate = ({ ...rest }) => {
     {
       label: 'Fifty',
       value: 'Fifty'
+    },
+    {
+      label: 'Sixty',
+      value: 'Sixty'
+    },
+    {
+      label: 'Seventy',
+      value: 'Seventy'
+    },
+    {
+      label: 'Eighty',
+      value: 'Eighty'
+    },
+    {
+      label: 'Ninety',
+      value: 'Ninety'
+    },
+    {
+      label: 'Hundred',
+      value: 'Hundred'
     }
   ];
 

diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js
@@ -115,17 +115,28 @@ const TemplateMenuItemStates = ({ label, ...args }) => {
       <Grid item>
         <Container>
           <Label variant='body2'>{'Selected'}</Label>
-          <MenuItem {...args} selected>
-            <ListItemIcon>
-              <EditOutlined />
-            </ListItemIcon>
-            <ListItemText>
-              {label}
-              <Typography component='p' variant='caption' color='text.secondary'>
-                Secondary text
-              </Typography>
-            </ListItemText>
-          </MenuItem>
+          <Container pr={3}>
+            <MenuItem {...args} selected>
+              <ListItemIcon>
+                <EditOutlined />
+              </ListItemIcon>
+              <ListItemText>
+                {label}
+                <Typography component='p' variant='caption' color='text.secondary'>
+                  Secondary text
+                </Typography>
+              </ListItemText>
+            </MenuItem>
+          </Container>
+          <Container>
+            <MenuItem {...args} selected>
+              <ListItemIcon>
+                <ContentCopyOutlined />
+              </ListItemIcon>
+              <ListItemText>{label}</ListItemText>
+              <Chip size='small' label='type' color='primary' variant='outlined' />
+            </MenuItem>
+          </Container>
         </Container>
       </Grid>
       <Grid item>
@@ -388,6 +399,9 @@ const DocTemplate = () => {
 
 const commonArgs = { label: 'Label' };
 
+export const Playground = TemplateMenu.bind({});
+Playground.args = { ...commonArgs };
+
 export const Guide = DocTemplate.bind({});
 
 export const Dense = TemplateMenu.bind({});
@@ -409,7 +423,11 @@ export const Subtitle = TemplateMenu.bind({});
 Subtitle.args = { ...commonArgs, subtitle: true };
 
 export const TextOverflow = TemplateMenu.bind({});
-TextOverflow.args = { ...commonArgs, label: 'Long text that will be truncated' };
+TextOverflow.args = {
+  ...commonArgs,
+  width: '200px',
+  label: 'Long text that will be truncated'
+};
 
 export const CustomWidth = TemplateMenu.bind({});
 CustomWidth.args = { ...commonArgs, width: '400px' };