From 76b049ffd47c73de4253811ccc9825b44fa30607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 14 May 2024 19:08:30 +0200 Subject: [PATCH 01/19] storybook org --- .../theme/sections/components/navigation.js | 1 + .../stories/organisms/Menu.stories.js | 289 +++++++++++++++--- 2 files changed, 241 insertions(+), 49 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 09b3a6a63..a31ff15a7 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -7,6 +7,7 @@ export const navigationOverrides = { root: ({ theme }) => ({ ...theme.typography.body2, minHeight: theme.spacing(4), + minWidth: theme.spacing(12), whiteSpace: 'normal', transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 17917c03d..98439e515 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -1,22 +1,26 @@ import React, { useState } from 'react'; import { - Divider, ListItemIcon, ListItemText, MenuItem, MenuList, Menu, - Box + Box, + Grid, + Divider, + Chip } from '@mui/material'; import { CloudOutlined, ContentCopyOutlined, ContentCutOutlined, - ContentPasteOutlined + ContentPasteOutlined, + DeleteOutline } from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; -import { DocContainer, DocHighlight } from '../../utils/storyStyles'; +import { Container, DocContainer, DocHighlight, Label } from '../../utils/storyStyles'; import Button from '../../../src/components/atoms/Button'; +import Avatar from '../../../src/components/molecules/Avatar'; const options = { title: 'Organisms/Menu', @@ -32,6 +36,18 @@ const options = { control: { type: 'boolean' } + }, + selected: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + destructive: { + defaultValue: false, + control: { + type: 'boolean' + } } }, parameters: { @@ -40,12 +56,218 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29229&t=0T8NJiytWngAdJeO-0' }, status: { - type: 'needsUpdate' + type: 'readyToReview' } } }; export default options; +const TemplateMenuItemSize = ({ label, selected, ...args }) => { + return ( + + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + M + + + {label} + + Secondary text + + + + + + + ); +}; + +const TemplateMenuItemStates = ({ label, ...args }) => { + return ( + + + + + + + + + + {label} + + Secondary text + + + + + + + + + + + + + + {label} + + Secondary text + + + + + + + + + + + + + + {label} + + Secondary text + + + + + + + ); +}; + +const TemplateMenuItemContent = ({ label, selected, ...args }) => { + return ( + + + + + + {label} + + + + + + + + + + + {label} + + + + + + {label} + + + + M + + + {label} + + Secondary text + + + + + + + + + + {label} + + + + + + + {label} + + + + + + + {label} + + + + + + ); +}; + +const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { + return ( + + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + + + + + + + {label} + + + + + ); +}; + const TemplateMenu = ({ label, ...args }) => { const [anchorEl, setAnchorEl] = useState(null); @@ -118,46 +340,6 @@ const TemplateMenu = ({ label, ...args }) => { ); }; -const TemplateMenuList = ({ label, ...args }) => { - return ( - - - - - - {label} - - ⌘X - - - - - - - {label} - - ⌘C - - - - - - - {label} - - ⌘V - - - - - - - - {label} - - - ); -}; const DocTemplate = () => { return ( @@ -183,12 +365,21 @@ const DocTemplate = () => { ); }; -const commonArgs = { label: 'Label', dense: false }; +const commonArgs = { label: 'Label' }; export const Guide = DocTemplate.bind({}); +export const Size = TemplateMenuItemSize.bind({}); +Size.args = { ...commonArgs }; + +export const States = TemplateMenuItemStates.bind({}); +States.args = { ...commonArgs }; + +export const Content = TemplateMenuItemContent.bind({}); +Content.args = { ...commonArgs }; + +export const Destructive = TemplateMenuItemDestructive.bind({}); +Destructive.args = { ...commonArgs }; + export const MenuWrapper = TemplateMenu.bind({}); MenuWrapper.args = { ...commonArgs }; - -export const MenuListWrapper = TemplateMenuList.bind({}); -MenuListWrapper.args = { ...commonArgs }; From c015132317c2552f66cd9ec6544b323dde617201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 16 May 2024 18:35:07 +0200 Subject: [PATCH 02/19] initial components --- CHANGELOG.md | 8 +- .../src/components/molecules/Menu.d.ts | 11 ++ .../react-ui/src/components/molecules/Menu.js | 52 +++++++++ .../src/components/molecules/MenuItem.d.ts | 9 ++ .../src/components/molecules/MenuItem.js | 67 +++++++++++ packages/react-ui/src/index.d.ts | 10 +- packages/react-ui/src/index.js | 4 + .../theme/sections/components/navigation.js | 14 ++- .../stories/organisms/Menu.stories.js | 109 ++++++++++++------ 9 files changed, 240 insertions(+), 44 deletions(-) create mode 100644 packages/react-ui/src/components/molecules/Menu.d.ts create mode 100644 packages/react-ui/src/components/molecules/Menu.js create mode 100644 packages/react-ui/src/components/molecules/MenuItem.d.ts create mode 100644 packages/react-ui/src/components/molecules/MenuItem.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 646d6d0d0..a739efa2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Not released +- New DS core components: Menu & MenuItem [#828](https://github.com/CartoDB/carto-react/pull/828) + ## 3.0.0 ### 3.0.0-alpha.8 (2024-04-23) @@ -12,7 +14,7 @@ ### 3.0.0-alpha.7 (2024-04-16) -- Update Deck GL v9 and removed dropping features functionality [#838](https://github.com/CartoDB/carto-react/pull/838) +- Update Deck GL v9 and removed dropping features functionality [#838](https://github.com/CartoDB/carto-react/pull/838) ## 2.5 @@ -22,8 +24,8 @@ ### 2.5.2 (2024-04-10) -- configurable timeseries y axis [#861](https://github.com/CartoDB/carto-react/pull/861) -- configurable histogram y axis [#860](https://github.com/CartoDB/carto-react/pull/860) +- configurable timeseries y axis [#861](https://github.com/CartoDB/carto-react/pull/861) +- configurable histogram y axis [#860](https://github.com/CartoDB/carto-react/pull/860) ### 2.5.1 (2024-04-03) diff --git a/packages/react-ui/src/components/molecules/Menu.d.ts b/packages/react-ui/src/components/molecules/Menu.d.ts new file mode 100644 index 000000000..7102480a8 --- /dev/null +++ b/packages/react-ui/src/components/molecules/Menu.d.ts @@ -0,0 +1,11 @@ +import { MenuProps as MuiMenuProps } from '@mui/material'; + +export type MenuProps = MuiMenuProps & { + subtitle?: React.ReactNode | string; + extended?: boolean; + width?: string; + height?: string; +}; + +declare const Menu: (props: MenuProps) => JSX.Element; +export default Menu; diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js new file mode 100644 index 000000000..e699a1915 --- /dev/null +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Divider, Menu as MuiMenu, styled } from '@mui/material'; +import Typography from '../atoms/Typography'; +import { ICON_SIZE_MEDIUM } from '../../theme/themeConstants'; + +const StyledMenu = styled(MuiMenu, { + shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop) +})(({ extended, width, height, theme }) => ({ + columnGap: theme.spacing(1), + minHeight: theme.spacing(6), + + ...(extended && { + backgroundColor: theme.palette.default.background, + color: theme.palette.text.primary + }) +})); + +const Menu = ({ subtitle, extended, width, height, children, ...otherProps }) => { + return ( + + {subtitle && ( + <> + + + {subtitle} + + + )} + + {children} + + ); +}; + +Menu.defaultProps = { + width: '100%', + height: '100%' +}; +Menu.propTypes = { + subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + extended: PropTypes.bool, + width: PropTypes.string, + height: PropTypes.string +}; + +export default Menu; diff --git a/packages/react-ui/src/components/molecules/MenuItem.d.ts b/packages/react-ui/src/components/molecules/MenuItem.d.ts new file mode 100644 index 000000000..b749802e6 --- /dev/null +++ b/packages/react-ui/src/components/molecules/MenuItem.d.ts @@ -0,0 +1,9 @@ +import { MenuItemProps as MuiMenuItemProps } from '@mui/material'; + +export type MenuItemProps = MuiMenuItemProps & { + subtitle?: boolean; + destructive?: boolean; +}; + +declare const MenuItem: (props: MenuItemProps) => JSX.Element; +export default MenuItem; diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js new file mode 100644 index 000000000..e7b4f303c --- /dev/null +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Divider, MenuItem as MuiMenuItem, styled } from '@mui/material'; + +const StyledMenuItem = styled(MuiMenuItem, { + shouldForwardProp: (prop) => !['subtitle', 'destructive'].includes(prop) +})(({ subtitle, destructive, height, theme }) => ({ + columnGap: theme.spacing(1), + minHeight: theme.spacing(6), + + ...(subtitle && { + backgroundColor: theme.palette.default.background, + color: theme.palette.text.primary + }), + ...(destructive && { + color: theme.palette.error.main, + + '.MuiTypography-root': { + color: theme.palette.error.main + }, + svg: { + color: theme.palette.error.main + }, + + '&:hover': { + backgroundColor: theme.palette.error.relatedLight + }, + '&.Mui-selected': { + color: theme.palette.error.main, + + '.MuiTypography-root': { + color: theme.palette.error.main + }, + 'svg, & .MuiSvgIcon-root': { + color: theme.palette.error.main + } + }, + + '&.Mui-disabled': { + color: theme.palette.text.disabled, + + '.MuiTypography-root': { + color: theme.palette.text.disabled + }, + svg: { + color: theme.palette.text.disabled + } + } + }) +})); + +const MenuItem = ({ subtitle, destructive, children, ...otherProps }) => { + return ( + + {subtitle && } + + {children} + + ); +}; + +MenuItem.propTypes = { + subtitle: PropTypes.bool, + destructive: PropTypes.bool +}; + +export default MenuItem; diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index ed9d8cc64..aa788b3f2 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -10,7 +10,7 @@ import BarWidgetUI from './widgets/BarWidgetUI/BarWidgetUI'; import HistogramWidgetUI from './widgets/HistogramWidgetUI/HistogramWidgetUI'; import PieWidgetUI from './widgets/PieWidgetUI/PieWidgetUI'; import LegendWidgetUI from './widgets/legend/LegendWidgetUI'; -import LEGEND_TYPES from './widgets/legend/legend-types/LegendTypes' +import LEGEND_TYPES from './widgets/legend/legend-types/LegendTypes'; import LegendCategories from './widgets/legend/legend-types/LegendCategories'; import LegendIcon from './widgets/legend/legend-types/LegendIcon'; import LegendProportion from './widgets/legend/legend-types/LegendProportion'; @@ -52,6 +52,8 @@ import UploadField, { import UploadFieldBase, { UploadFieldBaseProps } from './components/molecules/UploadField/UploadFieldBase'; +import Menu, { MenuProps } from './components/molecules/Menu'; +import MenuItem, { MenuItemProps } from './components/molecules/MenuItem'; import AppBar, { AppBarProps } from './components/organisms/AppBar/AppBar'; import LabelWithIndicator, { LabelWithIndicatorProps @@ -121,6 +123,10 @@ export { UploadFieldProps, UploadFieldBase, UploadFieldBaseProps, + Menu, + MenuProps, + MenuItem, + MenuItemProps, AppBar, AppBarProps, LabelWithIndicator, @@ -137,4 +143,4 @@ export { Alert, AlertProps, CartoAlertSeverity -}; \ No newline at end of file +}; diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index aaf65a637..4b0369f40 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -43,6 +43,8 @@ import SelectField from './components/atoms/SelectField'; import MultipleSelectField from './components/molecules/MultipleSelectField/MultipleSelectField'; import UploadField from './components/molecules/UploadField/UploadField'; import UploadFieldBase from './components/molecules/UploadField/UploadFieldBase'; +import Menu from './components/molecules/Menu'; +import MenuItem from './components/molecules/MenuItem'; import AppBar from './components/organisms/AppBar/AppBar'; import LabelWithIndicator from './components/atoms/LabelWithIndicator'; import { getCartoColorStylePropsForItem } from './utils/palette'; @@ -103,6 +105,8 @@ export { MultipleSelectField, UploadField, UploadFieldBase, + Menu, + MenuItem, AppBar, ArrowDropIcon, LabelWithIndicator, diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index a31ff15a7..2000fcb86 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -8,6 +8,7 @@ export const navigationOverrides = { ...theme.typography.body2, minHeight: theme.spacing(4), minWidth: theme.spacing(12), + backgroundColor: theme.palette.background.paper, whiteSpace: 'normal', transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', @@ -42,10 +43,15 @@ export const navigationOverrides = { color: theme.palette.primary.main } }, - '&.Mui-disabled:empty': { - height: 0, - minHeight: 0, - padding: 0 + '&.Mui-disabled': { + opacity: 1, + backgroundColor: theme.palette.background.paper, + + '&:empty': { + height: 0, + minHeight: 0, + padding: 0 + } }, '& .MuiCheckbox-root, & > .MuiSvgIcon-root': { marginRight: theme.spacing(1) diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 98439e515..034eb82d0 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -2,9 +2,7 @@ import React, { useState } from 'react'; import { ListItemIcon, ListItemText, - MenuItem, MenuList, - Menu, Box, Grid, Divider, @@ -18,36 +16,69 @@ import { DeleteOutline } from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; -import { Container, DocContainer, DocHighlight, Label } from '../../utils/storyStyles'; +import { + Container, + DocContainer, + DocHighlight, + DocLink, + Label +} from '../../utils/storyStyles'; import Button from '../../../src/components/atoms/Button'; import Avatar from '../../../src/components/molecules/Avatar'; +import Menu from '../../../src/components/molecules/Menu'; +import MenuItem from '../../../src/components/molecules/MenuItem'; const options = { title: 'Organisms/Menu', component: MenuList, argTypes: { - label: { + dense: { + description: 'Menu / MenuItem prop', + defaultValue: false, control: { - type: 'text' + type: 'boolean' } }, - dense: { + extended: { + description: 'Menu prop', defaultValue: false, control: { type: 'boolean' } }, + width: { + description: 'Menu prop', + defaultValue: false, + control: { + type: 'text' + } + }, + height: { + description: 'Menu prop', + defaultValue: false, + control: { + type: 'text' + } + }, selected: { + description: 'MenuItem prop', defaultValue: false, control: { type: 'boolean' } }, destructive: { + description: 'MenuItem prop', defaultValue: false, control: { type: 'boolean' } + }, + subtitle: { + description: 'MenuItem prop', + control: { + type: 'boolean' + } } }, parameters: { @@ -184,7 +215,7 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - + {label} @@ -213,14 +244,14 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { {label} - + - + {label} - + @@ -307,29 +338,22 @@ const TemplateMenu = ({ label, ...args }) => { {label} - - ⌘X - + {label} - - ⌘C - {label} - - ⌘V - + {'subtitle'} @@ -343,20 +367,26 @@ const TemplateMenu = ({ label, ...args }) => { const DocTemplate = () => { return ( - - Guide - - } - > + + We have our own + + ToggleButtonGroup + + component that extends Mui ToggleButtonGroup with some props (variant and + backgroundColor support). + + So, instead of Mui ToggleButtonGroup, you should use this one: + + react-ui/src/components/atoms/ToggleButtonGroup + + + + For external use: + + {'import { ToggleButtonGroup } from "@carto/react-ui";'} + + . + In order ListItem to be interactive, you need to use MenuItem component, or use ListItemButton instead. @@ -381,5 +411,14 @@ Content.args = { ...commonArgs }; export const Destructive = TemplateMenuItemDestructive.bind({}); Destructive.args = { ...commonArgs }; -export const MenuWrapper = TemplateMenu.bind({}); -MenuWrapper.args = { ...commonArgs }; +export const Subtitle = TemplateMenu.bind({}); +Subtitle.args = { ...commonArgs, subtitle: 'Subtitle' }; + +export const TextOverflow = TemplateMenu.bind({}); +TextOverflow.args = { ...commonArgs, label: 'Long text that will be truncated' }; + +export const CustomWidth = TemplateMenu.bind({}); +CustomWidth.args = { ...commonArgs, widht: '200px' }; + +export const CustomHeight = TemplateMenu.bind({}); +CustomHeight.args = { ...commonArgs, height: '200px' }; From 6193b5821fb0b4b8b91b6b90d3221c0826912d24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 17 May 2024 14:35:55 +0200 Subject: [PATCH 03/19] polishing components --- .../src/components/molecules/Menu.d.ts | 1 - .../react-ui/src/components/molecules/Menu.js | 25 +- .../src/components/molecules/MenuItem.js | 33 ++- .../theme/sections/components/navigation.js | 10 +- .../stories/organisms/Menu.stories.js | 256 +++++++++--------- 5 files changed, 165 insertions(+), 160 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Menu.d.ts b/packages/react-ui/src/components/molecules/Menu.d.ts index 7102480a8..96d93d3d8 100644 --- a/packages/react-ui/src/components/molecules/Menu.d.ts +++ b/packages/react-ui/src/components/molecules/Menu.d.ts @@ -1,7 +1,6 @@ import { MenuProps as MuiMenuProps } from '@mui/material'; export type MenuProps = MuiMenuProps & { - subtitle?: React.ReactNode | string; extended?: boolean; width?: string; height?: string; diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js index e699a1915..8b990f1a9 100644 --- a/packages/react-ui/src/components/molecules/Menu.js +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Divider, Menu as MuiMenu, styled } from '@mui/material'; -import Typography from '../atoms/Typography'; +import { Menu as MuiMenu, styled } from '@mui/material'; import { ICON_SIZE_MEDIUM } from '../../theme/themeConstants'; const StyledMenu = styled(MuiMenu, { @@ -11,28 +10,15 @@ const StyledMenu = styled(MuiMenu, { minHeight: theme.spacing(6), ...(extended && { - backgroundColor: theme.palette.default.background, - color: theme.palette.text.primary + '.MuiMenuItem-root': { + minHeight: theme.spacing(6) + } }) })); -const Menu = ({ subtitle, extended, width, height, children, ...otherProps }) => { +const Menu = ({ extended, width, height, children, ...otherProps }) => { return ( - {subtitle && ( - <> - - - {subtitle} - - - )} - {children} ); @@ -43,7 +29,6 @@ Menu.defaultProps = { height: '100%' }; Menu.propTypes = { - subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), extended: PropTypes.bool, width: PropTypes.string, height: PropTypes.string diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index e7b4f303c..dc14087f6 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -1,16 +1,32 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Divider, MenuItem as MuiMenuItem, styled } from '@mui/material'; +import { MenuItem as MuiMenuItem, styled } from '@mui/material'; const StyledMenuItem = styled(MuiMenuItem, { - shouldForwardProp: (prop) => !['subtitle', 'destructive'].includes(prop) -})(({ subtitle, destructive, height, theme }) => ({ + shouldForwardProp: (prop) => !['subtitle', 'destructive', 'extended'].includes(prop) +})(({ subtitle, destructive, extended, theme }) => ({ columnGap: theme.spacing(1), minHeight: theme.spacing(6), ...(subtitle && { - backgroundColor: theme.palette.default.background, - color: theme.palette.text.primary + pointerEvents: 'none', + columnGap: 0, + ...theme.typography.caption, + fontWeight: 500, + color: theme.palette.text.secondary, + + '&.MuiMenuItem-root': { + minHeight: theme.spacing(3), + paddingTop: 0, + paddingBottom: 0, + + '&:not(:first-of-type)': { + minHeight: theme.spacing(5), + marginTop: theme.spacing(1), + paddingTop: theme.spacing(1), + borderTop: `1px solid ${theme.palette.divider}` + } + } }), ...(destructive && { color: theme.palette.error.main, @@ -46,14 +62,17 @@ const StyledMenuItem = styled(MuiMenuItem, { color: theme.palette.text.disabled } } + }), + ...(extended && { + '&.MuiMenuItem-root': { + minHeight: theme.spacing(6) + } }) })); const MenuItem = ({ subtitle, destructive, children, ...otherProps }) => { return ( - {subtitle && } - {children} ); diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 2000fcb86..cdb6955bf 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -7,7 +7,7 @@ export const navigationOverrides = { root: ({ theme }) => ({ ...theme.typography.body2, minHeight: theme.spacing(4), - minWidth: theme.spacing(12), + minWidth: theme.spacing(8), // 64px, defined by design backgroundColor: theme.palette.background.paper, whiteSpace: 'normal', transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', @@ -45,12 +45,20 @@ export const navigationOverrides = { }, '&.Mui-disabled': { opacity: 1, + color: theme.palette.text.disabled, backgroundColor: theme.palette.background.paper, '&:empty': { height: 0, minHeight: 0, padding: 0 + }, + + '.MuiTypography-root': { + color: theme.palette.text.disabled + }, + svg: { + color: theme.palette.text.disabled } }, '& .MuiCheckbox-root, & > .MuiSvgIcon-root': { diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 034eb82d0..4f9d28e85 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -9,11 +9,11 @@ import { Chip } from '@mui/material'; import { - CloudOutlined, ContentCopyOutlined, - ContentCutOutlined, - ContentPasteOutlined, - DeleteOutline + DeleteOutline, + EditOutlined, + HistoryOutlined, + RefreshOutlined } from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; import { @@ -93,60 +93,15 @@ const options = { }; export default options; -const TemplateMenuItemSize = ({ label, selected, ...args }) => { - return ( - - - - - - - - - {label} - - - - - - - - - - - {label} - - - - - - - - - M - - - {label} - - Secondary text - - - - - - - ); -}; - const TemplateMenuItemStates = ({ label, ...args }) => { return ( - + - + {label} @@ -160,9 +115,9 @@ const TemplateMenuItemStates = ({ label, ...args }) => { - + - + {label} @@ -176,17 +131,32 @@ const TemplateMenuItemStates = ({ label, ...args }) => { - - - - - - {label} - - Secondary text - - - + + + + + + + {label} + + Secondary text + + + + + + + + M + + + {label} + + Secondary text + + + + @@ -199,7 +169,7 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - + {label} @@ -207,52 +177,64 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - - - - - {label} - - - - - - {label} - - - - M - - - {label} - - Secondary text - - - + + + + + + {label} + + + + + + + + {label} + + + + + + M + + + {label} + + Secondary text + + + + - - {label} - - - - - - - {label} - - - - - - - {label} - - + + + {label} + + + + + + + + + {label} + + + + + + + + + {label} + + + @@ -265,7 +247,7 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { - + @@ -276,7 +258,7 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { - + @@ -287,7 +269,7 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { - + @@ -299,7 +281,7 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { ); }; -const TemplateMenu = ({ label, ...args }) => { +const TemplateMenu = ({ label, subtitle, dense, ...args }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -330,33 +312,35 @@ const TemplateMenu = ({ label, ...args }) => { anchorEl={anchorEl} open={open} onClose={closeDropdown} + dense={dense} id='menu' MenuListProps={{ 'aria-labelledby': 'menu-button' }} > - + {subtitle && {'Subtitle'}} + - + {label} - + {label} - + {subtitle && {'Subtitle'}} + - + {label} - {'subtitle'} - + - + {label} @@ -369,28 +353,35 @@ const DocTemplate = () => { return ( We have our own - - ToggleButtonGroup + + Menu + {' '} + and{' '} + + MenuItem - component that extends Mui ToggleButtonGroup with some props (variant and + components that extends Mui components with some props (variant and backgroundColor support). - So, instead of Mui ToggleButtonGroup, you should use this one: + So, instead of Mui Menu, you should use this one: - react-ui/src/components/atoms/ToggleButtonGroup + react-ui/src/components/molecules/Menu For external use: - {'import { ToggleButtonGroup } from "@carto/react-ui";'} + {'import { Menu, MenuItem } from "@carto/react-ui";'} . - In order ListItem to be interactive, - you need to use MenuItem component, or - use ListItemButton instead. - Note that {''} is deprecated. + + Note: In order ListItem to be + interactive, you need to use{' '} + MenuItem component, or use{' '} + ListItemButton instead ( + {''} is deprecated.) + ); }; @@ -399,8 +390,11 @@ const commonArgs = { label: 'Label' }; export const Guide = DocTemplate.bind({}); -export const Size = TemplateMenuItemSize.bind({}); -Size.args = { ...commonArgs }; +export const Dense = TemplateMenu.bind({}); +Dense.args = { ...commonArgs, dense: true }; + +export const Extended = TemplateMenu.bind({}); +Extended.args = { ...commonArgs, extended: true }; export const States = TemplateMenuItemStates.bind({}); States.args = { ...commonArgs }; @@ -412,7 +406,7 @@ export const Destructive = TemplateMenuItemDestructive.bind({}); Destructive.args = { ...commonArgs }; export const Subtitle = TemplateMenu.bind({}); -Subtitle.args = { ...commonArgs, subtitle: 'Subtitle' }; +Subtitle.args = { ...commonArgs, subtitle: true }; export const TextOverflow = TemplateMenu.bind({}); TextOverflow.args = { ...commonArgs, label: 'Long text that will be truncated' }; From aee6ed14eb0a879b501bcc7979e222c695ea4a36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 20 May 2024 14:19:20 +0200 Subject: [PATCH 04/19] polishing and bugfixing --- .../react-ui/src/components/molecules/Menu.js | 15 ++- .../src/components/molecules/MenuItem.js | 3 - .../theme/sections/components/dataDisplay.js | 81 ------------- .../theme/sections/components/navigation.js | 106 +++++++++++++++++- .../stories/organisms/Menu.stories.js | 20 ++-- 5 files changed, 124 insertions(+), 101 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js index 8b990f1a9..7a53a7806 100644 --- a/packages/react-ui/src/components/molecules/Menu.js +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -1,19 +1,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Menu as MuiMenu, styled } from '@mui/material'; -import { ICON_SIZE_MEDIUM } from '../../theme/themeConstants'; const StyledMenu = styled(MuiMenu, { shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop) })(({ extended, width, height, theme }) => ({ - columnGap: theme.spacing(1), - minHeight: theme.spacing(6), - ...(extended && { '.MuiMenuItem-root': { minHeight: theme.spacing(6) } - }) + }), + '.MuiMenu-paper': { + ...(width && { + width: width, + minWidth: width + }), + ...(height && { + maxHeight: height + }) + } })); const Menu = ({ extended, width, height, children, ...otherProps }) => { diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index dc14087f6..faa3ac36d 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -5,9 +5,6 @@ import { MenuItem as MuiMenuItem, styled } from '@mui/material'; const StyledMenuItem = styled(MuiMenuItem, { shouldForwardProp: (prop) => !['subtitle', 'destructive', 'extended'].includes(prop) })(({ subtitle, destructive, extended, theme }) => ({ - columnGap: theme.spacing(1), - minHeight: theme.spacing(6), - ...(subtitle && { pointerEvents: 'none', columnGap: 0, diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 66b9595e0..df7dac606 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -27,87 +27,6 @@ export const dataDisplayOverrides = { } }, - // List - MuiList: { - styleOverrides: { - root: ({ theme }) => ({ - '.MuiPopover-root &, .MuiPopper-root &': { - maxHeight: theme.spacing(39), // 312px, defined by design - overflowY: 'auto' - }, - - // Indent sublevels, ugly but needed to avoid issues with hover - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: theme.spacing(4) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: theme.spacing(6) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: theme.spacing(8) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: theme.spacing(10) - } - } - } - } - }, - - '& .MuiListItemButton-root': { - '&:focus-visible': { - backgroundColor: 'transparent' - } - } - }) - } - }, - - // List Item - MuiListItemText: { - defaultProps: { - primaryTypographyProps: { - variant: 'body2', - noWrap: true - }, - secondaryTypographyProps: { variant: 'caption' } - } - }, - MuiListItemIcon: { - styleOverrides: { - root: ({ theme }) => ({ - marginRight: theme.spacing(1), - - '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE_LARGE - }, - '.MuiMenuItem-root.MuiButtonBase-root &': { - minWidth: theme.spacing(2.25) - } - }) - } - }, - MuiListItemAvatar: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiAvatar-root': { - height: theme.spacing(4), - width: theme.spacing(4) - }, - '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE_MEDIUM - } - }) - } - }, - // Tooltip MuiTooltip: { defaultProps: { diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index cdb6955bf..1b2083855 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -1,13 +1,25 @@ -import { ICON_SIZE_MEDIUM } from '../../themeConstants'; +import { ICON_SIZE_LARGE, ICON_SIZE_MEDIUM } from '../../themeConstants'; export const navigationOverrides = { + // Menu + MuiMenu: { + styleOverrides: { + paper: ({ theme }) => ({ + '.MuiMenu-paper': { + minWidth: theme.spacing(8), // 64px, defined by design + maxHeight: theme.spacing(39) // 312px, defined by design + } + }) + } + }, + // Menu Item MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ ...theme.typography.body2, + columnGap: theme.spacing(1), minHeight: theme.spacing(4), - minWidth: theme.spacing(8), // 64px, defined by design backgroundColor: theme.palette.background.paper, whiteSpace: 'normal', transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', @@ -41,6 +53,10 @@ export const navigationOverrides = { }, '& .MuiTypography-root, & .MuiSvgIcon-root': { color: theme.palette.primary.main + }, + '.MuiTypography-caption': { + // secondary text + color: theme.palette.text.secondary } }, '&.Mui-disabled': { @@ -59,6 +75,10 @@ export const navigationOverrides = { }, svg: { color: theme.palette.text.disabled + }, + '.MuiAvatar-root': { + color: theme.palette.text.disabled, + backgroundColor: theme.palette.action.disabledBackground } }, '& .MuiCheckbox-root, & > .MuiSvgIcon-root': { @@ -84,6 +104,88 @@ export const navigationOverrides = { } }, + // List + MuiList: { + styleOverrides: { + root: ({ theme }) => ({ + '.MuiPopover-root &, .MuiPopper-root &': { + minWidth: theme.spacing(8), // 64px, defined by design + maxHeight: theme.spacing(39), // 312px, defined by design + overflowY: 'auto' + }, + + // Indent sublevels, ugly but needed to avoid issues with hover + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: theme.spacing(4) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: theme.spacing(6) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: theme.spacing(8) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: theme.spacing(10) + } + } + } + } + }, + + '& .MuiListItemButton-root': { + '&:focus-visible': { + backgroundColor: 'transparent' + } + } + }) + } + }, + + // List Item + MuiListItemText: { + defaultProps: { + primaryTypographyProps: { + variant: 'body2', + noWrap: true + }, + secondaryTypographyProps: { variant: 'caption' } + } + }, + MuiListItemIcon: { + styleOverrides: { + root: ({ theme }) => ({ + marginRight: theme.spacing(1), + + '& .MuiSvgIcon-root': { + fontSize: ICON_SIZE_LARGE + }, + '.MuiMenuItem-root.MuiButtonBase-root &': { + minWidth: theme.spacing(2.25) + } + }) + } + }, + MuiListItemAvatar: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiAvatar-root': { + height: theme.spacing(4), + width: theme.spacing(4) + }, + '& .MuiSvgIcon-root': { + fontSize: ICON_SIZE_MEDIUM + } + }) + } + }, + // Tabs MuiTabs: { defaultProps: { diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 4f9d28e85..27cbad680 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -15,7 +15,6 @@ import { HistoryOutlined, RefreshOutlined } from '@mui/icons-material'; -import Typography from '../../../src/components/atoms/Typography'; import { Container, DocContainer, @@ -23,6 +22,7 @@ import { DocLink, Label } from '../../utils/storyStyles'; +import Typography from '../../../src/components/atoms/Typography'; import Button from '../../../src/components/atoms/Button'; import Avatar from '../../../src/components/molecules/Avatar'; import Menu from '../../../src/components/molecules/Menu'; @@ -131,7 +131,7 @@ const TemplateMenuItemStates = ({ label, ...args }) => { - + @@ -188,7 +188,7 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - + {label} @@ -214,7 +214,7 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { {label} - + @@ -223,16 +223,16 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { {label} - + - + {label} - + @@ -322,7 +322,7 @@ const TemplateMenu = ({ label, subtitle, dense, ...args }) => { {label} - + @@ -412,7 +412,7 @@ export const TextOverflow = TemplateMenu.bind({}); TextOverflow.args = { ...commonArgs, label: 'Long text that will be truncated' }; export const CustomWidth = TemplateMenu.bind({}); -CustomWidth.args = { ...commonArgs, widht: '200px' }; +CustomWidth.args = { ...commonArgs, width: '400px' }; export const CustomHeight = TemplateMenu.bind({}); -CustomHeight.args = { ...commonArgs, height: '200px' }; +CustomHeight.args = { ...commonArgs, height: '100px' }; From f95ae6d7c0a95808bedf99bcfb10f88bd2dd405d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 20 May 2024 18:27:04 +0200 Subject: [PATCH 05/19] polishing and bugfixing --- .../molecules/MultipleSelectField/Filters.js | 62 +++++++++---------- .../MultipleSelectField.js | 43 +++++++++++-- packages/react-ui/src/localization/en.js | 2 +- packages/react-ui/src/localization/es.js | 2 +- packages/react-ui/src/localization/id.js | 2 +- .../theme/sections/components/navigation.js | 11 ++-- .../molecules/MiltipleSelectField.stories.js | 20 ++++++ .../stories/organisms/Menu.stories.js | 42 +++++++++---- 8 files changed, 125 insertions(+), 59 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js index 6f3fc1707..dd118130a 100644 --- 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 ( - {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })} - - - • - - - {intlConfig.formatMessage({ - id: 'c4r.form.selectNone' - })} + + {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })} ); diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js b/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js index 2a64a20a4..dfb852628 100644 --- 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 && ( + + + + + + ) + } + > + {showFilters && ( - } - > + )} {options?.map((option) => { const item = ( ({ + '.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 index 6b1c3d915..57c1ae507 100644 --- 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 index 27cbad680..2273654c1 100644 --- 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 }) => { - - - - - - {label} - - Secondary text - - - + + + + + + + {label} + + Secondary text + + + + + + + + + + {label} + + + @@ -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' }; From 1ec8513df5c18de339dab6ddd806b65c9a8f3fa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 21 May 2024 12:47:53 +0200 Subject: [PATCH 06/19] polishing and bugfixing --- .../molecules/MultipleSelectField/Filters.js | 9 ++-- .../MultipleSelectField.js | 9 ++++ .../useMultipleSelectField.js | 12 +++++- .../theme/sections/components/navigation.js | 8 +++- .../stories/organisms/Menu.stories.js | 41 +++++++++++++++---- 5 files changed, 63 insertions(+), 16 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js index dd118130a..3752d7425 100644 --- a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js +++ b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js @@ -9,9 +9,9 @@ const FiltersRoot = styled(Box)(({ theme }) => ({ left: 0, right: 0, zIndex: 1, - height: theme.spacing(4), + height: theme.spacing(6), marginBottom: theme.spacing(1), - padding: theme.spacing(1, 0), + padding: theme.spacing(2, 0), backgroundColor: theme.palette.background.paper, borderBottom: `1px solid ${theme.palette.divider}` })); @@ -39,14 +39,15 @@ function Filters({ areAllSelected, areAnySelected, selectAll, selectAllDisabled color='textPrimary' component='button' underline='none' - disabled={areAllSelected || selectAllDisabled} + disabled={selectAllDisabled} onClick={selectAll} > - {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })} + {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })} ); diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js b/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js index dfb852628..fbbd89885 100644 --- a/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js +++ b/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js @@ -154,6 +154,15 @@ const MultipleSelectField = forwardRef( ) } + menuProps={{ + PaperProps: { + sx: { + '.MuiList-root': { + paddingTop: 0 + } + } + } + }} > {showFilters && ( value); if (optionsValues) { - setCurrentOptions(optionsValues); - onChange(optionsValues); + const allSelected = optionsValues.every((value) => currentOptions.includes(value)); + if (allSelected) { + // Deselect all options + setCurrentOptions([]); + onChange([]); + } else { + // Select all options + setCurrentOptions(optionsValues); + onChange(optionsValues); + } } }; diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 321eea15e..c5995b91c 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -7,7 +7,12 @@ export const navigationOverrides = { paper: ({ theme }) => ({ '.MuiMenu-paper': { minWidth: theme.spacing(8), // 64px, defined by design - maxHeight: theme.spacing(39) // 312px, defined by design + maxHeight: theme.spacing(39), // 312px, defined by design + + '&:focus-visible': { + outline: 'none !important', + boxShadow: 'none !important' + } } }), list: ({ theme }) => ({ @@ -25,6 +30,7 @@ export const navigationOverrides = { ...theme.typography.body2, columnGap: theme.spacing(1), minHeight: theme.spacing(4), + padding: theme.spacing(0.75, 1, 0.75, 1.5), backgroundColor: theme.palette.background.paper, whiteSpace: 'normal', transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 2273654c1..93711a0b5 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -294,7 +294,6 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { const TemplateMenu = ({ label, subtitle, dense, ...args }) => { const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); const openDropdown = (event) => { @@ -306,15 +305,14 @@ const TemplateMenu = ({ label, subtitle, dense, ...args }) => { }; return ( - + @@ -328,28 +326,28 @@ const TemplateMenu = ({ label, subtitle, dense, ...args }) => { MenuListProps={{ 'aria-labelledby': 'menu-button' }} > {subtitle && {'Subtitle'}} - + {label} - + {label} {subtitle && {'Subtitle'}} - + {label} - + @@ -408,7 +406,18 @@ export const Dense = TemplateMenu.bind({}); Dense.args = { ...commonArgs, dense: true }; export const Extended = TemplateMenu.bind({}); -Extended.args = { ...commonArgs, extended: true }; +Extended.args = { + ...commonArgs, + extended: true, + label: ( + <> + Label + + Secondary text + + + ) +}; export const States = TemplateMenuItemStates.bind({}); States.args = { ...commonArgs }; @@ -434,3 +443,17 @@ CustomWidth.args = { ...commonArgs, width: '400px' }; export const CustomHeight = TemplateMenu.bind({}); CustomHeight.args = { ...commonArgs, height: '100px' }; + +export const PlacementTop = TemplateMenu.bind({}); +PlacementTop.args = { + ...commonArgs, + transformOrigin: { vertical: 'bottom', horizontal: 'left' }, + anchorOrigin: { vertical: -4, horizontal: 'left' } +}; + +export const PlacementRight = TemplateMenu.bind({}); +PlacementRight.args = { + ...commonArgs, + transformOrigin: { vertical: 'top', horizontal: 'right' }, + anchorOrigin: { vertical: 'bottom', horizontal: 'right' } +}; From b1e2b09ecd9b7c2d49284b89f71a165fded2cceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 21 May 2024 13:17:40 +0200 Subject: [PATCH 07/19] final tweaks --- .../molecules/MultipleSelectField/Filters.js | 5 +- .../MultipleSelectField.js | 1 + .../theme/sections/components/navigation.js | 7 +- .../stories/organisms/Menu.stories.js | 85 +++++++++++++------ 4 files changed, 70 insertions(+), 28 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js index 3752d7425..af3b35691 100644 --- a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js +++ b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js @@ -9,9 +9,7 @@ const FiltersRoot = styled(Box)(({ theme }) => ({ left: 0, right: 0, zIndex: 1, - height: theme.spacing(6), marginBottom: theme.spacing(1), - padding: theme.spacing(2, 0), backgroundColor: theme.palette.background.paper, borderBottom: `1px solid ${theme.palette.divider}` })); @@ -21,7 +19,7 @@ const LinkFilter = styled(Link)(({ disabled, theme }) => ({ alignItems: 'center', gap: theme.spacing(1), width: '100%', - height: '100%', + height: theme.spacing(6), padding: theme.spacing(0.5, 1.5), textAlign: 'initial', @@ -41,6 +39,7 @@ function Filters({ areAllSelected, areAnySelected, selectAll, selectAllDisabled underline='none' disabled={selectAllDisabled} onClick={selectAll} + tabIndex={0} > ({ - '.MuiMenu-paper': { + '&.MuiMenu-paper': { minWidth: theme.spacing(8), // 64px, defined by design maxHeight: theme.spacing(39), // 312px, defined by design @@ -41,6 +41,11 @@ export const navigationOverrides = { minHeight: theme.spacing(4) } }, + '&:hover': { + '.MuiAvatar-root, .MuiChip-root': { + cursor: 'pointer' + } + }, '&:focus-visible': { // Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747 backgroundColor: 'transparent', diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 93711a0b5..7464758bf 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -74,6 +74,13 @@ const options = { type: 'boolean' } }, + disabled: { + description: 'MenuItem prop', + defaultValue: false, + control: { + type: 'boolean' + } + }, subtitle: { description: 'MenuItem prop', control: { @@ -93,13 +100,13 @@ const options = { }; export default options; -const TemplateMenuItemStates = ({ label, ...args }) => { +const TemplateMenuItemStates = ({ label, disabled, ...args }) => { return ( - + @@ -116,7 +123,7 @@ const TemplateMenuItemStates = ({ label, ...args }) => { - + @@ -129,12 +136,18 @@ const TemplateMenuItemStates = ({ label, ...args }) => { - + {label} - + @@ -174,13 +187,13 @@ const TemplateMenuItemStates = ({ label, ...args }) => { ); }; -const TemplateMenuItemContent = ({ label, selected, ...args }) => { +const TemplateMenuItemContent = ({ label, selected, disabled, ...args }) => { return ( - + {label} @@ -189,7 +202,7 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - + @@ -197,15 +210,15 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - + - + {label} - + M @@ -223,27 +236,45 @@ const TemplateMenuItemContent = ({ label, selected, ...args }) => { - + {label} - + - + {label} - + - + - + {label} - + @@ -292,7 +323,7 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { ); }; -const TemplateMenu = ({ label, subtitle, dense, ...args }) => { +const TemplateMenu = ({ label, subtitle, dense, disabled, ...args }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -326,28 +357,34 @@ const TemplateMenu = ({ label, subtitle, dense, ...args }) => { MenuListProps={{ 'aria-labelledby': 'menu-button' }} > {subtitle && {'Subtitle'}} - + {label} - + - + {label} {subtitle && {'Subtitle'}} - + {label} - + From 8feb3e9345e4032bc5b7c1ff252026451fd12af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 21 May 2024 18:48:10 +0200 Subject: [PATCH 08/19] fixing types and dense styles --- .../react-ui/src/components/molecules/Menu.js | 4 --- .../theme/sections/components/navigation.js | 8 ++++- .../stories/organisms/Menu.stories.js | 33 ++++++++++++++----- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js index 7a53a7806..b07085c3a 100644 --- a/packages/react-ui/src/components/molecules/Menu.js +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -29,10 +29,6 @@ const Menu = ({ extended, width, height, children, ...otherProps }) => { ); }; -Menu.defaultProps = { - width: '100%', - height: '100%' -}; Menu.propTypes = { extended: PropTypes.bool, width: PropTypes.string, diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index b2b747858..1b2bfe83b 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -110,6 +110,11 @@ export const navigationOverrides = { paddingTop: 0, paddingBottom: 0, + '.MuiTypography-root': { + ...theme.typography.caption, + fontWeight: 500 + }, + [theme.breakpoints.up('sm')]: { // Overrides an unwanted Mui default style '&.MuiButtonBase-root': { @@ -169,7 +174,8 @@ export const navigationOverrides = { defaultProps: { primaryTypographyProps: { variant: 'body2', - noWrap: true + noWrap: true, + component: 'div' }, secondaryTypographyProps: { variant: 'caption' } } diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 7464758bf..de37fa53c 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -48,14 +48,12 @@ const options = { }, width: { description: 'Menu prop', - defaultValue: false, control: { type: 'text' } }, height: { description: 'Menu prop', - defaultValue: false, control: { type: 'text' } @@ -323,7 +321,7 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { ); }; -const TemplateMenu = ({ label, subtitle, dense, disabled, ...args }) => { +const TemplateMenu = ({ label, subtitle, dense, disabled, destructive, ...args }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -352,12 +350,16 @@ const TemplateMenu = ({ label, subtitle, dense, disabled, ...args }) => { anchorEl={anchorEl} open={open} onClose={closeDropdown} - dense={dense} id='menu' MenuListProps={{ 'aria-labelledby': 'menu-button' }} > {subtitle && {'Subtitle'}} - + @@ -370,21 +372,36 @@ const TemplateMenu = ({ label, subtitle, dense, disabled, ...args }) => { disabled={disabled} /> - + {label} {subtitle && {'Subtitle'}} - + {label} - + From 90289240285b5c3e55d9cee183af68b005e97f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 22 May 2024 16:40:38 +0200 Subject: [PATCH 09/19] Design QA fixes --- .../src/components/molecules/MenuItem.d.ts | 1 + .../src/components/molecules/MenuItem.js | 14 +- .../theme/sections/components/navigation.js | 17 +- .../stories/organisms/Menu.stories.js | 253 ++++++++++++++++-- 4 files changed, 249 insertions(+), 36 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MenuItem.d.ts b/packages/react-ui/src/components/molecules/MenuItem.d.ts index b749802e6..9ccf5480b 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.d.ts +++ b/packages/react-ui/src/components/molecules/MenuItem.d.ts @@ -3,6 +3,7 @@ import { MenuItemProps as MuiMenuItemProps } from '@mui/material'; export type MenuItemProps = MuiMenuItemProps & { subtitle?: boolean; destructive?: boolean; + extended?: boolean; }; declare const MenuItem: (props: MenuItemProps) => JSX.Element; diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index faa3ac36d..c0b7e0127 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -31,7 +31,7 @@ const StyledMenuItem = styled(MuiMenuItem, { '.MuiTypography-root': { color: theme.palette.error.main }, - svg: { + 'svg, & .MuiSvgIcon-root': { color: theme.palette.error.main }, @@ -67,9 +67,14 @@ const StyledMenuItem = styled(MuiMenuItem, { }) })); -const MenuItem = ({ subtitle, destructive, children, ...otherProps }) => { +const MenuItem = ({ subtitle, destructive, extended, children, ...otherProps }) => { return ( - + {children} ); @@ -77,7 +82,8 @@ const MenuItem = ({ subtitle, destructive, children, ...otherProps }) => { MenuItem.propTypes = { subtitle: PropTypes.bool, - destructive: PropTypes.bool + destructive: PropTypes.bool, + extended: PropTypes.bool }; export default MenuItem; diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 1b2bfe83b..518489b69 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -14,11 +14,6 @@ export const navigationOverrides = { boxShadow: 'none !important' } } - }), - list: ({ theme }) => ({ - '.MuiMenuItem-root': { - paddingRight: theme.spacing(3) - } }) } }, @@ -178,13 +173,23 @@ export const navigationOverrides = { component: 'div' }, secondaryTypographyProps: { variant: 'caption' } + }, + styleOverrides: { + root: ({ theme }) => ({ + paddingRight: theme.spacing(2), + + '& + .MuiChip-root, & + .CartoTag-root': { + marginRight: theme.spacing(1) + } + }) } }, MuiListItemIcon: { styleOverrides: { root: ({ theme }) => ({ '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE_LARGE + fontSize: ICON_SIZE_LARGE, + color: theme.palette.text.primary }, '.MuiMenuItem-root.MuiButtonBase-root &': { minWidth: ICON_SIZE_MEDIUM diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index de37fa53c..9df116cd7 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -6,7 +6,8 @@ import { Box, Grid, Divider, - Chip + Chip, + Tooltip } from '@mui/material'; import { ContentCopyOutlined, @@ -192,7 +193,7 @@ const TemplateMenuItemContent = ({ label, selected, disabled, ...args }) => { - {label} + {label} @@ -295,17 +296,6 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { - - - - - - - - {label} - - - @@ -412,6 +402,225 @@ const TemplateMenu = ({ label, subtitle, dense, disabled, destructive, ...args } ); }; +const TemplateMenuOverflow = ({ + label, + subtitle, + dense, + disabled, + destructive, + ...args +}) => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const openDropdown = (event) => { + setAnchorEl(event.currentTarget); + }; + + const closeDropdown = () => { + setAnchorEl(null); + }; + + return ( + + + + {subtitle && {'Subtitle'}} + + + + + + {label} + + + + + + + + + {label} + + + {subtitle && {'Subtitle'}} + + + + + + {label} + + + + + + + + + {label} + + + + + ); +}; + +const TemplateMenuExtended = ({ + label, + subtitle, + dense, + disabled, + destructive, + ...args +}) => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const openDropdown = (event) => { + setAnchorEl(event.currentTarget); + }; + + const closeDropdown = () => { + setAnchorEl(null); + }; + + return ( + + + + {subtitle && {'Subtitle'}} + + + Ar + + + {label} + + Secondary text + + + + + + + Mr + + + {label} + + Secondary text + + + + {subtitle && {'Subtitle'}} + + + Av + + {label} + + + + + Lm + + + {label} + + Secondary text + + + + + + ); +}; + const DocTemplate = () => { return ( @@ -459,18 +668,10 @@ export const Guide = DocTemplate.bind({}); export const Dense = TemplateMenu.bind({}); Dense.args = { ...commonArgs, dense: true }; -export const Extended = TemplateMenu.bind({}); +export const Extended = TemplateMenuExtended.bind({}); Extended.args = { ...commonArgs, - extended: true, - label: ( - <> - Label - - Secondary text - - - ) + extended: true }; export const States = TemplateMenuItemStates.bind({}); @@ -485,11 +686,11 @@ Destructive.args = { ...commonArgs }; export const Subtitle = TemplateMenu.bind({}); Subtitle.args = { ...commonArgs, subtitle: true }; -export const TextOverflow = TemplateMenu.bind({}); +export const TextOverflow = TemplateMenuOverflow.bind({}); TextOverflow.args = { ...commonArgs, width: '200px', - label: 'Long text that will be truncated' + label: 'Long text that will be truncated with ellipsis' }; export const CustomWidth = TemplateMenu.bind({}); @@ -502,7 +703,7 @@ export const PlacementTop = TemplateMenu.bind({}); PlacementTop.args = { ...commonArgs, transformOrigin: { vertical: 'bottom', horizontal: 'left' }, - anchorOrigin: { vertical: -4, horizontal: 'left' } + anchorOrigin: { vertical: -8, horizontal: 'left' } }; export const PlacementRight = TemplateMenu.bind({}); From 99ad59e3c4f289d635eef2e1091f1a4347c5de63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 22 May 2024 17:55:29 +0200 Subject: [PATCH 10/19] Design QA fixes --- packages/react-ui/src/components/atoms/SelectField.js | 3 +++ .../src/components/molecules/MultipleSelectField/Filters.js | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 95371401c..afb830358 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -25,6 +25,9 @@ const StyledSelect = styled(Select)(({ theme }) => ({ }, '& .MuiSelect-select .MuiMenuItem-root:hover': { backgroundColor: 'transparent' + }, + '&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple': { + paddingRight: theme.spacing(7) } })); diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js index af3b35691..e71bca4bb 100644 --- a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js +++ b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js @@ -7,8 +7,9 @@ const FiltersRoot = styled(Box)(({ theme }) => ({ position: 'sticky', top: 0, left: 0, + bottom: 0, right: 0, - zIndex: 1, + zIndex: 2, marginBottom: theme.spacing(1), backgroundColor: theme.palette.background.paper, borderBottom: `1px solid ${theme.palette.divider}` From 3180e3c523651a0500f4fab2cdb2979594c0841e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 23 May 2024 11:45:47 +0200 Subject: [PATCH 11/19] Design QA passed --- packages/react-ui/storybook/stories/organisms/Menu.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 9df116cd7..8a62c19a2 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -93,7 +93,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29229&t=0T8NJiytWngAdJeO-0' }, status: { - type: 'readyToReview' + type: 'validated' } } }; From 1f97af697eb5b7d50973475e006baf7c48712f0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 24 May 2024 12:40:05 +0200 Subject: [PATCH 12/19] adaptations to cloud-native --- .../src/components/molecules/MenuList.d.ts | 10 + .../src/components/molecules/MenuList.js | 38 +++ packages/react-ui/src/index.d.ts | 3 + packages/react-ui/src/index.js | 2 + .../theme/sections/components/navigation.js | 20 +- .../stories/organisms/Menu.stories.js | 231 ++++++++++++++---- 6 files changed, 248 insertions(+), 56 deletions(-) create mode 100644 packages/react-ui/src/components/molecules/MenuList.d.ts create mode 100644 packages/react-ui/src/components/molecules/MenuList.js diff --git a/packages/react-ui/src/components/molecules/MenuList.d.ts b/packages/react-ui/src/components/molecules/MenuList.d.ts new file mode 100644 index 000000000..a0350a0bb --- /dev/null +++ b/packages/react-ui/src/components/molecules/MenuList.d.ts @@ -0,0 +1,10 @@ +import { MenuListProps as MuiMenuListProps } from '@mui/material'; + +export type MenuListProps = MuiMenuListProps & { + extended?: boolean; + width?: string; + height?: string; +}; + +declare const MenuList: (props: MenuListProps) => JSX.Element; +export default MenuList; diff --git a/packages/react-ui/src/components/molecules/MenuList.js b/packages/react-ui/src/components/molecules/MenuList.js new file mode 100644 index 000000000..bc4de85a0 --- /dev/null +++ b/packages/react-ui/src/components/molecules/MenuList.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { MenuList as MuiMenuList, styled } from '@mui/material'; + +const StyledMenuList = styled(MuiMenuList, { + shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop) +})(({ extended, width, height, theme }) => ({ + ...(extended && { + '.MuiMenuItem-root': { + minHeight: theme.spacing(6) + } + }), + '.MuiMenu-paper': { + ...(width && { + width: width, + minWidth: width + }), + ...(height && { + maxHeight: height + }) + } +})); + +const MenuList = ({ extended, width, height, children, ...otherProps }) => { + return ( + + {children} + + ); +}; + +MenuList.propTypes = { + extended: PropTypes.bool, + width: PropTypes.string, + height: PropTypes.string +}; + +export default MenuList; diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index aa788b3f2..afc1e988b 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -53,6 +53,7 @@ import UploadFieldBase, { UploadFieldBaseProps } from './components/molecules/UploadField/UploadFieldBase'; import Menu, { MenuProps } from './components/molecules/Menu'; +import MenuList, { MenuListProps } from './components/molecules/MenuList'; import MenuItem, { MenuItemProps } from './components/molecules/MenuItem'; import AppBar, { AppBarProps } from './components/organisms/AppBar/AppBar'; import LabelWithIndicator, { @@ -125,6 +126,8 @@ export { UploadFieldBaseProps, Menu, MenuProps, + MenuList, + MenuListProps, MenuItem, MenuItemProps, AppBar, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 4b0369f40..fdf39e071 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -44,6 +44,7 @@ import MultipleSelectField from './components/molecules/MultipleSelectField/Mult import UploadField from './components/molecules/UploadField/UploadField'; import UploadFieldBase from './components/molecules/UploadField/UploadFieldBase'; import Menu from './components/molecules/Menu'; +import MenuList from './components/molecules/MenuList'; import MenuItem from './components/molecules/MenuItem'; import AppBar from './components/organisms/AppBar/AppBar'; import LabelWithIndicator from './components/atoms/LabelWithIndicator'; @@ -106,6 +107,7 @@ export { UploadField, UploadFieldBase, Menu, + MenuList, MenuItem, AppBar, ArrowDropIcon, diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 518489b69..cc99a1ddc 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -37,7 +37,7 @@ export const navigationOverrides = { } }, '&:hover': { - '.MuiAvatar-root, .MuiChip-root': { + '.MuiAvatar-root, .MuiChip-root, .CartoTag-root': { cursor: 'pointer' } }, @@ -127,7 +127,15 @@ export const navigationOverrides = { '.MuiPopover-root &, .MuiPopper-root &': { minWidth: theme.spacing(8), // 64px, defined by design maxHeight: theme.spacing(39), // 312px, defined by design - overflowY: 'auto' + overflowY: 'auto', + + '&:focus-visible': { + outline: 'none !important', + boxShadow: 'none !important' + }, + '.MuiDivider-root': { + margin: theme.spacing(1, 0) + } }, // Indent sublevels, ugly but needed to avoid issues with hover @@ -178,7 +186,7 @@ export const navigationOverrides = { root: ({ theme }) => ({ paddingRight: theme.spacing(2), - '& + .MuiChip-root, & + .CartoTag-root': { + '& + .MuiBox-root': { marginRight: theme.spacing(1) } }) @@ -189,7 +197,11 @@ export const navigationOverrides = { root: ({ theme }) => ({ '& .MuiSvgIcon-root': { fontSize: ICON_SIZE_LARGE, - color: theme.palette.text.primary + color: theme.palette.text.primary, + + path: { + fill: 'currentColor' + } }, '.MuiMenuItem-root.MuiButtonBase-root &': { minWidth: ICON_SIZE_MEDIUM diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index 8a62c19a2..ca8af5a42 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -1,13 +1,16 @@ -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; import { ListItemIcon, ListItemText, - MenuList, Box, Grid, Divider, Chip, - Tooltip + Tooltip, + Popper, + ClickAwayListener, + Paper, + Grow } from '@mui/material'; import { ContentCopyOutlined, @@ -27,6 +30,7 @@ import Typography from '../../../src/components/atoms/Typography'; import Button from '../../../src/components/atoms/Button'; import Avatar from '../../../src/components/molecules/Avatar'; import Menu from '../../../src/components/molecules/Menu'; +import MenuList from '../../../src/components/molecules/MenuList'; import MenuItem from '../../../src/components/molecules/MenuItem'; const options = { @@ -140,13 +144,15 @@ const TemplateMenuItemStates = ({ label, disabled, ...args }) => { {label} - + + + @@ -237,13 +243,15 @@ const TemplateMenuItemContent = ({ label, selected, disabled, ...args }) => { {label} - + + + @@ -252,13 +260,15 @@ const TemplateMenuItemContent = ({ label, selected, disabled, ...args }) => { {label} - + + + @@ -267,13 +277,15 @@ const TemplateMenuItemContent = ({ label, selected, disabled, ...args }) => { {label} - + + + @@ -354,13 +366,15 @@ const TemplateMenu = ({ label, subtitle, dense, disabled, destructive, ...args } {label} - + + + { + const anchorRef = useRef(null); + const [open, setOpen] = useState(false); + + const closeDropdown = () => { + setOpen(null); + }; + + const handleToggle = () => { + setOpen((prevOpen) => !prevOpen); + }; + + return ( + + + + + { + if (ev.key === 'Escape') { + closeDropdown(); + } + }} + > + + + {subtitle && {'Subtitle'}} + + + + + {label} + + + + + + + + + {label} + + {subtitle && {'Subtitle'}} + + + + + {label} + + + + + + + {label} + + + + + + + + ); +}; + const TemplateMenuOverflow = ({ label, subtitle, @@ -454,13 +574,15 @@ const TemplateMenuOverflow = ({ {label} - + + + - + + + Date: Fri, 24 May 2024 16:44:45 +0200 Subject: [PATCH 13/19] adaptations to cloud-native --- packages/react-ui/src/components/molecules/MenuItem.js | 3 +++ .../src/theme/sections/components/navigation.js | 10 ++++++++++ 2 files changed, 13 insertions(+) diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index c0b7e0127..d821fc635 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -34,6 +34,9 @@ const StyledMenuItem = styled(MuiMenuItem, { 'svg, & .MuiSvgIcon-root': { color: theme.palette.error.main }, + '.MuiListItemIcon-root svg path': { + fill: theme.palette.error.main + }, '&:hover': { backgroundColor: theme.palette.error.relatedLight diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index cc99a1ddc..c117b2206 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -41,6 +41,10 @@ export const navigationOverrides = { cursor: 'pointer' } }, + '.MuiListItemIcon-root svg path': { + fill: theme.palette.text.primary + }, + '&:focus-visible': { // Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747 backgroundColor: 'transparent', @@ -65,6 +69,9 @@ export const navigationOverrides = { '& .MuiTypography-root, & .MuiSvgIcon-root': { color: theme.palette.primary.main }, + '.MuiListItemIcon-root svg path': { + fill: theme.palette.primary.main + }, '.MuiTypography-caption': { // secondary text color: theme.palette.text.secondary @@ -87,6 +94,9 @@ export const navigationOverrides = { svg: { color: theme.palette.text.disabled }, + '.MuiListItemIcon-root svg path': { + fill: theme.palette.text.disabled + }, '.MuiAvatar-root': { color: theme.palette.text.disabled, backgroundColor: theme.palette.action.disabledBackground From 4fb2489de03b836d7732ca74eceefbd60563a7a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 28 May 2024 09:31:57 +0200 Subject: [PATCH 14/19] new iconColor prop --- .../src/components/molecules/MenuItem.d.ts | 1 + .../src/components/molecules/MenuItem.js | 33 ++++++++-- .../theme/sections/components/navigation.js | 6 -- .../stories/organisms/Menu.stories.js | 60 +++++++++++++++++++ 4 files changed, 90 insertions(+), 10 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MenuItem.d.ts b/packages/react-ui/src/components/molecules/MenuItem.d.ts index 9ccf5480b..eeddda585 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.d.ts +++ b/packages/react-ui/src/components/molecules/MenuItem.d.ts @@ -4,6 +4,7 @@ export type MenuItemProps = MuiMenuItemProps & { subtitle?: boolean; destructive?: boolean; extended?: boolean; + iconColor?: 'primary' | 'default'; }; declare const MenuItem: (props: MenuItemProps) => JSX.Element; diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index d821fc635..cd2fc633c 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import { MenuItem as MuiMenuItem, styled } from '@mui/material'; const StyledMenuItem = styled(MuiMenuItem, { - shouldForwardProp: (prop) => !['subtitle', 'destructive', 'extended'].includes(prop) -})(({ subtitle, destructive, extended, theme }) => ({ + shouldForwardProp: (prop) => + !['subtitle', 'destructive', 'extended', 'iconColor'].includes(prop) +})(({ subtitle, destructive, extended, iconColor, theme }) => ({ ...(subtitle && { pointerEvents: 'none', columnGap: 0, @@ -25,6 +26,15 @@ const StyledMenuItem = styled(MuiMenuItem, { } } }), + + ...(iconColor === 'primary' && { + '.MuiListItemIcon-root svg path': { + fill: theme.palette.text.primary + }, + '&.Mui-selected .MuiListItemIcon-root svg path': { + fill: theme.palette.primary.main + } + }), ...(destructive && { color: theme.palette.error.main, @@ -37,6 +47,9 @@ const StyledMenuItem = styled(MuiMenuItem, { '.MuiListItemIcon-root svg path': { fill: theme.palette.error.main }, + '&.Mui-selected .MuiListItemIcon-root svg path': { + fill: theme.palette.error.main + }, '&:hover': { backgroundColor: theme.palette.error.relatedLight @@ -70,12 +83,20 @@ const StyledMenuItem = styled(MuiMenuItem, { }) })); -const MenuItem = ({ subtitle, destructive, extended, children, ...otherProps }) => { +const MenuItem = ({ + subtitle, + destructive, + extended, + children, + iconColor, + ...otherProps +}) => { return ( {children} @@ -83,10 +104,14 @@ const MenuItem = ({ subtitle, destructive, extended, children, ...otherProps }) ); }; +MenuItem.defaultProps = { + iconColor: 'primary' +}; MenuItem.propTypes = { subtitle: PropTypes.bool, destructive: PropTypes.bool, - extended: PropTypes.bool + extended: PropTypes.bool, + iconColor: PropTypes.oneOf(['primary', 'default']) }; export default MenuItem; diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index c117b2206..f45bbe8ca 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -41,9 +41,6 @@ export const navigationOverrides = { cursor: 'pointer' } }, - '.MuiListItemIcon-root svg path': { - fill: theme.palette.text.primary - }, '&:focus-visible': { // Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747 @@ -69,9 +66,6 @@ export const navigationOverrides = { '& .MuiTypography-root, & .MuiSvgIcon-root': { color: theme.palette.primary.main }, - '.MuiListItemIcon-root svg path': { - fill: theme.palette.primary.main - }, '.MuiTypography-caption': { // secondary text color: theme.palette.text.secondary diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js index ca8af5a42..7eeb100ba 100644 --- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -33,6 +33,21 @@ import Menu from '../../../src/components/molecules/Menu'; import MenuList from '../../../src/components/molecules/MenuList'; import MenuItem from '../../../src/components/molecules/MenuItem'; +const icon = ( + + + +); + const options = { title: 'Organisms/Menu', component: MenuList, @@ -86,9 +101,18 @@ const options = { }, subtitle: { description: 'MenuItem prop', + defaultValue: false, control: { type: 'boolean' } + }, + iconColor: { + description: 'MenuItem prop', + defaultValue: 'primary', + control: { + type: 'select', + options: ['primary', 'default'] + } } }, parameters: { @@ -323,6 +347,37 @@ const TemplateMenuItemDestructive = ({ label, destructive, ...args }) => { ); }; +const TemplateMenuIconColor = ({ label, iconColor, ...args }) => { + return ( + <> + + Default keeps the color of the icon as is, Primary changes the color of the icon + to theme.palette.text.primary. + + + + + + + {icon} + {label} + + + + + + + + {icon} + {label} + + + + + + ); +}; + const TemplateMenu = ({ label, subtitle, dense, disabled, destructive, ...args }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -804,6 +859,11 @@ States.args = { ...commonArgs }; export const Content = TemplateMenuItemContent.bind({}); Content.args = { ...commonArgs }; +export const IconColor = TemplateMenuIconColor.bind({}); +IconColor.args = { + ...commonArgs +}; + export const Destructive = TemplateMenuItemDestructive.bind({}); Destructive.args = { ...commonArgs }; From 51bef0736c95048f7d57cf326ed8342c4b30ff4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 28 May 2024 18:09:59 +0200 Subject: [PATCH 15/19] fix MenuList component ref --- .../src/components/molecules/MenuList.js | 29 +++++++++++++------ .../src/theme/sections/components/forms.js | 7 +++++ .../theme/sections/components/navigation.js | 1 - 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/packages/react-ui/src/components/molecules/MenuList.js b/packages/react-ui/src/components/molecules/MenuList.js index bc4de85a0..8eb9baf45 100644 --- a/packages/react-ui/src/components/molecules/MenuList.js +++ b/packages/react-ui/src/components/molecules/MenuList.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { MenuList as MuiMenuList, styled } from '@mui/material'; @@ -10,7 +10,7 @@ const StyledMenuList = styled(MuiMenuList, { minHeight: theme.spacing(6) } }), - '.MuiMenu-paper': { + '&.MuiList-root': { ...(width && { width: width, minWidth: width @@ -21,13 +21,24 @@ const StyledMenuList = styled(MuiMenuList, { } })); -const MenuList = ({ extended, width, height, children, ...otherProps }) => { - return ( - - {children} - - ); -}; +const MenuList = forwardRef( + ({ extended, width, height, children, ...otherProps }, ref) => { + // forwardRef needed to be able to hold a reference, in this way it can be a child for some Mui components, like Tooltip + // https://mui.com/material-ui/guides/composition/#caveat-with-refs + + return ( + + {children} + + ); + } +); MenuList.propTypes = { extended: PropTypes.bool, diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 26e909c48..81386253a 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -220,6 +220,13 @@ export const formsOverrides = { opacity: 1 }, '& legend': { display: 'none' }, + '& .MuiMenuItem-root': { + padding: 0, + + '&:hover': { + backgroundColor: 'transparent' + } + }, // Variants '&.MuiFilledInput-root': { diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index f45bbe8ca..43e16540c 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -26,7 +26,6 @@ export const navigationOverrides = { columnGap: theme.spacing(1), minHeight: theme.spacing(4), padding: theme.spacing(0.75, 1, 0.75, 1.5), - backgroundColor: theme.palette.background.paper, whiteSpace: 'normal', transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', From adc31c918018b399ff2875dcba5592c925be5946 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 29 May 2024 16:19:30 +0200 Subject: [PATCH 16/19] bugfixing --- .../react-ui/src/theme/sections/components/forms.js | 5 ++++- .../src/theme/sections/components/navigation.js | 13 ++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 81386253a..b9d9b70b8 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -220,11 +220,14 @@ export const formsOverrides = { opacity: 1 }, '& legend': { display: 'none' }, - '& .MuiMenuItem-root': { + '& .MuiButtonBase-root.MuiMenuItem-root': { padding: 0, '&:hover': { backgroundColor: 'transparent' + }, + [theme.breakpoints.up('sm')]: { + minHeight: 'initial' } }, diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 43e16540c..afbc66f73 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -135,11 +135,11 @@ export const navigationOverrides = { '&:focus-visible': { outline: 'none !important', boxShadow: 'none !important' - }, - '.MuiDivider-root': { - margin: theme.spacing(1, 0) } }, + '.MuiDivider-root': { + margin: theme.spacing(1, 0) + }, // Indent sublevels, ugly but needed to avoid issues with hover '& .MuiList-root': { @@ -199,12 +199,7 @@ export const navigationOverrides = { styleOverrides: { root: ({ theme }) => ({ '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE_LARGE, - color: theme.palette.text.primary, - - path: { - fill: 'currentColor' - } + fontSize: ICON_SIZE_LARGE }, '.MuiMenuItem-root.MuiButtonBase-root &': { minWidth: ICON_SIZE_MEDIUM From 070d1cc0077db70e94bca9f8f11824460711c5d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 30 May 2024 12:29:32 +0200 Subject: [PATCH 17/19] temporary styles for QA process --- packages/react-ui/src/components/molecules/Menu.js | 3 +++ packages/react-ui/src/components/molecules/MenuItem.js | 4 ++++ packages/react-ui/src/components/molecules/MenuList.js | 2 ++ 3 files changed, 9 insertions(+) diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js index b07085c3a..8c60c1488 100644 --- a/packages/react-ui/src/components/molecules/Menu.js +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -5,6 +5,9 @@ import { Menu as MuiMenu, styled } from '@mui/material'; const StyledMenu = styled(MuiMenu, { shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop) })(({ extended, width, height, theme }) => ({ + '.MuiMenu-list': { + backgroundColor: '#ff970038 !important' // TODO: remove, just for QA purposes + }, ...(extended && { '.MuiMenuItem-root': { minHeight: theme.spacing(6) diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index cd2fc633c..a6c86aa8e 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -6,6 +6,10 @@ const StyledMenuItem = styled(MuiMenuItem, { shouldForwardProp: (prop) => !['subtitle', 'destructive', 'extended', 'iconColor'].includes(prop) })(({ subtitle, destructive, extended, iconColor, theme }) => ({ + '&.MuiMenuItem-root': { + backgroundColor: '#fbf6e8 !important' // TODO: remove, just for QA purposes + }, + ...(subtitle && { pointerEvents: 'none', columnGap: 0, diff --git a/packages/react-ui/src/components/molecules/MenuList.js b/packages/react-ui/src/components/molecules/MenuList.js index 8eb9baf45..5be604d36 100644 --- a/packages/react-ui/src/components/molecules/MenuList.js +++ b/packages/react-ui/src/components/molecules/MenuList.js @@ -11,6 +11,8 @@ const StyledMenuList = styled(MuiMenuList, { } }), '&.MuiList-root': { + backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes + ...(width && { width: width, minWidth: width From 9dcaee4286279e72ce9de8eea54514d16d8f0a84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 30 May 2024 16:43:29 +0200 Subject: [PATCH 18/19] fix nested MenuList padding --- packages/react-ui/src/components/molecules/Menu.js | 6 +++++- packages/react-ui/src/components/molecules/MenuList.js | 4 ++++ .../react-ui/src/theme/sections/components/navigation.js | 3 +++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js index 8c60c1488..c766eea20 100644 --- a/packages/react-ui/src/components/molecules/Menu.js +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -6,7 +6,11 @@ const StyledMenu = styled(MuiMenu, { shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop) })(({ extended, width, height, theme }) => ({ '.MuiMenu-list': { - backgroundColor: '#ff970038 !important' // TODO: remove, just for QA purposes + backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes + + '& .MuiList-root': { + backgroundColor: 'transparent !important' // TODO: remove, just for QA purposes, + } }, ...(extended && { '.MuiMenuItem-root': { diff --git a/packages/react-ui/src/components/molecules/MenuList.js b/packages/react-ui/src/components/molecules/MenuList.js index 5be604d36..7dffdd523 100644 --- a/packages/react-ui/src/components/molecules/MenuList.js +++ b/packages/react-ui/src/components/molecules/MenuList.js @@ -13,6 +13,10 @@ const StyledMenuList = styled(MuiMenuList, { '&.MuiList-root': { backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes + '& .MuiList-root': { + backgroundColor: 'transparent !important' // TODO: remove, just for QA purposes, + }, + ...(width && { width: width, minWidth: width diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index afbc66f73..4ca99a908 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -143,6 +143,9 @@ export const navigationOverrides = { // Indent sublevels, ugly but needed to avoid issues with hover '& .MuiList-root': { + paddingTop: 0, + paddingBottom: 0, + '& .MuiListItem-root': { paddingLeft: theme.spacing(4) }, From 1ac01a6859deced4f6f8dc8c06093a8a6d840a7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 3 Jun 2024 14:11:01 +0200 Subject: [PATCH 19/19] revert styles for QA testing --- packages/react-ui/src/components/molecules/Menu.js | 7 ------- packages/react-ui/src/components/molecules/MenuItem.js | 4 ---- packages/react-ui/src/components/molecules/MenuList.js | 6 ------ 3 files changed, 17 deletions(-) diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js index c766eea20..b07085c3a 100644 --- a/packages/react-ui/src/components/molecules/Menu.js +++ b/packages/react-ui/src/components/molecules/Menu.js @@ -5,13 +5,6 @@ import { Menu as MuiMenu, styled } from '@mui/material'; const StyledMenu = styled(MuiMenu, { shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop) })(({ extended, width, height, theme }) => ({ - '.MuiMenu-list': { - backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes - - '& .MuiList-root': { - backgroundColor: 'transparent !important' // TODO: remove, just for QA purposes, - } - }, ...(extended && { '.MuiMenuItem-root': { minHeight: theme.spacing(6) diff --git a/packages/react-ui/src/components/molecules/MenuItem.js b/packages/react-ui/src/components/molecules/MenuItem.js index a6c86aa8e..cd2fc633c 100644 --- a/packages/react-ui/src/components/molecules/MenuItem.js +++ b/packages/react-ui/src/components/molecules/MenuItem.js @@ -6,10 +6,6 @@ const StyledMenuItem = styled(MuiMenuItem, { shouldForwardProp: (prop) => !['subtitle', 'destructive', 'extended', 'iconColor'].includes(prop) })(({ subtitle, destructive, extended, iconColor, theme }) => ({ - '&.MuiMenuItem-root': { - backgroundColor: '#fbf6e8 !important' // TODO: remove, just for QA purposes - }, - ...(subtitle && { pointerEvents: 'none', columnGap: 0, diff --git a/packages/react-ui/src/components/molecules/MenuList.js b/packages/react-ui/src/components/molecules/MenuList.js index 7dffdd523..8eb9baf45 100644 --- a/packages/react-ui/src/components/molecules/MenuList.js +++ b/packages/react-ui/src/components/molecules/MenuList.js @@ -11,12 +11,6 @@ const StyledMenuList = styled(MuiMenuList, { } }), '&.MuiList-root': { - backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes - - '& .MuiList-root': { - backgroundColor: 'transparent !important' // TODO: remove, just for QA purposes, - }, - ...(width && { width: width, minWidth: width