diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b81ee0a4..410554f95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Breaking changes in Mui v5: components [#518](https://github.com/CartoDB/carto-react/pull/518) - Breaking changes in Mui v5: styles and theme [#514](https://github.com/CartoDB/carto-react/pull/514/) - Add final Figma links into Storybook [#515](https://github.com/CartoDB/carto-react/pull/515) - Breakpoints for the new design system [#513](https://github.com/CartoDB/carto-react/pull/513/) diff --git a/UPGRADE.md b/UPGRADE.md index f5193cbe6..e01485a7f 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -25,7 +25,7 @@ We have a new custom spacing constant in carto-theme, `spacingValue`, which you Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual. -# Typography +## Typography `responsiveFontSizes` simplified due we want to resize only a few variants through the theme. diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 64cf0fa3d..d9364d925 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -7,10 +7,10 @@ export const dataDisplayOverrides = { MuiDivider: { styleOverrides: { root: { - backgroundColor: commonPalette.divider + borderColor: commonPalette.divider }, light: { - backgroundColor: commonPalette.grey[50] + borderColor: commonPalette.grey[50] } } }, diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index f92f21517..c5f6aa795 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -193,7 +193,6 @@ export const formsOverrides = { defaultProps: { variant: 'outlined', MenuProps: { - getContentAnchorEl: null, anchorOrigin: { vertical: 'bottom', horizontal: 'left' @@ -238,8 +237,7 @@ export const formsOverrides = { // Checkbox MuiCheckbox: { defaultProps: { - size: 'small', - color: 'primary' + size: 'small' }, styleOverrides: { root: { @@ -263,8 +261,7 @@ export const formsOverrides = { // Radio Button MuiRadio: { defaultProps: { - size: 'small', - color: 'primary' + size: 'small' }, styleOverrides: { root: { @@ -287,9 +284,6 @@ export const formsOverrides = { // Switch MuiSwitch: { - defaultProps: { - color: 'primary' - }, styleOverrides: { root: { height: getSpacing(4.5), diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 75f07a58a..b9c372d1c 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -54,11 +54,11 @@ export const navigationOverrides = { padding: getSpacing(0, 1), marginRight: getSpacing(3), minWidth: '56px!important', - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { + '&[class*="MuiTab-labelIcon"]': { flexFlow: 'row', alignItems: 'center' }, - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { + '&[class*="MuiTab-labelIcon"] .MuiSvgIcon-root': { marginRight: getSpacing(1), marginBottom: 0 } diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js index c939d034a..b05919bc9 100644 --- a/packages/react-ui/src/theme/sections/cssBaseline.js +++ b/packages/react-ui/src/theme/sections/cssBaseline.js @@ -3,86 +3,84 @@ import { commonPalette } from './palette'; import { themeTypography } from './typography'; export const CssBaseline = { - '@global': { - // Custom scrollbars - '*::-webkit-scrollbar': { - position: 'fixed', - width: '5px' - }, - '*::-webkit-scrollbar-track': { - '-webkit-box-shadow': 'none', - background: 'transparent' - }, - '*::-webkit-scrollbar-thumb': { - borderRadius: '3px', - background: commonPalette.action.focus, - outline: 'none' - }, + // Custom scrollbars + '*::-webkit-scrollbar': { + position: 'fixed', + width: '5px' + }, + '*::-webkit-scrollbar-track': { + '-webkit-box-shadow': 'none', + background: 'transparent' + }, + '*::-webkit-scrollbar-thumb': { + borderRadius: '3px', + background: commonPalette.action.focus, + outline: 'none' + }, + + // iOS Search clear button + 'input[type="search"]::-webkit-search-cancel-button': { + '-webkit-appearance': 'none', + height: getSpacing(2), + width: getSpacing(2), + display: 'block', + backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`, + backgroundRepeat: 'no-repeat', + backgroundSize: getSpacing(2) + }, + + // Mapbox controls + '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { + padding: getSpacing(0, 1), + borderRadius: getSpacing(0.5, 0, 0, 0), - // iOS Search clear button - 'input[type="search"]::-webkit-search-cancel-button': { - '-webkit-appearance': 'none', - height: getSpacing(2), - width: getSpacing(2), - display: 'block', - backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`, - backgroundRepeat: 'no-repeat', - backgroundSize: getSpacing(2) + '& .mapboxgl-ctrl-attrib-inner': { + ...themeTypography.overline, + textTransform: 'none', + letterSpacing: '0.75px', + + '& a': { + color: commonPalette.primary.main + } }, - // Mapbox controls - '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { - padding: getSpacing(0, 1), - borderRadius: getSpacing(0.5, 0, 0, 0), + '&.mapboxgl-compact': { + backgroundColor: 'transparent', + right: getSpacing(0.5), + bottom: getSpacing(2.5), - '& .mapboxgl-ctrl-attrib-inner': { - ...themeTypography.overline, - textTransform: 'none', - letterSpacing: '0.75px', + // Mobile + '@media (max-width: 600px)': { + bottom: getSpacing(0.5) + }, - '& a': { - color: commonPalette.primary.main + '& .mapboxgl-ctrl-attrib-button': { + backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${commonPalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, + backgroundColor: 'rgba(255,255,255,.8)', + top: 'auto', + bottom: 0, + right: 0, + + '&:not(:disabled):hover': { + backgroundColor: 'rgba(255,255,255,.8)' } }, - '&.mapboxgl-compact': { - backgroundColor: 'transparent', - right: getSpacing(0.5), - bottom: getSpacing(2.5), - - // Mobile - '@media (max-width: 600px)': { - bottom: getSpacing(0.5) - }, + '& .mapboxgl-ctrl-attrib-inner': { + backgroundColor: 'rgba(255,255,255,.8)', + padding: getSpacing(0.5, 1), + borderRadius: getSpacing(1.5), + marginRight: getSpacing(2.5), + color: commonPalette.text.secondary + }, + '&.mapboxgl-compact-show': { '& .mapboxgl-ctrl-attrib-button': { - backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${commonPalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, - backgroundColor: 'rgba(255,255,255,.8)', - top: 'auto', - bottom: 0, - right: 0, + backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`, + backgroundColor: commonPalette.common.black, '&:not(:disabled):hover': { - backgroundColor: 'rgba(255,255,255,.8)' - } - }, - - '& .mapboxgl-ctrl-attrib-inner': { - backgroundColor: 'rgba(255,255,255,.8)', - padding: getSpacing(0.5, 1), - borderRadius: getSpacing(1.5), - marginRight: getSpacing(2.5), - color: commonPalette.text.secondary - }, - - '&.mapboxgl-compact-show': { - '& .mapboxgl-ctrl-attrib-button': { - backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`, - backgroundColor: commonPalette.common.black, - - '&:not(:disabled):hover': { - backgroundColor: commonPalette.common.black - } + backgroundColor: commonPalette.common.black } } } diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index d2754fbe1..dc5d344ce 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -15,10 +15,6 @@ const useStyles = makeStyles((theme) => ({ '& .MuiTypography-caption': { color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption } }, diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 0c1d63550..554378546 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({ cursor: 'pointer', flexWrap: 'nowrap', - '&:hover $progressbar div': { + '&:hover .progressbar div': { backgroundColor: theme.palette.secondary.dark } }, @@ -91,10 +91,6 @@ const useStyles = makeStyles((theme) => ({ '& .MuiTypography-caption': { color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption } }, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index 4ecf9db33..cdfef2f93 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -17,10 +17,6 @@ const useStyles = makeStyles((theme) => ({ '& .MuiTypography-caption': { color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption } }, clearButton: { diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js index d141a15e4..98169f7b7 100644 --- a/packages/react-ui/src/widgets/OpacityControl.js +++ b/packages/react-ui/src/widgets/OpacityControl.js @@ -58,7 +58,7 @@ export default function OpacityControl({ opacity, onChangeOpacity }) { handleInputChange(event, 0)} onBlur={() => handleInputBlur(0)} inputProps={{ @@ -207,7 +207,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { handleInputChange(event, 1)} onBlur={() => handleInputBlur(1)} inputProps={{ diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index 120a50f13..a3ad1c858 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -56,7 +56,6 @@ function TableWidgetUI({ height, dense }) { - const classes = useStyles(); const paginationRef = useRef(null); const handleSort = (sortField) => { @@ -97,7 +96,6 @@ function TableWidgetUI({ {pagination && ( ({ alignItems: 'flex-start', justifyContent: 'flex-start', cursor: (props) => (props.expandable ? 'pointer' : 'default'), - '& .MuiButton-label': { - ...theme.typography.body1, - '& .MuiButton-startIcon': { - marginRight: theme.spacing(1) - } + '& .MuiButton-startIcon': { + marginRight: theme.spacing(1) }, '&:hover': { background: 'none' diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 78b8cc7ba..6b19ca8ce 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -109,10 +109,7 @@ const useStylesLegendContainer = makeStyles((theme) => ({ padding: theme.spacing(0.75, 1.25, 0.75, 3), borderTop: ({ collapsed }) => collapsed ? 'none' : `1px solid ${theme.palette.divider}`, - cursor: 'pointer', - '& .MuiButton-label': { - ...theme.typography.body1 - } + cursor: 'pointer' }, wrapperInner: { maxHeight: 'max(350px, 80vh)', diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index bccd8ead6..64c18a4f6 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -122,12 +122,9 @@ const useHeaderStyles = makeStyles((theme) => ({ flex: '1 1 auto', justifyContent: 'flex-start', cursor: ({ collapsible }) => (collapsible ? 'pointer' : 'default'), - '& .MuiButton-label': { - ...theme.typography.body1, - '& .MuiButton-startIcon': { - marginRight: theme.spacing(1) - } + '& .MuiButton-startIcon': { + marginRight: theme.spacing(1) }, '&:hover': { background: 'none' diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index 0cddc2bca..03e411fde 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -14,6 +14,12 @@ const options = { square: { control: { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1447%3A38722' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index ae42f743f..6ed3fbb0b 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -185,7 +185,7 @@ const SliderWithInputTemplate = ({ ...args }) => { value={value} onChange={handleInputChange} onBlur={handleBlur} - margin='dense' + size='small' inputProps={{ step: 10, min: 0, @@ -200,7 +200,7 @@ const SliderWithInputTemplate = ({ ...args }) => { }; const CustomLabelTemplate = ({ ...args }) => { - const ValueLabelComponent = (props) => { + const CustomValueLabel = (props) => { const { children, open, value } = props; return ( @@ -213,7 +213,9 @@ const CustomLabelTemplate = ({ ...args }) => { return ( );