From 94423c3e5cd317305508fd7c0522b3afa1bf1eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 17 Oct 2022 10:48:24 +0200 Subject: [PATCH 001/154] Integration between Figma and Storybook (#488) --- CHANGELOG.md | 3 + packages/react-ui/package.json | 1 + .../react-ui/storybook/.storybook/main.js | 6 +- .../react-ui/storybook/.storybook/preview.js | 4 +- .../stories/common/Button.stories.js | 6 ++ .../stories/common/ButtonGroup.stories.js | 6 ++ .../stories/common/Checkbox.stories.js | 6 ++ .../stories/common/Palette.stories.js | 6 ++ .../storybook/stories/common/Radio.stories.js | 6 ++ .../stories/common/Select.stories.js | 6 ++ .../stories/common/Slider.stories.js | 6 ++ .../stories/common/Switch.stories.js | 6 ++ .../stories/common/Text-field.stories.js | 18 ++++++ .../stories/common/ToggleButton.stories.js | 6 ++ .../stories/common/Tooltip.stories.js | 6 ++ .../stories/common/Typography.stories.js | 6 ++ .../stories/widgetsUI/InputFile.stories.js | 4 ++ yarn.lock | 61 +++++++++++++++++++ 18 files changed, 161 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a1a209809..0cb68a1c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Not released +- Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) +- Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) + ## 1.5 ### 1.5.0-alpha.4 (2022-10-14) diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index c021e6a5f..1135146c8 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -47,6 +47,7 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/react": "^6.5.12", + "storybook-addon-designs": "^6.3.1", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/react-hooks": "^5.1.0", diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index 2951a28cd..5b780de8b 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -1,4 +1,8 @@ module.exports = { stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'] + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + 'storybook-addon-designs' + ] }; diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 201a4d072..19abc2e44 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -1,4 +1,5 @@ import React from 'react'; +import { withDesign } from 'storybook-addon-designs'; import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; @@ -59,5 +60,6 @@ export const parameters = { ] ] } - } + }, + decorators: [withDesign] }; diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 4ead3c9b3..651ad0d63 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -33,6 +33,12 @@ const options = { type: 'text' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1303%3A26362' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 75011085a..58819e61d 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -39,6 +39,12 @@ const options = { type: 'text' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1180%3A28045' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 08cf65feb..5577d8821 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -26,6 +26,12 @@ const options = { type: 'text' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27131' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Palette.stories.js b/packages/react-ui/storybook/stories/common/Palette.stories.js index 2ef72a34d..2962ff5b9 100644 --- a/packages/react-ui/storybook/stories/common/Palette.stories.js +++ b/packages/react-ui/storybook/stories/common/Palette.stories.js @@ -12,6 +12,12 @@ const options = { options: ['primary', 'secondary', 'error', 'warning', 'info', 'success'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8786%3A6248' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index cc3362705..26615ffcb 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -28,6 +28,12 @@ const options = { type: 'text' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27543' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index fb4eb44de..748bcd4f9 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -43,6 +43,12 @@ const options = { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A26139' + } } }; 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 23d50521d..2519018c9 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -128,6 +128,12 @@ const options = { type: ['func', 'string'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A24517' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index fc218f0e6..e9d7eec9f 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -21,6 +21,12 @@ const options = { type: 'text' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27889' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index 5540af8aa..d92b5a024 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -33,6 +33,12 @@ const options = { type: 'text' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A19069' + } } }; export default options; @@ -289,6 +295,18 @@ Small.argTypes = disabledControlsArgTypes; export const Multiline = MultilineTemplate.bind({}); Multiline.args = { value: 'Hello world\nwith multiple lines' }; +Multiline.parameters = { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604' + } +}; export const MultilineSmall = MultilineTemplate.bind({}); MultilineSmall.args = { value: 'Hello world\nwith multiple lines', size: 'small' }; +MultilineSmall.parameters = { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604' + } +}; diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index 74fef17c5..b61d40885 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -29,6 +29,12 @@ const options = { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index 5fe80bd1b..6c3e9ab22 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -40,6 +40,12 @@ const options = { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/common/Typography.stories.js index d88112a42..53115b0ca 100644 --- a/packages/react-ui/storybook/stories/common/Typography.stories.js +++ b/packages/react-ui/storybook/stories/common/Typography.stories.js @@ -25,6 +25,12 @@ const options = { ] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64695' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js index 5c45f7e44..e0431032a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js @@ -50,6 +50,10 @@ const options = { source: { type: 'auto' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1159%3A24236' } } }; diff --git a/yarn.lock b/yarn.lock index d78b5ca7a..f8a8d1990 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1474,6 +1474,21 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@figspec/components@^1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.1.tgz#47d7e24999974b18c6daa810299624d4370fc7da" + integrity sha512-UvnEamPEAMh9HExViqpobWmX25g1+soA9kcJu+It3VerMa7CeVyaIbQydNf1Gys5v/rxJVdTDRgQ7OXW2zAAig== + dependencies: + lit "^2.1.3" + +"@figspec/react@^1.0.0": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@figspec/react/-/react-1.0.2.tgz#56dbd409ac420f754eda41ecfeb89f41bb8bd48d" + integrity sha512-BG6TTySyyDPDeER1oHNNj7+UYu7NzXwqJM6Z2utJtvGGk/Vn4NzrSdDU+HVp04o0kDEEJd5hJbFgkH3uzqimPQ== + dependencies: + "@figspec/components" "^1.0.0" + "@lit-labs/react" "^1.0.2" + "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" @@ -2470,6 +2485,16 @@ npmlog "^4.1.2" write-file-atomic "^3.0.3" +"@lit-labs/react@^1.0.2": + version "1.0.9" + resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.0.9.tgz#0703ed89fcdfd2766bc71c18ccb6b06c4bbe6019" + integrity sha512-yjkdcciypTIJ6vUXzZJHTAwt2fdATUAfZMkHRbLpbgEnr8OwpwVOQ04me1Y7p5Vwtmcd4GWY0/BQ6G8jUgCK1w== + +"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.4.0": + version "1.4.1" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.4.1.tgz#3f587eec5708692135bc9e94cf396130604979f3" + integrity sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw== + "@loaders.gl/3d-tiles@^3.2.5": version "3.2.10" resolved "https://registry.yarnpkg.com/@loaders.gl/3d-tiles/-/3d-tiles-3.2.10.tgz#325d000eb9a219fc43b7127bc1e794446504c7a1" @@ -4928,6 +4953,11 @@ resolved "https://registry.yarnpkg.com/@types/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz#896e94ce99b653e886a9b925e9dc12c92af7b1ae" integrity sha512-AQ6zewa0ucLJvtUi5HsErbOFKAcQfRLt9zFLlUOvcXBy2G36a+ZDpCHSGdzJVUD8aNURtIjh9aSjCStNMRCcRQ== +"@types/trusted-types@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" + integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg== + "@types/uglify-js@*": version "3.13.1" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.1.tgz#5e889e9e81e94245c75b6450600e1c5ea2878aea" @@ -12321,6 +12351,30 @@ listr2@^3.2.2: through "^2.3.8" wrap-ansi "^7.0.0" +lit-element@^3.2.0: + version "3.2.2" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.2.tgz#d148ab6bf4c53a33f707a5168e087725499e5f2b" + integrity sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ== + dependencies: + "@lit/reactive-element" "^1.3.0" + lit-html "^2.2.0" + +lit-html@^2.2.0, lit-html@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.4.0.tgz#b510430f39a56ec959167ed1187241a4e3ab1574" + integrity sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg== + dependencies: + "@types/trusted-types" "^2.0.2" + +lit@^2.1.3: + version "2.4.0" + resolved "https://registry.yarnpkg.com/lit/-/lit-2.4.0.tgz#e33a0f463e17408f6e7f71464e6a266e60a5bb77" + integrity sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg== + dependencies: + "@lit/reactive-element" "^1.4.0" + lit-element "^3.2.0" + lit-html "^2.4.0" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -16443,6 +16497,13 @@ store2@^2.12.0: resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.1.tgz#fae7b5bb9d35fc53dc61cd262df3abb2f6e59022" integrity sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg== +storybook-addon-designs@^6.3.1: + version "6.3.1" + resolved "https://registry.yarnpkg.com/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz#3505a08fdb5a755c970c047470749622db52a1cc" + integrity sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw== + dependencies: + "@figspec/react" "^1.0.0" + stream-browserify@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b" From 936a0db6614aa646a26fe59792ad96bdca07b837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 18 Oct 2022 09:55:43 +0200 Subject: [PATCH 002/154] Split carto theme into sections (#495) --- CHANGELOG.md | 1 + UPGRADE.md | 15 + packages/react-ui/src/theme/carto-theme.js | 1375 +---------------- .../react-ui/src/theme/sections/components.js | 902 +++++++++++ .../src/theme/sections/cssBaseline.js | 91 ++ .../react-ui/src/theme/sections/palette.js | 148 ++ .../react-ui/src/theme/sections/shadows.js | 27 + .../react-ui/src/theme/sections/typography.js | 125 ++ packages/react-ui/src/theme/themeConstants.js | 2 + packages/react-ui/src/theme/themeUtils.js | 4 + .../react-ui/storybook/.storybook/preview.js | 2 +- 11 files changed, 1343 insertions(+), 1349 deletions(-) create mode 100644 UPGRADE.md create mode 100644 packages/react-ui/src/theme/sections/components.js create mode 100644 packages/react-ui/src/theme/sections/cssBaseline.js create mode 100644 packages/react-ui/src/theme/sections/palette.js create mode 100644 packages/react-ui/src/theme/sections/shadows.js create mode 100644 packages/react-ui/src/theme/sections/typography.js create mode 100644 packages/react-ui/src/theme/themeConstants.js create mode 100644 packages/react-ui/src/theme/themeUtils.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 0cb68a1c4..d868d48f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) diff --git a/UPGRADE.md b/UPGRADE.md new file mode 100644 index 000000000..483860522 --- /dev/null +++ b/UPGRADE.md @@ -0,0 +1,15 @@ +# Upgrade to the new design system + +## MUI theme + +[carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections: + +- CSS baseline +- Color palette +- Typography +- Shadows +- Components overrides + +Also added some files for shared constants (`themeConstants.js`) and useful functions (`themeUtils.js`). + +Removed unused custom `createTheme` function in `carto-theme.js`. diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 52a510bc9..0ed3f2324 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,288 +1,9 @@ -import { - createTheme as createMuiTheme, - responsiveFontSizes -} from '@material-ui/core/styles'; -import createSpacing from '@material-ui/core/styles/createSpacing'; - -const colors = { - common: { - black: '#2c3032', - white: '#fff' - }, - neutral: { - 50: '#f8f9f9', - 100: '#e1e3e4', - 200: '#cbcdcf', - 300: '#b4b8ba', - 400: '#9da2a6', - 500: '#868d91', - 600: '#6f777c', - 700: '#595f63', - 800: '#43474a', - 900: '#2c3032', - A100: '#ddddde', - A200: '#b9babb', - A400: '#7c7e7f', - A700: '#545759' - }, - qualitative: { - bold: { - 0: '#7F3C8D', - 1: '#11A579', - 2: '#3969AC', - 3: '#F2B701', - 4: '#E73F74', - 5: '#80BA5A', - 6: '#E68310', - 7: '#008695', - 8: '#CF1C90', - 9: '#f97b72', - 10: '#4b4b8f', - 11: '#A5AA99' - } - }, - shades: { - dark: { - 100: '#2c3032', // Neutral900 - 90: 'rgba(44, 48, 50, 0.9)', - 60: 'rgba(44, 48, 50, 0.6)', - 40: 'rgba(44, 48, 50, 0.4)', - 25: 'rgba(44, 48, 50, 0.25)', - 12: 'rgba(44, 48, 50, 0.12)', - 5: 'rgba(44, 48, 50, 0.05)' - }, - light: { - 100: '#fff', // White - 60: 'rgba(255, 255, 255, 0.6)', - 40: 'rgba(255, 255, 255, 0.4)', - 20: 'rgba(255, 255, 255, 0.2)', - 12: 'rgba(255, 255, 255, 0.12)', - 5: 'rgba(255, 255, 255, 0.05)' - } - } -}; - -const variables = { - palette: { - type: 'light', - common: { ...colors.common }, - primary: { - light: '#358be7', - main: '#036fe2', - dark: '#024d9e', - contrastText: colors.common.white, - relatedLight: 'rgba(3, 111, 226, 0.08)' - }, - secondary: { - light: '#6be2ad', - main: '#47db99', - dark: '#31996b', - contrastText: colors.common.black, - relatedLight: 'rgba(71, 219, 153, 0.08)' - }, - error: { - light: '#cd593b', - main: '#c1300b', - dark: '#872107', - contrastText: colors.common.white, - relatedDark: '#4d1304', - relatedLight: '#f9ebe7' - }, - warning: { - light: '#f4b134', - main: '#f29e02', - dark: '#a96e01', - contrastText: colors.common.black, - relatedDark: '#603f00', - relatedLight: '#fef6e6' - }, - info: { - light: '#34689f', - main: '#024388', - dark: '#012e5f', - contrastText: colors.common.white, - relatedDark: '#001a36', - relatedLight: '#e6edf4' - }, - success: { - light: '#8cb24a', - main: '#709f1d', - dark: '#4e6f14', - contrastText: colors.common.white, - relatedDark: '#2c3f0b', - relatedLight: '#f1f6e9' - }, - text: { - primary: colors.shades.dark[100], - secondary: colors.shades.dark[60], - hint: colors.shades.dark[40], - disabled: colors.shades.dark[25] - }, - background: { - default: colors.neutral[50], - paper: colors.common.white - }, - other: { - tooltip: colors.shades.dark[90], - snackbar: colors.shades.dark[100], - backdrop: colors.shades.dark[60], - divider: colors.shades.dark[12] - }, - grey: { - ...colors.neutral - }, - action: { - active: colors.shades.dark[40], - hover: colors.shades.dark[5], - hoverOpacity: 0.08, - selected: colors.shades.dark[12], - selectedOpacity: 0.08, - disabled: colors.shades.dark[25], - disabledBackground: colors.shades.dark[12], - disabledOpacity: 0.38, - focus: colors.shades.dark[12], - focusOpacity: 0.12, - activatedOpacity: 0.12 - }, - qualitative: { - ...colors.qualitative - } - }, - - typography: { - htmlFontSize: 16, - fontFamily: 'Montserrat, sans-serif', - fontSize: 16, - lineHeight: 1.5, - fontWeightLight: 300, - fontWeightRegular: 400, - fontWeightMedium: 500, - fontWeightBold: 600, - fontSmoothing: 'antialiased', - h1: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '6rem', - lineHeight: 1.084, - letterSpacing: '-0.016em', - fontSmoothing: 'antialiased' - }, - h2: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '4rem', - lineHeight: 1.125, - letterSpacing: '-0.008em', - fontSmoothing: 'antialiased' - }, - h3: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '3rem', - lineHeight: 1.167, - letterSpacing: '0em', - fontSmoothing: 'antialiased' - }, - h4: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '2.125rem', - lineHeight: 1.177, - letterSpacing: '0.007em', - fontSmoothing: 'antialiased' - }, - h5: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '1.5rem', - lineHeight: 1.334, - letterSpacing: '0em', - fontSmoothing: 'antialiased' - }, - h6: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '1.25rem', - lineHeight: 1.2, - letterSpacing: '0.007em', - fontSmoothing: 'antialiased' - }, - subtitle1: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '1rem', - lineHeight: 1.5, - letterSpacing: '0.009em', - fontSmoothing: 'antialiased' - }, - subtitle2: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 600, - fontSize: '0.875rem', - lineHeight: 1.715, - letterSpacing: '0.007em', - fontSmoothing: 'antialiased' - }, - body1: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 400, - fontSize: '1rem', - lineHeight: 1.5, - letterSpacing: '0.028em', - fontSmoothing: 'antialiased' - }, - body2: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 400, - fontSize: '0.875rem', - lineHeight: 1.429, - letterSpacing: '0.018em', - fontSmoothing: 'antialiased' - }, - button: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '0.875rem', - lineHeight: 1.715, - letterSpacing: '0.018em', - textTransform: 'inherit', - fontSmoothing: 'antialiased' - }, - caption: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 600, - fontSize: '0.75rem', - lineHeight: 1.334, - letterSpacing: '0.017em', - fontSmoothing: 'antialiased' - }, - overline: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 400, - fontSize: '0.625rem', - lineHeight: 1.6, - letterSpacing: '0.150em', - textTransform: 'uppercase', - fontSmoothing: 'antialiased' - }, - charts: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 400, - fontSize: 10, - lineHeight: 1.6, - letterSpacing: '0.150em', - fontSmoothing: 'antialiased' - } - }, - spacing: 8 -}; - -const spacing = createSpacing(variables.spacing); -const round = (value) => Math.round(value * 1e5) / 1e5; -const pxToRem = (size) => `${round(size / variables.typography.htmlFontSize)}rem`; - -variables.typography.pxToRem = pxToRem; -variables.typography.round = round; +import { themeComponentsOverrides, themeComponentsProps } from './sections/components'; +import { CssBaseline } from './sections/cssBaseline'; +import { themePalette } from './sections/palette'; +import { themeShadows } from './sections/shadows'; +import { themeTypography } from './sections/typography'; +import { SPACING } from './themeConstants'; export const cartoThemeOptions = { themeName: 'CARTO', @@ -319,62 +40,31 @@ export const cartoThemeOptions = { }, palette: { type: 'light', - common: { ...variables.palette.common }, - primary: { ...variables.palette.primary }, - secondary: { ...variables.palette.secondary }, - error: { ...variables.palette.error }, - warning: { ...variables.palette.warning }, - info: { ...variables.palette.info }, - success: { ...variables.palette.success }, contrastThreshold: 3, tonalOffset: 0.2, - text: { ...variables.palette.text }, - divider: 'rgba(0, 0, 0, 0.12)', - other: { ...variables.palette.other }, - background: { ...variables.palette.background }, - charts: { - axisLine: variables.palette.action.hover, - maxLabel: variables.palette.text.secondary, - disabled: variables.palette.text.disabled, - axisPointer: colors.shades.dark[40] - }, + common: { ...themePalette.common }, + primary: { ...themePalette.primary }, + secondary: { ...themePalette.secondary }, + error: { ...themePalette.error }, + warning: { ...themePalette.warning }, + info: { ...themePalette.info }, + success: { ...themePalette.success }, + text: { ...themePalette.text }, + other: { ...themePalette.other }, + divider: themePalette.other.divider, + background: { ...themePalette.background }, + charts: { ...themePalette.charts }, + grey: { ...themePalette.grey }, + action: { ...themePalette.action }, // props: Object => Research, /* Custom Colors palette */ - grey: { ...variables.palette.grey }, - action: { ...variables.palette.action }, - qualitative: { ...variables.palette.qualitative } + qualitative: { ...themePalette.qualitative } }, - shadows: [ - 'none', - '0px 2px 1px -1px rgba(0,0,0,0.16),0px 1px 1px 0px rgba(0,0,0,0.08),0px 1px 3px 0px rgba(0,0,0,0.04)', - '0px 3px 1px -2px rgba(0,0,0,0.16),0px 2px 2px 0px rgba(0,0,0,0.08),0px 1px 5px 0px rgba(0,0,0,0.04)', - '0px 3px 3px -2px rgba(0,0,0,0.16),0px 3px 4px 0px rgba(0,0,0,0.08),0px 1px 8px 0px rgba(0,0,0,0.04)', - '0px 2px 4px -1px rgba(0,0,0,0.16),0px 4px 5px 0px rgba(0,0,0,0.08),0px 1px 10px 0px rgba(0,0,0,0.04)', - '0px 3px 5px -1px rgba(0,0,0,0.16),0px 5px 8px 0px rgba(0,0,0,0.08),0px 1px 14px 0px rgba(0,0,0,0.04)', - '0px 3px 5px -1px rgba(0,0,0,0.16),0px 6px 10px 0px rgba(0,0,0,0.08),0px 1px 18px 0px rgba(0,0,0,0.04)', - '0px 4px 5px -2px rgba(0,0,0,0.16),0px 7px 10px 1px rgba(0,0,0,0.08),0px 2px 16px 1px rgba(0,0,0,0.04)', - '0px 5px 5px -3px rgba(0,0,0,0.16),0px 8px 10px 1px rgba(0,0,0,0.08),0px 3px 14px 2px rgba(0,0,0,0.04)', - '0px 5px 6px -3px rgba(0,0,0,0.16),0px 9px 12px 1px rgba(0,0,0,0.08),0px 3px 16px 2px rgba(0,0,0,0.04)', - '0px 6px 6px -3px rgba(0,0,0,0.16),0px 10px 14px 1px rgba(0,0,0,0.08),0px 4px 18px 3px rgba(0,0,0,0.04)', - '0px 6px 7px -4px rgba(0,0,0,0.16),0px 11px 15px 1px rgba(0,0,0,0.08),0px 4px 20px 3px rgba(0,0,0,0.04)', - '0px 7px 8px -4px rgba(0,0,0,0.16),0px 12px 17px 2px rgba(0,0,0,0.08),0px 5px 22px 4px rgba(0,0,0,0.04)', - '0px 7px 8px -4px rgba(0,0,0,0.16),0px 13px 19px 2px rgba(0,0,0,0.08),0px 5px 24px 4px rgba(0,0,0,0.04)', - '0px 7px 9px -4px rgba(0,0,0,0.16),0px 14px 21px 2px rgba(0,0,0,0.08),0px 5px 26px 4px rgba(0,0,0,0.04)', - '0px 8px 9px -5px rgba(0,0,0,0.16),0px 15px 22px 2px rgba(0,0,0,0.08),0px 6px 28px 5px rgba(0,0,0,0.04)', - '0px 8px 10px -5px rgba(0,0,0,0.16),0px 16px 24px 2px rgba(0,0,0,0.08),0px 6px 30px 5px rgba(0,0,0,0.04)', - '0px 8px 11px -5px rgba(0,0,0,0.16),0px 17px 26px 2px rgba(0,0,0,0.08),0px 6px 32px 5px rgba(0,0,0,0.04)', - '0px 9px 11px -5px rgba(0,0,0,0.16),0px 18px 28px 2px rgba(0,0,0,0.08),0px 7px 34px 6px rgba(0,0,0,0.04)', - '0px 9px 12px -6px rgba(0,0,0,0.16),0px 19px 29px 2px rgba(0,0,0,0.08),0px 7px 36px 6px rgba(0,0,0,0.04)', - '0px 10px 13px -6px rgba(0,0,0,0.16),0px 20px 31px 3px rgba(0,0,0,0.08),0px 8px 38px 7px rgba(0,0,0,0.04)', - '0px 10px 13px -6px rgba(0,0,0,0.16),0px 21px 33px 3px rgba(0,0,0,0.08),0px 8px 40px 7px rgba(0,0,0,0.04)', - '0px 10px 14px -6px rgba(0,0,0,0.16),0px 22px 35px 3px rgba(0,0,0,0.08),0px 8px 42px 7px rgba(0,0,0,0.04)', - '0px 11px 14px -7px rgba(0,0,0,0.16),0px 23px 36px 3px rgba(0,0,0,0.08),0px 9px 44px 8px rgba(0,0,0,0.04)', - '0px 11px 15px -7px rgba(0,0,0,0.16),0px 24px 38px 3px rgba(0,0,0,0.08),0px 9px 46px 8px rgba(0,0,0,0.04)' - ], + shadows: [...themeShadows], typography: { - ...variables.typography + ...themeTypography }, - spacing: variables.spacing, // For custom spacing: https://material-ui.com/customization/spacing/#custom-spacing + spacing: SPACING, // For custom spacing: https://material-ui.com/customization/spacing/#custom-spacing shape: { borderRadius: 4 }, @@ -408,1022 +98,11 @@ export const cartoThemeOptions = { }, overrides: { MuiCssBaseline: { - '@global': { - // Custom scrollbars - '*::-webkit-scrollbar': { - position: 'fixed', - width: '5px' - }, - '*::-webkit-scrollbar-track': { - '-webkit-box-shadow': 'none', - background: 'transparent' - }, - '*::-webkit-scrollbar-thumb': { - borderRadius: '3px', - background: variables.palette.action.focus, - outline: 'none' - }, - - // iOS Search clear button - 'input[type="search"]::-webkit-search-cancel-button': { - '-webkit-appearance': 'none', - height: spacing(2), - width: spacing(2), - display: 'block', - backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`, - backgroundRepeat: 'no-repeat', - backgroundSize: spacing(2) - }, - - // Mapbox controls - '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { - padding: spacing(0, 1), - borderRadius: spacing(0.5, 0, 0, 0), - - '& .mapboxgl-ctrl-attrib-inner': { - ...variables.typography.overline, - textTransform: 'none', - letterSpacing: '0.75px', - - '& a': { - color: variables.palette.primary.main - } - }, - - '&.mapboxgl-compact': { - backgroundColor: 'transparent', - right: spacing(0.5), - bottom: spacing(2.5), - - // Mobile - '@media (max-width: 600px)': { - bottom: spacing(0.5) - }, - - '& .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='${variables.palette.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-ctrl-attrib-inner': { - backgroundColor: 'rgba(255,255,255,.8)', - padding: spacing(0.5, 1), - borderRadius: spacing(1.5), - marginRight: spacing(2.5), - color: variables.palette.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: variables.palette.common.black, - - '&:not(:disabled):hover': { - backgroundColor: variables.palette.common.black - } - } - } - } - } - } - }, - - // Button - MuiButton: { - contained: { - boxShadow: 'none' - }, - outlined: { - border: `2px solid ${variables.palette.text.primary}`, - padding: '4px 14px', - '&:hover': { - borderWidth: '2px' - }, - '&$disabled': { - borderWidth: '2px' - } - }, - outlinedPrimary: { - border: `2px solid ${variables.palette.primary.main}`, - '&:hover': { - borderWidth: '2px' - } - }, - outlinedSecondary: { - border: `2px solid ${variables.palette.secondary.main}`, - '&:hover': { - borderWidth: '2px' - }, - '&$disabled': { - borderWidth: '2px' - } - }, - containedSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - outlinedSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - textSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - containedSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - containedSecondary: { - '&:hover': { - backgroundColor: variables.palette.secondary.light - } - }, - outlinedSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - textSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - startIcon: { - marginRight: 6, - marginLeft: -4, - '&$iconSizeSmall': { - marginLeft: -4 - }, - '&$iconSizeLarge': { - marginRight: 8 - } - }, - endIcon: { - marginRight: -4, - marginLeft: 6, - '&$iconSizeSmall': { - marginRight: -4 - }, - '&$iconSizeLarge': { - marginLeft: 8 - } - }, - iconSizeSmall: { - '& > *:first-child': { - fontSize: 20 - } - }, - iconSizeMedium: { - '& > *:first-child': { - fontSize: 24 - } - }, - iconSizeLarge: { - '& > *:first-child': { - fontSize: 24 - } - } - }, - MuiIconButton: { - root: { - padding: spacing(0.75), - borderRadius: spacing(0.5), - color: variables.palette.text.primary - }, - sizeSmall: { - padding: spacing(0.25) - } - }, - - MuiInputBase: { - root: { - '&$disabled .MuiInputAdornment-root': { - color: variables.palette.action.disabled - }, - '&$disabled .MuiTypography-root': { - color: variables.palette.action.disabled - } - } - }, - MuiOutlinedInput: { - root: { - '&$disabled': { - backgroundColor: variables.palette.action.hover - } - }, - - input: { - ...variables.typography.body1, - height: `${variables.typography.body1.lineHeight}em`, - padding: spacing(3, 2, 1) - }, - - inputMarginDense: { - ...variables.typography.body2, - height: `${variables.typography.body2.lineHeight}em`, - padding: spacing(1, 1.5), - paddingTop: spacing(1), - paddingBottom: spacing(1) - }, - - adornedStart: { - '&$marginDense': { - paddingLeft: spacing(1.5) - } - }, - adornedEnd: { - '&$marginDense': { - paddingRight: spacing(1.5) - } - }, - - notchedOutline: { - border: `2px solid ${variables.palette.text.disabled}` - }, - - multiline: { - padding: spacing(2.75, 2, 1.25) - } - }, - MuiInputLabel: { - root: { - ...variables.typography.body1 - }, - - formControl: { - transform: 'translate(16px, 20px) scale(1)', - - '&$shrink': { - ...variables.typography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&$marginDense': { - ...variables.typography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&$shrink': { - ...variables.typography.caption, - transform: 'translate(0, -20px) scale(1)' - } - } - }, - - outlined: { - '&$shrink': { - ...variables.typography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&$marginDense': { - ...variables.typography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&$shrink': { - transform: 'translate(0, -20px) scale(1)' - } - } - } + ...CssBaseline }, - MuiInputAdornment: { - root: { - ...variables.typography.body1, - alignItems: 'baseline', - marginBottom: spacing(1.5), - color: variables.palette.text.secondary, - - '&:disabled': { - color: variables.palette.action.disabled - }, - - '& .MuiSvgIcon-root': { - fontSize: `${variables.typography.body1.lineHeight}em` - } - }, - - positionStart: { - marginLeft: spacing(0.25) - }, - - positionEnd: { - marginRight: spacing(0.25) - }, - - marginDense: { - marginBottom: spacing(0), - alignItems: 'center', - ...variables.typography.body2, - - '& .MuiTypography-root': { - ...variables.typography.body2 - }, - - '& .MuiSvgIcon-root': { - fontSize: `${variables.typography.body2.lineHeight}em` - } - } - }, - MuiFormHelperText: { - root: { - ...variables.typography.caption, - '&$contained': { - marginTop: spacing(1) - } - }, - - marginDense: { - '&$contained': { - marginLeft: spacing(0) - } - } - }, - - // Select - MuiFormControl: { - root: { - width: '100%' - } - }, - MuiSelect: { - selectMenu: {}, - - root: { - '&:hover': { - backgroundColor: 'transparent' - } - }, - - select: { - '&:focus': { - backgroundColor: 'transparent' - } - } - }, - - // Menu - MuiMenuItem: { - root: { - ...variables.typography.body2 - } - }, - - // Autocomplete - MuiAutocomplete: { - inputRoot: { - '&[class*="MuiOutlinedInput-root"]': { - padding: spacing(3, 1.25, 0.5), - - '& .MuiAutocomplete-input': { - padding: spacing(0, 1.25, 0.5) - } - }, - '&.MuiInputBase-marginDense.MuiOutlinedInput-root $input.MuiOutlinedInput-inputMarginDense': - { - paddingTop: spacing(0.25), - paddingBottom: spacing(0.25) - } - } - }, - - // Checkbox - MuiCheckbox: { - root: { - ...variables.typography.body2, - padding: spacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...variables.typography.body2, - marginLeft: spacing(0.25), - color: variables.palette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: spacing(3) - } - } - }, - - // RadioButton - MuiRadio: { - root: { - ...variables.typography.body2, - padding: spacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...variables.typography.body2, - marginLeft: spacing(0.25), - color: variables.palette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: spacing(3) - } - } - }, - - // Tabs - MuiTabs: { - indicator: { - height: 4, - '&.colorPrimary': { - backgroundColor: variables.palette.text.primary - } - }, - - vertical: { - '& $indicator': { - width: 4 - }, - - '& .MuiTab-root': { - padding: spacing(0, 2), - - '& .MuiTab-wrapper': { - alignItems: 'flex-start' - } - } - } - }, - - // Tab - MuiTab: { - root: { - padding: spacing(0, 1), - marginRight: spacing(3), - minWidth: '56px!important', - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { - flexFlow: 'row', - alignItems: 'center' - }, - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { - marginRight: spacing(1), - marginBottom: 0 - } - }, - textColorPrimary: { - color: variables.palette.primary.main, - opacity: 1, - '&$selected': { - color: variables.palette.text.primary - }, - '&$disabled': { - color: variables.palette.action.disabled - } - } - }, - - MuiDivider: { - root: { - backgroundColor: variables.palette.other.divider - }, - light: { - backgroundColor: colors.shades.light[12] - } - }, - - // Switch - MuiSwitch: { - root: { - height: spacing(4.5), - width: spacing(6), - padding: spacing(1), - overflow: 'visible', - - '& + .MuiFormControlLabel-label': { - ...variables.typography.body2, - marginLeft: spacing(0.25), - color: variables.palette.text.primary - } - }, - - switchBase: { - padding: spacing(1.5), - borderRadius: '50%', - transform: 'translate(1px, 1px)', - color: variables.palette.text.secondary, - - '&$checked': { - '& input': { - left: spacing(-1.5) - }, - - transform: 'translate(13px, 1px)', - color: variables.palette.common.white, - - '& + $track': { - opacity: 1 - } - } - }, - - thumb: { - width: spacing(1.25), - height: spacing(1.25), - boxShadow: 'none' - }, - - input: { - width: spacing(6), - left: 0 - }, - - track: { - height: 'auto', - border: `2px solid ${variables.palette.text.secondary}`, - borderRadius: spacing(2), - opacity: 1, - backgroundColor: variables.palette.common.white - }, - - colorPrimary: { - '&$checked': { - color: variables.palette.common.white, - - '& + $track': { - backgroundColor: variables.palette.primary.main, - borderColor: 'transparent' - }, - - '&$disabled': { - color: variables.palette.grey[100], - - '& + $track': { - backgroundColor: variables.palette.text.disabled - } - } - }, - - '&$disabled': { - color: variables.palette.text.disabled, - - '& + $track': { - opacity: 1, - backgroundColor: variables.palette.common.white, - borderColor: variables.palette.text.disabled - } - } - }, - - colorSecondary: { - '&$checked': { - color: variables.palette.common.white, - - '& + $track': { - backgroundColor: variables.palette.secondary.main, - borderColor: 'transparent' - }, - - '&$disabled': { - color: variables.palette.grey[100], - - '& + $track': { - backgroundColor: variables.palette.text.disabled - } - } - }, - - '&$disabled': { - color: variables.palette.text.disabled, - - '& + $track': { - opacity: 1, - backgroundColor: variables.palette.common.white, - borderColor: variables.palette.text.disabled - } - } - }, - - sizeSmall: { - height: spacing(4.5), - width: spacing(6), - padding: spacing(1), - - '& $switchBase': { - padding: spacing(1.5), - transform: 'translate(0, 1px)', - - '&$checked': { - transform: 'translate(15px, 1px)' - } - }, - '& $thumb': { - width: spacing(1.25), - height: spacing(1.25) - } - } - }, - - // Breadcrumbs - MuiBreadcrumbs: { - li: { - '& .MuiTypography-root': { - ...variables.typography.body2, - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - }, - '& .MuiSvgIcon-root': { - fontSize: `${variables.typography.body2.lineHeight}em`, - marginRight: spacing(1) - } - }, - - separator: { - marginLeft: spacing(0.5), - marginRight: spacing(0.5) - } - }, - - // Lists - MuiList: { - root: { - // Indent sublevels, ugly but needed to avoid issues with hover - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: spacing(4) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: spacing(6) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: spacing(8) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: spacing(10) - } - } - } - } - } - } - }, - - MuiListItemIcon: { - root: { - minWidth: spacing(5.75), - marginLeft: spacing(0.75), - - '& .MuiSvgIcon-root': { - fontSize: spacing(3) - } - } - }, - - MuiListItemAvatar: { - root: { - '& .MuiAvatar-root': { - height: spacing(4.5), - width: spacing(4.5) - }, - '& .MuiSvgIcon-root': { - fontSize: spacing(2.5) - } - } - }, - - // Tooltip - MuiTooltip: { - tooltip: { - ...variables.typography.caption, - backgroundColor: variables.palette.other.tooltip - }, - - arrow: { - color: variables.palette.other.tooltip - } - }, - - // Dialog - MuiDialogTitle: { - root: { - padding: spacing(3, 3, 2) - } - }, - - MuiDialogContent: { - root: { - '& .MuiFormGroup-root': { - padding: spacing(1, 0) - } - } - }, - - // Slider - MuiSlider: { - root: {} - }, - - // MuiToggleButtonGroup - MuiToggleButtonGroup: { - groupedHorizontal: { - '&:not(:last-child)': { - marginRight: spacing(0.25), - borderTopRightRadius: spacing(0.5), - borderBottomRightRadius: spacing(0.5) - }, - '&:not(:first-child)': { - marginLeft: 0, - borderLeft: 'none', - borderTopLeftRadius: spacing(0.5), - borderBottomLeftRadius: spacing(0.5) - } - }, - groupedVertical: { - '&:not(:last-child)': { - marginBottom: spacing(0.25), - borderBottomLeftRadius: spacing(0.5), - borderBottomRightRadius: spacing(0.5) - }, - '&:not(:first-child)': { - borderTopLeftRadius: spacing(0.5), - borderTopRightRadius: spacing(0.5) - } - } - }, - - MuiTablePagination: { - select: { - paddingRight: spacing(7.5), - paddingLeft: spacing(1.5) - }, - input: { - height: spacing(4), - border: `2px solid ${variables.palette.other.divider}`, - borderRadius: spacing(0.5), - fontWeight: variables.typography.fontWeightMedium, - '& .MuiSelect-icon': { - top: '50%', - transform: 'translateY(-50%)', - width: spacing(2.25), - height: spacing(2.25), - right: spacing(0.75) - } - }, - caption: { - ...variables.typography.caption, - '&:first-of-type': { - color: variables.palette.text.secondary - } - }, - toolbar: { - minHeight: 0, - marginTop: spacing(1) - }, - actions: { - '& button:last-child': { - marginLeft: spacing(2) - } - } - }, - - MuiTableCell: { - head: { - ...variables.typography.caption, - color: variables.palette.text.secondary - }, - stickyHeader: { - backgroundColor: variables.palette.common.white - } - }, - - // MuiToggleButton - MuiToggleButton: { - root: { - width: spacing(4.5), - height: spacing(4.5), - border: 'none', - borderRadius: spacing(0.5), - color: variables.palette.grey[500], - '&$selected': { - color: variables.palette.primary.main, - backgroundColor: variables.palette.primary.relatedLight, - '&:hover': { - backgroundColor: variables.palette.primary.relatedLight - } - } - }, - sizeSmall: { - width: spacing(3), - height: spacing(3), - '& .MuiSvgIcon-root': { - maxWidth: spacing(2.5), - maxHeight: spacing(2.5) - } - }, - sizeLarge: { - width: spacing(7), - height: spacing(7) - } - }, - - MuiChip: { - root: { - backgroundColor: variables.palette.grey[100], - '&:hover': { - backgroundColor: variables.palette.grey[200] - }, - '& .MuiAvatar-root': { - backgroundColor: '#7f3c8d', - color: variables.palette.common.white - } - }, - colorPrimary: { - '&$disabled': { - backgroundColor: variables.palette.grey[100], - color: variables.palette.text.primary - }, - '&:hover': { - backgroundColor: variables.palette.primary.dark - } - }, - colorSecondary: { - '&$disabled': { - backgroundColor: variables.palette.grey[100] - }, - '&:hover': { - backgroundColor: variables.palette.secondary.light - } - }, - label: { - fontFamily: '"Open Sans", sans-serif', - letterSpacing: 0.25 - }, - labelSmall: { - fontSize: variables.typography.caption.fontSize, - fontWeight: variables.typography.fontWeightLight - }, - outlined: { - transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, - '&$disabled': { - backgroundColor: 'transparent' - }, - '&:hover': { - backgroundColor: 'transparent', - borderColor: variables.palette.grey[200], - '&$clickable': { - backgroundColor: 'transparent' - } - } - }, - outlinedPrimary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: variables.palette.primary.dark, - color: variables.palette.primary.dark, - '&$clickable': { - backgroundColor: 'transparent' - } - } - }, - outlinedSecondary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: variables.palette.secondary.dark, - color: variables.palette.secondary.dark, - '&$clickable': { - backgroundColor: 'transparent' - } - } - }, - clickable: { - '&:focus': { - webkitTapHighlightColor: 'none' - } - } - } + ...themeComponentsOverrides }, // Props - props: { - MuiButtonBase: { - disableRipple: true - }, - MuiButton: { - disableElevation: true - }, - MuiTextField: { - variant: 'outlined' - }, - MuiSelect: { - variant: 'outlined', - MenuProps: { - getContentAnchorEl: null, - anchorOrigin: { - vertical: 'bottom', - horizontal: 'left' - } - } - }, - MuiOutlinedInput: { - notched: false - }, - MuiCheckbox: { - size: 'small', - color: 'primary' - }, - MuiRadio: { - size: 'small', - color: 'primary' - }, - MuiSwitch: { - color: 'primary' - }, - MuiInputAdornment: { - disableTypography: true - }, - MuiListItemText: { - primaryTypographyProps: { - variant: 'body2', - style: { fontWeight: variables.typography.fontWeightBold }, - noWrap: true - }, - secondaryTypographyProps: { variant: 'caption' } - }, - MuiSkeleton: { - animation: 'wave' - }, - MuiTabs: { - indicatorColor: 'primary', - textColor: 'primary', - TabIndicatorProps: { - classes: { - colorPrimary: 'colorPrimary' - } - } - }, - MuiTypography: { - color: 'textPrimary' - }, - MuiDialogContentText: { - variant: 'body2' - }, - MuiToggleButtonGroup: { - orientation: 'horizontal', - exclusive: true - }, - CircularProgress: { - size: 40, - thickness: 4 - }, - MuiSlider: { - color: 'primary', - marks: false - }, - MuiDialog: { - maxWidth: 'md' - } - } + props: { ...themeComponentsProps } }; - -export function createTheme(options = {}) { - const themeOptions = { - ...cartoThemeOptions, - ...options, - components: { - MuiToggleButton: { - root: { - border: 'none' - } - } - } - }; - - let theme = createMuiTheme(themeOptions); - - theme = responsiveFontSizes(theme, { - breakpoints: themeOptions.breakpoints.keys, - disableAlign: false, - factor: 2, - variants: [ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle1', - 'subtitle2', - 'body1', - 'body2', - 'button', - 'caption', - 'overline' - ] - }); - - return theme; -} diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js new file mode 100644 index 000000000..6f4880fec --- /dev/null +++ b/packages/react-ui/src/theme/sections/components.js @@ -0,0 +1,902 @@ +import { spacing } from '../themeUtils'; +import { baseColors, themePalette } from './palette'; +import { themeTypography } from './typography'; + +const round = (value) => Math.round(value * 1e5) / 1e5; +const pxToRem = (size) => `${round(size / themeTypography.htmlFontSize)}rem`; + +themeTypography.pxToRem = pxToRem; +themeTypography.round = round; + +export const themeComponentsOverrides = { + // Button + MuiButton: { + contained: { + boxShadow: 'none' + }, + outlined: { + border: `2px solid ${themePalette.text.primary}`, + padding: '4px 14px', + '&:hover': { + borderWidth: '2px' + }, + '&$disabled': { + borderWidth: '2px' + } + }, + outlinedPrimary: { + border: `2px solid ${themePalette.primary.main}`, + '&:hover': { + borderWidth: '2px' + } + }, + outlinedSecondary: { + border: `2px solid ${themePalette.secondary.main}`, + '&:hover': { + borderWidth: '2px' + }, + '&$disabled': { + borderWidth: '2px' + } + }, + containedSizeSmall: { + padding: '2px 12px', + fontSize: pxToRem(12) + }, + outlinedSizeSmall: { + padding: '2px 12px', + fontSize: pxToRem(12) + }, + textSizeSmall: { + padding: '2px 12px', + fontSize: pxToRem(12) + }, + containedSizeLarge: { + padding: '16px 24px', + fontSize: pxToRem(16) + }, + containedSecondary: { + '&:hover': { + backgroundColor: themePalette.secondary.light + } + }, + outlinedSizeLarge: { + padding: '16px 24px', + fontSize: pxToRem(16) + }, + textSizeLarge: { + padding: '16px 24px', + fontSize: pxToRem(16) + }, + startIcon: { + marginRight: 6, + marginLeft: -4, + '&$iconSizeSmall': { + marginLeft: -4 + }, + '&$iconSizeLarge': { + marginRight: 8 + } + }, + endIcon: { + marginRight: -4, + marginLeft: 6, + '&$iconSizeSmall': { + marginRight: -4 + }, + '&$iconSizeLarge': { + marginLeft: 8 + } + }, + iconSizeSmall: { + '& > *:first-child': { + fontSize: 20 + } + }, + iconSizeMedium: { + '& > *:first-child': { + fontSize: 24 + } + }, + iconSizeLarge: { + '& > *:first-child': { + fontSize: 24 + } + } + }, + MuiIconButton: { + root: { + padding: spacing(0.75), + borderRadius: spacing(0.5), + color: themePalette.text.primary + }, + sizeSmall: { + padding: spacing(0.25) + } + }, + + MuiInputBase: { + root: { + '&$disabled .MuiInputAdornment-root': { + color: themePalette.action.disabled + }, + '&$disabled .MuiTypography-root': { + color: themePalette.action.disabled + } + } + }, + MuiOutlinedInput: { + root: { + '&$disabled': { + backgroundColor: themePalette.action.hover + } + }, + + input: { + ...themeTypography.body1, + height: `${themeTypography.body1.lineHeight}em`, + padding: spacing(3, 2, 1) + }, + + inputMarginDense: { + ...themeTypography.body2, + height: `${themeTypography.body2.lineHeight}em`, + padding: spacing(1, 1.5), + paddingTop: spacing(1), + paddingBottom: spacing(1) + }, + + adornedStart: { + '&$marginDense': { + paddingLeft: spacing(1.5) + } + }, + adornedEnd: { + '&$marginDense': { + paddingRight: spacing(1.5) + } + }, + + notchedOutline: { + border: `2px solid ${themePalette.text.disabled}` + }, + + multiline: { + padding: spacing(2.75, 2, 1.25) + } + }, + MuiInputLabel: { + root: { + ...themeTypography.body1 + }, + + formControl: { + transform: 'translate(16px, 20px) scale(1)', + + '&$shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&$marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&$shrink': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)' + } + } + }, + + outlined: { + '&$shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&$marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&$shrink': { + transform: 'translate(0, -20px) scale(1)' + } + } + } + }, + MuiInputAdornment: { + root: { + ...themeTypography.body1, + alignItems: 'baseline', + marginBottom: spacing(1.5), + color: themePalette.text.secondary, + + '&:disabled': { + color: themePalette.action.disabled + }, + + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body1.lineHeight}em` + } + }, + + positionStart: { + marginLeft: spacing(0.25) + }, + + positionEnd: { + marginRight: spacing(0.25) + }, + + marginDense: { + marginBottom: spacing(0), + alignItems: 'center', + ...themeTypography.body2, + + '& .MuiTypography-root': { + ...themeTypography.body2 + }, + + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body2.lineHeight}em` + } + } + }, + MuiFormHelperText: { + root: { + ...themeTypography.caption, + '&$contained': { + marginTop: spacing(1) + } + }, + + marginDense: { + '&$contained': { + marginLeft: spacing(0) + } + } + }, + + // Select + MuiFormControl: { + root: { + width: '100%' + } + }, + MuiSelect: { + selectMenu: {}, + + root: { + '&:hover': { + backgroundColor: 'transparent' + } + }, + + select: { + '&:focus': { + backgroundColor: 'transparent' + } + } + }, + + // Menu + MuiMenuItem: { + root: { + ...themeTypography.body2 + } + }, + + // Autocomplete + MuiAutocomplete: { + inputRoot: { + '&[class*="MuiOutlinedInput-root"]': { + padding: spacing(3, 1.25, 0.5), + + '& .MuiAutocomplete-input': { + padding: spacing(0, 1.25, 0.5) + } + }, + '&.MuiInputBase-marginDense.MuiOutlinedInput-root $input.MuiOutlinedInput-inputMarginDense': + { + paddingTop: spacing(0.25), + paddingBottom: spacing(0.25) + } + } + }, + + // Checkbox + MuiCheckbox: { + root: { + ...themeTypography.body2, + padding: spacing(0.75), + borderRadius: '50%', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: spacing(0.25), + color: themePalette.text.primary + }, + + '& .MuiSvgIcon-root': { + fontSize: spacing(3) + } + } + }, + + // RadioButton + MuiRadio: { + root: { + ...themeTypography.body2, + padding: spacing(0.75), + borderRadius: '50%', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: spacing(0.25), + color: themePalette.text.primary + }, + + '& .MuiSvgIcon-root': { + fontSize: spacing(3) + } + } + }, + + // Tabs + MuiTabs: { + indicator: { + height: 4, + '&.colorPrimary': { + backgroundColor: themePalette.text.primary + } + }, + + vertical: { + '& $indicator': { + width: 4 + }, + + '& .MuiTab-root': { + padding: spacing(0, 2), + + '& .MuiTab-wrapper': { + alignItems: 'flex-start' + } + } + } + }, + + // Tab + MuiTab: { + root: { + padding: spacing(0, 1), + marginRight: spacing(3), + minWidth: '56px!important', + '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { + flexFlow: 'row', + alignItems: 'center' + }, + '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { + marginRight: spacing(1), + marginBottom: 0 + } + }, + textColorPrimary: { + color: themePalette.primary.main, + opacity: 1, + '&$selected': { + color: themePalette.text.primary + }, + '&$disabled': { + color: themePalette.action.disabled + } + } + }, + + MuiDivider: { + root: { + backgroundColor: themePalette.other.divider + }, + light: { + backgroundColor: baseColors.shades.light[12] + } + }, + + // Switch + MuiSwitch: { + root: { + height: spacing(4.5), + width: spacing(6), + padding: spacing(1), + overflow: 'visible', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: spacing(0.25), + color: themePalette.text.primary + } + }, + + switchBase: { + padding: spacing(1.5), + borderRadius: '50%', + transform: 'translate(1px, 1px)', + color: themePalette.text.secondary, + + '&$checked': { + '& input': { + left: spacing(-1.5) + }, + + transform: 'translate(13px, 1px)', + color: themePalette.common.white, + + '& + $track': { + opacity: 1 + } + } + }, + + thumb: { + width: spacing(1.25), + height: spacing(1.25), + boxShadow: 'none' + }, + + input: { + width: spacing(6), + left: 0 + }, + + track: { + height: 'auto', + border: `2px solid ${themePalette.text.secondary}`, + borderRadius: spacing(2), + opacity: 1, + backgroundColor: themePalette.common.white + }, + + colorPrimary: { + '&$checked': { + color: themePalette.common.white, + + '& + $track': { + backgroundColor: themePalette.primary.main, + borderColor: 'transparent' + }, + + '&$disabled': { + color: themePalette.grey[100], + + '& + $track': { + backgroundColor: themePalette.text.disabled + } + } + }, + + '&$disabled': { + color: themePalette.text.disabled, + + '& + $track': { + opacity: 1, + backgroundColor: themePalette.common.white, + borderColor: themePalette.text.disabled + } + } + }, + + colorSecondary: { + '&$checked': { + color: themePalette.common.white, + + '& + $track': { + backgroundColor: themePalette.secondary.main, + borderColor: 'transparent' + }, + + '&$disabled': { + color: themePalette.grey[100], + + '& + $track': { + backgroundColor: themePalette.text.disabled + } + } + }, + + '&$disabled': { + color: themePalette.text.disabled, + + '& + $track': { + opacity: 1, + backgroundColor: themePalette.common.white, + borderColor: themePalette.text.disabled + } + } + }, + + sizeSmall: { + height: spacing(4.5), + width: spacing(6), + padding: spacing(1), + + '& $switchBase': { + padding: spacing(1.5), + transform: 'translate(0, 1px)', + + '&$checked': { + transform: 'translate(15px, 1px)' + } + }, + '& $thumb': { + width: spacing(1.25), + height: spacing(1.25) + } + } + }, + + // Breadcrumbs + MuiBreadcrumbs: { + li: { + '& .MuiTypography-root': { + ...themeTypography.body2, + display: 'flex', + flexDirection: 'row', + alignItems: 'center' + }, + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body2.lineHeight}em`, + marginRight: spacing(1) + } + }, + + separator: { + marginLeft: spacing(0.5), + marginRight: spacing(0.5) + } + }, + + // Lists + MuiList: { + root: { + // Indent sublevels, ugly but needed to avoid issues with hover + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: spacing(4) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: spacing(6) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: spacing(8) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: spacing(10) + } + } + } + } + } + } + }, + + MuiListItemIcon: { + root: { + minWidth: spacing(5.75), + marginLeft: spacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: spacing(3) + } + } + }, + + MuiListItemAvatar: { + root: { + '& .MuiAvatar-root': { + height: spacing(4.5), + width: spacing(4.5) + }, + '& .MuiSvgIcon-root': { + fontSize: spacing(2.5) + } + } + }, + + // Tooltip + MuiTooltip: { + tooltip: { + ...themeTypography.caption, + backgroundColor: themePalette.other.tooltip + }, + + arrow: { + color: themePalette.other.tooltip + } + }, + + // Dialog + MuiDialogTitle: { + root: { + padding: spacing(3, 3, 2) + } + }, + + MuiDialogContent: { + root: { + '& .MuiFormGroup-root': { + padding: spacing(1, 0) + } + } + }, + + // Slider + MuiSlider: { + root: {} + }, + + // MuiToggleButtonGroup + MuiToggleButtonGroup: { + groupedHorizontal: { + '&:not(:last-child)': { + marginRight: spacing(0.25), + borderTopRightRadius: spacing(0.5), + borderBottomRightRadius: spacing(0.5) + }, + '&:not(:first-child)': { + marginLeft: 0, + borderLeft: 'none', + borderTopLeftRadius: spacing(0.5), + borderBottomLeftRadius: spacing(0.5) + } + }, + groupedVertical: { + '&:not(:last-child)': { + marginBottom: spacing(0.25), + borderBottomLeftRadius: spacing(0.5), + borderBottomRightRadius: spacing(0.5) + }, + '&:not(:first-child)': { + borderTopLeftRadius: spacing(0.5), + borderTopRightRadius: spacing(0.5) + } + } + }, + + MuiTablePagination: { + select: { + paddingRight: spacing(7.5), + paddingLeft: spacing(1.5) + }, + input: { + height: spacing(4), + border: `2px solid ${themePalette.other.divider}`, + borderRadius: spacing(0.5), + fontWeight: themeTypography.fontWeightMedium, + '& .MuiSelect-icon': { + top: '50%', + transform: 'translateY(-50%)', + width: spacing(2.25), + height: spacing(2.25), + right: spacing(0.75) + } + }, + caption: { + ...themeTypography.caption, + '&:first-of-type': { + color: themePalette.text.secondary + } + }, + toolbar: { + minHeight: 0, + marginTop: spacing(1) + }, + actions: { + '& button:last-child': { + marginLeft: spacing(2) + } + } + }, + + MuiTableCell: { + head: { + ...themeTypography.caption, + color: themePalette.text.secondary + }, + stickyHeader: { + backgroundColor: themePalette.common.white + } + }, + + // MuiToggleButton + MuiToggleButton: { + root: { + width: spacing(4.5), + height: spacing(4.5), + border: 'none', + borderRadius: spacing(0.5), + color: themePalette.grey[500], + '&$selected': { + color: themePalette.primary.main, + backgroundColor: themePalette.primary.relatedLight, + '&:hover': { + backgroundColor: themePalette.primary.relatedLight + } + } + }, + sizeSmall: { + width: spacing(3), + height: spacing(3), + '& .MuiSvgIcon-root': { + maxWidth: spacing(2.5), + maxHeight: spacing(2.5) + } + }, + sizeLarge: { + width: spacing(7), + height: spacing(7) + } + }, + + MuiChip: { + root: { + backgroundColor: themePalette.grey[100], + '&:hover': { + backgroundColor: themePalette.grey[200] + }, + '& .MuiAvatar-root': { + backgroundColor: '#7f3c8d', + color: themePalette.common.white + } + }, + colorPrimary: { + '&$disabled': { + backgroundColor: themePalette.grey[100], + color: themePalette.text.primary + }, + '&:hover': { + backgroundColor: themePalette.primary.dark + } + }, + colorSecondary: { + '&$disabled': { + backgroundColor: themePalette.grey[100] + }, + '&:hover': { + backgroundColor: themePalette.secondary.light + } + }, + label: { + fontFamily: '"Open Sans", sans-serif', + letterSpacing: 0.25 + }, + labelSmall: { + fontSize: themeTypography.caption.fontSize, + fontWeight: themeTypography.fontWeightLight + }, + outlined: { + transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + '&$disabled': { + backgroundColor: 'transparent' + }, + '&:hover': { + backgroundColor: 'transparent', + borderColor: themePalette.grey[200], + '&$clickable': { + backgroundColor: 'transparent' + } + } + }, + outlinedPrimary: { + '&:hover': { + backgroundColor: 'transparent', + borderColor: themePalette.primary.dark, + color: themePalette.primary.dark, + '&$clickable': { + backgroundColor: 'transparent' + } + } + }, + outlinedSecondary: { + '&:hover': { + backgroundColor: 'transparent', + borderColor: themePalette.secondary.dark, + color: themePalette.secondary.dark, + '&$clickable': { + backgroundColor: 'transparent' + } + } + }, + clickable: { + '&:focus': { + webkitTapHighlightColor: 'none' + } + } + } +}; + +export const themeComponentsProps = { + MuiButtonBase: { + disableRipple: true + }, + MuiButton: { + disableElevation: true + }, + MuiTextField: { + variant: 'outlined' + }, + MuiSelect: { + variant: 'outlined', + MenuProps: { + getContentAnchorEl: null, + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left' + } + } + }, + MuiOutlinedInput: { + notched: false + }, + MuiCheckbox: { + size: 'small', + color: 'primary' + }, + MuiRadio: { + size: 'small', + color: 'primary' + }, + MuiSwitch: { + color: 'primary' + }, + MuiInputAdornment: { + disableTypography: true + }, + MuiListItemText: { + primaryTypographyProps: { + variant: 'body2', + style: { fontWeight: themeTypography.fontWeightBold }, + noWrap: true + }, + secondaryTypographyProps: { variant: 'caption' } + }, + MuiSkeleton: { + animation: 'wave' + }, + MuiTabs: { + indicatorColor: 'primary', + textColor: 'primary', + TabIndicatorProps: { + classes: { + colorPrimary: 'colorPrimary' + } + } + }, + MuiTypography: { + color: 'textPrimary' + }, + MuiDialogContentText: { + variant: 'body2' + }, + MuiToggleButtonGroup: { + orientation: 'horizontal', + exclusive: true + }, + CircularProgress: { + size: 40, + thickness: 4 + }, + MuiSlider: { + color: 'primary', + marks: false + }, + MuiDialog: { + maxWidth: 'md' + } +}; diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js new file mode 100644 index 000000000..aab38d7ff --- /dev/null +++ b/packages/react-ui/src/theme/sections/cssBaseline.js @@ -0,0 +1,91 @@ +import { spacing } from '../themeUtils'; +import { themePalette } 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: themePalette.action.focus, + outline: 'none' + }, + + // iOS Search clear button + 'input[type="search"]::-webkit-search-cancel-button': { + '-webkit-appearance': 'none', + height: spacing(2), + width: spacing(2), + display: 'block', + backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`, + backgroundRepeat: 'no-repeat', + backgroundSize: spacing(2) + }, + + // Mapbox controls + '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { + padding: spacing(0, 1), + borderRadius: spacing(0.5, 0, 0, 0), + + '& .mapboxgl-ctrl-attrib-inner': { + ...themeTypography.overline, + textTransform: 'none', + letterSpacing: '0.75px', + + '& a': { + color: themePalette.primary.main + } + }, + + '&.mapboxgl-compact': { + backgroundColor: 'transparent', + right: spacing(0.5), + bottom: spacing(2.5), + + // Mobile + '@media (max-width: 600px)': { + bottom: spacing(0.5) + }, + + '& .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='${themePalette.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-ctrl-attrib-inner': { + backgroundColor: 'rgba(255,255,255,.8)', + padding: spacing(0.5, 1), + borderRadius: spacing(1.5), + marginRight: spacing(2.5), + color: themePalette.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: themePalette.common.black, + + '&:not(:disabled):hover': { + backgroundColor: themePalette.common.black + } + } + } + } + } + } +}; diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js new file mode 100644 index 000000000..31096d240 --- /dev/null +++ b/packages/react-ui/src/theme/sections/palette.js @@ -0,0 +1,148 @@ +export const baseColors = { + common: { + black: '#2c3032', + white: '#fff' + }, + neutral: { + 50: '#f8f9f9', + 100: '#e1e3e4', + 200: '#cbcdcf', + 300: '#b4b8ba', + 400: '#9da2a6', + 500: '#868d91', + 600: '#6f777c', + 700: '#595f63', + 800: '#43474a', + 900: '#2c3032', + A100: '#ddddde', + A200: '#b9babb', + A400: '#7c7e7f', + A700: '#545759' + }, + qualitative: { + bold: { + 0: '#7F3C8D', + 1: '#11A579', + 2: '#3969AC', + 3: '#F2B701', + 4: '#E73F74', + 5: '#80BA5A', + 6: '#E68310', + 7: '#008695', + 8: '#CF1C90', + 9: '#f97b72', + 10: '#4b4b8f', + 11: '#A5AA99' + } + }, + shades: { + dark: { + 100: '#2c3032', // Neutral900 + 90: 'rgba(44, 48, 50, 0.9)', + 60: 'rgba(44, 48, 50, 0.6)', + 40: 'rgba(44, 48, 50, 0.4)', + 25: 'rgba(44, 48, 50, 0.25)', + 12: 'rgba(44, 48, 50, 0.12)', + 5: 'rgba(44, 48, 50, 0.05)' + }, + light: { + 100: '#fff', // White + 60: 'rgba(255, 255, 255, 0.6)', + 40: 'rgba(255, 255, 255, 0.4)', + 20: 'rgba(255, 255, 255, 0.2)', + 12: 'rgba(255, 255, 255, 0.12)', + 5: 'rgba(255, 255, 255, 0.05)' + } + } +}; + +export const themePalette = { + common: { ...baseColors.common }, + primary: { + light: '#358be7', + main: '#036fe2', + dark: '#024d9e', + contrastText: baseColors.common.white, + relatedLight: 'rgba(3, 111, 226, 0.08)' + }, + secondary: { + light: '#6be2ad', + main: '#47db99', + dark: '#31996b', + contrastText: baseColors.common.black, + relatedLight: 'rgba(71, 219, 153, 0.08)' + }, + error: { + light: '#cd593b', + main: '#c1300b', + dark: '#872107', + contrastText: baseColors.common.white, + relatedDark: '#4d1304', + relatedLight: '#f9ebe7' + }, + warning: { + light: '#f4b134', + main: '#f29e02', + dark: '#a96e01', + contrastText: baseColors.common.black, + relatedDark: '#603f00', + relatedLight: '#fef6e6' + }, + info: { + light: '#34689f', + main: '#024388', + dark: '#012e5f', + contrastText: baseColors.common.white, + relatedDark: '#001a36', + relatedLight: '#e6edf4' + }, + success: { + light: '#8cb24a', + main: '#709f1d', + dark: '#4e6f14', + contrastText: baseColors.common.white, + relatedDark: '#2c3f0b', + relatedLight: '#f1f6e9' + }, + text: { + primary: baseColors.shades.dark[100], + secondary: baseColors.shades.dark[60], + hint: baseColors.shades.dark[40], + disabled: baseColors.shades.dark[25] + }, + background: { + default: baseColors.neutral[50], + paper: baseColors.common.white + }, + other: { + tooltip: baseColors.shades.dark[90], + snackbar: baseColors.shades.dark[100], + backdrop: baseColors.shades.dark[60], + divider: baseColors.shades.dark[12] + }, + grey: { + ...baseColors.neutral + }, + action: { + active: baseColors.shades.dark[40], + hover: baseColors.shades.dark[5], + hoverOpacity: 0.08, + selected: baseColors.shades.dark[12], + selectedOpacity: 0.08, + disabled: baseColors.shades.dark[25], + disabledBackground: baseColors.shades.dark[12], + disabledOpacity: 0.38, + focus: baseColors.shades.dark[12], + focusOpacity: 0.12, + activatedOpacity: 0.12 + }, + qualitative: { + ...baseColors.qualitative + }, + charts: { + axisLine: baseColors.shades.dark[5], + maxLabel: baseColors.shades.dark[60], + disabled: baseColors.shades.dark[25], + axisPointer: baseColors.shades.dark[40] + } +}; diff --git a/packages/react-ui/src/theme/sections/shadows.js b/packages/react-ui/src/theme/sections/shadows.js new file mode 100644 index 000000000..de331b86f --- /dev/null +++ b/packages/react-ui/src/theme/sections/shadows.js @@ -0,0 +1,27 @@ +export const themeShadows = [ + 'none', + '0px 2px 1px -1px rgba(0,0,0,0.16),0px 1px 1px 0px rgba(0,0,0,0.08),0px 1px 3px 0px rgba(0,0,0,0.04)', + '0px 3px 1px -2px rgba(0,0,0,0.16),0px 2px 2px 0px rgba(0,0,0,0.08),0px 1px 5px 0px rgba(0,0,0,0.04)', + '0px 3px 3px -2px rgba(0,0,0,0.16),0px 3px 4px 0px rgba(0,0,0,0.08),0px 1px 8px 0px rgba(0,0,0,0.04)', + '0px 2px 4px -1px rgba(0,0,0,0.16),0px 4px 5px 0px rgba(0,0,0,0.08),0px 1px 10px 0px rgba(0,0,0,0.04)', + '0px 3px 5px -1px rgba(0,0,0,0.16),0px 5px 8px 0px rgba(0,0,0,0.08),0px 1px 14px 0px rgba(0,0,0,0.04)', + '0px 3px 5px -1px rgba(0,0,0,0.16),0px 6px 10px 0px rgba(0,0,0,0.08),0px 1px 18px 0px rgba(0,0,0,0.04)', + '0px 4px 5px -2px rgba(0,0,0,0.16),0px 7px 10px 1px rgba(0,0,0,0.08),0px 2px 16px 1px rgba(0,0,0,0.04)', + '0px 5px 5px -3px rgba(0,0,0,0.16),0px 8px 10px 1px rgba(0,0,0,0.08),0px 3px 14px 2px rgba(0,0,0,0.04)', + '0px 5px 6px -3px rgba(0,0,0,0.16),0px 9px 12px 1px rgba(0,0,0,0.08),0px 3px 16px 2px rgba(0,0,0,0.04)', + '0px 6px 6px -3px rgba(0,0,0,0.16),0px 10px 14px 1px rgba(0,0,0,0.08),0px 4px 18px 3px rgba(0,0,0,0.04)', + '0px 6px 7px -4px rgba(0,0,0,0.16),0px 11px 15px 1px rgba(0,0,0,0.08),0px 4px 20px 3px rgba(0,0,0,0.04)', + '0px 7px 8px -4px rgba(0,0,0,0.16),0px 12px 17px 2px rgba(0,0,0,0.08),0px 5px 22px 4px rgba(0,0,0,0.04)', + '0px 7px 8px -4px rgba(0,0,0,0.16),0px 13px 19px 2px rgba(0,0,0,0.08),0px 5px 24px 4px rgba(0,0,0,0.04)', + '0px 7px 9px -4px rgba(0,0,0,0.16),0px 14px 21px 2px rgba(0,0,0,0.08),0px 5px 26px 4px rgba(0,0,0,0.04)', + '0px 8px 9px -5px rgba(0,0,0,0.16),0px 15px 22px 2px rgba(0,0,0,0.08),0px 6px 28px 5px rgba(0,0,0,0.04)', + '0px 8px 10px -5px rgba(0,0,0,0.16),0px 16px 24px 2px rgba(0,0,0,0.08),0px 6px 30px 5px rgba(0,0,0,0.04)', + '0px 8px 11px -5px rgba(0,0,0,0.16),0px 17px 26px 2px rgba(0,0,0,0.08),0px 6px 32px 5px rgba(0,0,0,0.04)', + '0px 9px 11px -5px rgba(0,0,0,0.16),0px 18px 28px 2px rgba(0,0,0,0.08),0px 7px 34px 6px rgba(0,0,0,0.04)', + '0px 9px 12px -6px rgba(0,0,0,0.16),0px 19px 29px 2px rgba(0,0,0,0.08),0px 7px 36px 6px rgba(0,0,0,0.04)', + '0px 10px 13px -6px rgba(0,0,0,0.16),0px 20px 31px 3px rgba(0,0,0,0.08),0px 8px 38px 7px rgba(0,0,0,0.04)', + '0px 10px 13px -6px rgba(0,0,0,0.16),0px 21px 33px 3px rgba(0,0,0,0.08),0px 8px 40px 7px rgba(0,0,0,0.04)', + '0px 10px 14px -6px rgba(0,0,0,0.16),0px 22px 35px 3px rgba(0,0,0,0.08),0px 8px 42px 7px rgba(0,0,0,0.04)', + '0px 11px 14px -7px rgba(0,0,0,0.16),0px 23px 36px 3px rgba(0,0,0,0.08),0px 9px 44px 8px rgba(0,0,0,0.04)', + '0px 11px 15px -7px rgba(0,0,0,0.16),0px 24px 38px 3px rgba(0,0,0,0.08),0px 9px 46px 8px rgba(0,0,0,0.04)' +]; diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js new file mode 100644 index 000000000..2e8404530 --- /dev/null +++ b/packages/react-ui/src/theme/sections/typography.js @@ -0,0 +1,125 @@ +export const themeTypography = { + htmlFontSize: 16, + fontFamily: 'Montserrat, sans-serif', + fontSize: 16, + lineHeight: 1.5, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 500, + fontWeightBold: 600, + fontSmoothing: 'antialiased', + h1: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '6rem', + lineHeight: 1.084, + letterSpacing: '-0.016em', + fontSmoothing: 'antialiased' + }, + h2: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '4rem', + lineHeight: 1.125, + letterSpacing: '-0.008em', + fontSmoothing: 'antialiased' + }, + h3: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '3rem', + lineHeight: 1.167, + letterSpacing: '0em', + fontSmoothing: 'antialiased' + }, + h4: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '2.125rem', + lineHeight: 1.177, + letterSpacing: '0.007em', + fontSmoothing: 'antialiased' + }, + h5: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '1.5rem', + lineHeight: 1.334, + letterSpacing: '0em', + fontSmoothing: 'antialiased' + }, + h6: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '1.25rem', + lineHeight: 1.2, + letterSpacing: '0.007em', + fontSmoothing: 'antialiased' + }, + subtitle1: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '1rem', + lineHeight: 1.5, + letterSpacing: '0.009em', + fontSmoothing: 'antialiased' + }, + subtitle2: { + fontFamily: '"Open Sans", sans-serif', + fontWeight: 600, + fontSize: '0.875rem', + lineHeight: 1.715, + letterSpacing: '0.007em', + fontSmoothing: 'antialiased' + }, + body1: { + fontFamily: '"Open Sans", sans-serif', + fontWeight: 400, + fontSize: '1rem', + lineHeight: 1.5, + letterSpacing: '0.028em', + fontSmoothing: 'antialiased' + }, + body2: { + fontFamily: '"Open Sans", sans-serif', + fontWeight: 400, + fontSize: '0.875rem', + lineHeight: 1.429, + letterSpacing: '0.018em', + fontSmoothing: 'antialiased' + }, + button: { + fontFamily: 'Montserrat, sans-serif', + fontWeight: 600, + fontSize: '0.875rem', + lineHeight: 1.715, + letterSpacing: '0.018em', + textTransform: 'inherit', + fontSmoothing: 'antialiased' + }, + caption: { + fontFamily: '"Open Sans", sans-serif', + fontWeight: 600, + fontSize: '0.75rem', + lineHeight: 1.334, + letterSpacing: '0.017em', + fontSmoothing: 'antialiased' + }, + overline: { + fontFamily: '"Open Sans", sans-serif', + fontWeight: 400, + fontSize: '0.625rem', + lineHeight: 1.6, + letterSpacing: '0.150em', + textTransform: 'uppercase', + fontSmoothing: 'antialiased' + }, + charts: { + fontFamily: '"Open Sans", sans-serif', + fontWeight: 400, + fontSize: 10, + lineHeight: 1.6, + letterSpacing: '0.150em', + fontSmoothing: 'antialiased' + } +}; diff --git a/packages/react-ui/src/theme/themeConstants.js b/packages/react-ui/src/theme/themeConstants.js new file mode 100644 index 000000000..9e153bb85 --- /dev/null +++ b/packages/react-ui/src/theme/themeConstants.js @@ -0,0 +1,2 @@ +// Common +export const SPACING = 8; diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js new file mode 100644 index 000000000..488ff5801 --- /dev/null +++ b/packages/react-ui/src/theme/themeUtils.js @@ -0,0 +1,4 @@ +import createSpacing from '@material-ui/core/styles/createSpacing'; +import { SPACING } from './themeConstants'; + +export const spacing = createSpacing(SPACING); diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 19abc2e44..fabb13e29 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -35,7 +35,7 @@ export const decorators = [ export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, - viewMode: 'docs', + viewMode: 'story', docs: { source: { type: 'code' From d56f379f44195345651cbc5d6678f6d4b64bfbd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 19 Oct 2022 17:48:37 +0200 Subject: [PATCH 003/154] New color palette of the design system (#497) --- CHANGELOG.md | 1 + UPGRADE.md | 22 + packages/react-ui/src/theme/carto-theme.js | 33 +- .../react-ui/src/theme/sections/components.js | 124 ++--- .../src/theme/sections/cssBaseline.js | 14 +- .../react-ui/src/theme/sections/palette.js | 208 +++++---- .../stories/common/Palette.stories.js | 442 +++++------------- 7 files changed, 363 insertions(+), 481 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d868d48f3..886160c3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New color palette for MUI carto-theme [#496](https://github.com/CartoDB/carto-react/pull/496/) - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) diff --git a/UPGRADE.md b/UPGRADE.md index 483860522..43f350441 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -13,3 +13,25 @@ Also added some files for shared constants (`themeConstants.js`) and useful functions (`themeUtils.js`). Removed unused custom `createTheme` function in `carto-theme.js`. + +## Colors + +Keys renamed: + +- filterInput by filledInput (typo fixed) + +Some keys have been removed from [color palette](https://github.com/CartoDB/carto-react/tree/master/packages/react-ui/src/theme) due they are unused: + +- activatedOpacity +- hoverOpacity +- disabledOpacity +- selectedOpacity +- focusOpacity +- other, all removed but tooltip and divider + +Some others have been moved because they aren't native MUI keys and are so specific to some components, these are: + +- charts +- other + +These sets of keys are now in: `componentsPalette`. diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 0ed3f2324..5b41ad2e7 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,6 +1,6 @@ import { themeComponentsOverrides, themeComponentsProps } from './sections/components'; import { CssBaseline } from './sections/cssBaseline'; -import { themePalette } from './sections/palette'; +import { commonPalette, componentsPalette } from './sections/palette'; import { themeShadows } from './sections/shadows'; import { themeTypography } from './sections/typography'; import { SPACING } from './themeConstants'; @@ -42,23 +42,24 @@ export const cartoThemeOptions = { type: 'light', contrastThreshold: 3, tonalOffset: 0.2, - common: { ...themePalette.common }, - primary: { ...themePalette.primary }, - secondary: { ...themePalette.secondary }, - error: { ...themePalette.error }, - warning: { ...themePalette.warning }, - info: { ...themePalette.info }, - success: { ...themePalette.success }, - text: { ...themePalette.text }, - other: { ...themePalette.other }, - divider: themePalette.other.divider, - background: { ...themePalette.background }, - charts: { ...themePalette.charts }, - grey: { ...themePalette.grey }, - action: { ...themePalette.action }, + common: { ...commonPalette.common }, + primary: { ...commonPalette.primary }, + secondary: { ...commonPalette.secondary }, + error: { ...commonPalette.error }, + warning: { ...commonPalette.warning }, + info: { ...commonPalette.info }, + success: { ...commonPalette.success }, + text: { ...commonPalette.text }, + divider: componentsPalette.other.divider, + background: { ...commonPalette.background }, + grey: { ...commonPalette.grey }, + action: { ...commonPalette.action }, // props: Object => Research, /* Custom Colors palette */ - qualitative: { ...themePalette.qualitative } + qualitative: { ...commonPalette.qualitative }, + default: { ...commonPalette.default }, + charts: { ...componentsPalette.charts }, + other: { ...componentsPalette.other } }, shadows: [...themeShadows], typography: { diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js index 6f4880fec..8408bfe7f 100644 --- a/packages/react-ui/src/theme/sections/components.js +++ b/packages/react-ui/src/theme/sections/components.js @@ -1,5 +1,5 @@ import { spacing } from '../themeUtils'; -import { baseColors, themePalette } from './palette'; +import { commonPalette, componentsPalette } from './palette'; import { themeTypography } from './typography'; const round = (value) => Math.round(value * 1e5) / 1e5; @@ -15,7 +15,7 @@ export const themeComponentsOverrides = { boxShadow: 'none' }, outlined: { - border: `2px solid ${themePalette.text.primary}`, + border: `2px solid ${commonPalette.text.primary}`, padding: '4px 14px', '&:hover': { borderWidth: '2px' @@ -25,13 +25,13 @@ export const themeComponentsOverrides = { } }, outlinedPrimary: { - border: `2px solid ${themePalette.primary.main}`, + border: `2px solid ${commonPalette.primary.main}`, '&:hover': { borderWidth: '2px' } }, outlinedSecondary: { - border: `2px solid ${themePalette.secondary.main}`, + border: `2px solid ${commonPalette.secondary.main}`, '&:hover': { borderWidth: '2px' }, @@ -57,7 +57,7 @@ export const themeComponentsOverrides = { }, containedSecondary: { '&:hover': { - backgroundColor: themePalette.secondary.light + backgroundColor: commonPalette.secondary.light } }, outlinedSizeLarge: { @@ -108,7 +108,7 @@ export const themeComponentsOverrides = { root: { padding: spacing(0.75), borderRadius: spacing(0.5), - color: themePalette.text.primary + color: commonPalette.text.primary }, sizeSmall: { padding: spacing(0.25) @@ -118,17 +118,17 @@ export const themeComponentsOverrides = { MuiInputBase: { root: { '&$disabled .MuiInputAdornment-root': { - color: themePalette.action.disabled + color: commonPalette.action.disabled }, '&$disabled .MuiTypography-root': { - color: themePalette.action.disabled + color: commonPalette.action.disabled } } }, MuiOutlinedInput: { root: { '&$disabled': { - backgroundColor: themePalette.action.hover + backgroundColor: commonPalette.action.hover } }, @@ -158,7 +158,7 @@ export const themeComponentsOverrides = { }, notchedOutline: { - border: `2px solid ${themePalette.text.disabled}` + border: `2px solid ${commonPalette.text.disabled}` }, multiline: { @@ -210,10 +210,10 @@ export const themeComponentsOverrides = { ...themeTypography.body1, alignItems: 'baseline', marginBottom: spacing(1.5), - color: themePalette.text.secondary, + color: commonPalette.text.secondary, '&:disabled': { - color: themePalette.action.disabled + color: commonPalette.action.disabled }, '& .MuiSvgIcon-root': { @@ -315,7 +315,7 @@ export const themeComponentsOverrides = { '& + .MuiFormControlLabel-label': { ...themeTypography.body2, marginLeft: spacing(0.25), - color: themePalette.text.primary + color: commonPalette.text.primary }, '& .MuiSvgIcon-root': { @@ -334,7 +334,7 @@ export const themeComponentsOverrides = { '& + .MuiFormControlLabel-label': { ...themeTypography.body2, marginLeft: spacing(0.25), - color: themePalette.text.primary + color: commonPalette.text.primary }, '& .MuiSvgIcon-root': { @@ -348,7 +348,7 @@ export const themeComponentsOverrides = { indicator: { height: 4, '&.colorPrimary': { - backgroundColor: themePalette.text.primary + backgroundColor: commonPalette.text.primary } }, @@ -383,23 +383,23 @@ export const themeComponentsOverrides = { } }, textColorPrimary: { - color: themePalette.primary.main, + color: commonPalette.primary.main, opacity: 1, '&$selected': { - color: themePalette.text.primary + color: commonPalette.text.primary }, '&$disabled': { - color: themePalette.action.disabled + color: commonPalette.action.disabled } } }, MuiDivider: { root: { - backgroundColor: themePalette.other.divider + backgroundColor: commonPalette.divider }, light: { - backgroundColor: baseColors.shades.light[12] + backgroundColor: commonPalette.grey[50] } }, @@ -414,7 +414,7 @@ export const themeComponentsOverrides = { '& + .MuiFormControlLabel-label': { ...themeTypography.body2, marginLeft: spacing(0.25), - color: themePalette.text.primary + color: commonPalette.text.primary } }, @@ -422,7 +422,7 @@ export const themeComponentsOverrides = { padding: spacing(1.5), borderRadius: '50%', transform: 'translate(1px, 1px)', - color: themePalette.text.secondary, + color: commonPalette.text.secondary, '&$checked': { '& input': { @@ -430,7 +430,7 @@ export const themeComponentsOverrides = { }, transform: 'translate(13px, 1px)', - color: themePalette.common.white, + color: commonPalette.common.white, '& + $track': { opacity: 1 @@ -451,66 +451,66 @@ export const themeComponentsOverrides = { track: { height: 'auto', - border: `2px solid ${themePalette.text.secondary}`, + border: `2px solid ${commonPalette.text.secondary}`, borderRadius: spacing(2), opacity: 1, - backgroundColor: themePalette.common.white + backgroundColor: commonPalette.common.white }, colorPrimary: { '&$checked': { - color: themePalette.common.white, + color: commonPalette.common.white, '& + $track': { - backgroundColor: themePalette.primary.main, + backgroundColor: commonPalette.primary.main, borderColor: 'transparent' }, '&$disabled': { - color: themePalette.grey[100], + color: commonPalette.grey[100], '& + $track': { - backgroundColor: themePalette.text.disabled + backgroundColor: commonPalette.text.disabled } } }, '&$disabled': { - color: themePalette.text.disabled, + color: commonPalette.text.disabled, '& + $track': { opacity: 1, - backgroundColor: themePalette.common.white, - borderColor: themePalette.text.disabled + backgroundColor: commonPalette.common.white, + borderColor: commonPalette.text.disabled } } }, colorSecondary: { '&$checked': { - color: themePalette.common.white, + color: commonPalette.common.white, '& + $track': { - backgroundColor: themePalette.secondary.main, + backgroundColor: commonPalette.secondary.main, borderColor: 'transparent' }, '&$disabled': { - color: themePalette.grey[100], + color: commonPalette.grey[100], '& + $track': { - backgroundColor: themePalette.text.disabled + backgroundColor: commonPalette.text.disabled } } }, '&$disabled': { - color: themePalette.text.disabled, + color: commonPalette.text.disabled, '& + $track': { opacity: 1, - backgroundColor: themePalette.common.white, - borderColor: themePalette.text.disabled + backgroundColor: commonPalette.common.white, + borderColor: commonPalette.text.disabled } } }, @@ -613,11 +613,11 @@ export const themeComponentsOverrides = { MuiTooltip: { tooltip: { ...themeTypography.caption, - backgroundColor: themePalette.other.tooltip + backgroundColor: componentsPalette.other.tooltip }, arrow: { - color: themePalette.other.tooltip + color: componentsPalette.other.tooltip } }, @@ -676,7 +676,7 @@ export const themeComponentsOverrides = { }, input: { height: spacing(4), - border: `2px solid ${themePalette.other.divider}`, + border: `2px solid ${commonPalette.divider}`, borderRadius: spacing(0.5), fontWeight: themeTypography.fontWeightMedium, '& .MuiSelect-icon': { @@ -690,7 +690,7 @@ export const themeComponentsOverrides = { caption: { ...themeTypography.caption, '&:first-of-type': { - color: themePalette.text.secondary + color: commonPalette.text.secondary } }, toolbar: { @@ -707,10 +707,10 @@ export const themeComponentsOverrides = { MuiTableCell: { head: { ...themeTypography.caption, - color: themePalette.text.secondary + color: commonPalette.text.secondary }, stickyHeader: { - backgroundColor: themePalette.common.white + backgroundColor: commonPalette.common.white } }, @@ -721,12 +721,12 @@ export const themeComponentsOverrides = { height: spacing(4.5), border: 'none', borderRadius: spacing(0.5), - color: themePalette.grey[500], + color: commonPalette.grey[500], '&$selected': { - color: themePalette.primary.main, - backgroundColor: themePalette.primary.relatedLight, + color: commonPalette.primary.main, + backgroundColor: commonPalette.primary.relatedLight, '&:hover': { - backgroundColor: themePalette.primary.relatedLight + backgroundColor: commonPalette.primary.relatedLight } } }, @@ -746,30 +746,30 @@ export const themeComponentsOverrides = { MuiChip: { root: { - backgroundColor: themePalette.grey[100], + backgroundColor: commonPalette.grey[100], '&:hover': { - backgroundColor: themePalette.grey[200] + backgroundColor: commonPalette.grey[200] }, '& .MuiAvatar-root': { backgroundColor: '#7f3c8d', - color: themePalette.common.white + color: commonPalette.common.white } }, colorPrimary: { '&$disabled': { - backgroundColor: themePalette.grey[100], - color: themePalette.text.primary + backgroundColor: commonPalette.grey[100], + color: commonPalette.text.primary }, '&:hover': { - backgroundColor: themePalette.primary.dark + backgroundColor: commonPalette.primary.dark } }, colorSecondary: { '&$disabled': { - backgroundColor: themePalette.grey[100] + backgroundColor: commonPalette.grey[100] }, '&:hover': { - backgroundColor: themePalette.secondary.light + backgroundColor: commonPalette.secondary.light } }, label: { @@ -787,7 +787,7 @@ export const themeComponentsOverrides = { }, '&:hover': { backgroundColor: 'transparent', - borderColor: themePalette.grey[200], + borderColor: commonPalette.grey[200], '&$clickable': { backgroundColor: 'transparent' } @@ -796,8 +796,8 @@ export const themeComponentsOverrides = { outlinedPrimary: { '&:hover': { backgroundColor: 'transparent', - borderColor: themePalette.primary.dark, - color: themePalette.primary.dark, + borderColor: commonPalette.primary.dark, + color: commonPalette.primary.dark, '&$clickable': { backgroundColor: 'transparent' } @@ -806,8 +806,8 @@ export const themeComponentsOverrides = { outlinedSecondary: { '&:hover': { backgroundColor: 'transparent', - borderColor: themePalette.secondary.dark, - color: themePalette.secondary.dark, + borderColor: commonPalette.secondary.dark, + color: commonPalette.secondary.dark, '&$clickable': { backgroundColor: 'transparent' } diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js index aab38d7ff..9cc48b5aa 100644 --- a/packages/react-ui/src/theme/sections/cssBaseline.js +++ b/packages/react-ui/src/theme/sections/cssBaseline.js @@ -1,5 +1,5 @@ import { spacing } from '../themeUtils'; -import { themePalette } from './palette'; +import { commonPalette } from './palette'; import { themeTypography } from './typography'; export const CssBaseline = { @@ -15,7 +15,7 @@ export const CssBaseline = { }, '*::-webkit-scrollbar-thumb': { borderRadius: '3px', - background: themePalette.action.focus, + background: commonPalette.action.focus, outline: 'none' }, @@ -41,7 +41,7 @@ export const CssBaseline = { letterSpacing: '0.75px', '& a': { - color: themePalette.primary.main + color: commonPalette.primary.main } }, @@ -56,7 +56,7 @@ export const CssBaseline = { }, '& .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='${themePalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, + 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, @@ -72,16 +72,16 @@ export const CssBaseline = { padding: spacing(0.5, 1), borderRadius: spacing(1.5), marginRight: spacing(2.5), - color: themePalette.text.secondary + 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: themePalette.common.black, + backgroundColor: commonPalette.common.black, '&:not(:disabled):hover': { - backgroundColor: themePalette.common.black + backgroundColor: commonPalette.common.black } } } diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index 31096d240..0071b67e3 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -1,7 +1,12 @@ -export const baseColors = { +import { alpha, darken, lighten } from '@material-ui/core'; + +const COLOR_BLACK = '#2C3032'; +const COLOR_WHITE = '#FFFFFF'; + +const baseColors = { common: { - black: '#2c3032', - white: '#fff' + black: COLOR_BLACK, + white: COLOR_WHITE }, neutral: { 50: '#f8f9f9', @@ -13,13 +18,47 @@ export const baseColors = { 600: '#6f777c', 700: '#595f63', 800: '#43474a', - 900: '#2c3032', + 900: COLOR_BLACK, A100: '#ddddde', A200: '#b9babb', A400: '#7c7e7f', - A700: '#545759' + A700: '#16191A' + }, + blue: { + 100: '#B9DAF9', + 200: '#5DB2F6', + 300: '#358BE7', + 400: '#036FE2', + 500: '#024D9E' + }, + green: { + 300: '#6BE2AD', + 400: '#47DB99', + 500: '#31996B' + }, + lightGreen: { + 300: '#8CB24A', + 400: '#709F1D', + 500: '#435F11' + }, + indigo: { + 300: '#34689F', + 400: '#024388', + 500: '#012C5A' + }, + orange: { + 300: '#F4B134', + 400: '#F29E02', + 500: '#A96E01' + }, + red: { + 300: '#CD593B', + 400: '#C1300B', + 500: '#872107' }, qualitative: { + // CARTO colors + // TODO: Related discussion https://app.shortcut.com/cartoteam/story/264834/ bold: { 0: '#7F3C8D', 1: '#11A579', @@ -37,110 +76,121 @@ export const baseColors = { }, shades: { dark: { - 100: '#2c3032', // Neutral900 - 90: 'rgba(44, 48, 50, 0.9)', - 60: 'rgba(44, 48, 50, 0.6)', - 40: 'rgba(44, 48, 50, 0.4)', - 25: 'rgba(44, 48, 50, 0.25)', - 12: 'rgba(44, 48, 50, 0.12)', - 5: 'rgba(44, 48, 50, 0.05)' + 100: COLOR_BLACK, + 90: alpha(COLOR_BLACK, 0.9), + 60: alpha(COLOR_BLACK, 0.6), + 40: alpha(COLOR_BLACK, 0.4), + 25: alpha(COLOR_BLACK, 0.25), + 12: alpha(COLOR_BLACK, 0.12), + 8: alpha(COLOR_BLACK, 0.08), + 4: alpha(COLOR_BLACK, 0.04) }, light: { - 100: '#fff', // White - 60: 'rgba(255, 255, 255, 0.6)', - 40: 'rgba(255, 255, 255, 0.4)', - 20: 'rgba(255, 255, 255, 0.2)', - 12: 'rgba(255, 255, 255, 0.12)', - 5: 'rgba(255, 255, 255, 0.05)' + 100: COLOR_WHITE, + 90: alpha(COLOR_WHITE, 0.9), + 60: alpha(COLOR_WHITE, 0.6), + 40: alpha(COLOR_WHITE, 0.4), + 25: alpha(COLOR_WHITE, 0.25), + 12: alpha(COLOR_WHITE, 0.12), + 8: alpha(COLOR_WHITE, 0.08), + 4: alpha(COLOR_WHITE, 0.04) } } }; -export const themePalette = { +export const commonPalette = { common: { ...baseColors.common }, primary: { - light: '#358be7', - main: '#036fe2', - dark: '#024d9e', + light: baseColors.blue[300], + main: baseColors.blue[400], + dark: baseColors.blue[500], contrastText: baseColors.common.white, - relatedLight: 'rgba(3, 111, 226, 0.08)' + relatedLight: alpha(baseColors.blue[400], 0.08), // TODO: review with design the need of a solid color + background: alpha(baseColors.blue[400], 0.08) }, secondary: { - light: '#6be2ad', - main: '#47db99', - dark: '#31996b', + light: baseColors.green[300], + main: baseColors.green[400], + dark: baseColors.green[500], contrastText: baseColors.common.black, - relatedLight: 'rgba(71, 219, 153, 0.08)' + relatedLight: alpha(baseColors.green[400], 0.08), // TODO: review with design the need of a solid color + background: alpha(baseColors.green[400], 0.08) }, - error: { - light: '#cd593b', - main: '#c1300b', - dark: '#872107', - contrastText: baseColors.common.white, - relatedDark: '#4d1304', - relatedLight: '#f9ebe7' + text: { + primary: baseColors.common.black, + secondary: baseColors.shades.dark[60], + disabled: baseColors.shades.dark[25], + hint: baseColors.shades.dark[40] }, - warning: { - light: '#f4b134', - main: '#f29e02', - dark: '#a96e01', - contrastText: baseColors.common.black, - relatedDark: '#603f00', - relatedLight: '#fef6e6' + background: { + paper: baseColors.common.white, + default: baseColors.neutral[50] + }, + action: { + active: baseColors.shades.dark[40], + hover: baseColors.shades.dark[8], + disabledBackground: baseColors.shades.dark[12], + disabled: baseColors.shades.dark[25], + selected: baseColors.shades.dark[12], + focus: baseColors.shades.dark[12] }, info: { - light: '#34689f', - main: '#024388', - dark: '#012e5f', + light: baseColors.indigo[300], + main: baseColors.indigo[400], + dark: baseColors.indigo[500], contrastText: baseColors.common.white, - relatedDark: '#001a36', - relatedLight: '#e6edf4' + relatedDark: darken(baseColors.indigo[400], 0.6), + relatedLight: lighten(baseColors.indigo[400], 0.9) }, success: { - light: '#8cb24a', - main: '#709f1d', - dark: '#4e6f14', + light: baseColors.green[300], + main: baseColors.green[400], + dark: baseColors.green[500], contrastText: baseColors.common.white, - relatedDark: '#2c3f0b', - relatedLight: '#f1f6e9' + relatedDark: darken(baseColors.green[400], 0.6), + relatedLight: lighten(baseColors.green[400], 0.9) }, - text: { - primary: baseColors.shades.dark[100], - secondary: baseColors.shades.dark[60], - hint: baseColors.shades.dark[40], - disabled: baseColors.shades.dark[25] - }, - background: { - default: baseColors.neutral[50], - paper: baseColors.common.white + warning: { + light: baseColors.orange[300], + main: baseColors.orange[400], + dark: baseColors.orange[500], + contrastText: baseColors.common.black, + relatedDark: darken(baseColors.orange[400], 0.6), + relatedLight: lighten(baseColors.orange[400], 0.9) }, - other: { - tooltip: baseColors.shades.dark[90], - snackbar: baseColors.shades.dark[100], - backdrop: baseColors.shades.dark[60], - divider: baseColors.shades.dark[12] + error: { + light: baseColors.red[300], + main: baseColors.red[400], + dark: baseColors.red[500], + contrastText: baseColors.common.white, + relatedDark: darken(baseColors.red[400], 0.6), + relatedLight: lighten(baseColors.red[400], 0.9) }, grey: { ...baseColors.neutral }, - action: { - active: baseColors.shades.dark[40], - hover: baseColors.shades.dark[5], - hoverOpacity: 0.08, - selected: baseColors.shades.dark[12], - selectedOpacity: 0.08, - disabled: baseColors.shades.dark[25], - disabledBackground: baseColors.shades.dark[12], - disabledOpacity: 0.38, - focus: baseColors.shades.dark[12], - focusOpacity: 0.12, - activatedOpacity: 0.12 - }, + + // Custom common colors qualitative: { ...baseColors.qualitative }, + default: { + light: baseColors.neutral[100], + main: baseColors.neutral[200], + dark: baseColors.neutral[50], + contrastText: baseColors.common.black, + background: baseColors.shades.dark[8] + } +}; + +// Outside of the common palette due they are used only in some specific components +export const componentsPalette = { + other: { + divider: baseColors.shades.dark[12], + tooltip: baseColors.shades.dark[90] + }, charts: { - axisLine: baseColors.shades.dark[5], + axisLine: baseColors.shades.dark[4], maxLabel: baseColors.shades.dark[60], disabled: baseColors.shades.dark[25], axisPointer: baseColors.shades.dark[40] diff --git a/packages/react-ui/storybook/stories/common/Palette.stories.js b/packages/react-ui/storybook/stories/common/Palette.stories.js index 2962ff5b9..d8646eeb3 100644 --- a/packages/react-ui/storybook/stories/common/Palette.stories.js +++ b/packages/react-ui/storybook/stories/common/Palette.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, Typography } from '@material-ui/core'; +import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; const options = { @@ -9,7 +9,15 @@ const options = { colorVariant: { control: { type: 'select', - options: ['primary', 'secondary', 'error', 'warning', 'info', 'success'] + options: [ + 'primary', + 'secondary', + 'info', + 'success', + 'warning', + 'error', + 'default' + ] } } }, @@ -17,370 +25,167 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8786%3A6248' - } + }, + viewMode: 'docs' } }; export default options; -const boxStyle = { - height: 80, - width: 186, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - textAlign: 'center' +const useStyles = makeStyles((theme) => ({ + container: { + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + gap: theme.spacing(1) + }, + text: { + marginBottom: theme.spacing(0.5) + }, + color: { + height: 60, + width: '100%', + marginBottom: theme.spacing(3), + border: `1px solid ${theme.palette.grey[100]}`, + borderRadius: theme.spacing(0.5) + } +})); + +const ColorBox = ({ colorVariant, colorName }) => { + const theme = useTheme(); + const color = theme.palette[colorVariant]; + const classes = useStyles(); + + return ( + + + {colorName} + {color[colorName]} + + + + ); }; -const ColorTemplate = ({ colorVariant, shade, ...args }) => { +const ColorTemplate = ({ colorVariant }) => { const theme = useTheme(); const colorDef = theme.palette[colorVariant]; + const classes = useStyles(); + return ( - - - - Light -
- {colorDef.light} - - - - - Main -
- {colorDef.main} - - - - - Dark -
- {colorDef.dark} - - + + + + + {colorDef.contrastText && ( + + )} + {colorDef.background && ( + + )} {colorDef.relatedDark && ( - - - Related Dark -
- {colorDef.relatedDark} - - + )} {colorDef.relatedLight && ( - - - Related Light -
- {colorDef.relatedLight} - - + )} ); }; -const CommonTemplate = (args) => { - const theme = useTheme(); - const colorDef = theme.palette.common; +const TextTemplate = () => { + const classes = useStyles(); return ( - - - - Black -
- {colorDef.black} - - - - - White -
- {colorDef.white} - - + + + + + ); }; -const TextTemplate = (args) => { - const theme = useTheme(); - const colorDef = theme.palette.text; - const textColor = theme.palette.common.white; +const CommonTemplate = () => { + const classes = useStyles(); + return ( - - - - Primary -
- {colorDef.primary} - - - - - Secondary -
- {colorDef.secondary} - - - - - Hint -
- {colorDef.hint} - - - - - Disabled -
- {colorDef.disabled} - - + + + ); }; -const BackgroundTemplate = (args) => { - const theme = useTheme(); - const colorDef = theme.palette.background; - const textColor = theme.palette.common.black; +const BackgroundTemplate = () => { + const classes = useStyles(); + return ( - - - - Default -
- {colorDef.default} - - - - - Paper -
- {colorDef.paper} - - + + + ); }; -const OtherTemplate = (args) => { - const theme = useTheme(); - const colorDef = theme.palette.other; - const textColor = theme.palette.common.white; +const ActionTemplate = () => { + const classes = useStyles(); + return ( - - - - Tooltip -
- {colorDef.tooltip} - - - - - Snackbar -
- {colorDef.snackbar} - - - - - Backdrop -
- {colorDef.backdrop} - - - - - Divider -
- {colorDef.divider} - - + + + + + + + ); }; -const ActionTemplate = (args) => { - const theme = useTheme(); - const colorDef = theme.palette.action; - const textColor = theme.palette.common.black; +const GreyTemplate = () => { + const classes = useStyles(); + return ( - - - - Active -
- {colorDef.active} - - - - - Hover -
- {colorDef.hover} - - - - - Selected -
- {colorDef.selected} - - - - - Disabled -
- {colorDef.disabled} - - - - - DisabledBackground -
- {colorDef.disabledBackground} - - - - - Focus -
- {colorDef.focus} - - + + + + + + + + + + + + + + + ); }; -const GreyTemplate = (args) => { - const theme = useTheme(); - const colorDef = theme.palette.grey; - const textColorDark = theme.palette.common.white; - const textColorLight = theme.palette.common.black; +const OtherTemplate = () => { + const classes = useStyles(); + return ( - - - - N900 -
- {colorDef[900]} - - - - - N800 -
- {colorDef[800]} - - - - - N700 -
- {colorDef[700]} - - - - - N600 -
- {colorDef[600]} - - - - - N500 -
- {colorDef[500]} - - - - - N400 -
- {colorDef[400]} - - - - - N300 -
- {colorDef[300]} - - - - - N200 -
- {colorDef[200]} - - - - - N100 -
- {colorDef[100]} - - - - - N050 -
- {colorDef[50]} - - - - - A100 -
- {colorDef['A100']} - - - - - A200 -
- {colorDef['A200']} - - - - - A400 -
- {colorDef['A400']} - - - - - A700 -
- {colorDef['A700']} - - + + + ); }; -export const Default = ColorTemplate.bind({}); -Default.args = { colorVariant: 'primary' }; - export const Primary = ColorTemplate.bind({}); Primary.args = { colorVariant: 'primary' }; export const Secondary = ColorTemplate.bind({}); Secondary.args = { colorVariant: 'secondary' }; -export const Error = ColorTemplate.bind({}); -Error.args = { colorVariant: 'error' }; +export const Text = TextTemplate.bind({}); -export const Warning = ColorTemplate.bind({}); -Warning.args = { colorVariant: 'warning' }; +export const Background = BackgroundTemplate.bind({}); + +export const Action = ActionTemplate.bind({}); export const Info = ColorTemplate.bind({}); Info.args = { colorVariant: 'info' }; @@ -388,14 +193,17 @@ Info.args = { colorVariant: 'info' }; export const Success = ColorTemplate.bind({}); Success.args = { colorVariant: 'success' }; -export const Common = CommonTemplate.bind({}); +export const Warning = ColorTemplate.bind({}); +Warning.args = { colorVariant: 'warning' }; -export const Text = TextTemplate.bind({}); +export const Error = ColorTemplate.bind({}); +Error.args = { colorVariant: 'error' }; -export const Background = BackgroundTemplate.bind({}); +export const Common = CommonTemplate.bind({}); -export const Other = OtherTemplate.bind({}); +export const Grey = GreyTemplate.bind({}); -export const Action = ActionTemplate.bind({}); +export const Default = ColorTemplate.bind({}); +Default.args = { colorVariant: 'default' }; -export const Grey = GreyTemplate.bind({}); +export const Other = OtherTemplate.bind({}); From 26406895e70c83f120aa22397297b0f0d331b92b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 19 Oct 2022 17:58:15 +0200 Subject: [PATCH 004/154] New typography toolkit for MUI carto-theme (#498) --- CHANGELOG.md | 1 + UPGRADE.md | 6 + .../react-ui/__tests__/widgets/testUtils.js | 19 +- .../react-ui/src/theme/sections/typography.js | 230 ++++++++++++------ packages/react-ui/src/theme/themeUtils.js | 8 + packages/react-ui/src/widgets/BarWidgetUI.js | 8 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 12 +- packages/react-ui/src/widgets/PieWidgetUI.js | 8 +- .../src/widgets/ScatterPlotWidgetUI.js | 4 +- .../components/TimeSeriesChart.js | 4 +- .../storybook/.storybook/preview-head.html | 8 +- .../react-ui/storybook/.storybook/preview.js | 19 +- .../stories/common/Typography.stories.js | 114 +++++++-- 13 files changed, 290 insertions(+), 151 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 886160c3a..2a608a8d6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New typography toolkit for MUI carto-theme [#498](https://github.com/CartoDB/carto-react/pull/498/) - New color palette for MUI carto-theme [#496](https://github.com/CartoDB/carto-react/pull/496/) - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) diff --git a/UPGRADE.md b/UPGRADE.md index 43f350441..8d4987aca 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -14,6 +14,12 @@ Also added some files for shared constants (`themeConstants.js`) and useful func Removed unused custom `createTheme` function in `carto-theme.js`. +# Typography + +`responsiveFontSizes` simplified due we want to resize only a few variants through the theme. + +Added several custom variants to the typography set. Note that MUI v5 is needed to register them properly. + ## Colors Keys renamed: diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 1e01f73c5..49407d9a4 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -24,24 +24,9 @@ export function getMaterialUIContext(children) { function getTheme() { let theme = createTheme(cartoThemeOptions); theme = responsiveFontSizes(theme, { - breakpoints: cartoThemeOptions.breakpoints.keys, + breakpoints: ['sm'], disableAlign: false, - factor: 2, - variants: [ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle1', - 'subtitle2', - 'body1', - 'body2', - 'button', - 'caption', - 'overline' - ] + factor: 2 }); return theme; } diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js index 2e8404530..5eb1f9655 100644 --- a/packages/react-ui/src/theme/sections/typography.js +++ b/packages/react-ui/src/theme/sections/typography.js @@ -1,6 +1,8 @@ -export const themeTypography = { +import { getPixelToRem } from '../themeUtils'; + +const baseTypography = { htmlFontSize: 16, - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.5, fontWeightLight: 300, @@ -9,117 +11,191 @@ export const themeTypography = { fontWeightBold: 600, fontSmoothing: 'antialiased', h1: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 600, - fontSize: '6rem', - lineHeight: 1.084, - letterSpacing: '-0.016em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(96), + lineHeight: 1.167, + letterSpacing: '-1.5px' }, h2: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 600, - fontSize: '4rem', - lineHeight: 1.125, - letterSpacing: '-0.008em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(60), + lineHeight: 1.2, + letterSpacing: '-0.5px' }, h3: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 600, - fontSize: '3rem', + fontSize: getPixelToRem(48), lineHeight: 1.167, - letterSpacing: '0em', - fontSmoothing: 'antialiased' + letterSpacing: 0 }, h4: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 600, - fontSize: '2.125rem', - lineHeight: 1.177, - letterSpacing: '0.007em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(32), + lineHeight: 1.25, + letterSpacing: '0.15px' }, h5: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 600, - fontSize: '1.5rem', - lineHeight: 1.334, - letterSpacing: '0em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(24), + lineHeight: 1.167, + letterSpacing: '0.15px' }, h6: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '1.25rem', - lineHeight: 1.2, - letterSpacing: '0.007em', - fontSmoothing: 'antialiased' + fontFamily: 'Inter, sans-serif', + fontWeight: 500, + fontSize: getPixelToRem(18), + lineHeight: 1.333, + letterSpacing: '0.15px' }, subtitle1: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '1rem', + fontFamily: 'Inter, sans-serif', + fontWeight: 500, + fontSize: getPixelToRem(16), lineHeight: 1.5, - letterSpacing: '0.009em', - fontSmoothing: 'antialiased' + letterSpacing: '0.15px' }, subtitle2: { - fontFamily: '"Open Sans", sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 600, - fontSize: '0.875rem', - lineHeight: 1.715, - letterSpacing: '0.007em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(13), + lineHeight: 1.538, + letterSpacing: '0.1px' }, body1: { - fontFamily: '"Open Sans", sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 400, - fontSize: '1rem', + fontSize: getPixelToRem(16), lineHeight: 1.5, - letterSpacing: '0.028em', - fontSmoothing: 'antialiased' + letterSpacing: '0.4px' }, body2: { - fontFamily: '"Open Sans", sans-serif', + fontFamily: 'Inter, sans-serif', fontWeight: 400, - fontSize: '0.875rem', - lineHeight: 1.429, - letterSpacing: '0.018em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(13), + lineHeight: 1.538, + letterSpacing: '0.25px' }, button: { - fontFamily: 'Montserrat, sans-serif', - fontWeight: 600, - fontSize: '0.875rem', - lineHeight: 1.715, - letterSpacing: '0.018em', - textTransform: 'inherit', - fontSmoothing: 'antialiased' + fontFamily: 'Inter, sans-serif', + fontWeight: 500, + fontSize: getPixelToRem(13), + lineHeight: 1.538, + letterSpacing: '0.25px', + textTransform: 'inherit' }, caption: { - fontFamily: '"Open Sans", sans-serif', - fontWeight: 600, - fontSize: '0.75rem', - lineHeight: 1.334, - letterSpacing: '0.017em', - fontSmoothing: 'antialiased' + fontFamily: 'Inter, sans-serif', + fontWeight: 400, + fontSize: getPixelToRem(11), + lineHeight: 1.454, + letterSpacing: '0.2px' }, overline: { - fontFamily: '"Open Sans", sans-serif', + fontFamily: '"Overpass Mono", monospace', + fontWeight: 600, + fontSize: getPixelToRem(10), + lineHeight: 1.2, + letterSpacing: '2px', + textTransform: 'uppercase' + } +}; + +const customTypography = { + // TODO: Create a wrapper for the Typography component to reduce the number of variants https://app.shortcut.com/cartoteam/story/265549/ + body1Italic: { + ...baseTypography.body1, + fontStyle: 'italic' + }, + body1Strong: { + ...baseTypography.body1, + fontWeight: 600 + }, + body1StrongItalic: { + ...baseTypography.body1, + fontWeight: 600, + fontStyle: 'italic' + }, + body2Italic: { + ...baseTypography.body2, + fontStyle: 'italic' + }, + body2Strong: { + ...baseTypography.body2, + fontWeight: 600 + }, + body2StrongItalic: { + ...baseTypography.body2, + fontWeight: 600, + fontStyle: 'italic' + }, + captionItalic: { + ...baseTypography.caption, + fontStyle: 'italic' + }, + captionStrong: { + ...baseTypography.caption, + fontWeight: 500 + }, + captionStrongItalic: { + ...baseTypography.caption, + fontWeight: 500, + fontStyle: 'italic' + }, + overlineDelicate: { + ...baseTypography.overline, + fontWeight: 400, + letterSpacing: '1.2px' + }, + code1: { + fontFamily: '"Overpass Mono", monospace', + fontWeight: 400, + fontSize: getPixelToRem(16), + lineHeight: 1.5, + letterSpacing: 0 + }, + code1Strong: { + fontFamily: '"Overpass Mono", monospace', + fontWeight: 600, + fontSize: getPixelToRem(16), + lineHeight: 1.5, + letterSpacing: 0 + }, + code2: { + fontFamily: '"Overpass Mono", monospace', fontWeight: 400, - fontSize: '0.625rem', - lineHeight: 1.6, - letterSpacing: '0.150em', - textTransform: 'uppercase', - fontSmoothing: 'antialiased' - }, - charts: { - fontFamily: '"Open Sans", sans-serif', + fontSize: getPixelToRem(14), + lineHeight: 1.428, + letterSpacing: 0 + }, + code2Strong: { + fontFamily: '"Overpass Mono", monospace', + fontWeight: 600, + fontSize: getPixelToRem(14), + lineHeight: 1.428, + letterSpacing: 0 + }, + code3: { + fontFamily: '"Overpass Mono", monospace', fontWeight: 400, - fontSize: 10, - lineHeight: 1.6, - letterSpacing: '0.150em', - fontSmoothing: 'antialiased' + fontSize: getPixelToRem(12), + lineHeight: 1.333, + letterSpacing: 0 + }, + code3Strong: { + fontFamily: '"Overpass Mono", monospace', + fontWeight: 600, + fontSize: getPixelToRem(12), + lineHeight: 1.333, + letterSpacing: 0 } }; + +export const themeTypography = { + ...baseTypography, + ...customTypography +}; diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index 488ff5801..bcfba3122 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -2,3 +2,11 @@ import createSpacing from '@material-ui/core/styles/createSpacing'; import { SPACING } from './themeConstants'; export const spacing = createSpacing(SPACING); + +// Convert pixels to rem +export function getPixelToRem(px) { + const fontBase = 16; + const rem = (1 / fontBase) * px + 'rem'; + + return rem; +} diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index e89b42e4c..96a097bc0 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -101,7 +101,7 @@ function BarWidgetUI(props) { show: false }, axisLabel: { - ...theme.typography.charts, + ...theme.typography.overlineDelicate, padding: [theme.spacing(0.5), 0, 0, 0] }, data: xAxisDataWithLabels @@ -132,14 +132,14 @@ function BarWidgetUI(props) { axisLabel: { margin: 0, verticalAlign: 'bottom', - padding: [0, 0, theme.typography.charts.fontSize, 0], + padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0], show: true, showMaxLabel: true, showMinLabel: false, inside: true, color: (value) => value >= maxValue ? theme.palette.charts.maxLabel : 'transparent', - ...theme.typography.charts, + ...theme.typography.overlineDelicate, formatter: (v) => processFormatterRes(yAxisFormatter(v)) }, axisLine: { @@ -160,7 +160,7 @@ function BarWidgetUI(props) { maxValue, theme.palette.charts.axisLine, theme.palette.charts.maxLabel, - theme.typography.charts, + theme.typography.overlineDelicate, yAxisFormatter ] ); diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index 9d0e87cad..a52298fac 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -107,7 +107,7 @@ function HistogramWidgetUI({ axisLabel: { showMinLabel: true, showMaxLabel: true, - ...theme.typography.charts, + ...theme.typography.overlineDelicate, hideOverlap: true, padding: [theme.spacing(0.5), theme.spacing(0.5), 0, theme.spacing(0.5)], formatter: (value) => { @@ -143,7 +143,7 @@ function HistogramWidgetUI({ axisLabel: { margin: 0, verticalAlign: 'bottom', - padding: [0, 0, theme.typography.charts.fontSize, 0], + padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0], show: true, showMaxLabel: true, showMinLabel: false, @@ -158,14 +158,14 @@ function HistogramWidgetUI({ return col; }, - ...theme.typography.charts, + ...theme.typography.overlineDelicate, formatter: (v) => processFormatterRes(yAxisFormatter(v)) } }), [ theme.palette.charts.axisLine, theme.palette.charts.maxLabel, - theme.typography.charts, + theme.typography.overlineDelicate, data, yAxisFormatter ] @@ -346,7 +346,9 @@ function defaultTooltipFormatter(params, xAxisFormatter, yAxisFormatter) { } const [left, right, value] = params.data.value; - const title = `${processFormatterRes(xAxisFormatter(left))} — ${processFormatterRes( + const title = `${processFormatterRes( + xAxisFormatter(left) + )} — ${processFormatterRes( xAxisFormatter(right) )}`; const formattedValue = processFormatterRes(yAxisFormatter(value)); diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js index 0849a6a64..bf9e54a99 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI.js @@ -69,7 +69,7 @@ function PieWidgetUI({ // TODO: as prop? formatter: (name) => name.toUpperCase(), textStyle: { - ...theme.typography.charts, + ...theme.typography.overlineDelicate, color: theme.palette.text.primary, lineHeight: 1, verticalAlign: 'bottom', @@ -86,7 +86,7 @@ function PieWidgetUI({ pageIconColor: theme.palette.text.secondary, pageIconInactiveColor: theme.palette.text.disabled, pageTextStyle: { - fontFamily: theme.typography.charts.fontFamily, + fontFamily: theme.typography.overlineDelicate.fontFamily, fontSize: theme.spacing(1.5), lineHeight: theme.spacing(1.75), fontWeight: 'normal', @@ -103,7 +103,7 @@ function PieWidgetUI({ position: 'center', rich: { b: { - fontFamily: theme.typography.charts.fontFamily, + fontFamily: theme.typography.overlineDelicate.fontFamily, fontSize: theme.spacing(1.75), lineHeight: theme.spacing(1.75), fontWeight: 'normal', @@ -133,7 +133,7 @@ function PieWidgetUI({ const disabled = selectedCategories?.length && !selectedCategories.includes(clonedItem.name); - + if (labels?.[clonedItem.name]) { clonedItem.name = labels[clonedItem.name]; } diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js index 57ae11bee..4a5038c2f 100644 --- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js +++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js @@ -30,7 +30,7 @@ function __generateDefaultConfig( color: [theme.palette.secondary.main], xAxis: { axisLabel: { - ...theme.typography.charts, + ...theme.typography.overlineDelicate, padding: [theme.spacing(0.5), 0, 0, 0], formatter: (v) => { const formatted = xAxisFormatter(v); @@ -42,7 +42,7 @@ function __generateDefaultConfig( }, yAxis: { axisLabel: { - ...theme.typography.charts, + ...theme.typography.overlineDelicate, formatter: (v) => { const formatted = yAxisFormatter(v); return typeof formatted === 'object' diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js index 69d4d52f4..bee481302 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js @@ -88,7 +88,7 @@ export default function TimeSeriesChart({ axisLabel: { margin: 0, verticalAlign: 'bottom', - padding: [0, 0, theme.typography.charts.fontSize, 0], + padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0], show: true, showMaxLabel: true, showMinLabel: false, @@ -103,7 +103,7 @@ export default function TimeSeriesChart({ return col; }, ...(formatter ? { formatter: (v) => formatter(v) } : {}), - ...theme.typography.charts + ...theme.typography.overlineDelicate }, axisLine: { show: false diff --git a/packages/react-ui/storybook/.storybook/preview-head.html b/packages/react-ui/storybook/.storybook/preview-head.html index b47f9fc3c..bb7fa8289 100644 --- a/packages/react-ui/storybook/.storybook/preview-head.html +++ b/packages/react-ui/storybook/.storybook/preview-head.html @@ -1,2 +1,6 @@ - - \ No newline at end of file + + + diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index fabb13e29..1cdf0617c 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -5,24 +5,9 @@ import { cartoThemeOptions } from '../../src/theme/carto-theme'; let theme = createTheme(cartoThemeOptions); theme = responsiveFontSizes(theme, { - breakpoints: cartoThemeOptions.breakpoints.keys, + breakpoints: ['sm'], disableAlign: false, - factor: 2, - variants: [ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle1', - 'subtitle2', - 'body1', - 'body2', - 'button', - 'caption', - 'overline' - ] + factor: 2 }); export const decorators = [ diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/common/Typography.stories.js index 53115b0ca..2acff78cd 100644 --- a/packages/react-ui/storybook/stories/common/Typography.stories.js +++ b/packages/react-ui/storybook/stories/common/Typography.stories.js @@ -21,7 +21,23 @@ const options = { 'body2', 'button', 'caption', - 'overline' + 'overline', + 'body1Italic', + 'body1Strong', + 'body1StrongItalic', + 'body2Italic', + 'body2Strong', + 'body2StrongItalic', + 'captionItalic', + 'captionStrong', + 'captionStrongItalic', + 'overlineDelicate', + 'code1', + 'code1Strong', + 'code2', + 'code2Strong', + 'code3', + 'code3Strong' ] } } @@ -30,67 +46,123 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64695' - } + }, + viewMode: 'docs' } }; export default options; const Template = (args) => {args.text}; -const disabledControlsArgTypes = { - variant: { table: { disable: true } } -}; - -export const Default = Template.bind({}); -Default.args = { text: 'Default' }; export const H1 = Template.bind({}); H1.args = { variant: 'h1', text: 'H1 Headline' }; -H1.argTypes = disabledControlsArgTypes; export const H2 = Template.bind({}); H2.args = { variant: 'h2', text: 'H2 Headline' }; -H2.argTypes = disabledControlsArgTypes; export const H3 = Template.bind({}); H3.args = { variant: 'h3', text: 'H3 Headline' }; -H3.argTypes = disabledControlsArgTypes; export const H4 = Template.bind({}); H4.args = { variant: 'h4', text: 'H4 Headline' }; -H4.argTypes = disabledControlsArgTypes; export const H5 = Template.bind({}); H5.args = { variant: 'h5', text: 'H5 Headline' }; -H5.argTypes = disabledControlsArgTypes; export const H6 = Template.bind({}); H6.args = { variant: 'h6', text: 'H6 Headline' }; -H6.argTypes = disabledControlsArgTypes; export const Subtitle1 = Template.bind({}); Subtitle1.args = { variant: 'subtitle1', text: 'Subtitle 1' }; -Subtitle1.argTypes = disabledControlsArgTypes; export const Subtitle2 = Template.bind({}); Subtitle2.args = { variant: 'subtitle2', text: 'Subtitle 2' }; -Subtitle2.argTypes = disabledControlsArgTypes; export const Body1 = Template.bind({}); Body1.args = { variant: 'body1', text: 'Body 1' }; -Body1.argTypes = disabledControlsArgTypes; export const Body2 = Template.bind({}); Body2.args = { variant: 'body2', text: 'Body 2' }; -Body2.argTypes = disabledControlsArgTypes; export const Button = Template.bind({}); Button.args = { variant: 'button', text: 'Button' }; -Button.argTypes = disabledControlsArgTypes; export const Caption = Template.bind({}); Caption.args = { variant: 'caption', text: 'Caption' }; -Caption.argTypes = disabledControlsArgTypes; export const Overline = Template.bind({}); Overline.args = { variant: 'overline', text: 'Overline' }; -Overline.argTypes = disabledControlsArgTypes; + +// Custom variants +// TODO: Do not export them until we do this task https://app.shortcut.com/cartoteam/story/265549/ +const Body1Italic = Template.bind({}); +Body1Italic.args = { variant: 'body1Italic', text: 'Body 1 Italic' }; + +const Body1Strong = Template.bind({}); +Body1Strong.args = { variant: 'boy1Strong', text: 'Body 1 Strong' }; + +const Body1StrongItalic = Template.bind({}); +Body1StrongItalic.args = { variant: 'body1StrongItalic', text: 'Body 1 Strong Italic' }; + +const Body2Italic = Template.bind({}); +Body2Italic.args = { variant: 'body2Italic', text: 'Body 2 Italic' }; + +const Body2Strong = Template.bind({}); +Body2Strong.args = { variant: 'body2Strong', text: 'Body 2 Strong' }; + +const Body2StrongItalic = Template.bind({}); +Body2StrongItalic.args = { variant: 'body2StrongItalic', text: 'Body 2 Strong Italic' }; + +const CaptionItalic = Template.bind({}); +CaptionItalic.args = { variant: 'captionItalic', text: 'Caption Italic' }; + +const CaptionStrong = Template.bind({}); +CaptionStrong.args = { variant: 'captionStrong', text: 'Caption Strong' }; + +const CaptionStrongItalic = Template.bind({}); +CaptionStrongItalic.args = { + variant: 'captionStrongItalic', + text: 'Caption Strong Italic' +}; + +const OverlineDelicate = Template.bind({}); +OverlineDelicate.args = { + variant: 'overlineDelicate', + text: 'Overline Delicate' +}; + +const Code1 = Template.bind({}); +Code1.args = { + variant: 'code1', + text: 'Code 1' +}; + +const Code1Strong = Template.bind({}); +Code1Strong.args = { + variant: 'code1Strong', + text: 'Code 1 Strong' +}; + +const Code2 = Template.bind({}); +Code2.args = { + variant: 'code2', + text: 'Code 2' +}; + +const Code2Strong = Template.bind({}); +Code2Strong.args = { + variant: 'code2Strong', + text: 'Code 2 Strong' +}; + +const Code3 = Template.bind({}); +Code3.args = { + variant: 'code3', + text: 'Code 3' +}; + +const Code3Strong = Template.bind({}); +Code3Strong.args = { + variant: 'code3Strong', + text: 'Code 3 Strong' +}; From 177377728138c0115a9aa0574ecfd0edeb38c3ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 24 Oct 2022 13:39:52 +0200 Subject: [PATCH 005/154] Mui v5 upgrade (#501) * Add new mui-v5 packages + styled-components * Add emotion react & styled libs deps * Add automatic codemod replacements, mostly all import changes * Partial and basic typing for new palette elements, using mui * Fully remove material-ui v4 references from lib * Fix import for createSpacing * Remove material-ui externals from webpack configuration * Adapt webpack externals with new peer deps, due to mui v5 upgrade * Use custom render with providers in test files for react-ui * Remove custom getMaterialUIContext in favour of render override for tests * Fix LegendWidgetUI tests, due to some changes in the rendering details * Fix FeatureSelectionWidgetUI tests, due to some changes in the rendering details * Fix RangeWidgetUI tests by changing selectors (temporarily?) * Remove adaptV4Theme from Storybook preview * Set a new alpha name for experimental release * Mock requestAnimationFrame in FormulaUI tests * v0.0.0-experimental-muiv5-0 * Set peer deps to experimental 0.0.0 packages * v0.0.0-experimental-muiv5-1 --- CHANGELOG.md | 1 + lerna.json | 4 +- package.json | 11 +- packages/react-api/package.json | 8 +- packages/react-auth/package.json | 4 +- packages/react-basemaps/package.json | 4 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 6 +- .../__tests__/widgets/BarWidgetUI.test.js | 42 +- .../widgets/CategoryWidgetUI.test.js | 38 +- .../widgets/FeatureSelectionWidgetUI.test.js | 12 +- .../__tests__/widgets/FormulaWidgetUI.test.js | 10 +- .../widgets/HistogramWidgetUI.test.js | 7 +- .../__tests__/widgets/LegendWidgetUI.test.js | 21 +- .../__tests__/widgets/PieWidgetUI.test.js | 13 +- .../__tests__/widgets/RangeWidgetUI.test.js | 51 +- .../widgets/ScatterPlotWidget.test.js | 11 +- .../__tests__/widgets/TableWidgetUI.test.js | 6 +- .../widgets/TimeSeriesWidgetUI.test.js | 11 +- .../__tests__/widgets/WrapperWidgetUI.test.js | 2 +- .../widgets/legend/LegendCategories.test.js | 2 +- .../widgets/legend/LegendIcon.test.js | 2 +- .../widgets/legend/LegendProportion.test.js | 2 +- .../widgets/legend/LegendRamp.test.js | 6 +- .../react-ui/__tests__/widgets/testUtils.js | 28 +- .../__tests__/widgets/utils/testUtils.js | 34 + packages/react-ui/package.json | 19 +- packages/react-ui/src/assets/CircleIcon.js | 2 +- packages/react-ui/src/assets/CursorIcon.js | 2 +- packages/react-ui/src/assets/LassoIcon.js | 2 +- packages/react-ui/src/assets/LayerIcon.js | 2 +- packages/react-ui/src/assets/PolygonIcon.js | 2 +- packages/react-ui/src/assets/RectangleIcon.js | 2 +- packages/react-ui/src/assets/UploadIcon.js | 2 +- .../src/custom-components/InputFile.js | 4 +- packages/react-ui/src/theme/carto-theme.d.ts | 11 +- packages/react-ui/src/theme/carto-theme.js | 2 +- .../react-ui/src/theme/sections/palette.js | 3 +- packages/react-ui/src/theme/themeUtils.js | 2 +- packages/react-ui/src/widgets/BarWidgetUI.js | 3 +- .../react-ui/src/widgets/CategoryWidgetUI.js | 6 +- .../src/widgets/FeatureSelectionWidgetUI.js | 17 +- .../react-ui/src/widgets/FormulaWidgetUI.js | 3 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 3 +- .../useHistogramInteractivity.js | 2 +- packages/react-ui/src/widgets/NoDataAlert.js | 32 +- .../react-ui/src/widgets/OpacityControl.js | 10 +- packages/react-ui/src/widgets/PieWidgetUI.js | 2 +- .../react-ui/src/widgets/RangeWidgetUI.js | 3 +- .../src/widgets/ScatterPlotWidgetUI.js | 2 +- .../widgets/TableWidgetUI/TableWidgetUI.js | 5 +- .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 4 +- .../components/TimeSeriesChart.js | 2 +- .../hooks/useTimeSeriesInteractivity.js | 2 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 8 +- .../src/widgets/legend/LayerOptionWrapper.js | 2 +- .../src/widgets/legend/LegendCategories.js | 3 +- .../react-ui/src/widgets/legend/LegendIcon.js | 2 +- .../src/widgets/legend/LegendProportion.js | 3 +- .../react-ui/src/widgets/legend/LegendRamp.js | 3 +- .../src/widgets/legend/LegendWidgetUI.js | 12 +- .../src/widgets/legend/LegendWrapper.js | 8 +- packages/react-ui/src/widgets/legend/Note.js | 3 +- .../react-ui/storybook/.storybook/preview.js | 15 +- .../stories/common/Autocomplete.stories.js | 4 +- .../stories/common/Breadcrumb.stories.js | 4 +- .../stories/common/Button.stories.js | 4 +- .../stories/common/ButtonGroup.stories.js | 2 +- .../stories/common/Checkbox.stories.js | 2 +- .../storybook/stories/common/Chip.stories.js | 2 +- .../stories/common/Dialog.stories.js | 2 +- .../stories/common/Divider.stories.js | 4 +- .../storybook/stories/common/List.stories.js | 6 +- .../stories/common/Palette.stories.js | 5 +- .../storybook/stories/common/Paper.stories.js | 4 +- .../stories/common/Progress.stories.js | 4 +- .../storybook/stories/common/Radio.stories.js | 2 +- .../stories/common/Select.stories.js | 4 +- .../stories/common/Slider.stories.js | 2 +- .../stories/common/Switch.stories.js | 2 +- .../storybook/stories/common/Tabs.stories.js | 4 +- .../stories/common/Text-field.stories.js | 4 +- .../stories/common/ToggleButton.stories.js | 10 +- .../stories/common/Tooltip.stories.js | 4 +- .../stories/common/Typography.stories.js | 2 +- .../FeatureSelectionWidgetUI.stories.js | 2 +- .../stories/widgetsUI/InputFile.stories.js | 4 +- .../widgetsUI/TableWidgetUI.stories.js | 4 +- .../widgetsUI/WrapperWidgetUI.stories.js | 8 +- packages/react-ui/webpack.config.js | 6 +- packages/react-widgets/package.json | 16 +- .../src/layers/FeatureSelectionLayer.js | 2 +- .../src/widgets/GeocoderWidget.js | 6 +- .../src/widgets/TimeSeriesWidget.js | 2 +- packages/react-widgets/webpack.config.js | 3 +- packages/react-workers/package.json | 4 +- yarn.lock | 592 +++++++++++++----- 97 files changed, 824 insertions(+), 450 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a608a8d6..8a9fedda7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) +- Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) ## 1.5 diff --git a/lerna.json b/lerna.json index 9e0f84b8e..0b61ab7f3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "1.5.0-alpha.4" -} + "version": "0.0.0-experimental-muiv5-1" +} \ No newline at end of file diff --git a/package.json b/package.json index 069cd4010..0b40e3c5e 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,14 @@ "@deck.gl/google-maps": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@deck.gl/mesh-layers": "^8.9.0-alpha.4", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", + "@mui/icons-material": "^5.10.9", + "@mui/lab": "^5.0.0-alpha.104", + "@mui/material": "^5.10.10", + "@mui/styles": "^5.10.10", + "@mui/styled-engine-sc": "^5.10.6", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", + "styled-components": "^5.2.3", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "@reduxjs/toolkit": "^1.5.0", diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 25b40bb5a..fb96055a5 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-redux": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d249849be..b101c3882 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a77735e44..c07ec632a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 1786a1bfe..8d2925b70 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index af19c6016..c2bb2b701 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js index ef1c19521..db5e29700 100644 --- a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import BarWidgetUI from '../../src/widgets/BarWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('BarWidgetUI', () => { beforeAll(() => { @@ -16,15 +16,14 @@ describe('BarWidgetUI', () => { const X_AXIS_DATA = ['column_1', 'column_2', 'column_3']; - const Widget = (props) => - getMaterialUIContext( - {}} - {...props} - /> - ); + const Widget = (props) => ( + {}} + {...props} + /> + ); const Y_AXIS_DATA_MULTIPLE = [ [1, 2, 3], @@ -39,17 +38,16 @@ describe('BarWidgetUI', () => { 6: 'Column 2' }; - const WidgetMultiple = (props) => - getMaterialUIContext( - {}} - {...props} - /> - ); + const WidgetMultiple = (props) => ( + {}} + {...props} + /> + ); test('all selected', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js index 3b18d33bc..5de8e77ff 100644 --- a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import userEvent from '@testing-library/user-event'; import CategoryWidgetUI from '../../src/widgets/CategoryWidgetUI'; import { currencyFormatter } from './testUtils'; @@ -170,25 +170,33 @@ describe('CategoryWidgetUI', () => { }); describe('when data name is not string', () => { - const NotStringData = [{ - name: true, - value: 100 - }, { - name: false, - value: 101 - }] + const NotStringData = [ + { + name: true, + value: 100 + }, + { + name: false, + value: 101 + } + ]; test('should render properly', () => { render(); - + expect(screen.getByText(/true/)).toBeInTheDocument(); expect(screen.getByText(/101/)).toBeInTheDocument(); }); test('should maintain typing when filters', () => { - const onSelectedCategoriesChangeFn = jest.fn() - render(); - userEvent.click(screen.getByText(/true/)) - expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]) - }) - }) + const onSelectedCategoriesChangeFn = jest.fn(); + render( + + ); + userEvent.click(screen.getByText(/true/)); + expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]); + }); + }); }); diff --git a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js index 2d52df6b7..c400034e8 100644 --- a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, queryByAttribute, fireEvent } from '@testing-library/react'; +import { render, queryByAttribute, fireEvent } from '../widgets/utils/testUtils'; import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI'; -import { capitalize } from '@material-ui/core'; +import { capitalize } from '@mui/material'; import CursorIcon from '../../src/assets/CursorIcon'; import PolygonIcon from '../../src/assets/PolygonIcon'; import RectangleIcon from '../../src/assets/RectangleIcon'; @@ -79,9 +79,9 @@ describe('FeatureSelectionWidgetUI', () => { expect(onEnabledChange).toHaveBeenCalledWith(false); }); - test('selectionModes and editModes are rendered correctly in modes menu', () => { + test('selectionModes and editModes are rendered correctly in modes menu', async () => { const rendered = render(); - const menuBtn = rendered.getByTitle('Select a mode'); + const menuBtn = await rendered.findByLabelText('Select a mode'); // Open menu fireEvent.click(menuBtn); // Once the menu is opened, check everything is okey rendered @@ -90,13 +90,13 @@ describe('FeatureSelectionWidgetUI', () => { ); }); - test('select mode event is correctly raised', () => { + test('select mode event is correctly raised', async () => { const onSelectMode = jest.fn(); const rendered = render( ); - const menuBtn = rendered.getByTitle('Select a mode'); + const menuBtn = await rendered.findByLabelText('Select a mode'); // Open menu fireEvent.click(menuBtn); diff --git a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js index 28c286474..899ba8edb 100644 --- a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js @@ -1,9 +1,17 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../widgets/utils/testUtils'; import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; import { currencyFormatter } from './testUtils'; describe('FormulaWidgetUI', () => { + beforeEach(() => { + jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb()); + }); + + afterEach(() => { + window.requestAnimationFrame.mockRestore(); + }); + test('empty', () => { render(); expect(screen.getByText(/-/)).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js index 37d392fd0..9d2a31646 100644 --- a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import HistogramWidgetUI from '../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('HistogramWidgetUI', () => { beforeAll(() => { @@ -22,8 +22,7 @@ describe('HistogramWidgetUI', () => { onSelectedBarsChange }; - const Widget = (props) => - getMaterialUIContext(); + const Widget = (props) => ; test('all selected', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 3e28392d8..a766ebe80 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,9 +1,7 @@ import React from 'react'; -import { getMaterialUIContext } from './testUtils'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; -import { fireEvent, render, screen } from '@testing-library/react'; -import { Typography } from '@material-ui/core'; -import { act } from '@testing-library/react-hooks'; +import { fireEvent, render, screen } from '../widgets/utils/testUtils'; +import { Typography } from '@mui/material'; const CUSTOM_CHILDREN = Legend custom; @@ -118,7 +116,7 @@ describe('LegendWidgetUI', () => { } } ]; - const Widget = (props) => getMaterialUIContext(); + const Widget = (props) => ; test('single legend', () => { render(); @@ -200,13 +198,13 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Test')).toBeInTheDocument(); }); - test('legend with opacity control', () => { + test('legend with opacity control', async() => { const legendConfig = DATA[7]; const onChangeOpacity = jest.fn(); const container = render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('Opacity')).toBeInTheDocument(); @@ -254,22 +252,23 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Legend custom')).toBeInTheDocument(); }); - test('with custom layer options', () => { + test('with custom layer options', async() => { const layer = DATA[8]; render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('PaletteSelector')).toBeInTheDocument(); }); - test('with custom layer options - unknown option', () => { + + test('with custom layer options - unknown option', async() => { const layer = { ...DATA[8], options: ['unknown'] }; render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('Unknown layer option')).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js index 75a283f84..cd1db9fa9 100644 --- a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '../widgets/utils/testUtils'; import PieWidgetUI from '../../src/widgets/PieWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('PieWidgetUI', () => { beforeAll(() => { @@ -23,10 +23,9 @@ describe('PieWidgetUI', () => { } ]; - const Widget = (props) => - getMaterialUIContext( - {}} {...props} /> - ); + const Widget = (props) => ( + {}} {...props} /> + ); test('renders correctly', () => { render(); @@ -35,4 +34,4 @@ describe('PieWidgetUI', () => { test('with selected categories', () => { render(); }); -}); \ No newline at end of file +}); diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js index dbc50ddb3..9c68d3ddf 100644 --- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js @@ -1,16 +1,22 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor } from '@testing-library/react'; -import { getMaterialUIContext } from './testUtils'; +import { render, fireEvent, screen, waitFor } from '../widgets/utils/testUtils'; import RangeWidgetUI from '../../src/widgets/RangeWidgetUI'; -describe('SliderWidgetUI', () => { - const Widget = (props) => - getMaterialUIContext(); +describe('RangeWidgetUI', () => { + const Widget = (props) => ; test('renders with default props', () => { const { container } = render(); - const minValue = screen.getByRole('slider', { name: 'min value' }); - const maxValue = screen.getByRole('slider', { name: 'max value' }); + + // const minValue = screen.getByLabelText('min value'); + // const maxValue = screen.getByLabelText('max value'); + const minValue = document.querySelector( + 'input[type="range"][aria-label="min value"]' + ); + const maxValue = document.querySelector( + 'input[type="range"][aria-label="max value"]' + ); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); @@ -31,8 +37,8 @@ describe('SliderWidgetUI', () => { test('renders specified limits', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -48,8 +54,8 @@ describe('SliderWidgetUI', () => { test('renders specified limits with same min and max values', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -65,8 +71,9 @@ describe('SliderWidgetUI', () => { test('renders specified limits and values', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); @@ -87,8 +94,8 @@ describe('SliderWidgetUI', () => { test('renders specified limits out of min-max range', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -101,13 +108,21 @@ describe('SliderWidgetUI', () => { expect(container.getElementsByClassName('MuiSlider-mark').length).toBe(0); }); - test('On selected method is called when we change slider values', async () => { + test('on selected method is called when we change slider values', async () => { const mockOnSelectedRangeChange = jest.fn(); render(); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); - const minValue = screen.getByRole('slider', { name: 'min value' }); - const maxValue = screen.getByRole('slider', { name: 'max value' }); + + // const minValue = screen.getByLabelText('min value'); + // const maxValue = screen.getByLabelText('max value'); + const minValue = document.querySelector( + 'input[type="range"][aria-label="min value"]' + ); + const maxValue = document.querySelector( + 'input[type="range"][aria-label="max value"]' + ); fireEvent.change(inputMin, { target: { value: 20 } }); fireEvent.blur(inputMin); diff --git a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js index 76f3ef886..63242579c 100644 --- a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js +++ b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '../widgets/utils/testUtils'; import ScatterPlotWidgetUI from '../../src/widgets/ScatterPlotWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('ScatterPlotWidgetUI', () => { beforeAll(() => { @@ -16,10 +16,9 @@ describe('ScatterPlotWidgetUI', () => { [2, 4], [3, 6] ]; - const Widget = (props) => - getMaterialUIContext( - {}} {...props} /> - ); + const Widget = (props) => ( + {}} {...props} /> + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js index d7c6e93d9..8dfaccec0 100644 --- a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js @@ -1,12 +1,10 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import TableWidgetUI from '../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { getMaterialUIContext } from './testUtils'; import { columns, rows } from '../../src/widgets/TableWidgetUI/mockData'; describe('TableWidgetUI', () => { - const Widget = (props) => - getMaterialUIContext(); + const Widget = (props) => ; test('renders with default props', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js index 7b85c1669..6ea4c6a9e 100644 --- a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'; +import { render, screen, act, fireEvent, waitFor } from '../widgets/utils/testUtils'; import TimeSeriesWidgetUI from '../../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; import { GroupDateTypes } from '@carto/react-core'; describe('TimeSeriesWidgetUI', () => { @@ -46,10 +46,9 @@ describe('TimeSeriesWidgetUI', () => { stepSize: GroupDateTypes.WEEKS }; - const Widget = (props) => - getMaterialUIContext( - - ); + const Widget = (props) => ( + + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js b/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js index 628983ef9..fe143aaf6 100644 --- a/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js @@ -4,7 +4,7 @@ import { fireEvent, screen, waitForElementToBeRemoved -} from '@testing-library/react'; +} from '../widgets/utils/testUtils'; import WrapperWidgetUI from '../../src/widgets/WrapperWidgetUI'; import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index 04c229704..bc1582ab4 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendCategories from '../../../src/widgets/legend/LegendCategories'; import { getPalette } from '../../../src/utils/palette'; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js b/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js index 2425feef7..69605b83c 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendIcon from '../../../src/widgets/legend/LegendIcon'; const ICON = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxkZWZzPgogICAgICAgIDxmaWx0ZXIgaWQ9InFsbTY3aXI1MWEiPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlR3JhcGhpYyIgdmFsdWVzPSIwIDAgMCAwIDAuMTcyNTQ5IDAgMCAwIDAgMC4xODgyMzUgMCAwIDAgMCAwLjE5NjA3OCAwIDAgMCAxLjAwMDAwMCAwIi8+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnPgogICAgICAgICAgICA8ZyBmaWx0ZXI9InVybCgjcWxtNjdpcjUxYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNDIgLTQ2NCkgdHJhbnNsYXRlKDIyMiA0NDgpIj4KICAgICAgICAgICAgICAgIDxnIGZpbGw9IiMyQzMwMzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwIDE2KSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDB6IiBvcGFjaXR5PSIuMiIvPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==`; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js b/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js index cf0d7aff0..3a2758ed9 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendProportion from '../../../src/widgets/legend/LegendProportion'; const DEFAULT_LEGEND = { diff --git a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js index c9b342021..59b2353a3 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendRamp from '../../../src/widgets/legend/LegendRamp'; import { getPalette } from '../../../src/utils/palette'; @@ -62,7 +62,9 @@ describe('LegendRamp', () => { ); }); test('renders formatted labels correctly', () => { - render(); + render( + + ); expect(screen.queryByText('0 km')).toBeInTheDocument(); expect(screen.queryByText('200 km')).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 49407d9a4..8a1fd18d8 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -1,6 +1,12 @@ import React from 'react'; -import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider, + adaptV4Theme +} from '@mui/material'; import * as echarts from 'echarts'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; @@ -17,19 +23,13 @@ export function currencyFormatter(value) { }; } -export function getMaterialUIContext(children) { - return {children}; -} - -function getTheme() { - let theme = createTheme(cartoThemeOptions); - theme = responsiveFontSizes(theme, { - breakpoints: ['sm'], - disableAlign: false, - factor: 2 - }); - return theme; -} +// export function getMaterialUIContext(children) { +// return ( +// +// {children} +// +// ); +// } export const mockEcharts = { init() { diff --git a/packages/react-ui/__tests__/widgets/utils/testUtils.js b/packages/react-ui/__tests__/widgets/utils/testUtils.js index e69de29bb..971476468 100644 --- a/packages/react-ui/__tests__/widgets/utils/testUtils.js +++ b/packages/react-ui/__tests__/widgets/utils/testUtils.js @@ -0,0 +1,34 @@ +// https://testing-library.com/docs/react-testing-library/setup/ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import { ThemeProvider } from '@mui/material'; +import { createTheme, responsiveFontSizes } from '@mui/material'; + +import { cartoThemeOptions } from '../../../src/theme/carto-theme'; + +const theme = getTheme(); // for now we don't need real theme for tests + +function getTheme() { + let theme = createTheme(cartoThemeOptions); + theme = responsiveFontSizes(theme, { + breakpoints: ['sm'], + disableAlign: false, + factor: 2 + }); + return theme; +} + +const AllTheProviders = ({ children }) => { + return {children}; +}; + +const customRender = (ui, options) => + render(ui, { wrapper: AllTheProviders, ...options }); + +// re-export everything +export * from '@testing-library/react'; + +// override render method +export { customRender as render }; diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1135146c8..a179d6315 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -47,7 +47,6 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/react": "^6.5.12", - "storybook-addon-designs": "^6.3.1", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/react-hooks": "^5.1.0", @@ -69,6 +68,7 @@ "firebase-tools": "^8.17.0", "jest": "^26.6.3", "react-redux": "^7.2.2", + "storybook-addon-designs": "^6.3.1", "webpack": "^5.24.2", "webpack-cli": "^4.5.0" }, @@ -76,13 +76,18 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", + "@mui/icons-material": "^5.10.9", + "@mui/lab": "^5.0.0-alpha.104", + "@mui/material": "^5.10.10", + "@mui/styled-engine-sc": "^5.10.6", + "@mui/styles": "^5.10.10", "echarts": "^5.2.0", "echarts-for-react": "^3.0.1", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "styled-components": "^5.2.3" } } diff --git a/packages/react-ui/src/assets/CircleIcon.js b/packages/react-ui/src/assets/CircleIcon.js index c8a3694ae..ba2e6bce7 100644 --- a/packages/react-ui/src/assets/CircleIcon.js +++ b/packages/react-ui/src/assets/CircleIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function CircleIcon(props) { return ( diff --git a/packages/react-ui/src/assets/CursorIcon.js b/packages/react-ui/src/assets/CursorIcon.js index 408a7da69..82906144f 100644 --- a/packages/react-ui/src/assets/CursorIcon.js +++ b/packages/react-ui/src/assets/CursorIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function CursorIcon(props) { return ( diff --git a/packages/react-ui/src/assets/LassoIcon.js b/packages/react-ui/src/assets/LassoIcon.js index 073782492..0d07fb140 100644 --- a/packages/react-ui/src/assets/LassoIcon.js +++ b/packages/react-ui/src/assets/LassoIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function LassoIcon(props) { return ( diff --git a/packages/react-ui/src/assets/LayerIcon.js b/packages/react-ui/src/assets/LayerIcon.js index a4b487f9f..ee2c06250 100644 --- a/packages/react-ui/src/assets/LayerIcon.js +++ b/packages/react-ui/src/assets/LayerIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function LayerIcon(props) { return ( diff --git a/packages/react-ui/src/assets/PolygonIcon.js b/packages/react-ui/src/assets/PolygonIcon.js index 510b07433..5fac25832 100644 --- a/packages/react-ui/src/assets/PolygonIcon.js +++ b/packages/react-ui/src/assets/PolygonIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function PolygonIcon(props) { return ( diff --git a/packages/react-ui/src/assets/RectangleIcon.js b/packages/react-ui/src/assets/RectangleIcon.js index 4bfc558c3..ce151e178 100644 --- a/packages/react-ui/src/assets/RectangleIcon.js +++ b/packages/react-ui/src/assets/RectangleIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function RectangleIcon(props) { return ( diff --git a/packages/react-ui/src/assets/UploadIcon.js b/packages/react-ui/src/assets/UploadIcon.js index 58ecabce0..0ff8d6227 100644 --- a/packages/react-ui/src/assets/UploadIcon.js +++ b/packages/react-ui/src/assets/UploadIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function RectangleIcon(props) { return ( diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/custom-components/InputFile.js index 4623e0dc3..3b9e87f2e 100644 --- a/packages/react-ui/src/custom-components/InputFile.js +++ b/packages/react-ui/src/custom-components/InputFile.js @@ -1,6 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Button, makeStyles, Typography } from '@material-ui/core'; +import { Box, Button, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ inputFile: { diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index a911c981a..a0c4cbd2d 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,10 +1,15 @@ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'; +import { Theme, ThemeOptions } from '@mui/material'; +import { Palette, PaletteColor } from '@mui/material' +/* + TODO: Review if this set of changes in the type of Palette and PaletteColor, to properly use theme + from TypeScript clients, is still required and if it needs to be fully extended to reflect the new + color structure (custom keys & props) +*/ export const cartoThemeOptions: ThemeOptions; type Modify = Omit & R -type CustomPaletteColor = Modify +type CustomPaletteColor = Modify type CustomPalette = Modify @@ -184,9 +182,7 @@ function SelectedModeViewer({ if (modes?.length && selectedMode) { const foundMode = modes.find(({ id: modeId }) => modeId === selectedMode); if (!foundMode) { - throw new Error( - 'Selected mode not supported' - ); + throw new Error('Selected mode not supported'); } return foundMode; } else { @@ -200,7 +196,7 @@ function SelectedModeViewer({ return ( - + {icon} @@ -284,6 +280,7 @@ function ModesSelector({ aria-expanded={open ? 'true' : undefined} className={classes.btn} onClick={handleClick} + size='large' > diff --git a/packages/react-ui/src/widgets/FormulaWidgetUI.js b/packages/react-ui/src/widgets/FormulaWidgetUI.js index bc52e7460..ac785e511 100644 --- a/packages/react-ui/src/widgets/FormulaWidgetUI.js +++ b/packages/react-ui/src/widgets/FormulaWidgetUI.js @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { animateValue } from './utils/animations'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index a52298fac..8134919ac 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -2,7 +2,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useMemo } from 'react'; import ReactEcharts from '../../custom-components/echarts-for-react'; -import { darken, Grid, Link, makeStyles, Typography, useTheme } from '@material-ui/core'; +import { darken, Grid, Link, Typography, useTheme } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js index 26f558c90..7c6c59369 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useState } from 'react'; const events = {}; diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index 3291e7b2d..f5a6c9581 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,22 +1,28 @@ import React from 'react'; -import { Alert, AlertTitle } from '@material-ui/lab'; -import { Box, Typography } from '@material-ui/core'; +import { Alert, AlertTitle } from '@mui/material'; +import { Box, Typography } from '@mui/material'; -function AlertBody ({ color = undefined, children }) { +function AlertBody({ color = undefined, children }) { return children ? ( - - {children} - -) : ( - -)} + + + {children} + + + ) : ( + + ); +} function NoDataAlert({ title = 'No data available', body = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust the Map View.', severity = undefined }) { - return severity ? ( {title && {title}} @@ -24,10 +30,10 @@ function NoDataAlert({ ) : ( - {title && {title}} - {body} + {title && {title}} + {body} - ) + ); } export default NoDataAlert; diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js index 693e73b5e..d141a15e4 100644 --- a/packages/react-ui/src/widgets/OpacityControl.js +++ b/packages/react-ui/src/widgets/OpacityControl.js @@ -1,12 +1,6 @@ import React from 'react'; -import { - Box, - Grid, - InputAdornment, - makeStyles, - Slider, - TextField -} from '@material-ui/core'; +import { Box, Grid, InputAdornment, Slider, TextField } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import LayerOptionWrapper from './legend/LayerOptionWrapper'; const useOpacityControlStyles = makeStyles(({ spacing }) => ({ diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js index bf9e54a99..e4dc67671 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI.js @@ -1,7 +1,7 @@ import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import ReactEcharts from '../custom-components/echarts-for-react'; -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { disableSerie, setColor } from './utils/chartUtils'; import { processFormatterRes } from './utils/formatterUtils'; diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index 4ce72e9ea..66346f5a8 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -1,6 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Link, makeStyles, Slider, TextField } from '@material-ui/core'; +import { Box, Link, Slider, TextField } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { debounce } from '@carto/react-core'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js index 4a5038c2f..1b694d2bb 100644 --- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js +++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import PropTypes from 'prop-types'; import React, { useRef, useState, useEffect } from 'react'; import { areChartPropsEqual } from './utils/chartUtils'; diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index 3719abe79..120a50f13 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -7,10 +7,11 @@ import { TableContainer, TableHead, TableRow, - makeStyles, TableSortLabel, TablePagination -} from '@material-ui/core'; +} from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ tableHeadCellLabel: { diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index 077dacfe1..d8e485e38 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -7,9 +7,9 @@ import { SvgIcon, Typography, capitalize, - makeStyles, Link -} from '@material-ui/core'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'; import TimeSeriesChart from './components/TimeSeriesChart'; import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesContext'; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js index bee481302..ff65c5ab4 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import React, { useMemo, useState } from 'react'; import ReactEcharts from '../../../custom-components/echarts-for-react'; import useTimeSeriesInteractivity from '../hooks/useTimeSeriesInteractivity'; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js index d31346a6c..f2a101f53 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useTimeSeriesContext } from './TimeSeriesContext'; diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index a6b068eb0..0d155a5d3 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -1,6 +1,6 @@ import React, { useState, createRef } from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; import { Box, Button, @@ -13,8 +13,8 @@ import { MenuItem, Tooltip, Typography -} from '@material-ui/core'; -import { ExpandLess, ExpandMore, MoreVert } from '@material-ui/icons'; +} from '@mui/material'; +import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; /* Options props must have this format: @@ -157,6 +157,7 @@ function WrapperWidgetUI(props) { aria-label={action.label} onClick={action.action} className={classes.iconAction} + size='large' > {action.icon} @@ -217,6 +218,7 @@ function WrapperWidgetUI(props) { aria-haspopup='true' onClick={handleClick} className={classes.iconAction} + size='large' > {optionsIcon} diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index 5ae8955f1..ed7514f11 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Typography } from '@material-ui/core'; +import { Box, Typography } from '@mui/material'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 5e5528c4a..ddff240cf 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { Box, Grid, Tooltip, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 7aab1d90f..c193e47c6 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, Typography } from '@material-ui/core'; +import { Box, Grid, Typography } from '@mui/material'; import PropTypes from 'prop-types'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index f271efb47..0afc90e17 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; +import { Box, Grid, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index 21e25d9ba..1f5eb122d 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { Grid, Tooltip, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index ef20a300f..f1a1320a5 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -1,14 +1,6 @@ import React, { createRef, Fragment } from 'react'; -import { - Box, - Button, - Collapse, - Divider, - Grid, - makeStyles, - SvgIcon, - Typography -} from '@material-ui/core'; +import { Box, Button, Collapse, Divider, Grid, SvgIcon, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import LegendWrapper from './LegendWrapper'; import LegendCategories from './LegendCategories'; import LegendIcon from './LegendIcon'; diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 56676393c..93e3390f0 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -5,15 +5,15 @@ import { Collapse, Grid, Icon, - makeStyles, Switch, Tooltip, Typography -} from '@material-ui/core'; -import { ExpandLess, ExpandMore } from '@material-ui/icons'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { ExpandLess, ExpandMore } from '@mui/icons-material'; import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; -import { ToggleButton } from '@material-ui/lab'; +import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index 76da22dab..f5c25d7a8 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,4 +1,5 @@ -import { Box, makeStyles, Typography } from '@material-ui/core'; +import { Box, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; const useNoteStyles = makeStyles(() => ({ diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 1cdf0617c..45506ab64 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -1,6 +1,11 @@ import React from 'react'; import { withDesign } from 'storybook-addon-designs'; -import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider +} from '@mui/material'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; let theme = createTheme(cartoThemeOptions); @@ -12,9 +17,11 @@ theme = responsiveFontSizes(theme, { export const decorators = [ (Story) => ( - - - + + + + + ) ]; diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js index d287719ab..3cb2b637c 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import Autocomplete from '@material-ui/lab/Autocomplete'; -import { Grid, TextField } from '@material-ui/core'; +import Autocomplete from '@mui/material/Autocomplete'; +import { Grid, TextField } from '@mui/material'; const options = { title: 'Common/Autocomplete', diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 585daac3e..947cb5c2a 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Breadcrumbs, Link, Typography } from '@material-ui/core'; -import { NavigateNext, CloudCircle, Home, Style } from '@material-ui/icons'; +import { Breadcrumbs, Link, Typography } from '@mui/material'; +import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; const options = { title: 'Common/Breadcrumbs', diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 651ad0d63..0f6e26258 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, IconButton, Grid, SvgIcon } from '@material-ui/core'; +import { Button, IconButton, Grid, SvgIcon } from '@mui/material'; const options = { title: 'Common/Button', @@ -64,7 +64,7 @@ const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - + diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 58819e61d..64aabad34 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Grid, ButtonGroup } from '@material-ui/core'; +import { Button, Grid, ButtonGroup } from '@mui/material'; const options = { title: 'Common/Button Group', diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 5577d8821..7c9d07b20 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Checkbox, FormControlLabel, Grid } from '@material-ui/core'; +import { Checkbox, FormControlLabel, Grid } from '@mui/material'; const options = { title: 'Common/Checkbox', diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 8a529f611..024336f5f 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Avatar, Chip, Grid } from '@material-ui/core'; +import { Avatar, Chip, Grid } from '@mui/material'; const options = { title: 'Common/Chip', diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js index 6fe6481c7..c2281dc84 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js @@ -10,7 +10,7 @@ import { Grid, Slide, TextField -} from '@material-ui/core'; +} from '@mui/material'; const options = { title: 'Common/Dialog', diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/common/Divider.stories.js index 44ddf5adf..effa846a4 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/common/Divider.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Divider, Grid, List, ListItem, ListItemText } from '@material-ui/core'; +import { Divider, Grid, List, ListItem, ListItemText } from '@mui/material'; import { FormatAlignLeft, FormatAlignCenter, @@ -7,7 +7,7 @@ import { FormatBold, FormatItalic, FormatUnderlined -} from '@material-ui/icons'; +} from '@mui/icons-material'; const options = { title: 'Common/Divider', diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/common/List.stories.js index 628d9de58..96ff2a083 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/common/List.stories.js @@ -14,10 +14,10 @@ import { ListItemSecondaryAction, ListItemText, Typography, - makeStyles, Switch, Paper -} from '@material-ui/core'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { Drafts, Delete, @@ -26,7 +26,7 @@ import { Home, Inbox, Star -} from '@material-ui/icons'; +} from '@mui/icons-material'; const options = { title: 'Common/List', diff --git a/packages/react-ui/storybook/stories/common/Palette.stories.js b/packages/react-ui/storybook/stories/common/Palette.stories.js index d8646eeb3..53869507e 100644 --- a/packages/react-ui/storybook/stories/common/Palette.stories.js +++ b/packages/react-ui/storybook/stories/common/Palette.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; +import { Box, Grid, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTheme } from '@mui/material/styles'; const options = { title: 'CARTO Theme/Palette', diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index ced2232ba..a516cb95e 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Grid, makeStyles, Paper, Typography } from '@material-ui/core'; +import { Grid, Paper, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const options = { title: 'Common/Paper', diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/common/Progress.stories.js index b7e247727..0be46f21f 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/common/Progress.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Box, Button, CircularProgress, Grid, LinearProgress } from '@material-ui/core'; -import CheckIcon from '@material-ui/icons/Check'; +import { Box, Button, CircularProgress, Grid, LinearProgress } from '@mui/material'; +import CheckIcon from '@mui/icons-material/Check'; const options = { title: 'Common/Progress', diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index 26615ffcb..e32578d0d 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -6,7 +6,7 @@ import { Grid, Radio, RadioGroup -} from '@material-ui/core'; +} from '@mui/material'; const options = { title: 'Common/Radio', diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 748bcd4f9..7ce9e7178 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -8,8 +8,8 @@ import { MenuItem, Typography, Select -} from '@material-ui/core'; -import { Visibility } from '@material-ui/icons'; +} from '@mui/material'; +import { Visibility } from '@mui/icons-material'; const options = { title: 'Common/Select', diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index 2519018c9..fec2d1587 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Grid, Slider, TextField, Tooltip } from '@material-ui/core'; +import { Grid, Slider, TextField, Tooltip } from '@mui/material'; const options = { title: 'Common/Slider', diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index e9d7eec9f..d45f9fe5b 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormControlLabel, Grid, Switch } from '@material-ui/core'; +import { FormControlLabel, Grid, Switch } from '@mui/material'; const options = { title: 'Common/Switch', diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index 78a4540ec..c49ffc963 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Tab, Tabs } from '@material-ui/core'; -import { Layers, LocalOffer, Map, Place, Store } from '@material-ui/icons'; +import { Tab, Tabs } from '@mui/material'; +import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; const options = { title: 'Common/Tabs', diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index d92b5a024..22406c2b6 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Grid, InputAdornment, TextField, Typography } from '@material-ui/core'; -import { Visibility } from '@material-ui/icons'; +import { Grid, InputAdornment, TextField, Typography } from '@mui/material'; +import { Visibility } from '@mui/icons-material'; const options = { title: 'Common/Text Field', diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index b61d40885..a767fd35d 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab'; -import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk'; -import DriveEtaIcon from '@material-ui/icons/DriveEta'; -import AirplanemodeActiveIcon from '@material-ui/icons/AirplanemodeActive'; -import TrainIcon from '@material-ui/icons/Train'; +import { ToggleButtonGroup, ToggleButton } from '@mui/material'; +import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk'; +import DriveEtaIcon from '@mui/icons-material/DriveEta'; +import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; +import TrainIcon from '@mui/icons-material/Train'; const options = { title: 'Common/Toggle Button', diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index 6c3e9ab22..ee55db134 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Button, Grid, Tooltip, Typography, makeStyles } from '@material-ui/core'; +import { Button, Grid, Tooltip, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const options = { title: 'Common/Tooltip', diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/common/Typography.stories.js index 2acff78cd..60661c069 100644 --- a/packages/react-ui/storybook/stories/common/Typography.stories.js +++ b/packages/react-ui/storybook/stories/common/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const options = { title: 'CARTO Theme/Typography', diff --git a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js index b8bc249b5..79d9c0264 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js @@ -1,4 +1,4 @@ -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import React, { useState } from 'react'; import FeatureSelectionWidgetUI from '../../../src/widgets/FeatureSelectionWidgetUI'; import CursorIcon from '../../../src/assets/CursorIcon'; diff --git a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js index e0431032a..d3098b540 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js @@ -5,10 +5,10 @@ import { FormControl, InputLabel, Typography -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import InputFile from '../../../src/custom-components/InputFile'; -import { Alert } from '@material-ui/lab'; +import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; const options = { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 7bb6a6d95..dbdbcc7a3 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { Box, Typography } from '@material-ui/core'; -import LocationOnIcon from '@material-ui/icons/LocationOn'; +import { Box, Typography } from '@mui/material'; +import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; const options = { diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index 0b52520ea..d8923c1aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -1,8 +1,8 @@ import React from 'react'; -import { Typography } from '@material-ui/core'; -import ColorizeIcon from '@material-ui/icons/Colorize'; -import MenuIcon from '@material-ui/icons/Menu'; -import AddLocationIcon from '@material-ui/icons/AddLocation'; +import { Typography } from '@mui/material'; +import ColorizeIcon from '@mui/icons-material/Colorize'; +import MenuIcon from '@mui/icons-material/Menu'; +import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; import { buildReactPropsAsString } from '../../utils'; diff --git a/packages/react-ui/webpack.config.js b/packages/react-ui/webpack.config.js index c2535112b..230e6aa50 100644 --- a/packages/react-ui/webpack.config.js +++ b/packages/react-ui/webpack.config.js @@ -6,9 +6,11 @@ const webpackBaseConfig = require('../../webpack.base'); const webpackConfig = { ...webpackBaseConfig, - externals: [ - /^@material-ui\/.+$/, + externals: [ '@carto/react-core', + /^@mui\/.+$/, + /^@emotion\/.+$/, + 'styled-components', 'echarts', 'echarts-for-react', 'react', diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 7f6239ab6..60966edc5 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,14 +65,16 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "^1.5.0-alpha.4", - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-redux": "^1.5.0-alpha.4", - "@carto/react-ui": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-api": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-0", + "@carto/react-ui": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", - "@material-ui/core": "^4.11.3", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", + "@mui/material": "^5.10.10", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "dequal": "^2.0.2", diff --git a/packages/react-widgets/src/layers/FeatureSelectionLayer.js b/packages/react-widgets/src/layers/FeatureSelectionLayer.js index 5de9a7cfc..9dd97b340 100644 --- a/packages/react-widgets/src/layers/FeatureSelectionLayer.js +++ b/packages/react-widgets/src/layers/FeatureSelectionLayer.js @@ -8,7 +8,7 @@ import { selectFeatureSelectionMode } from '@carto/react-redux'; import { EDIT_MODES } from '@carto/react-core'; -import { hexToRgb, useTheme } from '@material-ui/core'; +import { hexToRgb, useTheme } from '@mui/material'; import EditableCartoGeoJsonLayer from './EditableCartoGeoJsonLayer'; import useEventManager from './useEventManager'; import MaskLayer from './MaskLayer'; diff --git a/packages/react-widgets/src/widgets/GeocoderWidget.js b/packages/react-widgets/src/widgets/GeocoderWidget.js index 9cd36d809..5009d887f 100644 --- a/packages/react-widgets/src/widgets/GeocoderWidget.js +++ b/packages/react-widgets/src/widgets/GeocoderWidget.js @@ -4,8 +4,8 @@ import { PropTypes } from 'prop-types'; import { addLayer, setViewState } from '@carto/react-redux'; -import { CircularProgress, InputBase, Paper, SvgIcon } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { CircularProgress, InputBase, Paper, SvgIcon } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import useGeocoderWidgetController from '../hooks/useGeocoderWidgetController'; const useStyles = makeStyles((theme) => ({ @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({ }, input: { ...theme.typography.body2, - width: `calc(100% - ${theme.spacing(5)}px)`, + width: `calc(100% - ${theme.spacing(5)})`, marginLeft: theme.spacing(1) } })); diff --git a/packages/react-widgets/src/widgets/TimeSeriesWidget.js b/packages/react-widgets/src/widgets/TimeSeriesWidget.js index 6508b016b..555339758 100644 --- a/packages/react-widgets/src/widgets/TimeSeriesWidget.js +++ b/packages/react-widgets/src/widgets/TimeSeriesWidget.js @@ -12,7 +12,7 @@ import { AggregationTypes, _FilterTypes as FilterTypes } from '@carto/react-core'; -import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@material-ui/core'; +import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@mui/material'; import { PropTypes } from 'prop-types'; import { columnAggregationOn } from './utils/propTypesFns'; import useWidgetFetch from '../hooks/useWidgetFetch'; diff --git a/packages/react-widgets/webpack.config.js b/packages/react-widgets/webpack.config.js index bbb7e2487..6bb6ed60d 100644 --- a/packages/react-widgets/webpack.config.js +++ b/packages/react-widgets/webpack.config.js @@ -9,7 +9,8 @@ const webpackConfig = { externals: [ /^@carto\/react-.+$/, /^@deck.gl\/.+$/, - /^@material-ui\/.+$/, + /^@mui\/.+$/, + /^@emotion\/.+$/, /^@nebula.gl\/.+$/, 'react', 'react-dom', diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index f85d4d498..7817cc04f 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "1.5.0-alpha.4", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "^0.0.0-experimental-muiv5-1", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", diff --git a/yarn.lock b/yarn.lock index f8a8d1990..9f72e61ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -264,6 +264,13 @@ dependencies: "@babel/types" "^7.18.9" +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3" @@ -711,6 +718,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.5" +"@babel/plugin-syntax-jsx@^7.17.12": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0" + integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q== + dependencies: + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" @@ -1225,14 +1239,14 @@ core-js-pure "^3.19.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.9", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.9", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.16.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a" integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA== dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.17.8": +"@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== @@ -1273,7 +1287,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.19.1": +"@babel/traverse@^7.19.1", "@babel/traverse@^7.4.5": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8" integrity sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g== @@ -1454,10 +1468,123 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f" integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA== -"@emotion/hash@^0.8.0": +"@emotion/babel-plugin@^11.10.0": + version "11.10.2" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7" + integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/plugin-syntax-jsx" "^7.17.12" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/serialize" "^1.1.0" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.0.13" + +"@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3": + version "11.10.3" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87" + integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.0.13" + +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" - integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/react@^11.10.0": + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" + integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/cache" "^11.10.0" + "@emotion/serialize" "^1.1.0" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8" + integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5" + integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w== + +"@emotion/styled@^11.10.0": + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4" + integrity sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/is-prop-valid" "^1.2.0" + "@emotion/serialize" "^1.1.0" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" + integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== + +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== "@eslint/eslintrc@^0.4.3": version "0.4.3" @@ -2759,88 +2886,6 @@ dependencies: "@mapbox/point-geometry" "~0.1.0" -"@material-ui/core@^4.11.3": - version "4.12.3" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" - integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.12.1" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - "@types/react-transition-group" "^4.2.0" - clsx "^1.0.4" - hoist-non-react-statics "^3.3.2" - popper.js "1.16.1-lts" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - react-transition-group "^4.4.0" - -"@material-ui/icons@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" - integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== - dependencies: - "@babel/runtime" "^7.4.4" - -"@material-ui/lab@^4.0.0-alpha.57": - version "4.0.0-alpha.60" - resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2" - integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - -"@material-ui/styles@^4.11.4": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" - integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.8.0" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - csstype "^2.5.2" - hoist-non-react-statics "^3.3.2" - jss "^10.5.1" - jss-plugin-camel-case "^10.5.1" - jss-plugin-default-unit "^10.5.1" - jss-plugin-global "^10.5.1" - jss-plugin-nested "^10.5.1" - jss-plugin-props-sort "^10.5.1" - jss-plugin-rule-value-function "^10.5.1" - jss-plugin-vendor-prefixer "^10.5.1" - prop-types "^15.7.2" - -"@material-ui/system@^4.12.1": - version "4.12.1" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" - integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - csstype "^2.5.2" - prop-types "^15.7.2" - -"@material-ui/types@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" - integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== - -"@material-ui/utils@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" - integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== - dependencies: - "@babel/runtime" "^7.4.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - "@math.gl/core@3.5.6", "@math.gl/core@^3.5.0", "@math.gl/core@^3.5.1": version "3.5.6" resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.5.6.tgz#d849db978d7d4a4984bb63868adc693975d97ce7" @@ -2970,6 +3015,144 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@mui/base@5.0.0-alpha.102": + version "5.0.0-alpha.102" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.102.tgz#53b07d0b73d3afe1d2a3feb3b43c8188bb821796" + integrity sha512-5e/qAIP+DlkrZxIt/cwnDw/A3ii22WkoEoWKHyu4+oeGs3/1Flh7qLaN4h5EAIBB9TvTEZEUzvmsTInmIj6ghg== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/is-prop-valid" "^1.2.0" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + "@popperjs/core" "^2.11.6" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/core-downloads-tracker@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.10.tgz#a3e5d2f6e5146e9a85d48824c386a31be1746ba3" + integrity sha512-aDuE2PNEh+hAndxEWlZgq7uiFPZKJtnkPDX7v6kSCrMXA32ZaQ6rZi5olmC7DUHt/BaOSxb7N/im/ss0XBkDhA== + +"@mui/icons-material@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.9.tgz#f9522c49797caf30146acc576e37ecb4f95bbc38" + integrity sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg== + dependencies: + "@babel/runtime" "^7.19.0" + +"@mui/lab@^5.0.0-alpha.104": + version "5.0.0-alpha.104" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.104.tgz#8d2f0c6f87de1ccb72dd29c8f5eb23ee99dfbe76" + integrity sha512-mABdzB/cw5IXtCj2B4oggsXkfLvHg73ujZfErtKP4Sj7L6Fzy+rQceBGjv84UFBkqMvv9zm1UUchI3HfEj/lUw== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/base" "5.0.0-alpha.102" + "@mui/system" "^5.10.10" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/material@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.10.tgz#df780d933c0aa9d4a5272f32c9cc24bf1ea72cff" + integrity sha512-ioLvqY7VvcePz9dnEIRhpiVvtJmAFmvG6rtLXXzVdMmAVbSaelr5Io07mPz/mCyqE+Uv8/4EuJV276DWO7etzA== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/base" "5.0.0-alpha.102" + "@mui/core-downloads-tracker" "^5.10.10" + "@mui/system" "^5.10.10" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + "@types/react-transition-group" "^4.4.5" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + +"@mui/private-theming@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.10.9.tgz#c427bfa736455703975cdb108dbde6a174ba7971" + integrity sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/utils" "^5.10.9" + prop-types "^15.8.1" + +"@mui/styled-engine-sc@^5.10.6": + version "5.10.6" + resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.10.6.tgz#e1c1f1e6a80f2bcd11f83e33c9925753cf61bf23" + integrity sha512-AQIa478w3UI8gmlht7orp96tEJbEN26FiEs9Aee6E+iVTnoyT3b6V/JapgKlITo6rn7tYTSX9iJYwnDTMhbzTg== + dependencies: + "@babel/runtime" "^7.19.0" + prop-types "^15.8.1" + +"@mui/styled-engine@^5.10.8": + version "5.10.8" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.8.tgz#2db411e4278f06f70ccb6b5cd56ace67109513f6" + integrity sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/cache" "^11.10.3" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/styles@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.10.10.tgz#9b44bfbb89e735b737acd95ba4b8136f116ec30a" + integrity sha512-utr87q/euocRdc2ekFX7DL1gqTVfogSVeu74Nspr8rtK/afC9QwF3ScP/XThVXWPcQKjBWHMKWtAO9BSVE4KDg== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/hash" "^0.9.0" + "@mui/private-theming" "^5.10.9" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + csstype "^3.1.1" + hoist-non-react-statics "^3.3.2" + jss "^10.9.2" + jss-plugin-camel-case "^10.9.2" + jss-plugin-default-unit "^10.9.2" + jss-plugin-global "^10.9.2" + jss-plugin-nested "^10.9.2" + jss-plugin-props-sort "^10.9.2" + jss-plugin-rule-value-function "^10.9.2" + jss-plugin-vendor-prefixer "^10.9.2" + prop-types "^15.8.1" + +"@mui/system@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.10.tgz#fbc34f29a3b62268c3d2b2be92819a35fc52de90" + integrity sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/private-theming" "^5.10.9" + "@mui/styled-engine" "^5.10.8" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/types@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.0.tgz#91380c2d42420f51f404120f7a9270eadd6f5c23" + integrity sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA== + +"@mui/utils@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.10.9.tgz#9dc455f9230f43eeb81d96a9a4bdb3855bb9ea39" + integrity sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA== + dependencies: + "@babel/runtime" "^7.19.0" + "@types/prop-types" "^15.7.5" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.8.1" + react-is "^18.2.0" + "@nebula.gl/edit-modes@1.0.4", "@nebula.gl/edit-modes@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@nebula.gl/edit-modes/-/edit-modes-1.0.4.tgz#df37751768239fb37dfcb697b0b90e11371a47a3" @@ -3252,6 +3435,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@popperjs/core@^2.11.6": + version "2.11.6" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" + integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== + "@probe.gl/env@3.5.0", "@probe.gl/env@^3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@probe.gl/env/-/env-3.5.0.tgz#c6d8fbf414fda3eba7b3813cc274e76245216fe0" @@ -4876,6 +5064,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== +"@types/prop-types@^15.7.5": + version "15.7.5" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" + integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== + "@types/qs@^6.9.5": version "6.9.7" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" @@ -4888,6 +5081,13 @@ dependencies: "@types/react" "*" +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.20": version "7.1.21" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186" @@ -4905,10 +5105,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.2.0": - version "4.4.4" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" - integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== +"@types/react-transition-group@^4.4.5": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" + integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== dependencies: "@types/react" "*" @@ -6042,7 +6242,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^3.0.1: +babel-plugin-macros@^3.0.1, babel-plugin-macros@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== @@ -6092,6 +6292,22 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" + integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== + babel-preset-current-node-syntax@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b" @@ -6668,6 +6884,11 @@ camelcase@^6.0.0, camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.1.tgz#250fd350cfd555d0d2160b1d51510eaf8326e86e" integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286: version "1.0.30001292" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz#4a55f61c06abc9595965cfd77897dc7bc1cdc456" @@ -6983,10 +7204,10 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= -clsx@^1.0.4: - version "1.1.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" - integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== +clsx@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== cmd-shim@^4.1.0: version "4.1.0" @@ -7397,6 +7618,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.5.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -7599,6 +7825,11 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" @@ -7629,6 +7860,15 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-vendor@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" @@ -7678,16 +7918,16 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^2.5.2: - version "2.6.19" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa" - integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ== - csstype@^3.0.2: version "3.0.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== +csstype@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" + integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== + csv-streamify@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/csv-streamify/-/csv-streamify-3.0.4.tgz#4cb614c57e3f299cca17b63fdcb4ad167777f47a" @@ -9284,6 +9524,11 @@ find-replace@^3.0.0: dependencies: array-back "^3.0.1" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -10371,7 +10616,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -12021,70 +12266,70 @@ jsprim@^1.2.2: json-schema "0.4.0" verror "1.10.0" -jss-plugin-camel-case@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7" - integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww== +jss-plugin-camel-case@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz#76dddfa32f9e62d17daa4e3504991fd0933b89e1" + integrity sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg== dependencies: "@babel/runtime" "^7.3.1" hyphenate-style-name "^1.0.3" - jss "10.9.0" + jss "10.9.2" -jss-plugin-default-unit@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991" - integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w== +jss-plugin-default-unit@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz#3e7f4a1506b18d8fe231554fd982439feb2a9c53" + integrity sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" -jss-plugin-global@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f" - integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ== +jss-plugin-global@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz#e7f2ad4a5e8e674fb703b04b57a570b8c3e5c2c2" + integrity sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" -jss-plugin-nested@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3" - integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA== +jss-plugin-nested@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz#3aa2502816089ecf3981e1a07c49b276d67dca63" + integrity sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d" - integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw== +jss-plugin-props-sort@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz#645f6c8f179309667b3e6212f66b59a32fb3f01f" + integrity sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" -jss-plugin-rule-value-function@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67" - integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg== +jss-plugin-rule-value-function@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz#9afe07596e477123cbf11120776be6a64494541f" + integrity sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q== dependencies: "@babel/runtime" "^7.3.1" - jss "10.9.0" + jss "10.9.2" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a" - integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA== +jss-plugin-vendor-prefixer@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz#410a0f3b9f8dbbfba58f4d329134df4849aa1237" + integrity sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA== dependencies: "@babel/runtime" "^7.3.1" css-vendor "^2.0.8" - jss "10.9.0" + jss "10.9.2" -jss@10.9.0, jss@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b" - integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw== +jss@10.9.2, jss@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.2.tgz#9379be1f195ef98011dfd31f9448251bd61b95a9" + integrity sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg== dependencies: "@babel/runtime" "^7.3.1" csstype "^3.0.2" @@ -14642,11 +14887,6 @@ polygon-clipping@^0.15.3: dependencies: splaytree "^3.1.0" -popper.js@1.16.1-lts: - version "1.16.1-lts" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" - integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== - portfinder@^1.0.23: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -14720,7 +14960,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^4.1.0: +postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -14893,6 +15133,15 @@ prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.13.1" +prop-types@^15.8.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + property-information@^5.0.0, property-information@^5.3.0: version "5.6.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69" @@ -15211,7 +15460,7 @@ react-inspector@^5.1.0: is-dom "^1.0.0" prop-types "^15.0.0" -react-is@17.0.2, "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: +react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -15221,6 +15470,11 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-redux@^7.2.2: version "7.2.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa" @@ -15238,10 +15492,10 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-transition-group@^4.4.0: - version "4.4.2" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" - integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== dependencies: "@babel/runtime" "^7.5.5" dom-helpers "^5.0.1" @@ -16124,6 +16378,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -16329,10 +16588,10 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== -source-map@^0.5.0, source-map@^0.5.6: +source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" - integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" @@ -16771,6 +17030,27 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +styled-components@^5.2.3: + version "5.3.6" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1" + integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + superstatic@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-7.1.0.tgz#42cc773a0f500fb691841e0533d0b8c31f25997f" @@ -16808,7 +17088,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.0.0, supports-color@^5.3.0: +supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From 050c714125a33153e008a7160c05874d7d4b371c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 24 Oct 2022 14:50:28 +0200 Subject: [PATCH 006/154] Run codemod link-underline-hover (#503) --- packages/react-ui/src/widgets/BarWidgetUI.js | 6 ++++- .../react-ui/src/widgets/CategoryWidgetUI.js | 24 +++++++++++++++---- .../HistogramWidgetUI/HistogramWidgetUI.js | 1 + .../react-ui/src/widgets/RangeWidgetUI.js | 2 +- .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 7 +++++- 5 files changed, 33 insertions(+), 7 deletions(-) diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index 654a792ab..202ef6a77 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -308,7 +308,11 @@ function BarWidgetUI(props) { {selectedBars?.length || 'All'} selected {selectedBars && selectedBars.length > 0 && ( - clearBars()}> + clearBars()} + underline='hover' + > Clear )} diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index cf4aed440..08ef3240d 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -505,21 +505,37 @@ function CategoryWidgetUI(props) { {selectedCategories.length ? selectedCategories.length : 'All'} selected {showAll ? ( - + Apply ) : blockedCategories.length > 0 ? ( - + Unlock ) : ( selectedCategories.length > 0 && ( - + Lock - + Clear diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index 8134919ac..f87ea691a 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -272,6 +272,7 @@ function HistogramWidgetUI({ onSelectedBarsChange([])} + underline='hover' > Clear diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index 66346f5a8..56d8f625e 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -156,7 +156,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { {hasBeenModified && ( - + Clear )} diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index d8e485e38..06714fb76 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -325,7 +325,12 @@ function TimeSeriesWidgetUIContent({ )} {showClearButton && ( - + Clear )} From 5d8c2b360a195111a1dd8b7032bf48ba31c221c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 26 Oct 2022 17:50:48 +0200 Subject: [PATCH 007/154] Spacings, borders and shadows Foundations (#507) --- CHANGELOG.md | 3 +- UPGRADE.md | 20 ++ .../react-ui/src/theme/sections/components.js | 180 +++++++++--------- .../src/theme/sections/cssBaseline.js | 24 +-- .../react-ui/src/theme/sections/shadows.js | 18 +- packages/react-ui/src/theme/themeUtils.js | 3 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 2 +- .../react-ui/storybook/.storybook/preview.js | 2 +- .../stories/atoms/Borders.stories.js | 76 ++++++++ .../{common => atoms}/Palette.stories.js | 2 +- .../stories/atoms/Shadows.stories.js | 81 ++++++++ .../stories/atoms/Spacing.stories.js | 85 +++++++++ .../{common => atoms}/Typography.stories.js | 2 +- .../storybook/stories/common/Paper.stories.js | 2 - 14 files changed, 382 insertions(+), 118 deletions(-) create mode 100644 packages/react-ui/storybook/stories/atoms/Borders.stories.js rename packages/react-ui/storybook/stories/{common => atoms}/Palette.stories.js (99%) create mode 100644 packages/react-ui/storybook/stories/atoms/Shadows.stories.js create mode 100644 packages/react-ui/storybook/stories/atoms/Spacing.stories.js rename packages/react-ui/storybook/stories/{common => atoms}/Typography.stories.js (99%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a9fedda7..34bc02daa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,12 +2,13 @@ ## Not released +- New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) +- Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) - New typography toolkit for MUI carto-theme [#498](https://github.com/CartoDB/carto-react/pull/498/) - New color palette for MUI carto-theme [#496](https://github.com/CartoDB/carto-react/pull/496/) - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) -- Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) ## 1.5 diff --git a/UPGRADE.md b/UPGRADE.md index 8d4987aca..12207a923 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -41,3 +41,23 @@ Some others have been moved because they aren't native MUI keys and are so speci - other These sets of keys are now in: `componentsPalette`. + +## Spacing + +Design is restringed to a few specific values for spacing, which are: + +`0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 12, 15`. + +## Shapes + +Design is restringed to a few specific values for border radius, which are: + +`0.5, 1, 1.5, 2`. + +Use: `borderRadius: theme.spacing(x)` + +## Shadows / Elevations + +Design is restringed to a few specific values for shadows, which are: + +`0, 1, 2, 4, 6, 8, 16, 24`. diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js index 8408bfe7f..2b1c110fd 100644 --- a/packages/react-ui/src/theme/sections/components.js +++ b/packages/react-ui/src/theme/sections/components.js @@ -1,4 +1,4 @@ -import { spacing } from '../themeUtils'; +import { getSpacing } from '../themeUtils'; import { commonPalette, componentsPalette } from './palette'; import { themeTypography } from './typography'; @@ -106,12 +106,12 @@ export const themeComponentsOverrides = { }, MuiIconButton: { root: { - padding: spacing(0.75), - borderRadius: spacing(0.5), + padding: getSpacing(0.75), + borderRadius: getSpacing(0.5), color: commonPalette.text.primary }, sizeSmall: { - padding: spacing(0.25) + padding: getSpacing(0.25) } }, @@ -135,25 +135,25 @@ export const themeComponentsOverrides = { input: { ...themeTypography.body1, height: `${themeTypography.body1.lineHeight}em`, - padding: spacing(3, 2, 1) + padding: getSpacing(3, 2, 1) }, inputMarginDense: { ...themeTypography.body2, height: `${themeTypography.body2.lineHeight}em`, - padding: spacing(1, 1.5), - paddingTop: spacing(1), - paddingBottom: spacing(1) + padding: getSpacing(1, 1.5), + paddingTop: getSpacing(1), + paddingBottom: getSpacing(1) }, adornedStart: { '&$marginDense': { - paddingLeft: spacing(1.5) + paddingLeft: getSpacing(1.5) } }, adornedEnd: { '&$marginDense': { - paddingRight: spacing(1.5) + paddingRight: getSpacing(1.5) } }, @@ -162,7 +162,7 @@ export const themeComponentsOverrides = { }, multiline: { - padding: spacing(2.75, 2, 1.25) + padding: getSpacing(2.75, 2, 1.25) } }, MuiInputLabel: { @@ -209,7 +209,7 @@ export const themeComponentsOverrides = { root: { ...themeTypography.body1, alignItems: 'baseline', - marginBottom: spacing(1.5), + marginBottom: getSpacing(1.5), color: commonPalette.text.secondary, '&:disabled': { @@ -222,15 +222,15 @@ export const themeComponentsOverrides = { }, positionStart: { - marginLeft: spacing(0.25) + marginLeft: getSpacing(0.25) }, positionEnd: { - marginRight: spacing(0.25) + marginRight: getSpacing(0.25) }, marginDense: { - marginBottom: spacing(0), + marginBottom: getSpacing(0), alignItems: 'center', ...themeTypography.body2, @@ -247,13 +247,13 @@ export const themeComponentsOverrides = { root: { ...themeTypography.caption, '&$contained': { - marginTop: spacing(1) + marginTop: getSpacing(1) } }, marginDense: { '&$contained': { - marginLeft: spacing(0) + marginLeft: getSpacing(0) } } }, @@ -291,16 +291,16 @@ export const themeComponentsOverrides = { MuiAutocomplete: { inputRoot: { '&[class*="MuiOutlinedInput-root"]': { - padding: spacing(3, 1.25, 0.5), + padding: getSpacing(3, 1.25, 0.5), '& .MuiAutocomplete-input': { - padding: spacing(0, 1.25, 0.5) + padding: getSpacing(0, 1.25, 0.5) } }, '&.MuiInputBase-marginDense.MuiOutlinedInput-root $input.MuiOutlinedInput-inputMarginDense': { - paddingTop: spacing(0.25), - paddingBottom: spacing(0.25) + paddingTop: getSpacing(0.25), + paddingBottom: getSpacing(0.25) } } }, @@ -309,17 +309,17 @@ export const themeComponentsOverrides = { MuiCheckbox: { root: { ...themeTypography.body2, - padding: spacing(0.75), + padding: getSpacing(0.75), borderRadius: '50%', '& + .MuiFormControlLabel-label': { ...themeTypography.body2, - marginLeft: spacing(0.25), + marginLeft: getSpacing(0.25), color: commonPalette.text.primary }, '& .MuiSvgIcon-root': { - fontSize: spacing(3) + fontSize: getSpacing(3) } } }, @@ -328,17 +328,17 @@ export const themeComponentsOverrides = { MuiRadio: { root: { ...themeTypography.body2, - padding: spacing(0.75), + padding: getSpacing(0.75), borderRadius: '50%', '& + .MuiFormControlLabel-label': { ...themeTypography.body2, - marginLeft: spacing(0.25), + marginLeft: getSpacing(0.25), color: commonPalette.text.primary }, '& .MuiSvgIcon-root': { - fontSize: spacing(3) + fontSize: getSpacing(3) } } }, @@ -358,7 +358,7 @@ export const themeComponentsOverrides = { }, '& .MuiTab-root': { - padding: spacing(0, 2), + padding: getSpacing(0, 2), '& .MuiTab-wrapper': { alignItems: 'flex-start' @@ -370,15 +370,15 @@ export const themeComponentsOverrides = { // Tab MuiTab: { root: { - padding: spacing(0, 1), - marginRight: spacing(3), + padding: getSpacing(0, 1), + marginRight: getSpacing(3), minWidth: '56px!important', '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { flexFlow: 'row', alignItems: 'center' }, '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { - marginRight: spacing(1), + marginRight: getSpacing(1), marginBottom: 0 } }, @@ -406,27 +406,27 @@ export const themeComponentsOverrides = { // Switch MuiSwitch: { root: { - height: spacing(4.5), - width: spacing(6), - padding: spacing(1), + height: getSpacing(4.5), + width: getSpacing(6), + padding: getSpacing(1), overflow: 'visible', '& + .MuiFormControlLabel-label': { ...themeTypography.body2, - marginLeft: spacing(0.25), + marginLeft: getSpacing(0.25), color: commonPalette.text.primary } }, switchBase: { - padding: spacing(1.5), + padding: getSpacing(1.5), borderRadius: '50%', transform: 'translate(1px, 1px)', color: commonPalette.text.secondary, '&$checked': { '& input': { - left: spacing(-1.5) + left: getSpacing(-1.5) }, transform: 'translate(13px, 1px)', @@ -439,20 +439,20 @@ export const themeComponentsOverrides = { }, thumb: { - width: spacing(1.25), - height: spacing(1.25), + width: getSpacing(1.25), + height: getSpacing(1.25), boxShadow: 'none' }, input: { - width: spacing(6), + width: getSpacing(6), left: 0 }, track: { height: 'auto', border: `2px solid ${commonPalette.text.secondary}`, - borderRadius: spacing(2), + borderRadius: getSpacing(2), opacity: 1, backgroundColor: commonPalette.common.white }, @@ -516,12 +516,12 @@ export const themeComponentsOverrides = { }, sizeSmall: { - height: spacing(4.5), - width: spacing(6), - padding: spacing(1), + height: getSpacing(4.5), + width: getSpacing(6), + padding: getSpacing(1), '& $switchBase': { - padding: spacing(1.5), + padding: getSpacing(1.5), transform: 'translate(0, 1px)', '&$checked': { @@ -529,8 +529,8 @@ export const themeComponentsOverrides = { } }, '& $thumb': { - width: spacing(1.25), - height: spacing(1.25) + width: getSpacing(1.25), + height: getSpacing(1.25) } } }, @@ -546,13 +546,13 @@ export const themeComponentsOverrides = { }, '& .MuiSvgIcon-root': { fontSize: `${themeTypography.body2.lineHeight}em`, - marginRight: spacing(1) + marginRight: getSpacing(1) } }, separator: { - marginLeft: spacing(0.5), - marginRight: spacing(0.5) + marginLeft: getSpacing(0.5), + marginRight: getSpacing(0.5) } }, @@ -562,22 +562,22 @@ export const themeComponentsOverrides = { // Indent sublevels, ugly but needed to avoid issues with hover '& .MuiList-root': { '& .MuiListItem-root': { - paddingLeft: spacing(4) + paddingLeft: getSpacing(4) }, '& .MuiList-root': { '& .MuiListItem-root': { - paddingLeft: spacing(6) + paddingLeft: getSpacing(6) }, '& .MuiList-root': { '& .MuiListItem-root': { - paddingLeft: spacing(8) + paddingLeft: getSpacing(8) }, '& .MuiList-root': { '& .MuiListItem-root': { - paddingLeft: spacing(10) + paddingLeft: getSpacing(10) } } } @@ -588,11 +588,11 @@ export const themeComponentsOverrides = { MuiListItemIcon: { root: { - minWidth: spacing(5.75), - marginLeft: spacing(0.75), + minWidth: getSpacing(5.75), + marginLeft: getSpacing(0.75), '& .MuiSvgIcon-root': { - fontSize: spacing(3) + fontSize: getSpacing(3) } } }, @@ -600,11 +600,11 @@ export const themeComponentsOverrides = { MuiListItemAvatar: { root: { '& .MuiAvatar-root': { - height: spacing(4.5), - width: spacing(4.5) + height: getSpacing(4.5), + width: getSpacing(4.5) }, '& .MuiSvgIcon-root': { - fontSize: spacing(2.5) + fontSize: getSpacing(2.5) } } }, @@ -624,14 +624,14 @@ export const themeComponentsOverrides = { // Dialog MuiDialogTitle: { root: { - padding: spacing(3, 3, 2) + padding: getSpacing(3, 3, 2) } }, MuiDialogContent: { root: { '& .MuiFormGroup-root': { - padding: spacing(1, 0) + padding: getSpacing(1, 0) } } }, @@ -645,46 +645,46 @@ export const themeComponentsOverrides = { MuiToggleButtonGroup: { groupedHorizontal: { '&:not(:last-child)': { - marginRight: spacing(0.25), - borderTopRightRadius: spacing(0.5), - borderBottomRightRadius: spacing(0.5) + marginRight: getSpacing(0.25), + borderTopRightRadius: getSpacing(0.5), + borderBottomRightRadius: getSpacing(0.5) }, '&:not(:first-child)': { marginLeft: 0, borderLeft: 'none', - borderTopLeftRadius: spacing(0.5), - borderBottomLeftRadius: spacing(0.5) + borderTopLeftRadius: getSpacing(0.5), + borderBottomLeftRadius: getSpacing(0.5) } }, groupedVertical: { '&:not(:last-child)': { - marginBottom: spacing(0.25), - borderBottomLeftRadius: spacing(0.5), - borderBottomRightRadius: spacing(0.5) + marginBottom: getSpacing(0.25), + borderBottomLeftRadius: getSpacing(0.5), + borderBottomRightRadius: getSpacing(0.5) }, '&:not(:first-child)': { - borderTopLeftRadius: spacing(0.5), - borderTopRightRadius: spacing(0.5) + borderTopLeftRadius: getSpacing(0.5), + borderTopRightRadius: getSpacing(0.5) } } }, MuiTablePagination: { select: { - paddingRight: spacing(7.5), - paddingLeft: spacing(1.5) + paddingRight: getSpacing(7.5), + paddingLeft: getSpacing(1.5) }, input: { - height: spacing(4), + height: getSpacing(4), border: `2px solid ${commonPalette.divider}`, - borderRadius: spacing(0.5), + borderRadius: getSpacing(0.5), fontWeight: themeTypography.fontWeightMedium, '& .MuiSelect-icon': { top: '50%', transform: 'translateY(-50%)', - width: spacing(2.25), - height: spacing(2.25), - right: spacing(0.75) + width: getSpacing(2.25), + height: getSpacing(2.25), + right: getSpacing(0.75) } }, caption: { @@ -695,11 +695,11 @@ export const themeComponentsOverrides = { }, toolbar: { minHeight: 0, - marginTop: spacing(1) + marginTop: getSpacing(1) }, actions: { '& button:last-child': { - marginLeft: spacing(2) + marginLeft: getSpacing(2) } } }, @@ -717,10 +717,10 @@ export const themeComponentsOverrides = { // MuiToggleButton MuiToggleButton: { root: { - width: spacing(4.5), - height: spacing(4.5), + width: getSpacing(4.5), + height: getSpacing(4.5), border: 'none', - borderRadius: spacing(0.5), + borderRadius: getSpacing(0.5), color: commonPalette.grey[500], '&$selected': { color: commonPalette.primary.main, @@ -731,16 +731,16 @@ export const themeComponentsOverrides = { } }, sizeSmall: { - width: spacing(3), - height: spacing(3), + width: getSpacing(3), + height: getSpacing(3), '& .MuiSvgIcon-root': { - maxWidth: spacing(2.5), - maxHeight: spacing(2.5) + maxWidth: getSpacing(2.5), + maxHeight: getSpacing(2.5) } }, sizeLarge: { - width: spacing(7), - height: spacing(7) + width: getSpacing(7), + height: getSpacing(7) } }, diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js index 9cc48b5aa..c939d034a 100644 --- a/packages/react-ui/src/theme/sections/cssBaseline.js +++ b/packages/react-ui/src/theme/sections/cssBaseline.js @@ -1,4 +1,4 @@ -import { spacing } from '../themeUtils'; +import { getSpacing } from '../themeUtils'; import { commonPalette } from './palette'; import { themeTypography } from './typography'; @@ -22,18 +22,18 @@ export const CssBaseline = { // iOS Search clear button 'input[type="search"]::-webkit-search-cancel-button': { '-webkit-appearance': 'none', - height: spacing(2), - width: spacing(2), + 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: spacing(2) + backgroundSize: getSpacing(2) }, // Mapbox controls '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { - padding: spacing(0, 1), - borderRadius: spacing(0.5, 0, 0, 0), + padding: getSpacing(0, 1), + borderRadius: getSpacing(0.5, 0, 0, 0), '& .mapboxgl-ctrl-attrib-inner': { ...themeTypography.overline, @@ -47,12 +47,12 @@ export const CssBaseline = { '&.mapboxgl-compact': { backgroundColor: 'transparent', - right: spacing(0.5), - bottom: spacing(2.5), + right: getSpacing(0.5), + bottom: getSpacing(2.5), // Mobile '@media (max-width: 600px)': { - bottom: spacing(0.5) + bottom: getSpacing(0.5) }, '& .mapboxgl-ctrl-attrib-button': { @@ -69,9 +69,9 @@ export const CssBaseline = { '& .mapboxgl-ctrl-attrib-inner': { backgroundColor: 'rgba(255,255,255,.8)', - padding: spacing(0.5, 1), - borderRadius: spacing(1.5), - marginRight: spacing(2.5), + padding: getSpacing(0.5, 1), + borderRadius: getSpacing(1.5), + marginRight: getSpacing(2.5), color: commonPalette.text.secondary }, diff --git a/packages/react-ui/src/theme/sections/shadows.js b/packages/react-ui/src/theme/sections/shadows.js index de331b86f..9d472f11c 100644 --- a/packages/react-ui/src/theme/sections/shadows.js +++ b/packages/react-ui/src/theme/sections/shadows.js @@ -1,13 +1,15 @@ +// We only use some of them (the ones with a comment with their number), but all of them are necessary for the Mui theme. + export const themeShadows = [ - 'none', - '0px 2px 1px -1px rgba(0,0,0,0.16),0px 1px 1px 0px rgba(0,0,0,0.08),0px 1px 3px 0px rgba(0,0,0,0.04)', - '0px 3px 1px -2px rgba(0,0,0,0.16),0px 2px 2px 0px rgba(0,0,0,0.08),0px 1px 5px 0px rgba(0,0,0,0.04)', + 'none', // 0 + '0px 2px 1px -1px rgba(44, 48, 50, 0.12), 0px 1px 1px rgba(44, 48, 50, 0.08), 0px 1px 3px rgba(44, 48, 50, 0.04)', // 1 + '0px 3px 1px -2px rgba(44, 48, 50, 0.12), 0px 2px 2px rgba(44, 48, 50, 0.08), 0px 1px 5px rgba(44, 48, 50, 0.04)', // 2 '0px 3px 3px -2px rgba(0,0,0,0.16),0px 3px 4px 0px rgba(0,0,0,0.08),0px 1px 8px 0px rgba(0,0,0,0.04)', - '0px 2px 4px -1px rgba(0,0,0,0.16),0px 4px 5px 0px rgba(0,0,0,0.08),0px 1px 10px 0px rgba(0,0,0,0.04)', + '0px 2px 4px -1px rgba(44, 48, 50, 0.12), 0px 4px 5px rgba(44, 48, 50, 0.08), 0px 1px 10px rgba(44, 48, 50, 0.04)', // 4 '0px 3px 5px -1px rgba(0,0,0,0.16),0px 5px 8px 0px rgba(0,0,0,0.08),0px 1px 14px 0px rgba(0,0,0,0.04)', - '0px 3px 5px -1px rgba(0,0,0,0.16),0px 6px 10px 0px rgba(0,0,0,0.08),0px 1px 18px 0px rgba(0,0,0,0.04)', + '0px 3px 5px -1px rgba(44, 48, 50, 0.12), 0px 6px 10px rgba(44, 48, 50, 0.08), 0px 1px 18px rgba(44, 48, 50, 0.04)', // 6 '0px 4px 5px -2px rgba(0,0,0,0.16),0px 7px 10px 1px rgba(0,0,0,0.08),0px 2px 16px 1px rgba(0,0,0,0.04)', - '0px 5px 5px -3px rgba(0,0,0,0.16),0px 8px 10px 1px rgba(0,0,0,0.08),0px 3px 14px 2px rgba(0,0,0,0.04)', + '0px 5px 5px -3px rgba(44, 48, 50, 0.12), 0px 8px 10px 1px rgba(44, 48, 50, 0.08), 0px 3px 14px 2px rgba(44, 48, 50, 0.04)', // 8 '0px 5px 6px -3px rgba(0,0,0,0.16),0px 9px 12px 1px rgba(0,0,0,0.08),0px 3px 16px 2px rgba(0,0,0,0.04)', '0px 6px 6px -3px rgba(0,0,0,0.16),0px 10px 14px 1px rgba(0,0,0,0.08),0px 4px 18px 3px rgba(0,0,0,0.04)', '0px 6px 7px -4px rgba(0,0,0,0.16),0px 11px 15px 1px rgba(0,0,0,0.08),0px 4px 20px 3px rgba(0,0,0,0.04)', @@ -15,7 +17,7 @@ export const themeShadows = [ '0px 7px 8px -4px rgba(0,0,0,0.16),0px 13px 19px 2px rgba(0,0,0,0.08),0px 5px 24px 4px rgba(0,0,0,0.04)', '0px 7px 9px -4px rgba(0,0,0,0.16),0px 14px 21px 2px rgba(0,0,0,0.08),0px 5px 26px 4px rgba(0,0,0,0.04)', '0px 8px 9px -5px rgba(0,0,0,0.16),0px 15px 22px 2px rgba(0,0,0,0.08),0px 6px 28px 5px rgba(0,0,0,0.04)', - '0px 8px 10px -5px rgba(0,0,0,0.16),0px 16px 24px 2px rgba(0,0,0,0.08),0px 6px 30px 5px rgba(0,0,0,0.04)', + '0px 8px 10px -5px rgba(44, 48, 50, 0.12), 0px 16px 24px 2px rgba(44, 48, 50, 0.08), 0px 6px 30px 5px rgba(44, 48, 50, 0.04)', // 16 '0px 8px 11px -5px rgba(0,0,0,0.16),0px 17px 26px 2px rgba(0,0,0,0.08),0px 6px 32px 5px rgba(0,0,0,0.04)', '0px 9px 11px -5px rgba(0,0,0,0.16),0px 18px 28px 2px rgba(0,0,0,0.08),0px 7px 34px 6px rgba(0,0,0,0.04)', '0px 9px 12px -6px rgba(0,0,0,0.16),0px 19px 29px 2px rgba(0,0,0,0.08),0px 7px 36px 6px rgba(0,0,0,0.04)', @@ -23,5 +25,5 @@ export const themeShadows = [ '0px 10px 13px -6px rgba(0,0,0,0.16),0px 21px 33px 3px rgba(0,0,0,0.08),0px 8px 40px 7px rgba(0,0,0,0.04)', '0px 10px 14px -6px rgba(0,0,0,0.16),0px 22px 35px 3px rgba(0,0,0,0.08),0px 8px 42px 7px rgba(0,0,0,0.04)', '0px 11px 14px -7px rgba(0,0,0,0.16),0px 23px 36px 3px rgba(0,0,0,0.08),0px 9px 44px 8px rgba(0,0,0,0.04)', - '0px 11px 15px -7px rgba(0,0,0,0.16),0px 24px 38px 3px rgba(0,0,0,0.08),0px 9px 46px 8px rgba(0,0,0,0.04)' + '0px 11px 15px -7px rgba(44, 48, 50, 0.12), 0px 24px 38px 3px rgba(44, 48, 50, 0.08), 0px 9px 46px 8px rgba(44, 48, 50, 0.04)' // 24 ]; diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index a58d7d546..9675338ff 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -1,7 +1,8 @@ import { createSpacing } from '@mui/system'; import { SPACING } from './themeConstants'; -export const spacing = createSpacing(SPACING); +// Create spacing for theming +export const getSpacing = createSpacing(SPACING); // Convert pixels to rem export function getPixelToRem(px) { diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 0d155a5d3..345de101c 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -224,7 +224,7 @@ function WrapperWidgetUI(props) { ({ + text: { + marginBottom: theme.spacing(0.5) + }, + container: { + width: theme.spacing(12), + height: theme.spacing(12), + marginBottom: theme.spacing(2), + padding: 0, + backgroundColor: theme.palette.primary.background, + border: `1px solid ${theme.palette.primary.main}` + } +})); + +const BorderBox = ({ size }) => { + const theme = useTheme(); + const sizeVariant = theme.spacing(size); + const classes = useStyles(); + + return ( + + + {`Border Radius ${size}`} + {sizeVariant} + + + + ); +}; + +const Template = () => { + return ( + + + + + + + ); +}; + +export const Playground = BorderBox.bind({}); + +export const BorderRadius = Template.bind({}); diff --git a/packages/react-ui/storybook/stories/common/Palette.stories.js b/packages/react-ui/storybook/stories/atoms/Palette.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Palette.stories.js rename to packages/react-ui/storybook/stories/atoms/Palette.stories.js index 53869507e..91c9586a1 100644 --- a/packages/react-ui/storybook/stories/common/Palette.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Palette.stories.js @@ -4,7 +4,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material/styles'; const options = { - title: 'CARTO Theme/Palette', + title: 'Atoms/Palette', component: Box, argTypes: { colorVariant: { diff --git a/packages/react-ui/storybook/stories/atoms/Shadows.stories.js b/packages/react-ui/storybook/stories/atoms/Shadows.stories.js new file mode 100644 index 000000000..8c820e282 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/Shadows.stories.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { Box, Grid, Typography } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import { makeStyles } from '@mui/styles'; + +const options = { + title: 'Atoms/Shadows', + argTypes: { + size: { + defaultValue: 2, + description: + 'Use `theme.shadows[number]`in styles, or ``', + control: { + type: 'select', + options: [0, 1, 2, 4, 6, 8, 16, 24] + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8990%3A7615' + }, + viewMode: 'docs' + } +}; +export default options; + +const useStyles = makeStyles((theme) => ({ + text: { + marginBottom: theme.spacing(0.5) + }, + container: { + width: theme.spacing(12), + height: theme.spacing(12), + marginBottom: theme.spacing(2), + padding: 0, + backgroundColor: theme.palette.primary.background, + borderRadius: theme.spacing(0.5) + } +})); + +const ShadowBox = ({ size }) => { + const theme = useTheme(); + const sizeVariant = theme.shadows[size]; + const classes = useStyles(); + + return ( + + + {`Elevation ${size}`} + {`shadows[${size}]`} + + + + ); +}; + +const Template = () => { + return ( + + + + + + + + + + + ); +}; + +export const Playground = ShadowBox.bind({}); + +export const Shadows = Template.bind({}); diff --git a/packages/react-ui/storybook/stories/atoms/Spacing.stories.js b/packages/react-ui/storybook/stories/atoms/Spacing.stories.js new file mode 100644 index 000000000..513a6b610 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/Spacing.stories.js @@ -0,0 +1,85 @@ +import React from 'react'; +import { Box, Grid, Typography } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import { makeStyles } from '@mui/styles'; + +const options = { + title: 'Atoms/Spacings', + argTypes: { + size: { + defaultValue: 15, + description: 'Use `theme.spacing(number)` function', + control: { + type: 'select', + options: [0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 12, 15] + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=9246%3A3930' + }, + viewMode: 'docs' + } +}; +export default options; + +const useStyles = makeStyles((theme) => ({ + text: { + marginBottom: theme.spacing(0.5) + }, + container: { + marginBottom: theme.spacing(2), + padding: 0, + backgroundColor: theme.palette.primary.background, + borderRadius: theme.spacing(0.5) + } +})); + +const SpacingBox = ({ size }) => { + const theme = useTheme(); + const sizeVariant = theme.spacing(size); + const classes = useStyles(); + + return ( + + + {`Spacing ${size}`} + {sizeVariant} + + + + ); +}; + +const Template = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export const Playground = SpacingBox.bind({}); + +export const Spacings = Template.bind({}); diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/atoms/Typography.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Typography.stories.js rename to packages/react-ui/storybook/stories/atoms/Typography.stories.js index 60661c069..d536f393f 100644 --- a/packages/react-ui/storybook/stories/common/Typography.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Typography.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import Typography from '@mui/material/Typography'; const options = { - title: 'CARTO Theme/Typography', + title: 'Atoms/Typography', component: Typography, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index a516cb95e..8952c6e59 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -92,8 +92,6 @@ const PaperTemplate = ({ ...args }) => { - - From 7a18d2f0930c4438268d32ef04fa924f0b6c6b98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 26 Oct 2022 18:29:07 +0200 Subject: [PATCH 008/154] Colors and Typography improvements (#502) --- CHANGELOG.md | 1 + UPGRADE.md | 27 +++-- .../widgets/utils/chartUtils.test.js | 4 +- packages/react-ui/src/theme/carto-theme.d.ts | 105 +++++++++++++++--- packages/react-ui/src/theme/carto-theme.js | 9 +- .../react-ui/src/theme/sections/components.js | 10 +- .../react-ui/src/theme/sections/palette.js | 87 +++++++-------- .../react-ui/src/theme/sections/typography.js | 11 +- packages/react-ui/src/theme/themeUtils.js | 13 +++ packages/react-ui/src/widgets/BarWidgetUI.js | 15 ++- .../HistogramWidgetUI/HistogramWidgetUI.js | 20 ++-- packages/react-ui/src/widgets/PieWidgetUI.js | 4 +- .../src/widgets/ScatterPlotWidgetUI.js | 2 +- .../components/TimeSeriesChart.js | 8 +- .../react-ui/src/widgets/utils/chartUtils.js | 2 +- .../stories/atoms/Palette.stories.js | 99 +++++++++++++---- .../stories/atoms/Typography.stories.js | 76 +------------ .../stories/widgetsUI/BarWidgetUI.stories.js | 5 +- .../widgetsUI/HistogramWidgetUI.stories.js | 3 +- 19 files changed, 302 insertions(+), 199 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 34bc02daa..7f501416e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Not released - New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) +- Colors and Typography: design update [#502](https://github.com/CartoDB/carto-react/pull/502/) - Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) - New typography toolkit for MUI carto-theme [#498](https://github.com/CartoDB/carto-react/pull/498/) - New color palette for MUI carto-theme [#496](https://github.com/CartoDB/carto-react/pull/496/) diff --git a/UPGRADE.md b/UPGRADE.md index 12207a923..8135a44ba 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -18,13 +18,16 @@ Removed unused custom `createTheme` function in `carto-theme.js`. `responsiveFontSizes` simplified due we want to resize only a few variants through the theme. -Added several custom variants to the typography set. Note that MUI v5 is needed to register them properly. +Added a few custom variants to the typography set: -## Colors +- overlineDelicate +- code1 +- code2 +- code3 -Keys renamed: +`Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. -- filterInput by filledInput (typo fixed) +## Colors Some keys have been removed from [color palette](https://github.com/CartoDB/carto-react/tree/master/packages/react-ui/src/theme) due they are unused: @@ -33,14 +36,20 @@ Some keys have been removed from [color palette](https://github.com/CartoDB/cart - disabledOpacity - selectedOpacity - focusOpacity -- other, all removed but tooltip and divider +- other, all removed but divider, which is moved to first level + +Some others have been moved or replaced because they aren't native MUI keys and are so specific to some components, these are: + +- charts (replaced by `theme.palette.black[%]`) + +`grey palette` is not used to design (and therefore not for style) components directly. We have a set of neutral colors to use in the custom `default` variant. -Some others have been moved because they aren't native MUI keys and are so specific to some components, these are: +We also have a set of `shade` colors (with transparency): -- charts -- other +- black +- white -These sets of keys are now in: `componentsPalette`. +Important: `primary.relatedLight` and `secondary.relatedLight` has to be replaced by `primary.background` and `secondary.background`. ## Spacing diff --git a/packages/react-ui/__tests__/widgets/utils/chartUtils.test.js b/packages/react-ui/__tests__/widgets/utils/chartUtils.test.js index ae4364619..562f9a17f 100644 --- a/packages/react-ui/__tests__/widgets/utils/chartUtils.test.js +++ b/packages/react-ui/__tests__/widgets/utils/chartUtils.test.js @@ -23,7 +23,9 @@ describe('chart utils', () => { }); describe('applyChartFilter', () => { - const mockedTheme = { palette: { charts: { disabled: { color: '#fff' } } } }; + const mockedTheme = { + palette: { black: { 25: { color: '#000' } } } + }; test('should enable a clicked item', () => { const serie = { data: [{ disabled: true }] }; diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index a0c4cbd2d..a72b6df9f 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,5 +1,5 @@ import { Theme, ThemeOptions } from '@mui/material'; -import { Palette, PaletteColor } from '@mui/material' +import { Palette, PaletteColor } from '@mui/material'; /* TODO: Review if this set of changes in the type of Palette and PaletteColor, to properly use theme @@ -8,17 +8,92 @@ import { Palette, PaletteColor } from '@mui/material' */ export const cartoThemeOptions: ThemeOptions; -type Modify = Omit & R -type CustomPaletteColor = Modify -type CustomPalette = Modify - -export type CartoTheme = Modify +type Modify = Omit & R; + +type CustomPaletteColor = Modify< + PaletteColor, + { + relatedDark: string; + relatedLight: string; + background: string; + outlinedBorder: string; + } +>; +type CustomBrandPaletteColor = Modify< + PaletteColor, + { + navyBlue: string; + locationRed: string; + predictionBlue: string; + softBlue: string; + } +>; +type CustomTextPaletteColor = Modify< + PaletteColor, + { + hint: string; + } +>; +type CustomShadesPaletteColor = Modify< + PaletteColor, + { + 90: string; + 60: string; + 40: string; + 25: string; + 12: string; + 8: string; + 4: string; + } +>; + +type CustomPalette = Modify< + Palette, + { + primary: CustomPaletteColor; + secondary: CustomPaletteColor; + error: CustomPaletteColor; + warning: CustomPaletteColor; + info: CustomPaletteColor; + success: CustomPaletteColor; + default: CustomPaletteColor; + text: CustomTextPaletteColor; + white: CustomShadesPaletteColor; + black: CustomShadesPaletteColor; + brand: CustomBrandPaletteColor; + } +>; + +export type CartoTheme = Modify< + Theme, + { + palette: CustomPalette; + } +>; + +declare module '@mui/material/styles' { + interface TypographyVariants { + overlineDelicate: React.CSSProperties; + code1: React.CSSProperties; + code2: React.CSSProperties; + code3: React.CSSProperties; + } + + // allow configuration using `createTheme` + interface TypographyVariantsOptions { + overlineDelicate?: React.CSSProperties; + code1?: React.CSSProperties; + code2?: React.CSSProperties; + code3?: React.CSSProperties; + } +} + +// Update the Typography's variant prop options +declare module '@mui/material/Typography' { + interface TypographyPropsVariantOverrides { + overlineDelicate: true; + code1: true; + code2: true; + code3: true; + } +} diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 0a9c7b74b..0d3cd2e33 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,6 +1,6 @@ import { themeComponentsOverrides, themeComponentsProps } from './sections/components'; import { CssBaseline } from './sections/cssBaseline'; -import { commonPalette, componentsPalette } from './sections/palette'; +import { commonPalette } from './sections/palette'; import { themeShadows } from './sections/shadows'; import { themeTypography } from './sections/typography'; import { SPACING } from './themeConstants'; @@ -50,7 +50,7 @@ export const cartoThemeOptions = { info: { ...commonPalette.info }, success: { ...commonPalette.success }, text: { ...commonPalette.text }, - divider: componentsPalette.other.divider, + divider: commonPalette.divider, background: { ...commonPalette.background }, grey: { ...commonPalette.grey }, action: { ...commonPalette.action }, @@ -58,8 +58,9 @@ export const cartoThemeOptions = { /* Custom Colors palette */ qualitative: { ...commonPalette.qualitative }, default: { ...commonPalette.default }, - charts: { ...componentsPalette.charts }, - other: { ...componentsPalette.other } + white: { ...commonPalette.white }, + black: { ...commonPalette.black }, + brand: { ...commonPalette.brand } }, shadows: [...themeShadows], typography: { diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js index 2b1c110fd..f1ceec53b 100644 --- a/packages/react-ui/src/theme/sections/components.js +++ b/packages/react-ui/src/theme/sections/components.js @@ -1,5 +1,5 @@ import { getSpacing } from '../themeUtils'; -import { commonPalette, componentsPalette } from './palette'; +import { commonPalette } from './palette'; import { themeTypography } from './typography'; const round = (value) => Math.round(value * 1e5) / 1e5; @@ -613,11 +613,11 @@ export const themeComponentsOverrides = { MuiTooltip: { tooltip: { ...themeTypography.caption, - backgroundColor: componentsPalette.other.tooltip + backgroundColor: commonPalette.black[90] }, arrow: { - color: componentsPalette.other.tooltip + color: commonPalette.black[90] } }, @@ -724,9 +724,9 @@ export const themeComponentsOverrides = { color: commonPalette.grey[500], '&$selected': { color: commonPalette.primary.main, - backgroundColor: commonPalette.primary.relatedLight, + backgroundColor: commonPalette.primary.background, '&:hover': { - backgroundColor: commonPalette.primary.relatedLight + backgroundColor: commonPalette.primary.background } } }, diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index dda201edc..18bfbfe37 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -1,4 +1,5 @@ -import { alpha, darken, lighten } from '@mui/material'; +import { alpha } from '@mui/material'; +import { getMixedColor } from '../themeUtils'; const COLOR_BLACK = '#2C3032'; const COLOR_WHITE = '#FFFFFF'; @@ -76,7 +77,6 @@ const baseColors = { }, shades: { dark: { - 100: COLOR_BLACK, 90: alpha(COLOR_BLACK, 0.9), 60: alpha(COLOR_BLACK, 0.6), 40: alpha(COLOR_BLACK, 0.4), @@ -86,7 +86,6 @@ const baseColors = { 4: alpha(COLOR_BLACK, 0.04) }, light: { - 100: COLOR_WHITE, 90: alpha(COLOR_WHITE, 0.9), 60: alpha(COLOR_WHITE, 0.6), 40: alpha(COLOR_WHITE, 0.4), @@ -101,20 +100,20 @@ const baseColors = { export const commonPalette = { common: { ...baseColors.common }, primary: { - light: baseColors.blue[300], main: baseColors.blue[400], dark: baseColors.blue[500], + light: baseColors.blue[300], contrastText: baseColors.common.white, - relatedLight: alpha(baseColors.blue[400], 0.08), // TODO: review with design the need of a solid color - background: alpha(baseColors.blue[400], 0.08) + background: alpha(baseColors.blue[400], 0.08), + relatedLight: getMixedColor(baseColors.blue[400], baseColors.common.white, 0.9) }, secondary: { - light: baseColors.green[300], main: baseColors.green[400], dark: baseColors.green[500], + light: baseColors.green[300], contrastText: baseColors.common.black, - relatedLight: alpha(baseColors.green[400], 0.08), // TODO: review with design the need of a solid color - background: alpha(baseColors.green[400], 0.08) + background: alpha(baseColors.green[400], 0.08), + relatedLight: getMixedColor(baseColors.green[400], baseColors.common.white, 0.9) }, text: { primary: baseColors.common.black, @@ -135,65 +134,63 @@ export const commonPalette = { focus: baseColors.shades.dark[12] }, info: { - light: baseColors.indigo[300], main: baseColors.indigo[400], dark: baseColors.indigo[500], + light: baseColors.indigo[300], contrastText: baseColors.common.white, - relatedDark: darken(baseColors.indigo[400], 0.6), - relatedLight: lighten(baseColors.indigo[400], 0.9) + relatedDark: getMixedColor(baseColors.indigo[400], baseColors.neutral.A700, 0.6), + relatedLight: getMixedColor(baseColors.indigo[400], baseColors.common.white, 0.9) }, success: { - light: baseColors.green[300], - main: baseColors.green[400], - dark: baseColors.green[500], + main: baseColors.lightGreen[400], + dark: baseColors.lightGreen[500], + light: baseColors.lightGreen[300], contrastText: baseColors.common.white, - relatedDark: darken(baseColors.green[400], 0.6), - relatedLight: lighten(baseColors.green[400], 0.9) + relatedDark: getMixedColor(baseColors.lightGreen[400], baseColors.neutral.A700, 0.6), + relatedLight: getMixedColor(baseColors.lightGreen[400], baseColors.common.white, 0.9) }, warning: { - light: baseColors.orange[300], main: baseColors.orange[400], dark: baseColors.orange[500], + light: baseColors.orange[300], contrastText: baseColors.common.black, - relatedDark: darken(baseColors.orange[400], 0.6), - relatedLight: lighten(baseColors.orange[400], 0.9) + relatedDark: getMixedColor(baseColors.orange[400], baseColors.neutral.A700, 0.6), + relatedLight: getMixedColor(baseColors.orange[400], baseColors.common.white, 0.9) }, error: { - light: baseColors.red[300], main: baseColors.red[400], + light: baseColors.red[300], dark: baseColors.red[500], contrastText: baseColors.common.white, - relatedDark: darken(baseColors.red[400], 0.6), - relatedLight: lighten(baseColors.red[400], 0.9) + relatedDark: getMixedColor(baseColors.red[400], baseColors.neutral.A700, 0.6), + relatedLight: getMixedColor(baseColors.red[400], baseColors.common.white, 0.9) }, grey: { ...baseColors.neutral }, + divider: baseColors.shades.dark[12], // Custom common colors + default: { + main: baseColors.neutral[100], + dark: baseColors.neutral[200], + light: baseColors.neutral[50], + outlinedBorder: baseColors.shades.dark[25], + background: baseColors.shades.dark[4] + }, + brand: { + navyBlue: '#162945', + locationRed: '#EB1510', + predictionBlue: '#1785FB', + softBlue: '#F2F6F9' + }, + white: { + ...baseColors.shades.light + }, + black: { + ...baseColors.shades.dark + }, qualitative: { ...baseColors.qualitative - }, - default: { - light: baseColors.neutral[100], - main: baseColors.neutral[200], - dark: baseColors.neutral[50], - // are we missing here relatedLight ?? - contrastText: baseColors.common.black, - background: baseColors.shades.dark[8] - } -}; - -// Outside of the common palette due they are used only in some specific components -export const componentsPalette = { - other: { - divider: baseColors.shades.dark[12], - tooltip: baseColors.shades.dark[90] - }, - charts: { - axisLine: baseColors.shades.dark[4], - maxLabel: baseColors.shades.dark[60], - disabled: baseColors.shades.dark[25], - axisPointer: baseColors.shades.dark[40] } }; diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js index 5eb1f9655..4801705ac 100644 --- a/packages/react-ui/src/theme/sections/typography.js +++ b/packages/react-ui/src/theme/sections/typography.js @@ -96,7 +96,7 @@ const baseTypography = { letterSpacing: '0.2px' }, overline: { - fontFamily: '"Overpass Mono", monospace', + fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: getPixelToRem(10), lineHeight: 1.2, @@ -111,6 +111,10 @@ const customTypography = { ...baseTypography.body1, fontStyle: 'italic' }, + body1Medium: { + ...baseTypography.body1, + fontWeight: 500 + }, body1Strong: { ...baseTypography.body1, fontWeight: 600 @@ -137,6 +141,11 @@ const customTypography = { ...baseTypography.caption, fontStyle: 'italic' }, + captionMedium: { + ...baseTypography.caption, + fontWeight: 500, + letterSpacing: '0.4px' + }, captionStrong: { ...baseTypography.caption, fontWeight: 500 diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index 9675338ff..dc7b64cca 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -11,3 +11,16 @@ export function getPixelToRem(px) { return rem; } + +// Lighten and darken color design formula. +// The Mui lighten / darken function doesn't get the same color as designers use +export function getMixedColor(color, baseColor, alpha) { + const getRgbaBaseColor = (baseColor, alpha = 1) => { + const [r, g, b] = baseColor.match(/\w\w/g).map((x) => parseInt(x, 16)); + return `rgba(${r},${g},${b},${alpha})`; + }; + const rgbaBaseColorValue = getRgbaBaseColor(baseColor, alpha); + const colorResult = `linear-gradient(0deg, ${rgbaBaseColorValue}, ${rgbaBaseColorValue}), ${color}`; + + return colorResult; +} diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index 202ef6a77..0c5ea8742 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -67,7 +67,7 @@ function BarWidgetUI(props) { lineHeight: 16, color: theme.palette.common.white }, - backgroundColor: theme.palette.other.tooltip, + backgroundColor: theme.palette.black[90], position: function (point, _params, _dom, _rect, size) { const position = { top: 0 }; @@ -138,8 +138,7 @@ function BarWidgetUI(props) { showMaxLabel: true, showMinLabel: false, inside: true, - color: (value) => - value >= maxValue ? theme.palette.charts.maxLabel : 'transparent', + color: (value) => (value >= maxValue ? theme.palette.black[60] : 'transparent'), ...theme.typography.overlineDelicate, formatter: (v) => processFormatterRes(yAxisFormatter(v)) }, @@ -153,14 +152,14 @@ function BarWidgetUI(props) { show: true, onZero: false, lineStyle: { - color: theme.palette.charts.axisLine + color: theme.palette.black[4] } } }), [ maxValue, - theme.palette.charts.axisLine, - theme.palette.charts.maxLabel, + theme.palette.black[4], + theme.palette.black[60], theme.typography.overlineDelicate, yAxisFormatter ] @@ -183,7 +182,7 @@ function BarWidgetUI(props) { return { value, ...(isDisabled && { - itemStyle: { color: theme.palette.charts.disabled }, + itemStyle: { color: theme.palette.black[25] }, disabled: true }) }; @@ -221,7 +220,7 @@ function BarWidgetUI(props) { }, axisPointer: { lineStyle: { - color: theme.palette.charts.axisPointer + color: theme.palette.black[40] } }, color: colors, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index f87ea691a..3d7775cb3 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -77,7 +77,7 @@ function HistogramWidgetUI({ lineHeight: 16, color: theme.palette.common.white }, - backgroundColor: theme.palette.other.tooltip, + backgroundColor: theme.palette.black[90], confine: true, position: 'top', formatter(params) { @@ -99,7 +99,7 @@ function HistogramWidgetUI({ splitLine: { show: true, lineStyle: { - color: theme.palette.charts.axisLine + color: theme.palette.black[4] } }, axisTick: { @@ -119,7 +119,7 @@ function HistogramWidgetUI({ ? formatMax(formattedValue) : formattedValue; }, - color: theme.palette.charts.maxLabel + color: theme.palette.black[60] } }), [min, max, formattedData.length, theme, xAxisFormatter] @@ -135,7 +135,7 @@ function HistogramWidgetUI({ splitLine: { show: true, lineStyle: { - color: theme.palette.charts.axisLine + color: theme.palette.black[4] } }, axisTick: { @@ -154,7 +154,7 @@ function HistogramWidgetUI({ Math.max(...data.map((d) => d ?? Number.MIN_SAFE_INTEGER)) || 1; let col = 'transparent'; if (value >= maxValue) { - col = theme.palette.charts.maxLabel; + col = theme.palette.black[60]; } return col; @@ -164,8 +164,8 @@ function HistogramWidgetUI({ } }), [ - theme.palette.charts.axisLine, - theme.palette.charts.maxLabel, + theme.palette.black[4], + theme.palette.black[60], theme.typography.overlineDelicate, data, yAxisFormatter @@ -176,9 +176,7 @@ function HistogramWidgetUI({ const seriesOptions = useMemo(() => { const dataWithColor = formattedData.map((item, idx) => { const isDisabled = selectedBars.length && selectedBars.indexOf(idx) === -1; - const color = isDisabled - ? theme.palette.charts.disabled - : theme.palette.secondary.main; + const color = isDisabled ? theme.palette.black[25] : theme.palette.secondary.main; return { value: item, itemStyle: { color } }; }); @@ -227,7 +225,7 @@ function HistogramWidgetUI({ }, [ formattedData, markAreaOptions, - theme.palette.charts.disabled, + theme.palette.black[25], theme.palette.secondary.main, selectedBars, animation diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js index e4dc67671..5798c2664 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI.js @@ -40,7 +40,7 @@ function PieWidgetUI({ show: showTooltip, showDelay: 1000, transitionDuration: 0, - backgroundColor: theme.palette.other.tooltip, + backgroundColor: theme.palette.black[90], textStyle: { color: theme.palette.common.white }, confine: true, formatter: @@ -50,7 +50,7 @@ function PieWidgetUI({ showTooltip, formatter, theme.palette.common.white, - theme.palette.other.tooltip, + theme.palette.black[90], tooltipFormatter ] ); diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js index 1b694d2bb..60b59d313 100644 --- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js +++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js @@ -24,7 +24,7 @@ function __generateDefaultConfig( lineHeight: 16, color: theme.palette.common.white }, - backgroundColor: theme.palette.other.tooltip, + backgroundColor: theme.palette.black[90], ...(tooltipFormatter ? { formatter: tooltipFormatter } : {}) }, color: [theme.palette.secondary.main], diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js index ff65c5ab4..c916619c8 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js @@ -46,7 +46,7 @@ export default function TimeSeriesChart({ color: theme.palette.common.white }, borderWidth: 0, - backgroundColor: theme.palette.other.tooltip, + backgroundColor: theme.palette.black[90], position: (point, params, dom, rect, size) => { const position = { top: 0 }; @@ -66,7 +66,7 @@ export default function TimeSeriesChart({ () => ({ axisPointer: { lineStyle: { - color: theme.palette.charts.axisPointer + color: theme.palette.black[40] } }, xAxis: { @@ -97,7 +97,7 @@ export default function TimeSeriesChart({ // FIXME: Workaround to show only maxlabel let col = 'transparent'; if (value >= maxValue) { - col = theme.palette.charts.maxLabel; + col = theme.palette.black[60]; } return col; @@ -115,7 +115,7 @@ export default function TimeSeriesChart({ show: true, onZero: false, lineStyle: { - color: theme.palette.charts.axisLine + color: theme.palette.black[4] } }, max: maxValue diff --git a/packages/react-ui/src/widgets/utils/chartUtils.js b/packages/react-ui/src/widgets/utils/chartUtils.js index 20de40ae9..bb6949c8a 100644 --- a/packages/react-ui/src/widgets/utils/chartUtils.js +++ b/packages/react-ui/src/widgets/utils/chartUtils.js @@ -18,7 +18,7 @@ export function areChartPropsEqual(optionPrev, optionNext) { export function disableSerie(serie, theme) { serie.disabled = true; - serie.itemStyle = { color: theme.palette.charts.disabled }; + serie.itemStyle = { color: theme.palette.black[25] }; } export function clearFilter(serie) { diff --git a/packages/react-ui/storybook/stories/atoms/Palette.stories.js b/packages/react-ui/storybook/stories/atoms/Palette.stories.js index 91c9586a1..143453ed5 100644 --- a/packages/react-ui/storybook/stories/atoms/Palette.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Palette.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid, Tooltip, Typography } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material/styles'; @@ -35,14 +35,18 @@ export default options; const useStyles = makeStyles((theme) => ({ container: { display: 'grid', - gridTemplateColumns: 'repeat(3, 1fr)', + gridTemplateColumns: 'repeat(4, 1fr)', gap: theme.spacing(1) }, text: { marginBottom: theme.spacing(0.5) }, + textValue: { + display: 'block', + maxWidth: '144px' + }, color: { - height: 60, + height: 48, width: '100%', marginBottom: theme.spacing(3), border: `1px solid ${theme.palette.grey[100]}`, @@ -53,15 +57,20 @@ const useStyles = makeStyles((theme) => ({ const ColorBox = ({ colorVariant, colorName }) => { const theme = useTheme(); const color = theme.palette[colorVariant]; + const colorValue = colorName ? color[colorName] : color; const classes = useStyles(); return ( {colorName} - {color[colorName]} + + + {colorValue} + + - + ); }; @@ -88,6 +97,9 @@ const ColorTemplate = ({ colorVariant }) => { {colorDef.relatedLight && ( )} + {colorDef.outlinedBorder && ( + + )} ); }; @@ -165,28 +177,75 @@ const GreyTemplate = () => { ); }; -const OtherTemplate = () => { +const ShadesTemplate = () => { + const classes = useStyles(); + + return ( + <> + {'Black'} + + + + + + + + + + + {'White'} + + + + + + + + + + + ); +}; + +const BrandTemplate = () => { + const classes = useStyles(); + + return ( + + + + + + + ); +}; + +const DividerTemplate = () => { const classes = useStyles(); return ( - - + ); }; +export const Playground = ColorTemplate.bind({}); +Playground.args = { colorVariant: 'primary' }; + +export const Common = CommonTemplate.bind({}); + export const Primary = ColorTemplate.bind({}); Primary.args = { colorVariant: 'primary' }; export const Secondary = ColorTemplate.bind({}); Secondary.args = { colorVariant: 'secondary' }; -export const Text = TextTemplate.bind({}); - -export const Background = BackgroundTemplate.bind({}); +export const Error = ColorTemplate.bind({}); +Error.args = { colorVariant: 'error' }; -export const Action = ActionTemplate.bind({}); +export const Warning = ColorTemplate.bind({}); +Warning.args = { colorVariant: 'warning' }; export const Info = ColorTemplate.bind({}); Info.args = { colorVariant: 'info' }; @@ -194,17 +253,19 @@ Info.args = { colorVariant: 'info' }; export const Success = ColorTemplate.bind({}); Success.args = { colorVariant: 'success' }; -export const Warning = ColorTemplate.bind({}); -Warning.args = { colorVariant: 'warning' }; +export const Grey = GreyTemplate.bind({}); -export const Error = ColorTemplate.bind({}); -Error.args = { colorVariant: 'error' }; +export const Text = TextTemplate.bind({}); -export const Common = CommonTemplate.bind({}); +export const Background = BackgroundTemplate.bind({}); -export const Grey = GreyTemplate.bind({}); +export const Action = ActionTemplate.bind({}); + +export const Divider = DividerTemplate.bind({}); export const Default = ColorTemplate.bind({}); Default.args = { colorVariant: 'default' }; -export const Other = OtherTemplate.bind({}); +export const Brand = BrandTemplate.bind({}); + +export const Shades = ShadesTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/atoms/Typography.stories.js b/packages/react-ui/storybook/stories/atoms/Typography.stories.js index d536f393f..724bec6df 100644 --- a/packages/react-ui/storybook/stories/atoms/Typography.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Typography.stories.js @@ -22,22 +22,10 @@ const options = { 'button', 'caption', 'overline', - 'body1Italic', - 'body1Strong', - 'body1StrongItalic', - 'body2Italic', - 'body2Strong', - 'body2StrongItalic', - 'captionItalic', - 'captionStrong', - 'captionStrongItalic', 'overlineDelicate', 'code1', - 'code1Strong', 'code2', - 'code2Strong', - 'code3', - 'code3Strong' + 'code3' ] } } @@ -94,75 +82,23 @@ export const Overline = Template.bind({}); Overline.args = { variant: 'overline', text: 'Overline' }; // Custom variants -// TODO: Do not export them until we do this task https://app.shortcut.com/cartoteam/story/265549/ -const Body1Italic = Template.bind({}); -Body1Italic.args = { variant: 'body1Italic', text: 'Body 1 Italic' }; +export const OverlineDelicate = Template.bind({}); +OverlineDelicate.args = { variant: 'overlineDelicate', text: 'Overline Delicate' }; -const Body1Strong = Template.bind({}); -Body1Strong.args = { variant: 'boy1Strong', text: 'Body 1 Strong' }; - -const Body1StrongItalic = Template.bind({}); -Body1StrongItalic.args = { variant: 'body1StrongItalic', text: 'Body 1 Strong Italic' }; - -const Body2Italic = Template.bind({}); -Body2Italic.args = { variant: 'body2Italic', text: 'Body 2 Italic' }; - -const Body2Strong = Template.bind({}); -Body2Strong.args = { variant: 'body2Strong', text: 'Body 2 Strong' }; - -const Body2StrongItalic = Template.bind({}); -Body2StrongItalic.args = { variant: 'body2StrongItalic', text: 'Body 2 Strong Italic' }; - -const CaptionItalic = Template.bind({}); -CaptionItalic.args = { variant: 'captionItalic', text: 'Caption Italic' }; - -const CaptionStrong = Template.bind({}); -CaptionStrong.args = { variant: 'captionStrong', text: 'Caption Strong' }; - -const CaptionStrongItalic = Template.bind({}); -CaptionStrongItalic.args = { - variant: 'captionStrongItalic', - text: 'Caption Strong Italic' -}; - -const OverlineDelicate = Template.bind({}); -OverlineDelicate.args = { - variant: 'overlineDelicate', - text: 'Overline Delicate' -}; - -const Code1 = Template.bind({}); +export const Code1 = Template.bind({}); Code1.args = { variant: 'code1', text: 'Code 1' }; -const Code1Strong = Template.bind({}); -Code1Strong.args = { - variant: 'code1Strong', - text: 'Code 1 Strong' -}; - -const Code2 = Template.bind({}); +export const Code2 = Template.bind({}); Code2.args = { variant: 'code2', text: 'Code 2' }; -const Code2Strong = Template.bind({}); -Code2Strong.args = { - variant: 'code2Strong', - text: 'Code 2 Strong' -}; - -const Code3 = Template.bind({}); +export const Code3 = Template.bind({}); Code3.args = { variant: 'code3', text: 'Code 3' }; - -const Code3Strong = Template.bind({}); -Code3Strong.args = { - variant: 'code3Strong', - text: 'Code 3 Strong' -}; diff --git a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js index 0aecac757..39f657033 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js @@ -131,4 +131,7 @@ const MultipleBarsCustomColorsProps = { colors: ['#f00', '#00f'] }; MultipleBarsCustomColors.args = MultipleBarsCustomColorsProps; -MultipleBarsCustomColors.parameters = buildReactPropsAsString(MultipleBarsCustomColorsProps, 'BarWidgetUI'); +MultipleBarsCustomColors.parameters = buildReactPropsAsString( + MultipleBarsCustomColorsProps, + 'BarWidgetUI' +); diff --git a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js index 4a0ba6d67..8c6b20475 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js @@ -54,10 +54,9 @@ const FilteredProps = { }; Filtered.args = FilteredProps; - export const NonEqualSizeBins = Template.bind({}); const NonEqualSizeBinsProps = { ...defaultProps, - ticks: [100, 200, 250, 450, 500, 600], + ticks: [100, 200, 250, 450, 500, 600] }; NonEqualSizeBins.args = NonEqualSizeBinsProps; From 3f26d2fb536c4e537dcfa71e05e1f9a610cb48eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 27 Oct 2022 17:49:07 +0200 Subject: [PATCH 009/154] New Typography component (#506) --- CHANGELOG.md | 1 + UPGRADE.md | 12 ++++++ .../__tests__/widgets/LegendWidgetUI.test.js | 8 ++-- packages/react-ui/src/atoms/Typography.js | 41 +++++++++++++++++++ .../src/custom-components/InputFile.js | 4 +- packages/react-ui/src/index.d.ts | 4 +- packages/react-ui/src/index.js | 4 +- packages/react-ui/src/types.d.ts | 11 ++++- packages/react-ui/src/widgets/BarWidgetUI.js | 3 +- .../react-ui/src/widgets/CategoryWidgetUI.js | 2 +- .../src/widgets/FeatureSelectionWidgetUI.js | 2 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 3 +- packages/react-ui/src/widgets/NoDataAlert.js | 3 +- .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 2 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 4 +- .../src/widgets/legend/LayerOptionWrapper.js | 3 +- .../src/widgets/legend/LegendCategories.js | 3 +- .../react-ui/src/widgets/legend/LegendIcon.js | 3 +- .../src/widgets/legend/LegendProportion.js | 3 +- .../react-ui/src/widgets/legend/LegendRamp.js | 3 +- .../src/widgets/legend/LegendWidgetUI.js | 3 +- .../src/widgets/legend/LegendWrapper.js | 12 +----- packages/react-ui/src/widgets/legend/Note.js | 3 +- .../stories/atoms/Palette.stories.js | 13 ++++-- .../stories/atoms/Typography.stories.js | 32 ++++++++++++++- .../stories/common/Breadcrumb.stories.js | 3 +- .../storybook/stories/common/Paper.stories.js | 4 +- .../stories/common/Select.stories.js | 2 +- .../stories/common/Text-field.stories.js | 3 +- .../stories/common/Tooltip.stories.js | 4 +- .../stories/widgetsUI/InputFile.stories.js | 10 +---- .../widgetsUI/TableWidgetUI.stories.js | 3 +- .../widgetsUI/WrapperWidgetUI.stories.js | 2 - .../src/widgets/TimeSeriesWidget.js | 5 ++- 34 files changed, 160 insertions(+), 58 deletions(-) create mode 100644 packages/react-ui/src/atoms/Typography.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f501416e..98d8d0fb6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506) - New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) - Colors and Typography: design update [#502](https://github.com/CartoDB/carto-react/pull/502/) - Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) diff --git a/UPGRADE.md b/UPGRADE.md index 8135a44ba..f3d778d32 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -27,6 +27,18 @@ Added a few custom variants to the typography set: `Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. +We have a `Typography` component that uses `Mui Typography` and extends it with some useful props: + +- weight +- italic + +This way we can be more flexible regarding text styles without adding too many variants to the Mui component. + +In short, instead of Mui Typography, the component you should use to add text is this one: +`react-ui/src/atoms/Typography` + +So `import { Typography } from '@carto/react-ui';`. + ## Colors Some keys have been removed from [color palette](https://github.com/CartoDB/carto-react/tree/master/packages/react-ui/src/theme) due they are unused: diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index a766ebe80..2f619e61f 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; +import Typography from '../../src/atoms/Typography'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; import { fireEvent, render, screen } from '../widgets/utils/testUtils'; -import { Typography } from '@mui/material'; const CUSTOM_CHILDREN = Legend custom; @@ -198,7 +198,7 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Test')).toBeInTheDocument(); }); - test('legend with opacity control', async() => { + test('legend with opacity control', async () => { const legendConfig = DATA[7]; const onChangeOpacity = jest.fn(); const container = render( @@ -252,7 +252,7 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Legend custom')).toBeInTheDocument(); }); - test('with custom layer options', async() => { + test('with custom layer options', async () => { const layer = DATA[8]; render( @@ -263,7 +263,7 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('PaletteSelector')).toBeInTheDocument(); }); - test('with custom layer options - unknown option', async() => { + test('with custom layer options - unknown option', async () => { const layer = { ...DATA[8], options: ['unknown'] }; render( diff --git a/packages/react-ui/src/atoms/Typography.js b/packages/react-ui/src/atoms/Typography.js new file mode 100644 index 000000000..0efc9f0ee --- /dev/null +++ b/packages/react-ui/src/atoms/Typography.js @@ -0,0 +1,41 @@ +import React, { forwardRef } from 'react'; +import PropTypes from 'prop-types'; +import { Typography as MuiTypography } from '@mui/material'; + +const FontWeight = { + regular: 400, + medium: 500, + strong: 600 +}; + +const Typography = forwardRef( + ({ italic, weight, style, 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 + const fontConfiguration = { + fontWeight: FontWeight[weight], + fontStyle: italic && 'italic' + }; + + return ( + + {children} + + ); + } +); + +Typography.propTypes = { + weight: PropTypes.oneOf(Object.keys(FontWeight)), + italic: PropTypes.bool, + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) +}; + +export default Typography; diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/custom-components/InputFile.js index 3b9e87f2e..371525284 100644 --- a/packages/react-ui/src/custom-components/InputFile.js +++ b/packages/react-ui/src/custom-components/InputFile.js @@ -1,8 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Button, Typography } from '@mui/material'; - +import { Box, Button } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; +import Typography from '../atoms/Typography'; const useStyles = makeStyles((theme) => ({ inputFile: { diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 10060bdd7..7b89a10a4 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -22,6 +22,7 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants'; import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; +import Typography from './atoms/Typography'; export { cartoThemeOptions, @@ -47,5 +48,6 @@ export { LegendCategories, LegendIcon, LegendProportion, - LegendRamp + LegendRamp, + Typography }; diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 23679104d..8ab3ff496 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -22,6 +22,7 @@ import PolygonIcon from './assets/PolygonIcon'; import RectangleIcon from './assets/RectangleIcon'; import LassoIcon from './assets/LassoIcon'; import CircleIcon from './assets/CircleIcon'; +import Typography from './atoms/Typography'; const featureSelectionIcons = { CursorIcon, @@ -52,5 +53,6 @@ export { LegendCategories, LegendIcon, LegendProportion, - LegendRamp + LegendRamp, + Typography }; diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 89fd53651..0b7ed4283 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,4 +1,6 @@ import { GroupDateTypes } from '@carto/react-core'; +import { TypographyProps as MuiTypographyProps } from '@mui/material'; +import { CSSProperties } from 'react'; export type WrapperWidgetUI = { title: string; @@ -49,7 +51,7 @@ export type HistogramWidgetUI = { export type BarWidgetUI = { xAxisData: (string | number)[]; yAxisData: (string | number)[] | (string | number)[][]; - series?: string[] + series?: string[]; colors?: string | string[]; stacked?: boolean; labels?: object; @@ -188,3 +190,10 @@ export type LegendRamp = { colors?: string | string[] | number[][]; }; }; + +// Typography +export interface TypographyProps extends MuiTypographyProps { + weight?: 'regular' | 'medium' | 'strong'; + italic?: boolean; + style?: CSSProperties; +} diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index 0c5ea8742..d2754fbe1 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -1,10 +1,11 @@ import React, { useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import ReactEcharts from '../custom-components/echarts-for-react'; -import { Grid, Link, Typography, useTheme, darken } from '@mui/material'; +import { Grid, Link, useTheme, darken } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import detectTouchScreen from './utils/detectTouchScreen'; import { processFormatterRes } from './utils/formatterUtils'; +import Typography from '../atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchScreen(); diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 08ef3240d..3f153e18f 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -9,13 +9,13 @@ import { Divider, SvgIcon, TextField, - Typography, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { Skeleton } from '@mui/material'; import { animateValues } from './utils/animations'; +import Typography from '../atoms/Typography'; const useStyles = makeStyles((theme) => ({ root: { diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index f792837fa..d67f23561 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -9,12 +9,12 @@ import { Menu, MenuItem, Tooltip, - Typography, useTheme } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { ArrowDropDown } from '@mui/icons-material'; import PropTypes from 'prop-types'; +import Typography from '../atoms/Typography'; function FeatureSelectionWidgetUI({ className, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index 3d7775cb3..4ecf9db33 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -2,11 +2,12 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useMemo } from 'react'; import ReactEcharts from '../../custom-components/echarts-for-react'; -import { darken, Grid, Link, Typography, useTheme } from '@mui/material'; +import { darken, Grid, Link, useTheme } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; +import Typography from '../../atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchscreen(); diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index f5a6c9581..90fd96c4e 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,6 +1,7 @@ import React from 'react'; import { Alert, AlertTitle } from '@mui/material'; -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; +import Typography from '../atoms/Typography'; function AlertBody({ color = undefined, children }) { return children ? ( diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index 06714fb76..d961a5ace 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -5,7 +5,6 @@ import { IconButton, MenuItem, SvgIcon, - Typography, capitalize, Link } from '@mui/material'; @@ -16,6 +15,7 @@ import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesCont import { CHART_TYPES } from './utils/constants'; import { PropTypes } from 'prop-types'; import { GroupDateTypes, getMonday } from '@carto/react-core'; +import Typography from '../../atoms/Typography'; const FORMAT_DATE_BY_STEP_SIZE = { [GroupDateTypes.YEARS]: yearCurrentDateRange, diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 345de101c..c1f309626 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -11,10 +11,10 @@ import { LinearProgress, Menu, MenuItem, - Tooltip, - Typography + Tooltip } from '@mui/material'; import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; +import Typography from '../atoms/Typography'; /* Options props must have this format: diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index ed7514f11..44602c430 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; +import Typography from '../../atoms/Typography'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index ddff240cf..eb32f21ca 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -1,8 +1,9 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, Grid, Tooltip, Typography } from '@mui/material'; +import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; +import Typography from '../../atoms/Typography'; function LegendCategories({ legend }) { const { diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index c193e47c6..81842a85a 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import PropTypes from 'prop-types'; +import Typography from '../../atoms/Typography'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index 0afc90e17..82c96a3af 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; +import Typography from '../../atoms/Typography'; const useStyles = makeStyles((theme) => ({ circles: { diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index 1f5eb122d..a6b24fda9 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -1,10 +1,11 @@ import React from 'react'; -import { Grid, Tooltip, Typography } from '@mui/material'; +import { Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; import LegendProportion from './LegendProportion'; +import Typography from '../../atoms/Typography'; const useStyles = makeStyles(() => ({ errorContainer: { diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index f1a1320a5..78b8cc7ba 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -1,5 +1,5 @@ import React, { createRef, Fragment } from 'react'; -import { Box, Button, Collapse, Divider, Grid, SvgIcon, Typography } from '@mui/material'; +import { Box, Button, Collapse, Divider, Grid, SvgIcon } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import LegendWrapper from './LegendWrapper'; import LegendCategories from './LegendCategories'; @@ -7,6 +7,7 @@ import LegendIcon from './LegendIcon'; import LegendRamp from './LegendRamp'; import LegendProportion from './LegendProportion'; import PropTypes from 'prop-types'; +import Typography from '../../atoms/Typography'; const LayersIcon = () => ( diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 93e3390f0..bccd8ead6 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -1,20 +1,12 @@ import React, { createRef, useState } from 'react'; -import { - Box, - Button, - Collapse, - Grid, - Icon, - Switch, - Tooltip, - Typography -} from '@mui/material'; +import { Box, Button, Collapse, Grid, Icon, Switch, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { ExpandLess, ExpandMore } from '@mui/icons-material'; import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; +import Typography from '../../atoms/Typography'; const useStyles = makeStyles((theme) => ({ legendWrapper: { diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index f5c25d7a8..f937e1e7e 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,6 +1,7 @@ -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; +import Typography from '../../atoms/Typography'; const useNoteStyles = makeStyles(() => ({ note: { diff --git a/packages/react-ui/storybook/stories/atoms/Palette.stories.js b/packages/react-ui/storybook/stories/atoms/Palette.stories.js index 143453ed5..a9aa2aefd 100644 --- a/packages/react-ui/storybook/stories/atoms/Palette.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Palette.stories.js @@ -1,7 +1,8 @@ -import React from 'react'; -import { Box, Grid, Tooltip, Typography } from '@mui/material'; +import React, { useRef } from 'react'; +import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material/styles'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Atoms/Palette', @@ -59,13 +60,19 @@ const ColorBox = ({ colorVariant, colorName }) => { const color = theme.palette[colorVariant]; const colorValue = colorName ? color[colorName] : color; const classes = useStyles(); + const textRef = useRef(); return ( {colorName} - + {colorValue} diff --git a/packages/react-ui/storybook/stories/atoms/Typography.stories.js b/packages/react-ui/storybook/stories/atoms/Typography.stories.js index 724bec6df..afee90c82 100644 --- a/packages/react-ui/storybook/stories/atoms/Typography.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '@mui/material/Typography'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Atoms/Typography', @@ -28,6 +28,33 @@ const options = { 'code3' ] } + }, + weight: { + control: { + type: 'select', + options: ['regular', 'medium', 'strong'] + } + }, + italic: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + color: { + description: 'Any theme color, default and custom ones', + control: { + type: 'select', + options: ['primary.dark', 'brand.navyBlue', 'default.main'] + } + }, + noWrap: { + defaultValue: false, + description: + 'If `true`, the text will not wrap and will truncate with an ellipsis. Note that this can only happen with block or inline-block elements (it needs to have a width in order to overflow).', + control: { + type: 'boolean' + } } }, parameters: { @@ -42,6 +69,9 @@ export default options; const Template = (args) => {args.text}; +export const Playground = Template.bind({}); +Playground.args = { variant: 'h1', text: 'H1 Headline' }; + export const H1 = Template.bind({}); H1.args = { variant: 'h1', text: 'H1 Headline' }; diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 947cb5c2a..04232076a 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Breadcrumbs, Link, Typography } from '@mui/material'; +import { Breadcrumbs, Link } from '@mui/material'; import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Common/Breadcrumbs', diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index 8952c6e59..0cddc2bca 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -1,7 +1,7 @@ import React from 'react'; -import { Grid, Paper, Typography } from '@mui/material'; - +import { Grid, Paper } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Common/Paper', diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 7ce9e7178..1972a9a89 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -6,10 +6,10 @@ import { InputAdornment, InputLabel, MenuItem, - Typography, Select } from '@mui/material'; import { Visibility } from '@mui/icons-material'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Common/Select', diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index 22406c2b6..eb50eac07 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Grid, InputAdornment, TextField, Typography } from '@mui/material'; +import { Grid, InputAdornment, TextField } from '@mui/material'; import { Visibility } from '@mui/icons-material'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Common/Text Field', diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index ee55db134..c66a39619 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -1,7 +1,7 @@ import React from 'react'; -import { Button, Grid, Tooltip, Typography } from '@mui/material'; - +import { Button, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Common/Tooltip', diff --git a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js index d3098b540..9f6a2d258 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js @@ -1,15 +1,9 @@ -import { - Box, - Button, - CircularProgress, - FormControl, - InputLabel, - Typography -} from '@mui/material'; +import { Box, Button, CircularProgress, FormControl, InputLabel } from '@mui/material'; import React, { useState } from 'react'; import InputFile from '../../../src/custom-components/InputFile'; import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Custom Components/InputFile', diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index dbdbcc7a3..8ede930f0 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -1,8 +1,9 @@ import React from 'react'; import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; +import Typography from '../../../src/atoms/Typography'; const options = { title: 'Custom Components/TableWidgetUI', diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index d8923c1aa..626d5231e 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -1,10 +1,8 @@ import React from 'react'; -import { Typography } from '@mui/material'; import ColorizeIcon from '@mui/icons-material/Colorize'; import MenuIcon from '@mui/icons-material/Menu'; import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; -import { buildReactPropsAsString } from '../../utils'; const options = { title: 'Custom Components/WrapperWidgetUI', diff --git a/packages/react-widgets/src/widgets/TimeSeriesWidget.js b/packages/react-widgets/src/widgets/TimeSeriesWidget.js index 555339758..ebc6ed455 100644 --- a/packages/react-widgets/src/widgets/TimeSeriesWidget.js +++ b/packages/react-widgets/src/widgets/TimeSeriesWidget.js @@ -5,14 +5,15 @@ import { addFilter, removeFilter } from '@carto/react-redux'; import { TimeSeriesWidgetUI, WrapperWidgetUI, - TIME_SERIES_CHART_TYPES + TIME_SERIES_CHART_TYPES, + Typography } from '@carto/react-ui'; import { GroupDateTypes, AggregationTypes, _FilterTypes as FilterTypes } from '@carto/react-core'; -import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@mui/material'; +import { capitalize, Menu, MenuItem, SvgIcon } from '@mui/material'; import { PropTypes } from 'prop-types'; import { columnAggregationOn } from './utils/propTypesFns'; import useWidgetFetch from '../hooks/useWidgetFetch'; From e688d18a103e78b98c8a0fddfb997674923661af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 27 Oct 2022 18:43:58 +0200 Subject: [PATCH 010/154] Bump experimental version names, to be coordinated with official branches --- lerna.json | 4 ++-- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lerna.json b/lerna.json index 0b61ab7f3..dda3e4aba 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1" -} \ No newline at end of file + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1" +} diff --git a/packages/react-api/package.json b/packages/react-api/package.json index fb96055a5..aa3a9bd47 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index b101c3882..3fba3cb46 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index c07ec632a..1c619f7d1 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 8d2925b70..447fecb3f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index c2bb2b701..c05b5a165 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index a179d6315..e5ed020bb 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 60966edc5..bd3a467b2 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 7817cc04f..017a116cb 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 3c9cf556e6d9bfa8032b32344d5fa057a1c84202 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 27 Oct 2022 18:51:47 +0200 Subject: [PATCH 011/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-0 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index dda3e4aba..66ed6359f 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index aa3a9bd47..422f0d4a4 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 3fba3cb46..83d4f7a84 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 1c619f7d1..7f5b3709f 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 447fecb3f..c75f15836 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index c05b5a165..7ed682818 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e5ed020bb..106420870 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index bd3a467b2..c50afc074 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 017a116cb..d8aa374ea 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From c12d5dd001fb682872964f49f6b9f7436ec91490 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 27 Oct 2022 18:53:19 +0200 Subject: [PATCH 012/154] Adjust peer deps to published --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 422f0d4a4..982359eb1 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-0", - "@carto/react-redux": "0.0.0-experimental-muiv5-0", - "@carto/react-workers": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 83d4f7a84..01930ca2c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 7f5b3709f..23c7410f7 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 7ed682818..7dcd521b9 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-0", - "@carto/react-workers": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 106420870..1f97e6f44 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -76,7 +76,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index c50afc074..2bde70ca0 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-0", - "@carto/react-core": "0.0.0-experimental-muiv5-0", - "@carto/react-redux": "0.0.0-experimental-muiv5-0", - "@carto/react-ui": "0.0.0-experimental-muiv5-0", - "@carto/react-workers": "0.0.0-experimental-muiv5-0", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 6973468f49ff5031b9091fe6146cbd3a99be54d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 28 Oct 2022 13:17:44 +0200 Subject: [PATCH 013/154] Design System breakpoints and theme types (#513) --- CHANGELOG.md | 1 + packages/react-ui/package.json | 1 + packages/react-ui/src/theme/carto-theme.d.ts | 61 +++++---- packages/react-ui/src/theme/carto-theme.js | 17 +-- packages/react-ui/src/theme/themeConstants.js | 9 ++ .../react-ui/storybook/.storybook/main.js | 3 +- .../react-ui/storybook/.storybook/preview.js | 51 +++++++- .../{atoms => foundations}/Borders.stories.js | 2 +- .../foundations/Breakpoints.stories.js | 56 +++++++++ .../foundations/BreakpointsGuide.stories.mdx | 31 +++++ .../Elevations.stories.js} | 4 +- .../{atoms => foundations}/Palette.stories.js | 4 +- .../{atoms => foundations}/Spacing.stories.js | 4 +- .../Typography.stories.js | 4 +- .../InputFile.stories.js | 2 +- yarn.lock | 116 ++++++++++++++++++ 16 files changed, 317 insertions(+), 49 deletions(-) rename packages/react-ui/storybook/stories/{atoms => foundations}/Borders.stories.js (98%) create mode 100644 packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js create mode 100644 packages/react-ui/storybook/stories/foundations/BreakpointsGuide.stories.mdx rename packages/react-ui/storybook/stories/{atoms/Shadows.stories.js => foundations/Elevations.stories.js} (95%) rename packages/react-ui/storybook/stories/{atoms => foundations}/Palette.stories.js (99%) rename packages/react-ui/storybook/stories/{atoms => foundations}/Spacing.stories.js (96%) rename packages/react-ui/storybook/stories/{atoms => foundations}/Typography.stories.js (97%) rename packages/react-ui/storybook/stories/{widgetsUI => organisms}/InputFile.stories.js (98%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98d8d0fb6..7a5ece472 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Breakpoints for the new design system [#513](https://github.com/CartoDB/carto-react/pull/513/) - New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506) - New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) - Colors and Typography: design update [#502](https://github.com/CartoDB/carto-react/pull/502/) diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1f97e6f44..d6d2f8bb2 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -46,6 +46,7 @@ "@storybook/addon-actions": "^6.5.12", "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", + "@storybook/addon-viewport": "^6.5.12", "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index a72b6df9f..910d7e284 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,4 +1,4 @@ -import { Theme, ThemeOptions } from '@mui/material'; +import { Theme, ThemeOptions, TypeText } from '@mui/material'; import { Palette, PaletteColor } from '@mui/material'; /* @@ -10,53 +10,59 @@ export const cartoThemeOptions: ThemeOptions; type Modify = Omit & R; -type CustomPaletteColor = Modify< +type CustomMainPaletteColor = Modify< PaletteColor, { - relatedDark: string; relatedLight: string; background: string; - outlinedBorder: string; } >; -type CustomBrandPaletteColor = Modify< +type CustomFeedbackPaletteColor = Modify< PaletteColor, { - navyBlue: string; - locationRed: string; - predictionBlue: string; - softBlue: string; + relatedDark: string; + relatedLight: string; } >; -type CustomTextPaletteColor = Modify< +type CustomDefaultPaletteColor = Modify< PaletteColor, { - hint: string; + background: string; + outlinedBorder: string; } >; -type CustomShadesPaletteColor = Modify< - PaletteColor, +type CustomBrandPaletteColor = { + navyBlue: string; + locationRed: string; + predictionBlue: string; + softBlue: string; +}; +type CustomTextPaletteColor = Modify< + TypeText, { - 90: string; - 60: string; - 40: string; - 25: string; - 12: string; - 8: string; - 4: string; + hint: string; } >; +type CustomShadesPaletteColor = { + 90: string; + 60: string; + 40: string; + 25: string; + 12: string; + 8: string; + 4: string; +}; type CustomPalette = Modify< Palette, { - primary: CustomPaletteColor; - secondary: CustomPaletteColor; - error: CustomPaletteColor; - warning: CustomPaletteColor; - info: CustomPaletteColor; - success: CustomPaletteColor; - default: CustomPaletteColor; + primary: CustomMainPaletteColor; + secondary: CustomMainPaletteColor; + error: CustomFeedbackPaletteColor; + warning: CustomFeedbackPaletteColor; + info: CustomFeedbackPaletteColor; + success: CustomFeedbackPaletteColor; + default: CustomDefaultPaletteColor; text: CustomTextPaletteColor; white: CustomShadesPaletteColor; black: CustomShadesPaletteColor; @@ -68,6 +74,7 @@ export type CartoTheme = Modify< Theme, { palette: CustomPalette; + spacingValue: number; } >; diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 0d3cd2e33..3eac76257 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -3,22 +3,22 @@ import { CssBaseline } from './sections/cssBaseline'; import { commonPalette } from './sections/palette'; import { themeShadows } from './sections/shadows'; import { themeTypography } from './sections/typography'; -import { SPACING } from './themeConstants'; +import { BREAKPOINTS, SPACING } from './themeConstants'; export const cartoThemeOptions = { themeName: 'CARTO', breakpoints: { keys: ['xs', 'sm', 'md', 'lg', 'xl'], values: { - xs: 0, - sm: 600, - md: 960, - lg: 1280, - xl: 1920 + xs: BREAKPOINTS.XS, // 320 - 599 + sm: BREAKPOINTS.SM, // 600 - 959 + md: BREAKPOINTS.MD, // 960 - 1279 + lg: BREAKPOINTS.LG, // 1280 - 1599 + xl: BREAKPOINTS.XL // 1600+ }, unit: 'px', - tep: 5 - // For more information about use this helper functions: https://material-ui.com/customization/spacing/#custom-spacing + step: 5 + // For more information about use this helper functions: https://mui.com/material-ui/customization/breakpoints/#css-media-queries // up: f d(), // down: f down(), // between: f p(), @@ -66,6 +66,7 @@ export const cartoThemeOptions = { typography: { ...themeTypography }, + spacingValue: SPACING, // For situations where we can't use theme.spacing(), mainly math calculations. spacing: SPACING, // For custom spacing: https://material-ui.com/customization/spacing/#custom-spacing shape: { borderRadius: 4 diff --git a/packages/react-ui/src/theme/themeConstants.js b/packages/react-ui/src/theme/themeConstants.js index 9e153bb85..dd9be0f58 100644 --- a/packages/react-ui/src/theme/themeConstants.js +++ b/packages/react-ui/src/theme/themeConstants.js @@ -1,2 +1,11 @@ // Common export const SPACING = 8; + +// Breakpoints +export const BREAKPOINTS = { + XS: 320, + SM: 600, + MD: 960, + LG: 1280, + XL: 1600 +}; diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index 5b780de8b..a277e5933 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -3,6 +3,7 @@ module.exports = { addons: [ '@storybook/addon-links', '@storybook/addon-essentials', - 'storybook-addon-designs' + 'storybook-addon-designs', + '@storybook/addon-viewport' ] }; diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 762ce39d7..f238f6c0f 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -7,6 +7,7 @@ import { StyledEngineProvider } from '@mui/material'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; +import { BREAKPOINTS } from '../../src/theme/themeConstants'; let theme = createTheme(cartoThemeOptions); theme = responsiveFontSizes(theme, { @@ -15,6 +16,44 @@ theme = responsiveFontSizes(theme, { factor: 2 }); +const customViewports = { + xs: { + name: 'xs', + styles: { + width: `${BREAKPOINTS.XS}px`, + height: `${BREAKPOINTS.SM - 1}px` + } + }, + sm: { + name: 'sm', + styles: { + width: `${BREAKPOINTS.SM}px`, + height: `${BREAKPOINTS.MD - 1}px` + } + }, + md: { + name: 'md', + styles: { + width: `${BREAKPOINTS.MD}px`, + height: `${BREAKPOINTS.LG - 1}px` + } + }, + lg: { + name: 'lg', + styles: { + width: `${BREAKPOINTS.LG}px`, + height: `${BREAKPOINTS.XL - 1}px` + } + }, + xl: { + name: 'xl', + styles: { + width: `${BREAKPOINTS.XL}px`, + height: '100%' + } + } +}; + export const decorators = [ (Story) => ( @@ -37,12 +76,15 @@ export const parameters = { storySort: { order: [ 'Introduction', + 'Foundations', + ['Palette', 'Typography', 'Spacing', 'Borders', 'Elevations', 'Breakpoints'], 'Atoms', - ['Palette', 'Typography'], + 'Molecules', + 'Organisms', + ['InputFile'], 'Common', 'Custom Components', [ - 'InputFile', 'CategoryWidgetUI', 'FormulaWidgetUI', 'HistogramWidgetUI', @@ -53,5 +95,8 @@ export const parameters = { ] } }, - decorators: [withDesign] + decorators: [withDesign], + viewport: { + viewports: customViewports + } }; diff --git a/packages/react-ui/storybook/stories/atoms/Borders.stories.js b/packages/react-ui/storybook/stories/foundations/Borders.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/atoms/Borders.stories.js rename to packages/react-ui/storybook/stories/foundations/Borders.stories.js index f076b8b1f..94416ad6c 100644 --- a/packages/react-ui/storybook/stories/atoms/Borders.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Borders.stories.js @@ -4,7 +4,7 @@ import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; const options = { - title: 'Atoms/Border Radius', + title: 'Foundations/Borders', argTypes: { size: { defaultValue: 1, diff --git a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js new file mode 100644 index 000000000..f0536d40b --- /dev/null +++ b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { Box, Typography } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import { BREAKPOINTS } from '../../../src/theme/themeConstants'; + +const options = { + title: 'Foundations/Breakpoints', + argTypes: { + breakpoint: { + defaultValue: '100%', + control: { + type: 'select', + options: { ...BREAKPOINTS } + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=10472%3A3871' + }, + viewMode: 'docs' + } +}; +export default options; + +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + height: theme.spacing(6), + marginBottom: theme.spacing(2), + padding: 0, + backgroundColor: theme.palette.primary.background, + border: `1px solid ${theme.palette.primary.main}`, + borderRadius: theme.spacing(0.5) + } +})); + +const BreakpointBox = ({ breakpoint }) => { + const classes = useStyles(); + + return ( + + {breakpoint} + + ); +}; + +export const Breakpoints = BreakpointBox.bind({}); diff --git a/packages/react-ui/storybook/stories/foundations/BreakpointsGuide.stories.mdx b/packages/react-ui/storybook/stories/foundations/BreakpointsGuide.stories.mdx new file mode 100644 index 000000000..c0fff4a2c --- /dev/null +++ b/packages/react-ui/storybook/stories/foundations/BreakpointsGuide.stories.mdx @@ -0,0 +1,31 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Breakpoints + +These are the keys available: + +```js +xs: 320; +sm: 600; +md: 960; +lg: 1280; +xl: 1600; +``` + +Examples of use and its result: + +```css +breakpoints.between('xs', 'sm') -> (min-width:320px) and (max-width:599.95px) +breakpoints.between('sm', 'md') -> (min-width:600px) and (max-width:959.95px) +breakpoints.between('md', 'lg') -> (min-width:960px) and (max-width:1279.95px) +breakpoints.between('lg', 'xl') -> (min-width:1280px) and (max-width:1599.95px) + +breakpoints.only('xs') -> (min-width:320px) and (max-width:599.95px) + +breakpoints.up('xs') -> (min-width:320px) +breakpoints.down('xs') -> (max-width:319.95px) + +breakpoints.not('xs') -> (min-width:600px) +``` diff --git a/packages/react-ui/storybook/stories/atoms/Shadows.stories.js b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/atoms/Shadows.stories.js rename to packages/react-ui/storybook/stories/foundations/Elevations.stories.js index 8c820e282..15bd91bf1 100644 --- a/packages/react-ui/storybook/stories/atoms/Shadows.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js @@ -4,7 +4,7 @@ import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; const options = { - title: 'Atoms/Shadows', + title: 'Foundations/Elevations', argTypes: { size: { defaultValue: 2, @@ -78,4 +78,4 @@ const Template = () => { export const Playground = ShadowBox.bind({}); -export const Shadows = Template.bind({}); +export const Elevations = Template.bind({}); diff --git a/packages/react-ui/storybook/stories/atoms/Palette.stories.js b/packages/react-ui/storybook/stories/foundations/Palette.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/atoms/Palette.stories.js rename to packages/react-ui/storybook/stories/foundations/Palette.stories.js index a9aa2aefd..b1eabd555 100644 --- a/packages/react-ui/storybook/stories/atoms/Palette.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Palette.stories.js @@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles'; import Typography from '../../../src/atoms/Typography'; const options = { - title: 'Atoms/Palette', + title: 'Foundations/Palette', component: Box, argTypes: { colorVariant: { @@ -26,7 +26,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8786%3A6248' + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8775%3A71615' }, viewMode: 'docs' } diff --git a/packages/react-ui/storybook/stories/atoms/Spacing.stories.js b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js similarity index 96% rename from packages/react-ui/storybook/stories/atoms/Spacing.stories.js rename to packages/react-ui/storybook/stories/foundations/Spacing.stories.js index 513a6b610..ad61a043d 100644 --- a/packages/react-ui/storybook/stories/atoms/Spacing.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js @@ -4,7 +4,7 @@ import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; const options = { - title: 'Atoms/Spacings', + title: 'Foundations/Spacing', argTypes: { size: { defaultValue: 15, @@ -18,7 +18,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=9246%3A3930' + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64661' }, viewMode: 'docs' } diff --git a/packages/react-ui/storybook/stories/atoms/Typography.stories.js b/packages/react-ui/storybook/stories/foundations/Typography.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/atoms/Typography.stories.js rename to packages/react-ui/storybook/stories/foundations/Typography.stories.js index afee90c82..0fbfb4fad 100644 --- a/packages/react-ui/storybook/stories/atoms/Typography.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Typography.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import Typography from '../../../src/atoms/Typography'; const options = { - title: 'Atoms/Typography', + title: 'Foundations/Typography', component: Typography, argTypes: { variant: { @@ -60,7 +60,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64695' + url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=4662%3A14' }, viewMode: 'docs' } diff --git a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js rename to packages/react-ui/storybook/stories/organisms/InputFile.stories.js index 9f6a2d258..dcd0fd80c 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js @@ -6,7 +6,7 @@ import UploadIcon from '../../../src/assets/UploadIcon'; import Typography from '../../../src/atoms/Typography'; const options = { - title: 'Custom Components/InputFile', + title: 'Organisms/InputFile', component: InputFile, argTypes: { placeholder: { diff --git a/yarn.lock b/yarn.lock index 9f72e61ab..c8f5e10d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3739,6 +3739,23 @@ prop-types "^15.7.2" regenerator-runtime "^0.13.7" +"@storybook/addon-viewport@^6.5.12": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.13.tgz#97771ed2f4ca1bef83d25174ce07db8557cdf795" + integrity sha512-KSfeuCSIjncwWGnUu6cZBx8WNqYvm5gHyFvkSPKEu0+MJtgncbUy7pl53lrEEr6QmIq0GRXvS3A0XzV8RCnrSA== + dependencies: + "@storybook/addons" "6.5.13" + "@storybook/api" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/components" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + global "^4.4.0" + memoizerific "^1.11.3" + prop-types "^15.7.2" + regenerator-runtime "^0.13.7" + "@storybook/addons@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.12.tgz#891767b5f88ea99b956cf19e9e2893594068adc7" @@ -3756,6 +3773,23 @@ global "^4.4.0" regenerator-runtime "^0.13.7" +"@storybook/addons@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73" + integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA== + dependencies: + "@storybook/api" "6.5.13" + "@storybook/channels" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.13" + "@storybook/theming" "6.5.13" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + "@storybook/api@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.12.tgz#7cc82087fc9298be03f15bf4ab9c4aab294b3bac" @@ -3779,6 +3813,29 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/api@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64" + integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w== + dependencies: + "@storybook/channels" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.13" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/builder-webpack4@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.12.tgz#dcfd91d3e78505943864335bc2b84ccc4d00a54e" @@ -3865,6 +3922,15 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/channels@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.13.tgz#f3f86b90a7832484ee3dcbc6845f5a47f62f028f" + integrity sha512-sGYSilE30bz0jG+HdHnkv0B4XkAv2hP+KRZr4xmnv+MOOQpRnZpJ5Z3HVU16s17cj/83NWihKj6BuKcEVzyilg== + dependencies: + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/client-api@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.12.tgz#9d02b2a8f5d4137918257742d72ae10c6a70a477" @@ -3899,6 +3965,14 @@ core-js "^3.8.2" global "^4.4.0" +"@storybook/client-logger@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264" + integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + "@storybook/components@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.12.tgz#e137f0683ea92e22de116bfa62cfd65ce4efe01d" @@ -3913,6 +3987,20 @@ regenerator-runtime "^0.13.7" util-deprecate "^1.0.2" +"@storybook/components@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030" + integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ== + dependencies: + "@storybook/client-logger" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + util-deprecate "^1.0.2" + "@storybook/core-client@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.12.tgz#1a3889604b92292d210d956c46f86a64dd7a9483" @@ -4002,6 +4090,13 @@ dependencies: core-js "^3.8.2" +"@storybook/core-events@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a" + integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w== + dependencies: + core-js "^3.8.2" + "@storybook/core-server@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.12.tgz#bc47a2af4972f7c9cddb8b5961bd5f04a3f7f09f" @@ -4264,6 +4359,17 @@ qs "^6.10.0" regenerator-runtime "^0.13.7" +"@storybook/router@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.13.tgz#c8bfed96f2343b097d416cfc95194038365fce94" + integrity sha512-sf5aogfirH5ucD0d0hc2mKf2iyWsZsvXhr5kjxUQmgkcoflkGUWhc34sbSQVRQ1i8K5lkLIDH/q2s1Zr2SbzhQ== + dependencies: + "@storybook/client-logger" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + "@storybook/semver@^7.3.2": version "7.3.2" resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" @@ -4337,6 +4443,16 @@ memoizerific "^1.11.3" regenerator-runtime "^0.13.7" +"@storybook/theming@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083" + integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g== + dependencies: + "@storybook/client-logger" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + "@storybook/ui@6.5.12": version "6.5.12" resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.12.tgz#25ccd6e6d5aae227ba6561c2b8e9cfda9b0ad4de" From 8fa8cf14815b6c3afb94474d851dd7d6fb170bc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Oct 2022 13:29:24 +0200 Subject: [PATCH 014/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-1 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 66ed6359f..dda3e4aba 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 982359eb1..a432e976b 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 01930ca2c..e7ca91add 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 23c7410f7..74e413d8a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index c75f15836..447fecb3f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 7dcd521b9..a27b387f8 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d6d2f8bb2..d424f05c6 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 2bde70ca0..bd7b08183 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index d8aa374ea..017a116cb 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 08602da2e8ee709582efc2a8c4324eef2914214a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Oct 2022 13:30:47 +0200 Subject: [PATCH 015/154] Bump peers with last prerelease --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index a432e976b..da3e99034 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index e7ca91add..0dc9f50f6 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 74e413d8a..63658c45f 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index a27b387f8..9d5b3af76 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d424f05c6..11799d1db 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index bd7b08183..c75ee08a7 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-0", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 152343d15a914b24e6f9d0dea163de73e9cc8aed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Oct 2022 19:26:20 +0200 Subject: [PATCH 016/154] Add module augmentation for Theme & ThemeOptions --- packages/react-ui/src/theme/carto-theme.d.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 910d7e284..eec2762a7 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -79,6 +79,18 @@ export type CartoTheme = Modify< >; declare module '@mui/material/styles' { + // Check https://mui.com/material-ui/customization/theming/#custom-variables + interface Theme { + palette: CustomPalette; + spacingValue: number; + } + + // allow configuration using `createTheme` + interface ThemeOptions { + palette?: CustomPalette; + spacingValue?: number; + } + interface TypographyVariants { overlineDelicate: React.CSSProperties; code1: React.CSSProperties; @@ -86,7 +98,6 @@ declare module '@mui/material/styles' { code3: React.CSSProperties; } - // allow configuration using `createTheme` interface TypographyVariantsOptions { overlineDelicate?: React.CSSProperties; code1?: React.CSSProperties; From 6640eee65d731efbaf15ca6c40b135a28af48749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Oct 2022 19:29:27 +0200 Subject: [PATCH 017/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-2 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index dda3e4aba..301648be0 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index da3e99034..4db493e84 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0dc9f50f6..08a77a391 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 63658c45f..164b93496 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 447fecb3f..7c79b9271 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 9d5b3af76..e4c2c2ad8 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 11799d1db..587934613 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index c75ee08a7..151819601 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 017a116cb..7a9ef5a71 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 1c4f64f4e71c41f5960d163d146716ec0e26dc38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Oct 2022 19:30:51 +0200 Subject: [PATCH 018/154] Adapt peer deps to new patch --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 4db493e84..f4b45d5a1 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 08a77a391..1bfa4065b 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 164b93496..90b3c34c8 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index e4c2c2ad8..ce58b6573 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 587934613..866466f53 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 151819601..ce0d6ab7d 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 29e35081d79a5180adf76a982b8568b45de83533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 31 Oct 2022 12:50:55 +0100 Subject: [PATCH 019/154] Add Figma links into Storybook (#515) --- CHANGELOG.md | 1 + packages/react-ui/storybook/.storybook/preview.js | 2 +- .../storybook/stories/common/Autocomplete.stories.js | 6 ++++++ .../storybook/stories/common/Breadcrumb.stories.js | 6 ++++++ .../react-ui/storybook/stories/common/Button.stories.js | 2 +- .../storybook/stories/common/ButtonGroup.stories.js | 2 +- .../react-ui/storybook/stories/common/Checkbox.stories.js | 2 +- .../react-ui/storybook/stories/common/Chip.stories.js | 6 ++++++ .../react-ui/storybook/stories/common/Dialog.stories.js | 6 ++++++ .../react-ui/storybook/stories/common/Divider.stories.js | 8 +++++++- .../react-ui/storybook/stories/common/List.stories.js | 8 +++++++- .../react-ui/storybook/stories/common/Progress.stories.js | 6 ++++++ .../react-ui/storybook/stories/common/Radio.stories.js | 2 +- .../react-ui/storybook/stories/common/Select.stories.js | 2 +- .../react-ui/storybook/stories/common/Slider.stories.js | 2 +- .../react-ui/storybook/stories/common/Switch.stories.js | 2 +- .../react-ui/storybook/stories/common/Tabs.stories.js | 6 ++++++ .../storybook/stories/common/Text-field.stories.js | 6 +++--- .../storybook/stories/common/ToggleButton.stories.js | 2 +- .../react-ui/storybook/stories/common/Tooltip.stories.js | 2 +- .../storybook/stories/organisms/InputFile.stories.js | 2 +- 21 files changed, 65 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a5ece472..f1ed0505b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- 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/) - New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506) - New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index f238f6c0f..d6e56fd3a 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -66,7 +66,7 @@ export const decorators = [ export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, - viewMode: 'story', + viewMode: 'docs', docs: { source: { type: 'code' diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js index 3cb2b637c..c4aaaa79e 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js @@ -28,6 +28,12 @@ const options = { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26505' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 04232076a..1051cfd65 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -12,6 +12,12 @@ const options = { type: 'number' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26153' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 0f6e26258..8b5f106b8 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -37,7 +37,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1303%3A26362' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' } } }; diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 64aabad34..4e5613f56 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -43,7 +43,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1180%3A28045' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' } } }; diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 7c9d07b20..0bb635b68 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -30,7 +30,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27131' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' } } }; diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 024336f5f..0b6a9feb6 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -67,6 +67,12 @@ const options = { options: ['default', 'outlined'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js index c2281dc84..30d5c2781 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js @@ -47,6 +47,12 @@ const options = { options: ['lg', 'md', 'sm', 'xl', 'xs', false] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28896' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/common/Divider.stories.js index effa846a4..9a3f9a518 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/common/Divider.stories.js @@ -11,7 +11,13 @@ import { const options = { title: 'Common/Divider', - component: Divider + component: Divider, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' + } + } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/common/List.stories.js index 96ff2a083..a7ad83267 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/common/List.stories.js @@ -30,7 +30,13 @@ import { const options = { title: 'Common/List', - component: List + component: List, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29228' + } + } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/common/Progress.stories.js index 0be46f21f..7f5c39b11 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/common/Progress.stories.js @@ -37,6 +37,12 @@ const options = { options: ['determinate', 'indeterminate', 'static', 'buffer', 'query'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29703' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index e32578d0d..35400dae7 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -32,7 +32,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27543' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' } } }; diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 1972a9a89..5c5d6feb4 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -47,7 +47,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A26139' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' } } }; diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index fec2d1587..ae42f743f 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -132,7 +132,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A24517' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A32732' } } }; diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index d45f9fe5b..a3ec9241f 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -25,7 +25,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27889' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33096' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index c49ffc963..8a0067c74 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -25,6 +25,12 @@ const options = { options: ['default', 'primary', 'secondary'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index eb50eac07..a0aabb0a4 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -38,7 +38,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A19069' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' } } }; @@ -299,7 +299,7 @@ Multiline.args = { value: 'Hello world\nwith multiple lines' }; Multiline.parameters = { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' } }; @@ -308,6 +308,6 @@ MultilineSmall.args = { value: 'Hello world\nwith multiple lines', size: 'small' MultilineSmall.parameters = { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' } }; diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index a767fd35d..3f7267071 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -33,7 +33,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index c66a39619..547a7bfea 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -46,7 +46,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' } } }; diff --git a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js index dcd0fd80c..94e80796e 100644 --- a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js @@ -47,7 +47,7 @@ const options = { }, design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1159%3A24236' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' } } }; From 41d2bf6d84750255dd9de98c67426bc77ddc36fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 31 Oct 2022 14:08:37 +0100 Subject: [PATCH 020/154] Mui5 migration: Breaking changes in v5: styles and theme (#514) --- CHANGELOG.md | 1 + UPGRADE.md | 11 + packages/react-ui/src/theme/carto-theme.js | 23 +- .../react-ui/src/theme/sections/components.js | 902 ------------------ .../src/theme/sections/components/buttons.js | 194 ++++ .../theme/sections/components/dataDisplay.js | 270 ++++++ .../src/theme/sections/components/forms.js | 440 +++++++++ .../theme/sections/components/navigation.js | 101 ++ .../react-ui/src/widgets/CategoryWidgetUI.js | 6 +- .../react-ui/src/widgets/FormulaWidgetUI.js | 2 +- .../src/widgets/legend/LegendCategories.js | 5 +- .../react-ui/storybook/.storybook/manager.js | 15 + .../storybook/stories/common/Tabs.stories.js | 6 + .../stories/common/Text-field.stories.js | 20 + 14 files changed, 1078 insertions(+), 918 deletions(-) delete mode 100644 packages/react-ui/src/theme/sections/components.js create mode 100644 packages/react-ui/src/theme/sections/components/buttons.js create mode 100644 packages/react-ui/src/theme/sections/components/dataDisplay.js create mode 100644 packages/react-ui/src/theme/sections/components/forms.js create mode 100644 packages/react-ui/src/theme/sections/components/navigation.js create mode 100644 packages/react-ui/storybook/.storybook/manager.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f1ed0505b..7b81ee0a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- 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/) - New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506) diff --git a/UPGRADE.md b/UPGRADE.md index f3d778d32..f5193cbe6 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,5 +1,12 @@ # Upgrade to the new design system +## Breaking changes in Mui v5 + +Please, follow the Mui guides related to breaking changes in components and styles: + +- [Styles](https://mui.com/material-ui/migration/v5-style-changes/) +- [Components](https://mui.com/material-ui/migration/v5-component-changes/) + ## MUI theme [carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections: @@ -14,6 +21,10 @@ Also added some files for shared constants (`themeConstants.js`) and useful func Removed unused custom `createTheme` function in `carto-theme.js`. +We have a new custom spacing constant in carto-theme, `spacingValue`, which you should use instead of the common `theme.spacing()` function in cases where you need to do value calculations, because since Mui v5, theme.spacing is no longer a number, but a string in this format: `number + px`. + +Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual. + # Typography `responsiveFontSizes` simplified due we want to resize only a few variants through the theme. diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 3eac76257..da070fd03 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,4 +1,7 @@ -import { themeComponentsOverrides, themeComponentsProps } from './sections/components'; +import { dataDisplayOverrides } from './sections/components/dataDisplay'; +import { buttonsOverrides } from './sections/components/buttons'; +import { formsOverrides } from './sections/components/forms'; +import { navigationOverrides } from './sections/components/navigation'; import { CssBaseline } from './sections/cssBaseline'; import { commonPalette } from './sections/palette'; import { themeShadows } from './sections/shadows'; @@ -99,13 +102,17 @@ export const cartoThemeOptions = { snackbar: 1400, tooltip: 1500 }, - overrides: { + + // Styles and props overrides for components + components: { MuiCssBaseline: { - ...CssBaseline + styleOverrides: { + ...CssBaseline + } }, - ...themeComponentsOverrides - }, - - // Props - props: { ...themeComponentsProps } + ...buttonsOverrides, + ...formsOverrides, + ...navigationOverrides, + ...dataDisplayOverrides + } }; diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js deleted file mode 100644 index f1ceec53b..000000000 --- a/packages/react-ui/src/theme/sections/components.js +++ /dev/null @@ -1,902 +0,0 @@ -import { getSpacing } from '../themeUtils'; -import { commonPalette } from './palette'; -import { themeTypography } from './typography'; - -const round = (value) => Math.round(value * 1e5) / 1e5; -const pxToRem = (size) => `${round(size / themeTypography.htmlFontSize)}rem`; - -themeTypography.pxToRem = pxToRem; -themeTypography.round = round; - -export const themeComponentsOverrides = { - // Button - MuiButton: { - contained: { - boxShadow: 'none' - }, - outlined: { - border: `2px solid ${commonPalette.text.primary}`, - padding: '4px 14px', - '&:hover': { - borderWidth: '2px' - }, - '&$disabled': { - borderWidth: '2px' - } - }, - outlinedPrimary: { - border: `2px solid ${commonPalette.primary.main}`, - '&:hover': { - borderWidth: '2px' - } - }, - outlinedSecondary: { - border: `2px solid ${commonPalette.secondary.main}`, - '&:hover': { - borderWidth: '2px' - }, - '&$disabled': { - borderWidth: '2px' - } - }, - containedSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - outlinedSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - textSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - containedSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - containedSecondary: { - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - outlinedSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - textSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - startIcon: { - marginRight: 6, - marginLeft: -4, - '&$iconSizeSmall': { - marginLeft: -4 - }, - '&$iconSizeLarge': { - marginRight: 8 - } - }, - endIcon: { - marginRight: -4, - marginLeft: 6, - '&$iconSizeSmall': { - marginRight: -4 - }, - '&$iconSizeLarge': { - marginLeft: 8 - } - }, - iconSizeSmall: { - '& > *:first-child': { - fontSize: 20 - } - }, - iconSizeMedium: { - '& > *:first-child': { - fontSize: 24 - } - }, - iconSizeLarge: { - '& > *:first-child': { - fontSize: 24 - } - } - }, - MuiIconButton: { - root: { - padding: getSpacing(0.75), - borderRadius: getSpacing(0.5), - color: commonPalette.text.primary - }, - sizeSmall: { - padding: getSpacing(0.25) - } - }, - - MuiInputBase: { - root: { - '&$disabled .MuiInputAdornment-root': { - color: commonPalette.action.disabled - }, - '&$disabled .MuiTypography-root': { - color: commonPalette.action.disabled - } - } - }, - MuiOutlinedInput: { - root: { - '&$disabled': { - backgroundColor: commonPalette.action.hover - } - }, - - input: { - ...themeTypography.body1, - height: `${themeTypography.body1.lineHeight}em`, - padding: getSpacing(3, 2, 1) - }, - - inputMarginDense: { - ...themeTypography.body2, - height: `${themeTypography.body2.lineHeight}em`, - padding: getSpacing(1, 1.5), - paddingTop: getSpacing(1), - paddingBottom: getSpacing(1) - }, - - adornedStart: { - '&$marginDense': { - paddingLeft: getSpacing(1.5) - } - }, - adornedEnd: { - '&$marginDense': { - paddingRight: getSpacing(1.5) - } - }, - - notchedOutline: { - border: `2px solid ${commonPalette.text.disabled}` - }, - - multiline: { - padding: getSpacing(2.75, 2, 1.25) - } - }, - MuiInputLabel: { - root: { - ...themeTypography.body1 - }, - - formControl: { - transform: 'translate(16px, 20px) scale(1)', - - '&$shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&$marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&$shrink': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)' - } - } - }, - - outlined: { - '&$shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&$marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&$shrink': { - transform: 'translate(0, -20px) scale(1)' - } - } - } - }, - MuiInputAdornment: { - root: { - ...themeTypography.body1, - alignItems: 'baseline', - marginBottom: getSpacing(1.5), - color: commonPalette.text.secondary, - - '&:disabled': { - color: commonPalette.action.disabled - }, - - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body1.lineHeight}em` - } - }, - - positionStart: { - marginLeft: getSpacing(0.25) - }, - - positionEnd: { - marginRight: getSpacing(0.25) - }, - - marginDense: { - marginBottom: getSpacing(0), - alignItems: 'center', - ...themeTypography.body2, - - '& .MuiTypography-root': { - ...themeTypography.body2 - }, - - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body2.lineHeight}em` - } - } - }, - MuiFormHelperText: { - root: { - ...themeTypography.caption, - '&$contained': { - marginTop: getSpacing(1) - } - }, - - marginDense: { - '&$contained': { - marginLeft: getSpacing(0) - } - } - }, - - // Select - MuiFormControl: { - root: { - width: '100%' - } - }, - MuiSelect: { - selectMenu: {}, - - root: { - '&:hover': { - backgroundColor: 'transparent' - } - }, - - select: { - '&:focus': { - backgroundColor: 'transparent' - } - } - }, - - // Menu - MuiMenuItem: { - root: { - ...themeTypography.body2 - } - }, - - // Autocomplete - MuiAutocomplete: { - inputRoot: { - '&[class*="MuiOutlinedInput-root"]': { - padding: getSpacing(3, 1.25, 0.5), - - '& .MuiAutocomplete-input': { - padding: getSpacing(0, 1.25, 0.5) - } - }, - '&.MuiInputBase-marginDense.MuiOutlinedInput-root $input.MuiOutlinedInput-inputMarginDense': - { - paddingTop: getSpacing(0.25), - paddingBottom: getSpacing(0.25) - } - } - }, - - // Checkbox - MuiCheckbox: { - root: { - ...themeTypography.body2, - padding: getSpacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - }, - - // RadioButton - MuiRadio: { - root: { - ...themeTypography.body2, - padding: getSpacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - }, - - // Tabs - MuiTabs: { - indicator: { - height: 4, - '&.colorPrimary': { - backgroundColor: commonPalette.text.primary - } - }, - - vertical: { - '& $indicator': { - width: 4 - }, - - '& .MuiTab-root': { - padding: getSpacing(0, 2), - - '& .MuiTab-wrapper': { - alignItems: 'flex-start' - } - } - } - }, - - // Tab - MuiTab: { - root: { - padding: getSpacing(0, 1), - marginRight: getSpacing(3), - minWidth: '56px!important', - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { - flexFlow: 'row', - alignItems: 'center' - }, - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { - marginRight: getSpacing(1), - marginBottom: 0 - } - }, - textColorPrimary: { - color: commonPalette.primary.main, - opacity: 1, - '&$selected': { - color: commonPalette.text.primary - }, - '&$disabled': { - color: commonPalette.action.disabled - } - } - }, - - MuiDivider: { - root: { - backgroundColor: commonPalette.divider - }, - light: { - backgroundColor: commonPalette.grey[50] - } - }, - - // Switch - MuiSwitch: { - root: { - height: getSpacing(4.5), - width: getSpacing(6), - padding: getSpacing(1), - overflow: 'visible', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - } - }, - - switchBase: { - padding: getSpacing(1.5), - borderRadius: '50%', - transform: 'translate(1px, 1px)', - color: commonPalette.text.secondary, - - '&$checked': { - '& input': { - left: getSpacing(-1.5) - }, - - transform: 'translate(13px, 1px)', - color: commonPalette.common.white, - - '& + $track': { - opacity: 1 - } - } - }, - - thumb: { - width: getSpacing(1.25), - height: getSpacing(1.25), - boxShadow: 'none' - }, - - input: { - width: getSpacing(6), - left: 0 - }, - - track: { - height: 'auto', - border: `2px solid ${commonPalette.text.secondary}`, - borderRadius: getSpacing(2), - opacity: 1, - backgroundColor: commonPalette.common.white - }, - - colorPrimary: { - '&$checked': { - color: commonPalette.common.white, - - '& + $track': { - backgroundColor: commonPalette.primary.main, - borderColor: 'transparent' - }, - - '&$disabled': { - color: commonPalette.grey[100], - - '& + $track': { - backgroundColor: commonPalette.text.disabled - } - } - }, - - '&$disabled': { - color: commonPalette.text.disabled, - - '& + $track': { - opacity: 1, - backgroundColor: commonPalette.common.white, - borderColor: commonPalette.text.disabled - } - } - }, - - colorSecondary: { - '&$checked': { - color: commonPalette.common.white, - - '& + $track': { - backgroundColor: commonPalette.secondary.main, - borderColor: 'transparent' - }, - - '&$disabled': { - color: commonPalette.grey[100], - - '& + $track': { - backgroundColor: commonPalette.text.disabled - } - } - }, - - '&$disabled': { - color: commonPalette.text.disabled, - - '& + $track': { - opacity: 1, - backgroundColor: commonPalette.common.white, - borderColor: commonPalette.text.disabled - } - } - }, - - sizeSmall: { - height: getSpacing(4.5), - width: getSpacing(6), - padding: getSpacing(1), - - '& $switchBase': { - padding: getSpacing(1.5), - transform: 'translate(0, 1px)', - - '&$checked': { - transform: 'translate(15px, 1px)' - } - }, - '& $thumb': { - width: getSpacing(1.25), - height: getSpacing(1.25) - } - } - }, - - // Breadcrumbs - MuiBreadcrumbs: { - li: { - '& .MuiTypography-root': { - ...themeTypography.body2, - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - }, - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body2.lineHeight}em`, - marginRight: getSpacing(1) - } - }, - - separator: { - marginLeft: getSpacing(0.5), - marginRight: getSpacing(0.5) - } - }, - - // Lists - MuiList: { - root: { - // Indent sublevels, ugly but needed to avoid issues with hover - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(4) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(6) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(8) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(10) - } - } - } - } - } - } - }, - - MuiListItemIcon: { - root: { - minWidth: getSpacing(5.75), - marginLeft: getSpacing(0.75), - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - }, - - MuiListItemAvatar: { - root: { - '& .MuiAvatar-root': { - height: getSpacing(4.5), - width: getSpacing(4.5) - }, - '& .MuiSvgIcon-root': { - fontSize: getSpacing(2.5) - } - } - }, - - // Tooltip - MuiTooltip: { - tooltip: { - ...themeTypography.caption, - backgroundColor: commonPalette.black[90] - }, - - arrow: { - color: commonPalette.black[90] - } - }, - - // Dialog - MuiDialogTitle: { - root: { - padding: getSpacing(3, 3, 2) - } - }, - - MuiDialogContent: { - root: { - '& .MuiFormGroup-root': { - padding: getSpacing(1, 0) - } - } - }, - - // Slider - MuiSlider: { - root: {} - }, - - // MuiToggleButtonGroup - MuiToggleButtonGroup: { - groupedHorizontal: { - '&:not(:last-child)': { - marginRight: getSpacing(0.25), - borderTopRightRadius: getSpacing(0.5), - borderBottomRightRadius: getSpacing(0.5) - }, - '&:not(:first-child)': { - marginLeft: 0, - borderLeft: 'none', - borderTopLeftRadius: getSpacing(0.5), - borderBottomLeftRadius: getSpacing(0.5) - } - }, - groupedVertical: { - '&:not(:last-child)': { - marginBottom: getSpacing(0.25), - borderBottomLeftRadius: getSpacing(0.5), - borderBottomRightRadius: getSpacing(0.5) - }, - '&:not(:first-child)': { - borderTopLeftRadius: getSpacing(0.5), - borderTopRightRadius: getSpacing(0.5) - } - } - }, - - MuiTablePagination: { - select: { - paddingRight: getSpacing(7.5), - paddingLeft: getSpacing(1.5) - }, - input: { - height: getSpacing(4), - border: `2px solid ${commonPalette.divider}`, - borderRadius: getSpacing(0.5), - fontWeight: themeTypography.fontWeightMedium, - '& .MuiSelect-icon': { - top: '50%', - transform: 'translateY(-50%)', - width: getSpacing(2.25), - height: getSpacing(2.25), - right: getSpacing(0.75) - } - }, - caption: { - ...themeTypography.caption, - '&:first-of-type': { - color: commonPalette.text.secondary - } - }, - toolbar: { - minHeight: 0, - marginTop: getSpacing(1) - }, - actions: { - '& button:last-child': { - marginLeft: getSpacing(2) - } - } - }, - - MuiTableCell: { - head: { - ...themeTypography.caption, - color: commonPalette.text.secondary - }, - stickyHeader: { - backgroundColor: commonPalette.common.white - } - }, - - // MuiToggleButton - MuiToggleButton: { - root: { - width: getSpacing(4.5), - height: getSpacing(4.5), - border: 'none', - borderRadius: getSpacing(0.5), - color: commonPalette.grey[500], - '&$selected': { - color: commonPalette.primary.main, - backgroundColor: commonPalette.primary.background, - '&:hover': { - backgroundColor: commonPalette.primary.background - } - } - }, - sizeSmall: { - width: getSpacing(3), - height: getSpacing(3), - '& .MuiSvgIcon-root': { - maxWidth: getSpacing(2.5), - maxHeight: getSpacing(2.5) - } - }, - sizeLarge: { - width: getSpacing(7), - height: getSpacing(7) - } - }, - - MuiChip: { - root: { - backgroundColor: commonPalette.grey[100], - '&:hover': { - backgroundColor: commonPalette.grey[200] - }, - '& .MuiAvatar-root': { - backgroundColor: '#7f3c8d', - color: commonPalette.common.white - } - }, - colorPrimary: { - '&$disabled': { - backgroundColor: commonPalette.grey[100], - color: commonPalette.text.primary - }, - '&:hover': { - backgroundColor: commonPalette.primary.dark - } - }, - colorSecondary: { - '&$disabled': { - backgroundColor: commonPalette.grey[100] - }, - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - label: { - fontFamily: '"Open Sans", sans-serif', - letterSpacing: 0.25 - }, - labelSmall: { - fontSize: themeTypography.caption.fontSize, - fontWeight: themeTypography.fontWeightLight - }, - outlined: { - transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, - '&$disabled': { - backgroundColor: 'transparent' - }, - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.grey[200], - '&$clickable': { - backgroundColor: 'transparent' - } - } - }, - outlinedPrimary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.primary.dark, - color: commonPalette.primary.dark, - '&$clickable': { - backgroundColor: 'transparent' - } - } - }, - outlinedSecondary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.secondary.dark, - color: commonPalette.secondary.dark, - '&$clickable': { - backgroundColor: 'transparent' - } - } - }, - clickable: { - '&:focus': { - webkitTapHighlightColor: 'none' - } - } - } -}; - -export const themeComponentsProps = { - MuiButtonBase: { - disableRipple: true - }, - MuiButton: { - disableElevation: true - }, - MuiTextField: { - variant: 'outlined' - }, - MuiSelect: { - variant: 'outlined', - MenuProps: { - getContentAnchorEl: null, - anchorOrigin: { - vertical: 'bottom', - horizontal: 'left' - } - } - }, - MuiOutlinedInput: { - notched: false - }, - MuiCheckbox: { - size: 'small', - color: 'primary' - }, - MuiRadio: { - size: 'small', - color: 'primary' - }, - MuiSwitch: { - color: 'primary' - }, - MuiInputAdornment: { - disableTypography: true - }, - MuiListItemText: { - primaryTypographyProps: { - variant: 'body2', - style: { fontWeight: themeTypography.fontWeightBold }, - noWrap: true - }, - secondaryTypographyProps: { variant: 'caption' } - }, - MuiSkeleton: { - animation: 'wave' - }, - MuiTabs: { - indicatorColor: 'primary', - textColor: 'primary', - TabIndicatorProps: { - classes: { - colorPrimary: 'colorPrimary' - } - } - }, - MuiTypography: { - color: 'textPrimary' - }, - MuiDialogContentText: { - variant: 'body2' - }, - MuiToggleButtonGroup: { - orientation: 'horizontal', - exclusive: true - }, - CircularProgress: { - size: 40, - thickness: 4 - }, - MuiSlider: { - color: 'primary', - marks: false - }, - MuiDialog: { - maxWidth: 'md' - } -}; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js new file mode 100644 index 000000000..7be93add4 --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -0,0 +1,194 @@ +import { getPixelToRem, getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; + +export const buttonsOverrides = { + // Button + MuiButton: { + defaultProps: { + disableElevation: true + }, + + styleOverrides: { + contained: { + boxShadow: 'none' + }, + outlined: { + border: `2px solid ${commonPalette.text.primary}`, + padding: '4px 14px', + '&:hover': { + borderWidth: '2px' + }, + '&.Mui-disabled': { + borderWidth: '2px' + } + }, + outlinedPrimary: { + border: `2px solid ${commonPalette.primary.main}`, + '&:hover': { + borderWidth: '2px' + } + }, + outlinedSecondary: { + border: `2px solid ${commonPalette.secondary.main}`, + '&:hover': { + borderWidth: '2px' + }, + '&.Mui-disabled': { + borderWidth: '2px' + } + }, + containedSizeSmall: { + padding: '2px 12px', + fontSize: getPixelToRem(12) + }, + outlinedSizeSmall: { + padding: '2px 12px', + fontSize: getPixelToRem(12) + }, + textSizeSmall: { + padding: '2px 12px', + fontSize: getPixelToRem(12) + }, + containedSizeLarge: { + padding: '16px 24px', + fontSize: getPixelToRem(16) + }, + containedSecondary: { + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + }, + outlinedSizeLarge: { + padding: '16px 24px', + fontSize: getPixelToRem(16) + }, + textSizeLarge: { + padding: '16px 24px', + fontSize: getPixelToRem(16) + }, + startIcon: { + marginRight: 6, + marginLeft: -4, + '&.MuiButton-iconSizeSmall': { + marginLeft: -4 + }, + '&.MuiButton-iconSizeLarge': { + marginRight: 8 + } + }, + endIcon: { + marginRight: -4, + marginLeft: 6, + '&.MuiButton-iconSizeSmall': { + marginRight: -4 + }, + '&.MuiButton-iconSizeLarge': { + marginLeft: 8 + } + }, + iconSizeSmall: { + '& > *:first-child': { + fontSize: 20 + } + }, + iconSizeMedium: { + '& > *:first-child': { + fontSize: 24 + } + }, + iconSizeLarge: { + '& > *:first-child': { + fontSize: 24 + } + } + } + }, + + // Button Base + MuiButtonBase: { + defaultProps: { + disableRipple: true + } + }, + + // Icon Button + MuiIconButton: { + styleOverrides: { + root: { + padding: getSpacing(0.75), + borderRadius: getSpacing(0.5), + color: commonPalette.text.primary + }, + sizeSmall: { + padding: getSpacing(0.25) + } + } + }, + + // MuiToggleButton + MuiToggleButton: { + styleOverrides: { + root: { + width: getSpacing(4.5), + height: getSpacing(4.5), + border: 'none', + borderRadius: getSpacing(0.5), + color: commonPalette.grey[500], + '&.Mui-selected': { + color: commonPalette.primary.main, + backgroundColor: commonPalette.primary.background, + '&:hover': { + backgroundColor: commonPalette.primary.background + } + } + }, + sizeSmall: { + width: getSpacing(3), + height: getSpacing(3), + '& .MuiSvgIcon-root': { + maxWidth: getSpacing(2.5), + maxHeight: getSpacing(2.5) + } + }, + sizeLarge: { + width: getSpacing(7), + height: getSpacing(7) + } + } + }, + + // MuiToggleButtonGroup + MuiToggleButtonGroup: { + defaultProps: { + orientation: 'horizontal', + exclusive: true + }, + + styleOverrides: { + groupedHorizontal: { + '&:not(:last-child)': { + marginRight: getSpacing(0.25), + borderTopRightRadius: getSpacing(0.5), + borderBottomRightRadius: getSpacing(0.5) + }, + '&:not(:first-child)': { + marginLeft: 0, + borderLeft: 'none', + borderTopLeftRadius: getSpacing(0.5), + borderBottomLeftRadius: getSpacing(0.5) + } + }, + groupedVertical: { + '&:not(:last-child)': { + marginBottom: getSpacing(0.25), + borderBottomLeftRadius: getSpacing(0.5), + borderBottomRightRadius: getSpacing(0.5) + }, + '&:not(:first-child)': { + borderTopLeftRadius: getSpacing(0.5), + borderTopRightRadius: getSpacing(0.5) + } + } + } + } +}; diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js new file mode 100644 index 000000000..64cf0fa3d --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -0,0 +1,270 @@ +import { getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; + +export const dataDisplayOverrides = { + // Divider + MuiDivider: { + styleOverrides: { + root: { + backgroundColor: commonPalette.divider + }, + light: { + backgroundColor: commonPalette.grey[50] + } + } + }, + + // List + MuiList: { + styleOverrides: { + root: { + // Indent sublevels, ugly but needed to avoid issues with hover + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(4) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(6) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(8) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(10) + } + } + } + } + } + } + } + }, + + // List Item + MuiListItemText: { + defaultProps: { + primaryTypographyProps: { + variant: 'body2', + style: { fontWeight: themeTypography.fontWeightBold }, + noWrap: true + }, + secondaryTypographyProps: { variant: 'caption' } + } + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: getSpacing(5.75), + marginLeft: getSpacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3) + } + } + } + }, + MuiListItemAvatar: { + styleOverrides: { + root: { + '& .MuiAvatar-root': { + height: getSpacing(4.5), + width: getSpacing(4.5) + }, + '& .MuiSvgIcon-root': { + fontSize: getSpacing(2.5) + } + } + } + }, + + // Tooltip + MuiTooltip: { + styleOverrides: { + tooltip: { + ...themeTypography.caption, + backgroundColor: commonPalette.black[90] + }, + + arrow: { + color: commonPalette.black[90] + } + } + }, + + // Dialog + MuiDialog: { + defaultProps: { + maxWidth: 'md' + } + }, + MuiDialogTitle: { + styleOverrides: { + root: { + padding: getSpacing(3, 3, 2) + } + } + }, + MuiDialogContent: { + styleOverrides: { + root: { + '& .MuiFormGroup-root': { + padding: getSpacing(1, 0) + } + } + } + }, + MuiDialogContentText: { + defaultProps: { + variant: 'body2' + } + }, + + // Table + MuiTablePagination: { + styleOverrides: { + select: { + paddingRight: getSpacing(7.5), + paddingLeft: getSpacing(1.5) + }, + input: { + height: getSpacing(4), + border: `2px solid ${commonPalette.divider}`, + borderRadius: getSpacing(0.5), + fontWeight: themeTypography.fontWeightMedium, + '& .MuiSelect-icon': { + top: '50%', + transform: 'translateY(-50%)', + width: getSpacing(2.25), + height: getSpacing(2.25), + right: getSpacing(0.75) + } + }, + caption: { + ...themeTypography.caption, + '&:first-of-type': { + color: commonPalette.text.secondary + } + }, + toolbar: { + minHeight: 0, + marginTop: getSpacing(1) + }, + actions: { + '& button:last-child': { + marginLeft: getSpacing(2) + } + } + } + }, + MuiTableCell: { + styleOverrides: { + head: { + ...themeTypography.caption, + color: commonPalette.text.secondary + }, + stickyHeader: { + backgroundColor: commonPalette.common.white + } + } + }, + + // Chip + MuiChip: { + styleOverrides: { + root: { + backgroundColor: commonPalette.grey[100], + '&:hover': { + backgroundColor: commonPalette.grey[200] + }, + '& .MuiAvatar-root': { + backgroundColor: '#7f3c8d', + color: commonPalette.common.white + } + }, + colorPrimary: { + '&.Mui-disabled': { + backgroundColor: commonPalette.grey[100], + color: commonPalette.text.primary + }, + '&:hover': { + backgroundColor: commonPalette.primary.dark + } + }, + colorSecondary: { + '&.Mui-disabled': { + backgroundColor: commonPalette.grey[100] + }, + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + }, + label: { + fontFamily: '"Open Sans", sans-serif', + letterSpacing: 0.25 + }, + labelSmall: { + fontSize: themeTypography.caption.fontSize, + fontWeight: themeTypography.fontWeightLight + }, + outlined: { + transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + '&.Mui-disabled': { + backgroundColor: 'transparent' + }, + '&:hover': { + backgroundColor: 'transparent', + borderColor: commonPalette.grey[200], + '&.MuiChip-clickable': { + backgroundColor: 'transparent' + } + } + }, + outlinedPrimary: { + '&:hover': { + backgroundColor: 'transparent', + borderColor: commonPalette.primary.dark, + color: commonPalette.primary.dark, + '&.MuiChip-clickable': { + backgroundColor: 'transparent' + } + } + }, + outlinedSecondary: { + '&:hover': { + backgroundColor: 'transparent', + borderColor: commonPalette.secondary.dark, + color: commonPalette.secondary.dark, + '&.MuiChip-clickable': { + backgroundColor: 'transparent' + } + } + }, + clickable: { + '&:focus': { + webkitTapHighlightColor: 'none' + } + } + } + }, + + // Skeleton + MuiSkeleton: { + defaultProps: { + animation: 'wave' + } + }, + + // Typography + MuiTypography: { + defaultProps: { + color: 'textPrimary' + } + } +}; diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js new file mode 100644 index 000000000..f92f21517 --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -0,0 +1,440 @@ +import { getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; + +export const formsOverrides = { + // Input + MuiInputBase: { + styleOverrides: { + root: { + '&.Mui-disabled .MuiInputAdornment-root': { + color: commonPalette.action.disabled + }, + '&.Mui-disabled .MuiTypography-root': { + color: commonPalette.action.disabled + } + } + } + }, + + // Outlined Input + MuiOutlinedInput: { + defaultProps: { + notched: false + }, + styleOverrides: { + root: { + '&.Mui-disabled': { + backgroundColor: commonPalette.action.hover + } + }, + + input: { + ...themeTypography.body1, + height: `${themeTypography.body1.lineHeight}em`, + padding: getSpacing(3, 2, 1) + }, + + inputMarginDense: { + ...themeTypography.body2, + height: `${themeTypography.body2.lineHeight}em`, + padding: getSpacing(1, 1.5), + paddingTop: getSpacing(1), + paddingBottom: getSpacing(1) + }, + + adornedStart: { + '&.MuiFormControl-marginDense': { + paddingLeft: getSpacing(1.5) + } + }, + adornedEnd: { + '&.MuiFormControl-marginDense': { + paddingRight: getSpacing(1.5) + } + }, + + notchedOutline: { + border: `2px solid ${commonPalette.text.disabled}` + }, + + multiline: { + padding: getSpacing(2.75, 2, 1.25) + } + } + }, + + // Label + MuiInputLabel: { + styleOverrides: { + root: { + ...themeTypography.body1 + }, + + formControl: { + transform: 'translate(16px, 20px) scale(1)', + + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&.MuiFormControl-marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)' + } + } + }, + + outlined: { + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&.MuiFormControl-marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&.MuiInputLabel-shrink': { + transform: 'translate(0, -20px) scale(1)' + } + } + } + } + }, + + // Input Adornment + MuiInputAdornment: { + defaultProps: { + disableTypography: true + }, + + styleOverrides: { + root: { + ...themeTypography.body1, + alignItems: 'baseline', + marginBottom: getSpacing(1.5), + color: commonPalette.text.secondary, + + '&:disabled': { + color: commonPalette.action.disabled + }, + + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body1.lineHeight}em` + } + }, + + positionStart: { + marginLeft: getSpacing(0.25) + }, + + positionEnd: { + marginRight: getSpacing(0.25) + }, + + marginDense: { + marginBottom: getSpacing(0), + alignItems: 'center', + ...themeTypography.body2, + + '& .MuiTypography-root': { + ...themeTypography.body2 + }, + + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body2.lineHeight}em` + } + } + } + }, + + // Text Field + MuiTextField: { + defaultProps: { + variant: 'outlined' + } + }, + + // Form Helper Text + MuiFormHelperText: { + styleOverrides: { + root: { + ...themeTypography.caption, + '&.MuiFormHelperText-contained': { + marginTop: getSpacing(1) + } + }, + + marginDense: { + '&.MuiFormHelperText-contained': { + marginLeft: getSpacing(0) + } + } + } + }, + + // Form Control + MuiFormControl: { + styleOverrides: { + root: { + width: '100%' + } + } + }, + + // Select + MuiSelect: { + defaultProps: { + variant: 'outlined', + MenuProps: { + getContentAnchorEl: null, + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left' + } + } + }, + styleOverrides: { + root: { + '&:hover': { + backgroundColor: 'transparent' + } + }, + + select: { + '&:focus': { + backgroundColor: 'transparent' + } + } + } + }, + + // Autocomplete + MuiAutocomplete: { + styleOverrides: { + inputRoot: { + '&[class*="MuiOutlinedInput-root"]': { + padding: getSpacing(3, 1.25, 0.5), + + '& .MuiAutocomplete-input': { + padding: getSpacing(0, 1.25, 0.5) + } + }, + '&.MuiInputBase-marginDense.MuiOutlinedInput-root .MuiInputBase-input.MuiOutlinedInput-inputMarginDense': + { + paddingTop: getSpacing(0.25), + paddingBottom: getSpacing(0.25) + } + } + } + }, + + // Checkbox + MuiCheckbox: { + defaultProps: { + size: 'small', + color: 'primary' + }, + styleOverrides: { + root: { + ...themeTypography.body2, + padding: getSpacing(0.75), + borderRadius: '50%', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), + color: commonPalette.text.primary + }, + + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3) + } + } + } + }, + + // Radio Button + MuiRadio: { + defaultProps: { + size: 'small', + color: 'primary' + }, + styleOverrides: { + root: { + ...themeTypography.body2, + padding: getSpacing(0.75), + borderRadius: '50%', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), + color: commonPalette.text.primary + }, + + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3) + } + } + } + }, + + // Switch + MuiSwitch: { + defaultProps: { + color: 'primary' + }, + styleOverrides: { + root: { + height: getSpacing(4.5), + width: getSpacing(6), + padding: getSpacing(1), + overflow: 'visible', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), + color: commonPalette.text.primary + } + }, + + switchBase: { + padding: getSpacing(1.5), + borderRadius: '50%', + transform: 'translate(1px, 1px)', + color: commonPalette.text.secondary, + + '&.Mui-checked': { + '& input': { + left: getSpacing(-1.5) + }, + + transform: 'translate(13px, 1px)', + color: commonPalette.common.white, + + '& + .MuiSwitch-track': { + opacity: 1 + } + } + }, + + thumb: { + width: getSpacing(1.25), + height: getSpacing(1.25), + boxShadow: 'none' + }, + + input: { + width: getSpacing(6), + left: 0 + }, + + track: { + height: 'auto', + border: `2px solid ${commonPalette.text.secondary}`, + borderRadius: getSpacing(2), + opacity: 1, + backgroundColor: commonPalette.common.white + }, + + colorPrimary: { + '&.Mui-checked': { + color: commonPalette.common.white, + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.primary.main, + borderColor: 'transparent' + }, + + '&.Mui-disabled': { + color: commonPalette.grey[100], + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.text.disabled + } + } + }, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: commonPalette.common.white, + borderColor: commonPalette.text.disabled + } + } + }, + + colorSecondary: { + '&.Mui-checked': { + color: commonPalette.common.white, + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.secondary.main, + borderColor: 'transparent' + }, + + '&.Mui-disabled': { + color: commonPalette.grey[100], + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.text.disabled + } + } + }, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: commonPalette.common.white, + borderColor: commonPalette.text.disabled + } + } + }, + + sizeSmall: { + height: getSpacing(4.5), + width: getSpacing(6), + padding: getSpacing(1), + + '& .MuiSwitch-switchBase': { + padding: getSpacing(1.5), + transform: 'translate(0, 1px)', + + '&.Mui-checked': { + transform: 'translate(15px, 1px)' + } + }, + '& .MuiSwitch-thumb': { + width: getSpacing(1.25), + height: getSpacing(1.25) + } + } + } + }, + + // Circular Progress + CircularProgress: { + defaultProps: { + size: 40, + thickness: 4 + } + }, + + // Slider + MuiSlider: { + defaultProps: { + color: 'primary', + marks: false + } + } +}; diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js new file mode 100644 index 000000000..75f07a58a --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -0,0 +1,101 @@ +import { getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; + +export const navigationOverrides = { + // Menu + MuiMenuItem: { + styleOverrides: { + root: { + ...themeTypography.body2 + } + } + }, + + // Tabs + MuiTabs: { + defaultProps: { + indicatorColor: 'primary', + textColor: 'primary', + TabIndicatorProps: { + classes: { + colorPrimary: 'colorPrimary' + } + } + }, + styleOverrides: { + indicator: { + height: 4, + '&.colorPrimary': { + backgroundColor: commonPalette.text.primary + } + }, + + vertical: { + '& .MuiTabs-indicator': { + width: 4 + }, + + '& .MuiTab-root': { + padding: getSpacing(0, 2), + + '& .MuiTab-wrapper': { + alignItems: 'flex-start' + } + } + } + } + }, + + // Tab + MuiTab: { + styleOverrides: { + root: { + padding: getSpacing(0, 1), + marginRight: getSpacing(3), + minWidth: '56px!important', + '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { + flexFlow: 'row', + alignItems: 'center' + }, + '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { + marginRight: getSpacing(1), + marginBottom: 0 + } + }, + textColorPrimary: { + color: commonPalette.primary.main, + opacity: 1, + '&.Mui-selected': { + color: commonPalette.text.primary + }, + '&.Mui-disabled': { + color: commonPalette.action.disabled + } + } + } + }, + + // Breadcrumbs + MuiBreadcrumbs: { + styleOverrides: { + li: { + '& .MuiTypography-root': { + ...themeTypography.body2, + display: 'flex', + flexDirection: 'row', + alignItems: 'center' + }, + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body2.lineHeight}em`, + marginRight: getSpacing(1) + } + }, + + separator: { + marginLeft: getSpacing(0.5), + marginRight: getSpacing(0.5) + } + } + } +}; diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 3f153e18f..0c1d63550 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -38,15 +38,15 @@ const useStyles = makeStyles((theme) => ({ }, element: { - '&$unselected': { + '&.unselected': { color: theme.palette.text.disabled, - '& $progressbar div': { + '& .progressbar div': { backgroundColor: theme.palette.text.disabled } }, - '&$rest $progressbar div': { + '&.rest .progressbar div': { backgroundColor: theme.palette.text.disabled } }, diff --git a/packages/react-ui/src/widgets/FormulaWidgetUI.js b/packages/react-ui/src/widgets/FormulaWidgetUI.js index ac785e511..92c3b5048 100644 --- a/packages/react-ui/src/widgets/FormulaWidgetUI.js +++ b/packages/react-ui/src/widgets/FormulaWidgetUI.js @@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, marginLeft: theme.spacing(0.5), - '&$before': { + '&.before': { marginLeft: 0, marginRight: theme.spacing(0.5) } diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index eb32f21ca..f3e602e85 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -68,10 +68,7 @@ export default LegendCategories; // Aux const useStyles = makeStyles((theme) => ({ legendCategories: { - alignItems: 'center', - '&:hover': { - '& $circle': {} - } + alignItems: 'center' }, marker: { whiteSpace: 'nowrap', diff --git a/packages/react-ui/storybook/.storybook/manager.js b/packages/react-ui/storybook/.storybook/manager.js new file mode 100644 index 000000000..8615b65a2 --- /dev/null +++ b/packages/react-ui/storybook/.storybook/manager.js @@ -0,0 +1,15 @@ +// ./storybook/manager.ts +import { addons } from '@storybook/addons'; +import { create } from '@storybook/theming'; + +const theme = create({ + base: 'light', + + // Brand + brandTitle: 'CARTO Design System', + brandImage: undefined +}); + +addons.setConfig({ + theme +}); diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index 8a0067c74..f0d3b7844 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -24,6 +24,12 @@ const options = { type: 'select', options: ['default', 'primary', 'secondary'] } + }, + orientation: { + control: { + type: 'select', + options: ['horizontal', 'vertical'] + } } }, parameters: { diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index a0aabb0a4..b0a60e1ce 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -20,11 +20,25 @@ const options = { } }, required: { + defaultValue: false, control: { type: 'boolean' } }, disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + error: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + multiline: { + defaultValue: false, control: { type: 'boolean' } @@ -33,6 +47,12 @@ const options = { control: { type: 'text' } + }, + margin: { + control: { + type: 'select', + options: ['dense', 'none', 'normal'] + } } }, parameters: { From 10550649a653a5d5732874c04e81cc322fab29ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 14:21:31 +0100 Subject: [PATCH 021/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-3 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 301648be0..e0d99b80d 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f4b45d5a1..dedda305f 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 1bfa4065b..21d1f5f13 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 90b3c34c8..a1dab06ac 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7c79b9271..39bae4338 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index ce58b6573..af9421285 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 866466f53..6055aea00 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index ce0d6ab7d..dfd23a43e 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 7a9ef5a71..0f2459e0c 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 85c43ca1da23c0d63288fc57b5293d8ae59bf7e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:16:42 +0100 Subject: [PATCH 022/154] Improve module augmentation + export already created CARTO theme (#516) --- packages/react-ui/src/theme/carto-theme.d.ts | 18 +++++++++++++----- packages/react-ui/src/theme/carto-theme.js | 4 ++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index eec2762a7..8b51966aa 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,12 +1,9 @@ import { Theme, ThemeOptions, TypeText } from '@mui/material'; import { Palette, PaletteColor } from '@mui/material'; -/* - TODO: Review if this set of changes in the type of Palette and PaletteColor, to properly use theme - from TypeScript clients, is still required and if it needs to be fully extended to reflect the new - color structure (custom keys & props) -*/ + export const cartoThemeOptions: ThemeOptions; +export const theme: CartoTheme; type Modify = Omit & R; @@ -70,6 +67,7 @@ type CustomPalette = Modify< } >; +// If we get every client to use 'default' theme types, module augmentation probably would allow us omiting this export export type CartoTheme = Modify< Theme, { @@ -78,6 +76,16 @@ export type CartoTheme = Modify< } >; +/* + Module augmentation, to allow a better experience when using carto-react from + TypeScript clients (eg: *makeStyles* using 'DefaultTheme' | *useTheme* using 'Theme') +*/ + +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends CartoTheme {} +} + declare module '@mui/material/styles' { // Check https://mui.com/material-ui/customization/theming/#custom-variables interface Theme { diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index da070fd03..aa1bd2797 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,3 +1,4 @@ +import { createTheme } from '@mui/material'; import { dataDisplayOverrides } from './sections/components/dataDisplay'; import { buttonsOverrides } from './sections/components/buttons'; import { formsOverrides } from './sections/components/forms'; @@ -116,3 +117,6 @@ export const cartoThemeOptions = { ...dataDisplayOverrides } }; + +// @ts-ignore +export const theme = createTheme(cartoThemeOptions); From 294e0d4867c1401ba178294d3961613644f12cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:17:50 +0100 Subject: [PATCH 023/154] Bump peer deps --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index dedda305f..0da36ff01 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 21d1f5f13..fa13eff52 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a1dab06ac..ccddded8a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index af9421285..b08df9bd4 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 6055aea00..81333cde9 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index dfd23a43e..ec13e35fe 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From fdaf707a923e2b808e8e1919f9b94e0633c1966d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:22:23 +0100 Subject: [PATCH 024/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-4 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index e0d99b80d..7f88cb430 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 0da36ff01..e32dea2d4 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index fa13eff52..3900acb3c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ccddded8a..c18abaee9 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 39bae4338..3269d795b 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index b08df9bd4..7cc3edd37 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 81333cde9..3e24443e9 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index ec13e35fe..9e293265c 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 0f2459e0c..de29e259b 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 6be61c97e23f3c08aca5ba959d1670a51e62e321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:23:34 +0100 Subject: [PATCH 025/154] Bump peers --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index e32dea2d4..190308e16 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 3900acb3c..0ca52da96 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index c18abaee9..578b81bc7 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 7cc3edd37..2c068931e 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 3e24443e9..89dba9bc0 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 9e293265c..c86901d5b 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-3", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 65f564028c7bd581533c7ee80daea6f91fceef10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:29:19 +0100 Subject: [PATCH 026/154] Export new already created theme --- packages/react-ui/src/index.d.ts | 3 ++- packages/react-ui/src/index.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 7b89a10a4..b6faed108 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -1,4 +1,4 @@ -import { cartoThemeOptions, CartoTheme } from './theme/carto-theme'; +import { theme, cartoThemeOptions, CartoTheme } from './theme/carto-theme'; import WrapperWidgetUI from './widgets/WrapperWidgetUI'; import CategoryWidgetUI from './widgets/CategoryWidgetUI'; import FormulaWidgetUI from './widgets/FormulaWidgetUI'; @@ -25,6 +25,7 @@ import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; import Typography from './atoms/Typography'; export { + theme, cartoThemeOptions, CartoTheme, WrapperWidgetUI, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 8ab3ff496..0eb003dd7 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -1,4 +1,4 @@ -import { cartoThemeOptions } from './theme/carto-theme'; +import { theme, cartoThemeOptions } from './theme/carto-theme'; import WrapperWidgetUI from './widgets/WrapperWidgetUI'; import CategoryWidgetUI from './widgets/CategoryWidgetUI'; import FormulaWidgetUI from './widgets/FormulaWidgetUI'; @@ -33,6 +33,7 @@ const featureSelectionIcons = { }; export { + theme, cartoThemeOptions, WrapperWidgetUI, CategoryWidgetUI, From bf4de35c1b6df9033015da5730fe5e0ffeb4f46d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:31:27 +0100 Subject: [PATCH 027/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-5 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 7f88cb430..07c86c0e3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 190308e16..c9925e4b9 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0ca52da96..4f883be71 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 578b81bc7..76c578ca7 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 3269d795b..1de6c8623 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 2c068931e..1368dba0e 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 89dba9bc0..8868458df 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index c86901d5b..415f14b75 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index de29e259b..4d67f05c9 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From b3a9ac66ba7ec9eb648e9ef8f7f5b9403218f392 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 16:32:22 +0100 Subject: [PATCH 028/154] Bump peers --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index c9925e4b9..4d55887e7 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 4f883be71..adc5c3953 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 76c578ca7..615b51048 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 1368dba0e..e65e79f1c 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 8868458df..cef97e0d9 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 415f14b75..695ad7716 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-4", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 15d004c45067a5645d6da2f83376a8bf532cef17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Mon, 31 Oct 2022 18:23:03 +0100 Subject: [PATCH 029/154] Add responsive font sizes to cartoTheme created by default --- packages/react-ui/src/theme/carto-theme.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index aa1bd2797..a121acddd 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,4 +1,5 @@ -import { createTheme } from '@mui/material'; +import { createTheme, responsiveFontSizes } from '@mui/material'; + import { dataDisplayOverrides } from './sections/components/dataDisplay'; import { buttonsOverrides } from './sections/components/buttons'; import { formsOverrides } from './sections/components/forms'; @@ -119,4 +120,4 @@ export const cartoThemeOptions = { }; // @ts-ignore -export const theme = createTheme(cartoThemeOptions); +export const theme = responsiveFontSizes(createTheme(cartoThemeOptions)); From e7110e0a28755f1bcffea9891a37ded5819d3b51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 2 Nov 2022 13:59:45 +0100 Subject: [PATCH 030/154] Mui5 migration: Breaking changes in v5: components (#518) --- CHANGELOG.md | 1 + UPGRADE.md | 2 +- .../theme/sections/components/dataDisplay.js | 4 +- .../src/theme/sections/components/forms.js | 10 +- .../theme/sections/components/navigation.js | 4 +- .../src/theme/sections/cssBaseline.js | 134 +++++++++--------- packages/react-ui/src/widgets/BarWidgetUI.js | 4 - .../react-ui/src/widgets/CategoryWidgetUI.js | 6 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 4 - .../react-ui/src/widgets/OpacityControl.js | 2 +- .../react-ui/src/widgets/RangeWidgetUI.js | 4 +- .../widgets/TableWidgetUI/TableWidgetUI.js | 2 - .../react-ui/src/widgets/WrapperWidgetUI.js | 7 +- .../src/widgets/legend/LegendWidgetUI.js | 5 +- .../src/widgets/legend/LegendWrapper.js | 7 +- .../storybook/stories/common/Paper.stories.js | 6 + .../stories/common/Slider.stories.js | 8 +- 17 files changed, 94 insertions(+), 116 deletions(-) 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 ( ); From 842ad4ddad98ee394944331e93a8be5bb75afb54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 2 Nov 2022 18:50:53 +0100 Subject: [PATCH 031/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-6 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 07c86c0e3..e4569634d 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 4d55887e7..57abd2b0b 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index adc5c3953..532a999f2 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 615b51048..54e6200d2 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 1de6c8623..97b16d4d6 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index e65e79f1c..13850e6ae 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index cef97e0d9..953f6e024 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 695ad7716..aabc94354 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 4d67f05c9..27a3c6d10 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From e724c444c2f64f953da89e1cbce76cab6577d441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 2 Nov 2022 18:52:26 +0100 Subject: [PATCH 032/154] Bump peers to next experimental --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 57abd2b0b..606b9b14b 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 532a999f2..65fe6916d 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 54e6200d2..99d76d85a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 13850e6ae..f22e65c2f 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 953f6e024..aab3093b3 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index aabc94354..230d9d439 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 4b7f247309d1b67515d930b45d32e940863bc582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 9 Nov 2022 19:30:36 +0100 Subject: [PATCH 033/154] New design system applied to priority 1 components (#523) --- CHANGELOG.md | 1 + UPGRADE.md | 19 +- .../__tests__/widgets/LegendWidgetUI.test.js | 2 +- packages/react-ui/package.json | 1 + .../react-ui/src/components/atoms/Button.js | 23 ++ .../src/{ => components}/atoms/Typography.js | 0 .../organisms}/InputFile.js | 0 packages/react-ui/src/index.d.ts | 6 +- packages/react-ui/src/index.js | 6 +- packages/react-ui/src/theme/carto-theme.d.ts | 8 +- .../src/theme/sections/components/buttons.js | 375 ++++++++++++++---- .../react-ui/src/theme/sections/palette.js | 21 +- .../react-ui/src/theme/sections/typography.js | 65 --- packages/react-ui/src/theme/themeUtils.js | 13 - packages/react-ui/src/types.d.ts | 10 +- packages/react-ui/src/widgets/BarWidgetUI.js | 2 +- .../react-ui/src/widgets/CategoryWidgetUI.js | 2 +- .../src/widgets/FeatureSelectionWidgetUI.js | 2 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 2 +- packages/react-ui/src/widgets/NoDataAlert.js | 2 +- .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 2 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 2 +- .../src/widgets/legend/LayerOptionWrapper.js | 2 +- .../src/widgets/legend/LegendCategories.js | 2 +- .../react-ui/src/widgets/legend/LegendIcon.js | 2 +- .../src/widgets/legend/LegendProportion.js | 2 +- .../react-ui/src/widgets/legend/LegendRamp.js | 2 +- .../src/widgets/legend/LegendWidgetUI.js | 2 +- .../src/widgets/legend/LegendWrapper.js | 2 +- packages/react-ui/src/widgets/legend/Note.js | 2 +- .../react-ui/storybook/.storybook/main.js | 3 +- .../react-ui/storybook/.storybook/preview.js | 58 ++- .../storybook/stories/atoms/Button.stories.js | 226 +++++++++++ .../{common => atoms}/Checkbox.stories.js | 5 +- .../{common => atoms}/Divider.stories.js | 5 +- .../stories/atoms/IconButton.stories.js | 96 +++++ .../{common => atoms}/Paper.stories.js | 7 +- .../{common => atoms}/Progress.stories.js | 5 +- .../{common => atoms}/Radio.stories.js | 5 +- .../{common => atoms}/Select.stories.js | 7 +- .../{common => atoms}/Slider.stories.js | 5 +- .../{common => atoms}/Switch.stories.js | 5 +- .../{common => atoms}/Text-field.stories.js | 7 +- .../stories/common/Button.stories.js | 203 ---------- .../stories/common/ButtonGroup.stories.js | 131 ------ .../stories/foundations/Borders.stories.js | 7 +- .../foundations/Breakpoints.stories.js | 7 +- .../stories/foundations/Elevations.stories.js | 7 +- .../stories/foundations/Palette.stories.js | 6 +- .../stories/foundations/Spacing.stories.js | 7 +- .../stories/foundations/Typography.stories.js | 6 +- .../Autocomplete.stories.js | 5 +- .../Breadcrumb.stories.js | 7 +- .../stories/molecules/ButtonGroup.stories.js | 192 +++++++++ .../{common => molecules}/Chip.stories.js | 9 +- .../stories/molecules/FAB.stories.js | 130 ++++++ .../ToggleButton.stories.js | 5 +- .../{common => molecules}/Tooltip.stories.js | 7 +- .../{common => organisms}/Dialog.stories.js | 5 +- .../stories/organisms/InputFile.stories.js | 4 +- .../{common => organisms}/List.stories.js | 5 +- .../{common => organisms}/Tabs.stories.js | 5 +- .../stories/widgetsUI/BarWidgetUI.stories.js | 2 +- .../widgetsUI/CategoryWidgetUI.stories.js | 2 +- .../FeatureSelectionWidgetUI.stories.js | 2 +- .../widgetsUI/FormulaWidgetUI.stories.js | 2 +- .../widgetsUI/HistogramWidgetUI.stories.js | 2 +- .../widgetsUI/LegendWidgetUI.stories.js | 2 +- .../stories/widgetsUI/NoDataAlert.stories.js | 2 +- .../stories/widgetsUI/PieWidgetUI.stories.js | 2 +- .../widgetsUI/RangeWidgetUI.stories.js | 2 +- .../widgetsUI/ScatterPlotWidgetUI.stories.js | 2 +- .../widgetsUI/TableWidgetUI.stories.js | 4 +- .../widgetsUI/TimeSeriesWidgetUI.stories.js | 2 +- .../widgetsUI/WrapperWidgetUI.stories.js | 2 +- .../legend/LegendCategories.stories.js | 2 +- .../widgetsUI/legend/LegendIcon.stories.js | 2 +- .../legend/LegendProportion.stories.js | 2 +- .../widgetsUI/legend/LegendRamp.stories.js | 2 +- yarn.lock | 33 +- 80 files changed, 1218 insertions(+), 613 deletions(-) create mode 100644 packages/react-ui/src/components/atoms/Button.js rename packages/react-ui/src/{ => components}/atoms/Typography.js (100%) rename packages/react-ui/src/{custom-components => components/organisms}/InputFile.js (100%) create mode 100644 packages/react-ui/storybook/stories/atoms/Button.stories.js rename packages/react-ui/storybook/stories/{common => atoms}/Checkbox.stories.js (97%) rename packages/react-ui/storybook/stories/{common => atoms}/Divider.stories.js (95%) create mode 100644 packages/react-ui/storybook/stories/atoms/IconButton.stories.js rename packages/react-ui/storybook/stories/{common => atoms}/Paper.stories.js (95%) rename packages/react-ui/storybook/stories/{common => atoms}/Progress.stories.js (98%) rename packages/react-ui/storybook/stories/{common => atoms}/Radio.stories.js (97%) rename packages/react-ui/storybook/stories/{common => atoms}/Select.stories.js (98%) rename packages/react-ui/storybook/stories/{common => atoms}/Slider.stories.js (99%) rename packages/react-ui/storybook/stories/{common => atoms}/Switch.stories.js (96%) rename packages/react-ui/storybook/stories/{common => atoms}/Text-field.stories.js (98%) delete mode 100644 packages/react-ui/storybook/stories/common/Button.stories.js delete mode 100644 packages/react-ui/storybook/stories/common/ButtonGroup.stories.js rename packages/react-ui/storybook/stories/{common => molecules}/Autocomplete.stories.js (97%) rename packages/react-ui/storybook/stories/{common => molecules}/Breadcrumb.stories.js (91%) create mode 100644 packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js rename packages/react-ui/storybook/stories/{common => molecules}/Chip.stories.js (96%) create mode 100644 packages/react-ui/storybook/stories/molecules/FAB.stories.js rename packages/react-ui/storybook/stories/{common => molecules}/ToggleButton.stories.js (97%) rename packages/react-ui/storybook/stories/{common => molecules}/Tooltip.stories.js (95%) rename packages/react-ui/storybook/stories/{common => organisms}/Dialog.stories.js (98%) rename packages/react-ui/storybook/stories/{common => organisms}/List.stories.js (99%) rename packages/react-ui/storybook/stories/{common => organisms}/Tabs.stories.js (97%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 410554f95..d66eb62ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New design system in priority 1 components [#523](https://github.com/CartoDB/carto-react/pull/523) - 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) diff --git a/UPGRADE.md b/UPGRADE.md index e01485a7f..2ed6297e2 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,13 +1,13 @@ # Upgrade to the new design system -## Breaking changes in Mui v5 +# Breaking changes in Mui v5 Please, follow the Mui guides related to breaking changes in components and styles: - [Styles](https://mui.com/material-ui/migration/v5-style-changes/) - [Components](https://mui.com/material-ui/migration/v5-component-changes/) -## MUI theme +# MUI theme [carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections: @@ -36,7 +36,7 @@ Added a few custom variants to the typography set: - code2 - code3 -`Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. +For external use: `Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. We have a `Typography` component that uses `Mui Typography` and extends it with some useful props: @@ -48,7 +48,7 @@ This way we can be more flexible regarding text styles without adding too many v In short, instead of Mui Typography, the component you should use to add text is this one: `react-ui/src/atoms/Typography` -So `import { Typography } from '@carto/react-ui';`. +For external use: `import { Typography } from '@carto/react-ui';`. ## Colors @@ -93,3 +93,14 @@ Use: `borderRadius: theme.spacing(x)` Design is restringed to a few specific values for shadows, which are: `0, 1, 2, 4, 6, 8, 16, 24`. + +# Components + +## Button + +We have a `Button` component that uses `Mui Button` and wraps its children in `Typography` to meet with the designed behavior (text overflow case). + +So, instead of Mui Button, the component you should use to create buttons is this one: +`react-ui/src/atoms/Button` + +For external use: `import { Button } from '@carto/react-ui';`. diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 2f619e61f..ca2a0e7ec 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '../../src/atoms/Typography'; +import Typography from '../../src/components/atoms/Typography'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; import { fireEvent, render, screen } from '../widgets/utils/testUtils'; diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index aab3093b3..97fdda106 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -47,6 +47,7 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/addon-viewport": "^6.5.12", + "@etchteam/storybook-addon-status": "^4.2.2", "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", diff --git a/packages/react-ui/src/components/atoms/Button.js b/packages/react-ui/src/components/atoms/Button.js new file mode 100644 index 000000000..af4b56f29 --- /dev/null +++ b/packages/react-ui/src/components/atoms/Button.js @@ -0,0 +1,23 @@ +import React, { forwardRef } from 'react'; +import PropTypes from 'prop-types'; +import { Button as MuiButton } from '@mui/material'; +import Typography from './Typography'; + +const Button = forwardRef(({ style, 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} + + + ); +}); + +Button.propTypes = { + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) +}; + +export default Button; diff --git a/packages/react-ui/src/atoms/Typography.js b/packages/react-ui/src/components/atoms/Typography.js similarity index 100% rename from packages/react-ui/src/atoms/Typography.js rename to packages/react-ui/src/components/atoms/Typography.js diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/components/organisms/InputFile.js similarity index 100% rename from packages/react-ui/src/custom-components/InputFile.js rename to packages/react-ui/src/components/organisms/InputFile.js diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index b6faed108..993a2220e 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -22,7 +22,8 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants'; import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; -import Typography from './atoms/Typography'; +import Typography from './components/atoms/Typography'; +import Button from './components/atoms/Button'; export { theme, @@ -50,5 +51,6 @@ export { LegendIcon, LegendProportion, LegendRamp, - Typography + Typography, + Button }; diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 0eb003dd7..c82ab0ca1 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -22,7 +22,8 @@ import PolygonIcon from './assets/PolygonIcon'; import RectangleIcon from './assets/RectangleIcon'; import LassoIcon from './assets/LassoIcon'; import CircleIcon from './assets/CircleIcon'; -import Typography from './atoms/Typography'; +import Typography from './components/atoms/Typography'; +import Button from './components/atoms/Button'; const featureSelectionIcons = { CursorIcon, @@ -55,5 +56,6 @@ export { LegendIcon, LegendProportion, LegendRamp, - Typography + Typography, + Button }; diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 8b51966aa..881935807 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,7 +1,6 @@ import { Theme, ThemeOptions, TypeText } from '@mui/material'; import { Palette, PaletteColor } from '@mui/material'; - export const cartoThemeOptions: ThemeOptions; export const theme: CartoTheme; @@ -123,3 +122,10 @@ declare module '@mui/material/Typography' { code3: true; } } + +// Update the Buttons's color prop options +declare module '@mui/material/Button' { + interface ButtonPropsColorOverrides { + default: true; + } +} diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 7be93add4..48988ab03 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,126 +1,279 @@ -import { getPixelToRem, getSpacing } from '../../themeUtils'; +import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; +import { themeShadows } from '../shadows'; + +const sizeSmall = getSpacing(3); +const sizeMedium = getSpacing(4); +const sizeLarge = getSpacing(6); +const iconSize = getSpacing(2.25); export const buttonsOverrides = { - // Button - MuiButton: { + // Button Base + MuiButtonBase: { defaultProps: { + disableRipple: true, disableElevation: true - }, + } + }, + // Button + MuiButton: { styleOverrides: { + root: ({ ownerState }) => ({ + maxWidth: '192px', + + '&:hover, &:focus-visible': { + ...(ownerState.variant !== 'contained' && { + ...(ownerState.color === 'primary' && { + backgroundColor: commonPalette.primary.background + }), + ...(ownerState.color === 'secondary' && { + backgroundColor: commonPalette.secondary.background + }), + + ...(ownerState.color === 'error' && { + background: commonPalette.error.relatedLight + }) + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'secondary' && { + backgroundColor: commonPalette.secondary.light + }) + }, + // Pairing buttons separation + '& + &': { + marginLeft: getSpacing(1) + }, + '& .MuiSvgIcon-root': { + display: 'flex', + fontSize: iconSize + } + }), + contained: { - boxShadow: 'none' + boxShadow: 'none', + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground + } }, outlined: { - border: `2px solid ${commonPalette.text.primary}`, - padding: '4px 14px', - '&:hover': { - borderWidth: '2px' - }, '&.Mui-disabled': { - borderWidth: '2px' + color: commonPalette.text.disabled, + borderColor: commonPalette.default.outlinedBorder } }, outlinedPrimary: { - border: `2px solid ${commonPalette.primary.main}`, - '&:hover': { - borderWidth: '2px' - } + borderColor: commonPalette.primary.main }, outlinedSecondary: { - border: `2px solid ${commonPalette.secondary.main}`, - '&:hover': { - borderWidth: '2px' - }, - '&.Mui-disabled': { - borderWidth: '2px' - } - }, - containedSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) + borderColor: commonPalette.secondary.main }, - outlinedSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - textSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - containedSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, - containedSecondary: { - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - outlinedSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, - textSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) + outlinedError: { + borderColor: commonPalette.error.main }, + startIcon: { - marginRight: 6, - marginLeft: -4, - '&.MuiButton-iconSizeSmall': { - marginLeft: -4 + marginRight: getSpacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: iconSize }, - '&.MuiButton-iconSizeLarge': { - marginRight: 8 + '&.MuiButton-iconSizeSmall': { + marginRight: getSpacing(0.5), + marginLeft: getSpacing(-0.5) } }, endIcon: { - marginRight: -4, - marginLeft: 6, - '&.MuiButton-iconSizeSmall': { - marginRight: -4 + marginLeft: getSpacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: iconSize }, - '&.MuiButton-iconSizeLarge': { - marginLeft: 8 + '&.MuiButton-iconSizeSmall': { + marginLeft: getSpacing(0.5), + marginRight: getSpacing(-0.5) } }, - iconSizeSmall: { - '& > *:first-child': { - fontSize: 20 + + sizeSmall: { + height: sizeSmall, + padding: getSpacing(0, 1.5), + ...themeTypography.caption, + lineHeight: sizeSmall, + fontWeight: 500, + letterSpacing: '0.4px' + }, + sizeMedium: { + height: sizeMedium, + padding: getSpacing(0, 2), + lineHeight: sizeMedium + }, + sizeLarge: { + height: sizeLarge, + padding: getSpacing(0, 2.5), + ...themeTypography.body1, + lineHeight: sizeLarge, + fontWeight: 500, + letterSpacing: '0.25px' + } + }, + + variants: [ + // Custom color and its variants + { + props: { variant: 'contained', color: 'default' }, + style: { + color: commonPalette.text.primary, + backgroundColor: commonPalette.default.main, + borderColor: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground + }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.default.dark + } } }, - iconSizeMedium: { - '& > *:first-child': { - fontSize: 24 + { + props: { variant: 'outlined', color: 'default' }, + style: { + color: commonPalette.text.primary, + borderColor: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + borderColor: commonPalette.default.outlinedBorder + }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.action.hover, + borderColor: commonPalette.text.primary + } } }, - iconSizeLarge: { - '& > *:first-child': { - fontSize: 24 + { + props: { variant: 'text', color: 'default' }, + style: { + color: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled + }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.action.hover + } } } - } + ] }, - // Button Base - MuiButtonBase: { + // Mui Button Group + MuiButtonGroup: { defaultProps: { - disableRipple: true + disableRipple: true, + disableElevation: true + }, + + styleOverrides: { + root: ({ ownerState }) => ({ + '& .MuiButton-root + .MuiButton-root': { + marginLeft: 0 + }, + + ...(ownerState.variant === 'text' && { + boxShadow: themeShadows[1], + borderColor: commonPalette.default.dark, + + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderColor: commonPalette.default.dark + } + }), + ...(ownerState.variant === 'outlined' && { + ...(ownerState.color === 'default' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.text.primary + } + }), + ...(ownerState.color === 'primary' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.primary.main + } + }), + ...(ownerState.color === 'secondary' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.secondary.main + } + }), + ...(ownerState.orientation !== 'vertical' && { + '& .MuiButtonGroup-grouped:not(:last-of-type):hover, & .Mui-disabled:not(:last-of-type)': + { + borderRightColor: 'transparent' + } + }) + }), + ...(ownerState.variant === 'contained' && { + ...(ownerState.color === 'default' && { + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderRightColor: commonPalette.default.dark, + + '&.Mui-disabled': { + ...(ownerState.color === 'default' && { + borderColor: commonPalette.default.dark + }), + ...(ownerState.color === 'primary' && { + borderColor: commonPalette.primary.dark + }), + ...(ownerState.color === 'secondary' && { + borderColor: commonPalette.secondary.dark + }) + } + } + }) + }) + }) } }, // Icon Button MuiIconButton: { styleOverrides: { - root: { - padding: getSpacing(0.75), + root: ({ ownerState }) => ({ borderRadius: getSpacing(0.5), - color: commonPalette.text.primary - }, + + ...(ownerState.color === 'default' && { + color: commonPalette.text.secondary + }), + '& .MuiSvgIcon-root': { + fontSize: iconSize + }, + '&:hover, &:focus-visible': { + ...(ownerState.color === 'default' && { + backgroundColor: commonPalette.action.hover + }), + ...(ownerState.color === 'primary' && { + backgroundColor: commonPalette.primary.background + }), + ...(ownerState.color === 'secondary' && { + backgroundColor: commonPalette.secondary.background + }) + } + }), + sizeSmall: { - padding: getSpacing(0.25) + width: sizeSmall, + height: sizeSmall + }, + sizeMedium: { + width: sizeMedium, + height: sizeMedium + }, + sizeLarge: { + width: sizeLarge, + height: sizeLarge } } }, @@ -134,9 +287,11 @@ export const buttonsOverrides = { border: 'none', borderRadius: getSpacing(0.5), color: commonPalette.grey[500], + '&.Mui-selected': { color: commonPalette.primary.main, backgroundColor: commonPalette.primary.background, + '&:hover': { backgroundColor: commonPalette.primary.background } @@ -145,6 +300,7 @@ export const buttonsOverrides = { sizeSmall: { width: getSpacing(3), height: getSpacing(3), + '& .MuiSvgIcon-root': { maxWidth: getSpacing(2.5), maxHeight: getSpacing(2.5) @@ -190,5 +346,64 @@ export const buttonsOverrides = { } } } + }, + + // FAB button + MuiFab: { + styleOverrides: { + root: { + '& .MuiSvgIcon-root': { + width: getSpacing(3), + height: getSpacing(3) + }, + '&.MuiFab-extended': { + ...themeTypography.body1, + fontWeight: 500, + width: 'auto', + height: getSpacing(7), + paddingRight: getSpacing(3), + borderRadius: getSpacing(8), + + '& .MuiSvgIcon-root': { + marginRight: getSpacing(1.5) + } + } + }, + + sizeSmall: { + width: getSpacing(4), + height: getSpacing(4), + minHeight: getSpacing(4), + + '& .MuiSvgIcon-root': { + width: iconSize, + height: iconSize + }, + '&.MuiFab-extended': { + ...themeTypography.body2, + fontWeight: 600, + width: 'auto', + height: getSpacing(4), + paddingRight: getSpacing(2), + + '& .MuiSvgIcon-root': { + marginRight: getSpacing(1) + } + } + }, + sizeMedium: { + '&.MuiFab-extended': { + ...themeTypography.body2, + fontWeight: 600, + height: getSpacing(6) + } + }, + + secondary: { + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + } + } } }; diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index 18bfbfe37..ee1c94f79 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -1,5 +1,4 @@ import { alpha } from '@mui/material'; -import { getMixedColor } from '../themeUtils'; const COLOR_BLACK = '#2C3032'; const COLOR_WHITE = '#FFFFFF'; @@ -105,7 +104,7 @@ export const commonPalette = { light: baseColors.blue[300], contrastText: baseColors.common.white, background: alpha(baseColors.blue[400], 0.08), - relatedLight: getMixedColor(baseColors.blue[400], baseColors.common.white, 0.9) + relatedLight: '#EAF2FC' }, secondary: { main: baseColors.green[400], @@ -113,7 +112,7 @@ export const commonPalette = { light: baseColors.green[300], contrastText: baseColors.common.black, background: alpha(baseColors.green[400], 0.08), - relatedLight: getMixedColor(baseColors.green[400], baseColors.common.white, 0.9) + relatedLight: '#EFFCF5' }, text: { primary: baseColors.common.black, @@ -138,32 +137,32 @@ export const commonPalette = { dark: baseColors.indigo[500], light: baseColors.indigo[300], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.indigo[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.indigo[400], baseColors.common.white, 0.9) + relatedDark: '#0d2b4a', + relatedLight: '#E9EEF4' }, success: { main: baseColors.lightGreen[400], dark: baseColors.lightGreen[500], light: baseColors.lightGreen[300], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.lightGreen[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.lightGreen[400], baseColors.common.white, 0.9) + relatedDark: '#3D541A', + relatedLight: '#F2F5EB' }, warning: { main: baseColors.orange[400], dark: baseColors.orange[500], light: baseColors.orange[300], contrastText: baseColors.common.black, - relatedDark: getMixedColor(baseColors.orange[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.orange[400], baseColors.common.white, 0.9) + relatedDark: '#78540F', + relatedLight: '#FEF6EA' }, error: { main: baseColors.red[400], light: baseColors.red[300], dark: baseColors.red[500], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.red[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.red[400], baseColors.common.white, 0.9) + relatedDark: '#622215', + relatedLight: '#F9EDEA' }, grey: { ...baseColors.neutral diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js index 4801705ac..288e4c0df 100644 --- a/packages/react-ui/src/theme/sections/typography.js +++ b/packages/react-ui/src/theme/sections/typography.js @@ -106,55 +106,11 @@ const baseTypography = { }; const customTypography = { - // TODO: Create a wrapper for the Typography component to reduce the number of variants https://app.shortcut.com/cartoteam/story/265549/ - body1Italic: { - ...baseTypography.body1, - fontStyle: 'italic' - }, - body1Medium: { - ...baseTypography.body1, - fontWeight: 500 - }, - body1Strong: { - ...baseTypography.body1, - fontWeight: 600 - }, - body1StrongItalic: { - ...baseTypography.body1, - fontWeight: 600, - fontStyle: 'italic' - }, - body2Italic: { - ...baseTypography.body2, - fontStyle: 'italic' - }, - body2Strong: { - ...baseTypography.body2, - fontWeight: 600 - }, - body2StrongItalic: { - ...baseTypography.body2, - fontWeight: 600, - fontStyle: 'italic' - }, - captionItalic: { - ...baseTypography.caption, - fontStyle: 'italic' - }, captionMedium: { ...baseTypography.caption, fontWeight: 500, letterSpacing: '0.4px' }, - captionStrong: { - ...baseTypography.caption, - fontWeight: 500 - }, - captionStrongItalic: { - ...baseTypography.caption, - fontWeight: 500, - fontStyle: 'italic' - }, overlineDelicate: { ...baseTypography.overline, fontWeight: 400, @@ -167,13 +123,6 @@ const customTypography = { lineHeight: 1.5, letterSpacing: 0 }, - code1Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(16), - lineHeight: 1.5, - letterSpacing: 0 - }, code2: { fontFamily: '"Overpass Mono", monospace', fontWeight: 400, @@ -181,26 +130,12 @@ const customTypography = { lineHeight: 1.428, letterSpacing: 0 }, - code2Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(14), - lineHeight: 1.428, - letterSpacing: 0 - }, code3: { fontFamily: '"Overpass Mono", monospace', fontWeight: 400, fontSize: getPixelToRem(12), lineHeight: 1.333, letterSpacing: 0 - }, - code3Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(12), - lineHeight: 1.333, - letterSpacing: 0 } }; diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index dc7b64cca..9675338ff 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -11,16 +11,3 @@ export function getPixelToRem(px) { return rem; } - -// Lighten and darken color design formula. -// The Mui lighten / darken function doesn't get the same color as designers use -export function getMixedColor(color, baseColor, alpha) { - const getRgbaBaseColor = (baseColor, alpha = 1) => { - const [r, g, b] = baseColor.match(/\w\w/g).map((x) => parseInt(x, 16)); - return `rgba(${r},${g},${b},${alpha})`; - }; - const rgbaBaseColorValue = getRgbaBaseColor(baseColor, alpha); - const colorResult = `linear-gradient(0deg, ${rgbaBaseColorValue}, ${rgbaBaseColorValue}), ${color}`; - - return colorResult; -} diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 0b7ed4283..f055f9848 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,5 +1,8 @@ import { GroupDateTypes } from '@carto/react-core'; -import { TypographyProps as MuiTypographyProps } from '@mui/material'; +import { + ButtonProps as MuiButtonProps, + TypographyProps as MuiTypographyProps +} from '@mui/material'; import { CSSProperties } from 'react'; export type WrapperWidgetUI = { @@ -197,3 +200,8 @@ export interface TypographyProps extends MuiTypographyProps { italic?: boolean; style?: CSSProperties; } + +// Button +export interface ButtonProps extends MuiButtonProps { + style?: CSSProperties; +} diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index dc5d344ce..d31c3cb10 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -5,7 +5,7 @@ import { Grid, Link, useTheme, darken } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import detectTouchScreen from './utils/detectTouchScreen'; import { processFormatterRes } from './utils/formatterUtils'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchScreen(); diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 554378546..1292bb160 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -15,7 +15,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { Skeleton } from '@mui/material'; import { animateValues } from './utils/animations'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ root: { diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index d67f23561..23d27db96 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -14,7 +14,7 @@ import { import makeStyles from '@mui/styles/makeStyles'; import { ArrowDropDown } from '@mui/icons-material'; import PropTypes from 'prop-types'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; function FeatureSelectionWidgetUI({ className, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index cdfef2f93..6aa463ccd 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -7,7 +7,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchscreen(); diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index 90fd96c4e..d8a9bacb8 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,7 +1,7 @@ import React from 'react'; import { Alert, AlertTitle } from '@mui/material'; import { Box } from '@mui/material'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; function AlertBody({ color = undefined, children }) { return children ? ( diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index d961a5ace..5442713b9 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -15,7 +15,7 @@ import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesCont import { CHART_TYPES } from './utils/constants'; import { PropTypes } from 'prop-types'; import { GroupDateTypes, getMonday } from '@carto/react-core'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const FORMAT_DATE_BY_STEP_SIZE = { [GroupDateTypes.YEARS]: yearCurrentDateRange, diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 5eba03158..84a42586a 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -14,7 +14,7 @@ import { Tooltip } from '@mui/material'; import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; /* Options props must have this format: diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index 44602c430..36e4c5f58 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,6 +1,6 @@ import React from 'react'; import { Box } from '@mui/material'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index f3e602e85..896efe457 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -3,7 +3,7 @@ import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; function LegendCategories({ legend }) { const { diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 81842a85a..616570e05 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,7 +1,7 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index 82c96a3af..b97982ff9 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -2,7 +2,7 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ circles: { diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index a6b24fda9..d62e7afe3 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -5,7 +5,7 @@ import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; import LegendProportion from './LegendProportion'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles(() => ({ errorContainer: { diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 6b19ca8ce..6d2c42584 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -7,7 +7,7 @@ import LegendIcon from './LegendIcon'; import LegendRamp from './LegendRamp'; import LegendProportion from './LegendProportion'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const LayersIcon = () => ( diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 64c18a4f6..3457f1bd1 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -6,7 +6,7 @@ import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ legendWrapper: { diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index f937e1e7e..57b9e1fce 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,7 +1,7 @@ import { Box } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useNoteStyles = makeStyles(() => ({ note: { diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index a277e5933..bdb261c15 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-designs', - '@storybook/addon-viewport' + '@storybook/addon-viewport', + '@etchteam/storybook-addon-status' ] }; diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index d6e56fd3a..edef164fb 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -4,18 +4,12 @@ import { createTheme, responsiveFontSizes, ThemeProvider, - StyledEngineProvider + StyledEngineProvider, + CssBaseline } from '@mui/material'; -import { cartoThemeOptions } from '../../src/theme/carto-theme'; +import { cartoThemeOptions, theme } from '../../src/theme/carto-theme'; import { BREAKPOINTS } from '../../src/theme/themeConstants'; -let theme = createTheme(cartoThemeOptions); -theme = responsiveFontSizes(theme, { - breakpoints: ['sm'], - disableAlign: false, - factor: 2 -}); - const customViewports = { xs: { name: 'xs', @@ -54,10 +48,39 @@ const customViewports = { } }; +const componentsStatus = { + deprecated: { + background: '#C1300B', // Error/Main + color: '#ffffff', + description: 'Do not use' + }, + inDevelopment: { + background: '#F29E02', // Warning/Main + color: '#ffffff', + description: 'Work in progress' + }, + readyToReview: { + background: '#024388', // Info/Main + color: '#ffffff', + description: 'Ready to review and validation' + }, + validated: { + background: '#709F1D', // Success/Main + color: '#ffffff', + description: 'Validated and ready to use' + }, + needUpdate: { + background: '#E1E3E4', // Default/Main + color: '#2C3032', + description: 'Need an update, but can be used in this state' + } +}; + export const decorators = [ (Story) => ( + @@ -74,29 +97,22 @@ export const parameters = { }, options: { storySort: { + method: 'alphabetical', order: [ 'Introduction', 'Foundations', ['Palette', 'Typography', 'Spacing', 'Borders', 'Elevations', 'Breakpoints'], 'Atoms', 'Molecules', - 'Organisms', - ['InputFile'], - 'Common', - 'Custom Components', - [ - 'CategoryWidgetUI', - 'FormulaWidgetUI', - 'HistogramWidgetUI', - 'BarWidgetUI', - 'PieWidgetUI', - 'WrapperWidgetUI' - ] + 'Organisms' ] } }, decorators: [withDesign], viewport: { viewports: customViewports + }, + status: { + statuses: componentsStatus } }; diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js new file mode 100644 index 000000000..b85f58c55 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -0,0 +1,226 @@ +import React from 'react'; +import { Grid, Tooltip } from '@mui/material'; +import { Add, Close } from '@mui/icons-material'; +import LoadingButton from '@mui/lab/LoadingButton'; +import Typography from '../../../src/components/atoms/Typography'; +import Button from '../../../src/components/atoms/Button'; + +const options = { + title: 'Atoms/Button', + component: Button, + argTypes: { + variant: { + defaultValue: 'contained', + control: { + type: 'select', + options: ['text', 'contained', 'outlined'] + } + }, + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['default', 'primary', 'secondary', 'error'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const Buttons = ({ label, size, disabled, variant, ...rest }) => ( + + + + + + + + + + + +); + +const PlaygroundTemplate = ({ label, size, ...rest }) => ( + + + +); + +const VariantTemplate = ({ label, icon, ...rest }) => { + const smallLabel = label ? label : 'Small button'; + const mediumLabel = label ? label : 'Medium button'; + const largeLabel = label ? label : 'Large button'; + const disabledLabel = label ? label : 'Disabled button'; + + return ( + + + + + + + ); +}; + +const ColorTemplate = ({ label, icon, ...rest }) => { + const containedLabel = label ? label : 'Contained button'; + const outlinedLabel = label ? label : 'Outlined button'; + const textLabel = label ? label : 'Text button'; + + return ( + + + + + + ); +}; + +const BehaviorTemplate = ({ label, icon, ...rest }) => { + const overflowLabel = 'Text Button with overflow'; + + return ( + + + + {'Overflow + optional tooltip'} + + + + + + + + + + + + + + + + + + + {'Pairing buttons'} + + + + + + + + + + + + {'Loading'} + + + + + {'Disabled'} + + + + } + > + {'Import data'} + + + + } + > + {'Send email'} + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Button' }; + +export const Contained = VariantTemplate.bind({}); +Contained.args = { variant: 'contained' }; + +export const Outlined = VariantTemplate.bind({}); +Outlined.args = { variant: 'outlined' }; + +export const Text = VariantTemplate.bind({}); +Text.args = { variant: 'text' }; + +export const PrimaryColor = ColorTemplate.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = ColorTemplate.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const ErrorColor = ColorTemplate.bind({}); +ErrorColor.args = { color: 'error' }; + +export const DefaultColor = ColorTemplate.bind({}); +DefaultColor.args = { color: 'default' }; + +export const Behavior = BehaviorTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Checkbox.stories.js rename to packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index 0bb635b68..ac89b8a49 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Checkbox, FormControlLabel, Grid } from '@mui/material'; const options = { - title: 'Common/Checkbox', + title: 'Atoms/Checkbox', component: Checkbox, argTypes: { color: { @@ -31,6 +31,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/atoms/Divider.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/common/Divider.stories.js rename to packages/react-ui/storybook/stories/atoms/Divider.stories.js index 9a3f9a518..d421b58e3 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Divider.stories.js @@ -10,12 +10,15 @@ import { } from '@mui/icons-material'; const options = { - title: 'Common/Divider', + title: 'Atoms/Divider', component: Divider, parameters: { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js new file mode 100644 index 000000000..b1e6b1b99 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { IconButton, Grid } from '@mui/material'; +import { Delete } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; + +const options = { + title: 'Atoms/IconButton', + component: IconButton, + argTypes: { + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['default', 'primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1761%3A30090' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const IconButtons = ({ color, label, size, disabled, title, ...rest }) => ( + + + {title && {title}} + + + + + +); + +const PlaygroundTemplate = ({ label, size, color, ...rest }) => ( + + + +); + +const ButtonTemplate = ({ label, ...rest }) => { + const smallLabel = label ? label : 'Small icon button'; + const mediumLabel = label ? label : 'Medium icon button'; + const largeLabel = label ? label : 'Large icon button'; + const disabledLabel = label ? label : 'Disabled icon button'; + + return ( + + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Icon Button' }; + +export const PrimaryColor = ButtonTemplate.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = ButtonTemplate.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const DefaultColor = ButtonTemplate.bind({}); +DefaultColor.args = { color: 'default' }; diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/atoms/Paper.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/common/Paper.stories.js rename to packages/react-ui/storybook/stories/atoms/Paper.stories.js index 03e411fde..f5a17be37 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Paper.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Grid, Paper } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Paper', + title: 'Atoms/Paper', component: Paper, argTypes: { elevation: { @@ -19,6 +19,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1447%3A38722' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/atoms/Progress.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Progress.stories.js rename to packages/react-ui/storybook/stories/atoms/Progress.stories.js index 7f5c39b11..f7510fd55 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Progress.stories.js @@ -3,7 +3,7 @@ import { Box, Button, CircularProgress, Grid, LinearProgress } from '@mui/materi import CheckIcon from '@mui/icons-material/Check'; const options = { - title: 'Common/Progress', + title: 'Atoms/Progress', component: CircularProgress, argTypes: { color: { @@ -42,6 +42,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29703' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Radio.stories.js rename to packages/react-ui/storybook/stories/atoms/Radio.stories.js index 35400dae7..a0496df47 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -9,7 +9,7 @@ import { } from '@mui/material'; const options = { - title: 'Common/Radio', + title: 'Atoms/Radio', component: Radio, argTypes: { color: { @@ -33,6 +33,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/atoms/Select.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Select.stories.js rename to packages/react-ui/storybook/stories/atoms/Select.stories.js index 5c5d6feb4..8d9bed6ae 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Select.stories.js @@ -9,10 +9,10 @@ import { Select } from '@mui/material'; import { Visibility } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Select', + title: 'Atoms/Select', component: Select, argTypes: { variant: { @@ -48,6 +48,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/atoms/Slider.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Slider.stories.js rename to packages/react-ui/storybook/stories/atoms/Slider.stories.js index 6ed3fbb0b..bf5501f52 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Slider.stories.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Grid, Slider, TextField, Tooltip } from '@mui/material'; const options = { - title: 'Common/Slider', + title: 'Atoms/Slider', component: Slider, argTypes: { color: { @@ -133,6 +133,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A32732' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/atoms/Switch.stories.js similarity index 96% rename from packages/react-ui/storybook/stories/common/Switch.stories.js rename to packages/react-ui/storybook/stories/atoms/Switch.stories.js index a3ec9241f..18d7c981f 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Switch.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { FormControlLabel, Grid, Switch } from '@mui/material'; const options = { - title: 'Common/Switch', + title: 'Atoms/Switch', component: Switch, argTypes: { color: { @@ -26,6 +26,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33096' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Text-field.stories.js rename to packages/react-ui/storybook/stories/atoms/Text-field.stories.js index b0a60e1ce..6ba5b561f 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Grid, InputAdornment, TextField } from '@mui/material'; import { Visibility } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Text Field', + title: 'Atoms/Text Field', component: TextField, argTypes: { variant: { @@ -59,6 +59,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js deleted file mode 100644 index 8b5f106b8..000000000 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ /dev/null @@ -1,203 +0,0 @@ -import React from 'react'; -import { Button, IconButton, Grid, SvgIcon } from '@mui/material'; - -const options = { - title: 'Common/Button', - component: Button, - argTypes: { - variant: { - control: { - type: 'select', - options: ['text', 'contained', 'outlined'] - } - }, - color: { - control: { - type: 'select', - options: ['default', 'primary', 'secondary'] - } - }, - size: { - control: { - type: 'select', - options: ['small', 'medium', 'large'] - } - }, - disabled: { - control: { - type: 'boolean' - } - }, - label: { - control: { - type: 'text' - } - } - }, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' - } - } -}; -export default options; - -const Icon = (props) => ( - - - -); -const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - - - - - - - - - - - - - - - - -); -const ButtonTemplate = ({ label, icon, ...rest }) => { - const smallLabel = label ? label : 'Small button'; - const mediumLabel = label ? label : 'Normal button'; - const largeLabel = label ? label : 'Large button'; - const disabledLabel = label ? label : 'Disabled button'; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - size: { table: { disable: true } }, - disabled: { table: { disable: true } } -}; - -export const Default = PlaygroundTemplate.bind({}); -Default.args = { label: 'Button' }; - -export const Contained = ButtonTemplate.bind({}); -Contained.args = { variant: 'contained' }; -Contained.argTypes = disabledControlsArgTypes; - -export const Outlined = ButtonTemplate.bind({}); -Outlined.args = { variant: 'outlined' }; -Outlined.argTypes = disabledControlsArgTypes; - -export const Base = ButtonTemplate.bind({}); -Base.args = { variant: 'text' }; -Base.argTypes = disabledControlsArgTypes; - -export const ContainedPrimary = ButtonTemplate.bind({}); -ContainedPrimary.args = { variant: 'contained', color: 'primary' }; -ContainedPrimary.argTypes = disabledControlsArgTypes; - -export const OutlinedPrimary = ButtonTemplate.bind({}); -OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; -OutlinedPrimary.argTypes = disabledControlsArgTypes; - -export const BasePrimary = ButtonTemplate.bind({}); -BasePrimary.args = { variant: 'text', color: 'primary' }; -BasePrimary.argTypes = disabledControlsArgTypes; diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js deleted file mode 100644 index 4e5613f56..000000000 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; -import { Button, Grid, ButtonGroup } from '@mui/material'; - -const options = { - title: 'Common/Button Group', - component: ButtonGroup, - argTypes: { - variant: { - control: { - type: 'select', - options: ['text', 'contained', 'outlined'] - } - }, - orientation: { - control: { - type: 'select', - options: ['horizontal', 'vertical'] - } - }, - color: { - control: { - type: 'select', - options: ['default', 'primary', 'secondary'] - } - }, - size: { - control: { - type: 'select', - options: ['small', 'medium', 'large'] - } - }, - disabled: { - control: { - type: 'boolean' - } - }, - label: { - control: { - type: 'text' - } - } - }, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' - } - } -}; -export default options; - -const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - - - - - - - -); -const ButtonTemplate = ({ label, icon, ...rest }) => { - const smallLabel = label ? label : 'Small button'; - const mediumLabel = label ? label : 'Normal button'; - const largeLabel = label ? label : 'Large button'; - const disabledLabel = label ? label : 'Disabled button'; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - size: { table: { disable: true } }, - disabled: { table: { disable: true } } -}; - -export const Default = PlaygroundTemplate.bind({}); -Default.args = { label: 'Button' }; - -export const Contained = ButtonTemplate.bind({}); -Contained.args = { variant: 'contained' }; -Contained.argTypes = disabledControlsArgTypes; - -export const Outlined = ButtonTemplate.bind({}); -Outlined.args = { variant: 'outlined' }; -Outlined.argTypes = disabledControlsArgTypes; - -export const Base = ButtonTemplate.bind({}); -Base.args = { variant: 'text' }; -Base.argTypes = disabledControlsArgTypes; - -export const ContainedPrimary = ButtonTemplate.bind({}); -ContainedPrimary.args = { variant: 'contained', color: 'primary' }; -ContainedPrimary.argTypes = disabledControlsArgTypes; - -export const OutlinedPrimary = ButtonTemplate.bind({}); -OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; -OutlinedPrimary.argTypes = disabledControlsArgTypes; - -export const BasePrimary = ButtonTemplate.bind({}); -BasePrimary.args = { variant: 'text', color: 'primary' }; -BasePrimary.argTypes = disabledControlsArgTypes; diff --git a/packages/react-ui/storybook/stories/foundations/Borders.stories.js b/packages/react-ui/storybook/stories/foundations/Borders.stories.js index 94416ad6c..dda8e7b4e 100644 --- a/packages/react-ui/storybook/stories/foundations/Borders.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Borders.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Borders', @@ -20,7 +21,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=9787%3A4001' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js index f0536d40b..6fbf1e598 100644 --- a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; import { makeStyles } from '@mui/styles'; import { BREAKPOINTS } from '../../../src/theme/themeConstants'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Breakpoints', @@ -19,7 +20,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=10472%3A3871' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js index 15bd91bf1..91ab490cb 100644 --- a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Elevations', @@ -21,7 +22,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8990%3A7615' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Palette.stories.js b/packages/react-ui/storybook/stories/foundations/Palette.stories.js index b1eabd555..ddf7474ea 100644 --- a/packages/react-ui/storybook/stories/foundations/Palette.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Palette.stories.js @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material/styles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Palette', @@ -28,7 +28,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8775%3A71615' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js index ad61a043d..de65a0cd1 100644 --- a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Spacing', @@ -20,7 +21,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64661' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Typography.stories.js b/packages/react-ui/storybook/stories/foundations/Typography.stories.js index 0fbfb4fad..d3a1a114b 100644 --- a/packages/react-ui/storybook/stories/foundations/Typography.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Typography', @@ -62,7 +62,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=4662%3A14' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Autocomplete.stories.js rename to packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index c4aaaa79e..5dc00c6e7 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -3,7 +3,7 @@ import Autocomplete from '@mui/material/Autocomplete'; import { Grid, TextField } from '@mui/material'; const options = { - title: 'Common/Autocomplete', + title: 'Molecules/Autocomplete', component: Autocomplete, argTypes: { variant: { @@ -33,6 +33,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26505' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js similarity index 91% rename from packages/react-ui/storybook/stories/common/Breadcrumb.stories.js rename to packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js index 1051cfd65..6714da148 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Breadcrumbs, Link } from '@mui/material'; import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Breadcrumbs', + title: 'Molecules/Breadcrumbs', component: Breadcrumbs, argTypes: { maxItems: { @@ -17,6 +17,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26153' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js new file mode 100644 index 000000000..a05880d04 --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -0,0 +1,192 @@ +import React from 'react'; +import { Grid, ButtonGroup } from '@mui/material'; +import { ArrowDropDown } from '@mui/icons-material'; +import Button from '../../../src/components/atoms/Button'; + +const options = { + title: 'Molecules/Button Group', + component: ButtonGroup, + argTypes: { + variant: { + control: { + type: 'select', + options: ['text', 'contained', 'outlined'] + } + }, + orientation: { + control: { + type: 'select', + options: ['horizontal', 'vertical'] + } + }, + color: { + control: { + type: 'select', + options: ['default', 'primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const ButtonRow = ({ label, icon, size, disabled, variant, ...rest }) => { + return ( + + + + + + + + ); +}; + +const PlaygroundTemplate = ({ label, icon, ...rest }) => ( + + + + + + + +); + +const ButtonTemplate = ({ label, icon, ...rest }) => { + const smallLabel = label ? label : 'Small button'; + const mediumLabel = label ? label : 'Normal button'; + const largeLabel = label ? label : 'Large button'; + const disabledLabel = label ? label : 'Disabled button'; + + return ( + + + + + + + ); +}; + +const ColorTemplate = ({ label, icon, ...rest }) => { + const containedLabel = label ? label : 'Contained button'; + const outlinedLabel = label ? label : 'Outlined button'; + const textLabel = label ? label : 'Text button'; + + return ( + + + + + + ); +}; + +const SplitTemplate = ({ ...rest }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const VerticalTemplate = ({ ...rest }) => { + return ( + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Button' }; + +export const Contained = ButtonTemplate.bind({}); +Contained.args = { variant: 'contained' }; + +export const Outlined = ButtonTemplate.bind({}); +Outlined.args = { variant: 'outlined' }; + +export const Text = ButtonTemplate.bind({}); +Text.args = { variant: 'text' }; + +export const Primary = ColorTemplate.bind({}); +Primary.args = { color: 'primary' }; + +export const Secondary = ColorTemplate.bind({}); +Secondary.args = { color: 'secondary' }; + +export const Default = ColorTemplate.bind({}); +Default.args = { color: 'default' }; + +export const Vertical = VerticalTemplate.bind({}); +Vertical.args = { color: 'primary', orientation: 'vertical' }; + +export const Split = SplitTemplate.bind({}); +Split.args = { variant: 'outlined', color: 'primary' }; diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/molecules/Chip.stories.js similarity index 96% rename from packages/react-ui/storybook/stories/common/Chip.stories.js rename to packages/react-ui/storybook/stories/molecules/Chip.stories.js index 0b6a9feb6..d13dbd082 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Chip.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Avatar, Chip, Grid } from '@mui/material'; const options = { - title: 'Common/Chip', + title: 'Molecules/Chip', component: Chip, argTypes: { avatar: { @@ -60,11 +60,11 @@ const options = { } }, variant: { - defaultValue: 'default', + defaultValue: 'filled', description: 'The variant to use.', control: { type: 'select', - options: ['default', 'outlined'] + options: ['filled', 'outlined'] } } }, @@ -72,6 +72,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/FAB.stories.js b/packages/react-ui/storybook/stories/molecules/FAB.stories.js new file mode 100644 index 000000000..1b87e34d4 --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/FAB.stories.js @@ -0,0 +1,130 @@ +import React from 'react'; +import { Fab, Grid } from '@mui/material'; +import { Add, Close, Edit } from '@mui/icons-material'; + +const options = { + title: 'Molecules/FAB Button', + component: Fab, + argTypes: { + variant: { + defaultValue: 'contained', + control: { + type: 'select', + options: ['default', 'extended'] + } + }, + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28899' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const FABButtons = ({ label, size, disabled, variant, ...rest }) => { + const customLabel = label ? label : 'Label'; + + return ( + <> + + + + + + + + + + + + + + {customLabel} + + + + + + + + + + + + + + + + {customLabel} + + + + ); +}; + +const Template = ({ label, size, color, ...rest }) => ( + + + +); + +const SizeTemplate = ({ label, color, ...rest }) => ( + + + + + + + + + + + + + +); + +export const Playground = Template.bind({}); + +export const PrimaryColor = Template.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = Template.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const Sizes = SizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/ToggleButton.stories.js rename to packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 3f7267071..289e6ff9c 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -6,7 +6,7 @@ import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; import TrainIcon from '@mui/icons-material/Train'; const options = { - title: 'Common/Toggle Button', + title: 'Molecules/Toggle Button', component: ToggleButtonGroup, argTypes: { size: { @@ -34,6 +34,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' + }, + status: { + type: 'inDevelopment' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/common/Tooltip.stories.js rename to packages/react-ui/storybook/stories/molecules/Tooltip.stories.js index 547a7bfea..8800348be 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Button, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Tooltip', + title: 'Molecules/Tooltip', component: Tooltip, argTypes: { title: { @@ -47,6 +47,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/organisms/Dialog.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Dialog.stories.js rename to packages/react-ui/storybook/stories/organisms/Dialog.stories.js index 30d5c2781..46645f893 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Dialog.stories.js @@ -13,7 +13,7 @@ import { } from '@mui/material'; const options = { - title: 'Common/Dialog', + title: 'Organisms/Dialog', component: Dialog, argTypes: { disableEscapeKeyDown: { @@ -52,6 +52,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28896' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js index 94e80796e..33456982c 100644 --- a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js @@ -1,9 +1,9 @@ import { Box, Button, CircularProgress, FormControl, InputLabel } from '@mui/material'; import React, { useState } from 'react'; -import InputFile from '../../../src/custom-components/InputFile'; +import InputFile from '../../../src/components/organisms/InputFile'; import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Organisms/InputFile', diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/organisms/List.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/List.stories.js rename to packages/react-ui/storybook/stories/organisms/List.stories.js index a7ad83267..66e6240d6 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/organisms/List.stories.js @@ -29,12 +29,15 @@ import { } from '@mui/icons-material'; const options = { - title: 'Common/List', + title: 'Organisms/List', component: List, parameters: { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29228' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Tabs.stories.js rename to packages/react-ui/storybook/stories/organisms/Tabs.stories.js index f0d3b7844..695097d55 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -3,7 +3,7 @@ import { Tab, Tabs } from '@mui/material'; import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; const options = { - title: 'Common/Tabs', + title: 'Organisms/Tabs', component: Tabs, argTypes: { variant: { @@ -36,6 +36,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js index 39f657033..c0c95efa5 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js @@ -3,7 +3,7 @@ import BarWidgetUI from '../../../src/widgets/BarWidgetUI'; import { buildReactPropsAsString } from '../../utils'; const options = { - title: 'Custom Components/BarWidgetUI', + title: 'Organisms/Widgets/BarWidgetUI', component: BarWidgetUI }; diff --git a/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js index 8dfb4610b..f210a76b3 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import CategoryWidgetUI from '../../../src/widgets/CategoryWidgetUI'; const options = { - title: 'Custom Components/CategoryWidgetUI', + title: 'Organisms/Widgets/CategoryWidgetUI', component: CategoryWidgetUI, argTypes: { selectedCategories: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js index 79d9c0264..5fe81da5b 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js @@ -6,7 +6,7 @@ import PolygonIcon from '../../../src/assets/PolygonIcon'; import RectangleIcon from '../../../src/assets/RectangleIcon'; const options = { - title: 'Custom Components/FeatureSelectionWidgetUI', + title: 'Organisms/Widgets/FeatureSelectionWidgetUI', component: FeatureSelectionWidgetUI, argTypes: { enabled: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js index 5fe3d3e38..1a0a055d6 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import FormulaWidgetUI from '../../../src/widgets/FormulaWidgetUI'; const options = { - title: 'Custom Components/FormulaWidgetUI', + title: 'Organisms/Widgets/FormulaWidgetUI', component: FormulaWidgetUI, argTypes: { formatter: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js index 8c6b20475..cd352208a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import HistogramWidgetUI from '../../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; const options = { - title: 'Custom Components/HistogramWidgetUI', + title: 'Organisms/Widgets/HistogramWidgetUI', component: HistogramWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js index 313c6b206..96c87ae36 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI'; const options = { - title: 'Custom Components/LegendWidgetUI', + title: 'Organisms/Widgets/LegendWidgetUI', component: LegendWidgetUI, argTypes: { className: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js b/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js index bb321efb2..ac68e74aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import { buildReactPropsAsString } from '../../utils'; const options = { - title: 'Custom Components/NoDataAlert', + title: 'Organisms/Widgets/NoDataAlert', component: NoDataAlert, argTypes: { title: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js index 971783477..32e9ac671 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import PieWidgetUI from '../../../src/widgets/PieWidgetUI'; const options = { - title: 'Custom Components/PieWidgetUI', + title: 'Organisms/Widgets/PieWidgetUI', component: PieWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js index c128e9861..12cc7fd9c 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import RangeWidgetUI from '../../../src/widgets/RangeWidgetUI'; const options = { - title: 'Custom Components/RangeWidgetUI', + title: 'Organisms/Widgets/RangeWidgetUI', component: RangeWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js index d52df8a49..581d54588 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import ScatterPlotWidgetUI from '../../../src/widgets/ScatterPlotWidgetUI'; const options = { - title: 'Custom Components/ScatterPlotWidgetUI', + title: 'Organisms/Widgets/ScatterPlotWidgetUI', component: ScatterPlotWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 8ede930f0..521ad734a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -3,10 +3,10 @@ import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; import { Box } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Custom Components/TableWidgetUI', + title: 'Organisms/Widgets/TableWidgetUI', component: TableWidgetUI, argTypes: {}, parameters: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js index ac88d7915..d2031a481 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js @@ -66,7 +66,7 @@ const data = [ ]; const options = { - title: 'Custom Components/TimeSeriesWidgetUI', + title: 'Organisms/Widgets/TimeSeriesWidgetUI', component: TimeSeriesWidgetUI, argTypes: { data: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index 626d5231e..e09fd5eaf 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -5,7 +5,7 @@ import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; const options = { - title: 'Custom Components/WrapperWidgetUI', + title: 'Organisms/Widgets/WrapperWidgetUI', component: WrapperWidgetUI, argTypes: { actions: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js index 92bb9da9c..ea331bd6a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js @@ -9,7 +9,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendCategories', + title: 'Organisms/Widgets/Legends/LegendCategories', component: LegendCategories, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js index b70ad775d..f3daad7aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js @@ -11,7 +11,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendIcon', + title: 'Organisms/Widgets/Legends/LegendIcon', component: LegendIcon, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js index 9d97af797..74a87c7d2 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js @@ -8,7 +8,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendProportion', + title: 'Organisms/Widgets/Legends/LegendProportion', component: LegendProportion, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js index 95d8466c4..c46e5b996 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js @@ -20,7 +20,7 @@ const DEFAULT_LEGEND_WITH_FORMATTED_LABELS = { }; const options = { - title: 'Custom Components/Legends/LegendRamp', + title: 'Organisms/Widgets/Legends/LegendRamp', component: LegendRamp, argTypes: { legend: {} diff --git a/yarn.lock b/yarn.lock index c8f5e10d0..5efd883f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1601,6 +1601,22 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@etchteam/storybook-addon-status@^4.2.2": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@etchteam/storybook-addon-status/-/storybook-addon-status-4.2.2.tgz#27501aa1ece063284ac7e1c0ef6e2221c789a649" + integrity sha512-iCOoA0+Izu/SixxjjJ9BB4YBVT2reCJ/80dXHBiCqoGSPTAvYGeeoQKexC913eSFv/0u3u4lv5fRZN/KMPAurw== + dependencies: + "@storybook/addons" "^6.2.9" + "@storybook/api" "^6.2.9" + "@storybook/client-logger" "^6.2.9" + "@storybook/components" "^6.2.9" + "@storybook/core-events" "^6.2.9" + "@storybook/theming" "^6.2.9" + core-js "^3.0.1" + lodash "^4.17.21" + memoizerific "^1.11.3" + util-deprecate "^1.0.2" + "@figspec/components@^1.0.0": version "1.0.1" resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.1.tgz#47d7e24999974b18c6daa810299624d4370fc7da" @@ -3773,7 +3789,7 @@ global "^4.4.0" regenerator-runtime "^0.13.7" -"@storybook/addons@6.5.13": +"@storybook/addons@6.5.13", "@storybook/addons@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73" integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA== @@ -3813,7 +3829,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/api@6.5.13": +"@storybook/api@6.5.13", "@storybook/api@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64" integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w== @@ -3965,7 +3981,7 @@ core-js "^3.8.2" global "^4.4.0" -"@storybook/client-logger@6.5.13": +"@storybook/client-logger@6.5.13", "@storybook/client-logger@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264" integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA== @@ -3987,7 +4003,7 @@ regenerator-runtime "^0.13.7" util-deprecate "^1.0.2" -"@storybook/components@6.5.13": +"@storybook/components@6.5.13", "@storybook/components@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030" integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ== @@ -4090,7 +4106,7 @@ dependencies: core-js "^3.8.2" -"@storybook/core-events@6.5.13": +"@storybook/core-events@6.5.13", "@storybook/core-events@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a" integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w== @@ -4443,7 +4459,7 @@ memoizerific "^1.11.3" regenerator-runtime "^0.13.7" -"@storybook/theming@6.5.13": +"@storybook/theming@6.5.13", "@storybook/theming@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083" integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g== @@ -7784,6 +7800,11 @@ core-js-pure@^3.23.3: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.25.5.tgz#79716ba54240c6aa9ceba6eee08cf79471ba184d" integrity sha512-oml3M22pHM+igfWHDfdLVq2ShWmjM2V4L+dQEBs0DWVIqEm9WHCwGAlZ6BmyBQGy5sFrJmcx+856D9lVKyGWYg== +core-js@^3.0.1: + version "3.26.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.0.tgz#a516db0ed0811be10eac5d94f3b8463d03faccfe" + integrity sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw== + core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: version "3.20.1" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.1.tgz#eb1598047b7813572f1dc24b7c6a95528c99eef3" From 6dc326f84261a4fd1a21cd2b04292ad9121d5825 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 9 Nov 2022 19:39:35 +0100 Subject: [PATCH 034/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-7 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 4 ++-- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lerna.json b/lerna.json index e4569634d..d8987fa3d 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 606b9b14b..52b05d617 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 65fe6916d..cbe125693 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 99d76d85a..e1721a6cd 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 97b16d4d6..36cea7a2a 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index f22e65c2f..0b00e066b 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 97fdda106..544da78eb 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -42,12 +42,12 @@ "@babel/plugin-transform-runtime": "^7.13.9", "@babel/preset-env": "^7.13.9", "@babel/preset-react": "^7.12.13", + "@etchteam/storybook-addon-status": "^4.2.2", "@reduxjs/toolkit": "^1.5.0", "@storybook/addon-actions": "^6.5.12", "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/addon-viewport": "^6.5.12", - "@etchteam/storybook-addon-status": "^4.2.2", "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 230d9d439..3c19dd308 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 27a3c6d10..d1a2f239f 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From af93f3b2245339a7901cba6078140076c4268138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 9 Nov 2022 19:42:28 +0100 Subject: [PATCH 035/154] Bump peers to next experimental --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 52b05d617..95eec0c5a 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index cbe125693..0d55bc3e4 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index e1721a6cd..bf200f12b 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 0b00e066b..40419b947 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 544da78eb..d4a9b6573 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 3c19dd308..227f706a5 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-6", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From eda3ccc91dfeb5849369ff013e9dd6dcaf4b5750 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 14 Nov 2022 10:46:34 +0100 Subject: [PATCH 036/154] Replace kebab-case properties in styles (#530) --- CHANGELOG.md | 1 + packages/react-ui/src/theme/sections/cssBaseline.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d66eb62ac..1e974dc13 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Replace kebab-case properties in styles [#530](https://github.com/CartoDB/carto-react/pull/530) - New design system in priority 1 components [#523](https://github.com/CartoDB/carto-react/pull/523) - 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/) diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js index b05919bc9..4c5ed3b68 100644 --- a/packages/react-ui/src/theme/sections/cssBaseline.js +++ b/packages/react-ui/src/theme/sections/cssBaseline.js @@ -9,7 +9,7 @@ export const CssBaseline = { width: '5px' }, '*::-webkit-scrollbar-track': { - '-webkit-box-shadow': 'none', + boxShadow: 'none', background: 'transparent' }, '*::-webkit-scrollbar-thumb': { @@ -20,7 +20,8 @@ export const CssBaseline = { // iOS Search clear button 'input[type="search"]::-webkit-search-cancel-button': { - '-webkit-appearance': 'none', + WebkitAppearance: 'none', + appearance: 'none', height: getSpacing(2), width: getSpacing(2), display: 'block', From 0a06d93e70cd4ee21ec59f96ed40e3d1a9924ce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 14 Nov 2022 12:42:17 +0100 Subject: [PATCH 037/154] Improvements in Components priority 1 after design review (#529) --- CHANGELOG.md | 1 + .../src/theme/sections/components/buttons.js | 136 ++++++++++---- .../theme/sections/components/dataDisplay.js | 16 +- .../react-ui/src/theme/sections/palette.js | 2 +- .../storybook/stories/atoms/Button.stories.js | 14 +- .../stories/atoms/IconButton.stories.js | 48 ++--- .../stories/molecules/ToggleButton.stories.js | 174 +++++++++++++----- 7 files changed, 274 insertions(+), 117 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e974dc13..564468d15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Improvements in Components priority 1 after design review [#529](https://github.com/CartoDB/carto-react/pull/529) - Replace kebab-case properties in styles [#530](https://github.com/CartoDB/carto-react/pull/530) - New design system in priority 1 components [#523](https://github.com/CartoDB/carto-react/pull/523) - Breaking changes in Mui v5: components [#518](https://github.com/CartoDB/carto-react/pull/518) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 48988ab03..ac9f34648 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -7,6 +7,7 @@ const sizeSmall = getSpacing(3); const sizeMedium = getSpacing(4); const sizeLarge = getSpacing(6); const iconSize = getSpacing(2.25); +const radius = getSpacing(0.5); export const buttonsOverrides = { // Button Base @@ -14,6 +15,15 @@ export const buttonsOverrides = { defaultProps: { disableRipple: true, disableElevation: true + }, + + styleOverrides: { + root: { + '& .MuiSvgIcon-root': { + display: 'flex', + fontSize: iconSize + } + } } }, @@ -24,6 +34,8 @@ export const buttonsOverrides = { maxWidth: '192px', '&:hover, &:focus-visible': { + boxShadow: themeShadows[0], + ...(ownerState.variant !== 'contained' && { ...(ownerState.color === 'primary' && { backgroundColor: commonPalette.primary.background @@ -44,10 +56,6 @@ export const buttonsOverrides = { // Pairing buttons separation '& + &': { marginLeft: getSpacing(1) - }, - '& .MuiSvgIcon-root': { - display: 'flex', - fontSize: iconSize } }), @@ -74,6 +82,16 @@ export const buttonsOverrides = { outlinedError: { borderColor: commonPalette.error.main }, + containedPrimary: { + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.primary.dark + } + }, + containedError: { + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.error.dark + } + }, startIcon: { marginRight: getSpacing(0.75), @@ -282,33 +300,42 @@ export const buttonsOverrides = { MuiToggleButton: { styleOverrides: { root: { - width: getSpacing(4.5), - height: getSpacing(4.5), + minWidth: sizeMedium, + height: sizeMedium, + padding: getSpacing(0, 1), + color: commonPalette.text.secondary, border: 'none', - borderRadius: getSpacing(0.5), - color: commonPalette.grey[500], + borderRadius: radius, + // Pairing buttons separation + '& + &': { + marginLeft: getSpacing(0.5) + }, + '.MuiSvgIcon-root': { + margin: getSpacing(0, -0.75) + }, '&.Mui-selected': { color: commonPalette.primary.main, backgroundColor: commonPalette.primary.background, '&:hover': { - backgroundColor: commonPalette.primary.background + color: commonPalette.text.secondary, + backgroundColor: commonPalette.action.hover } - } - }, - sizeSmall: { - width: getSpacing(3), - height: getSpacing(3), - - '& .MuiSvgIcon-root': { - maxWidth: getSpacing(2.5), - maxHeight: getSpacing(2.5) + }, + '&.Mui-disabled': { + border: 'none' } }, sizeLarge: { - width: getSpacing(7), - height: getSpacing(7) + minWidth: sizeLarge, + height: sizeLarge, + ...themeTypography.body1 + }, + sizeSmall: { + minWidth: sizeSmall, + height: sizeSmall, + ...themeTypography.caption } } }, @@ -321,28 +348,55 @@ export const buttonsOverrides = { }, styleOverrides: { + root: { + alignItems: 'center', + justifyContent: 'center', + borderRadius: getSpacing(1), + boxShadow: themeShadows[1], + + '& .MuiToggleButtonGroup-grouped:not(:first-of-type), &.Mui-Selected, & .MuiToggleButtonGroup-grouped:not(:last-of-type)': + { + borderRadius: radius + }, + '.MuiDivider-root': { + height: sizeLarge, + margin: getSpacing(0, 1), + marginLeft: getSpacing(0.5) + } + }, + // Styles applied to the children if orientation="horizontal" groupedHorizontal: { - '&:not(:last-child)': { - marginRight: getSpacing(0.25), - borderTopRightRadius: getSpacing(0.5), - borderBottomRightRadius: getSpacing(0.5) + height: sizeMedium, + margin: getSpacing(1), + + '&:not(:last-of-type)': { + marginRight: getSpacing(0.5) }, - '&:not(:first-child)': { - marginLeft: 0, - borderLeft: 'none', - borderTopLeftRadius: getSpacing(0.5), - borderBottomLeftRadius: getSpacing(0.5) + '&.MuiToggleButton-sizeSmall': { + height: sizeSmall, + margin: getSpacing(0.5), + + '&:not(:first-of-type)': { + marginLeft: 0 + } } }, + // Styles applied to the children if orientation="vertical" groupedVertical: { - '&:not(:last-child)': { - marginBottom: getSpacing(0.25), - borderBottomLeftRadius: getSpacing(0.5), - borderBottomRightRadius: getSpacing(0.5) + width: sizeMedium, + margin: getSpacing(1), + + '&.MuiToggleButton-root': { + marginLeft: getSpacing(1), + marginBottom: getSpacing(0.5) }, - '&:not(:first-child)': { - borderTopLeftRadius: getSpacing(0.5), - borderTopRightRadius: getSpacing(0.5) + '&.MuiToggleButton-sizeSmall': { + width: sizeSmall, + margin: getSpacing(0.5), + + '&:not(:first-of-type)': { + marginTop: 0 + } } } } @@ -352,6 +406,10 @@ export const buttonsOverrides = { MuiFab: { styleOverrides: { root: { + '&:focus': { + boxShadow: themeShadows[6] + }, + '& .MuiSvgIcon-root': { width: getSpacing(3), height: getSpacing(3) @@ -380,8 +438,7 @@ export const buttonsOverrides = { height: iconSize }, '&.MuiFab-extended': { - ...themeTypography.body2, - fontWeight: 600, + ...themeTypography.caption, width: 'auto', height: getSpacing(4), paddingRight: getSpacing(2), @@ -393,8 +450,7 @@ export const buttonsOverrides = { }, sizeMedium: { '&.MuiFab-extended': { - ...themeTypography.body2, - fontWeight: 600, + ...themeTypography.button, height: getSpacing(6) } }, diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index d9364d925..10508f3c0 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -7,6 +7,7 @@ export const dataDisplayOverrides = { MuiDivider: { styleOverrides: { root: { + backgroundColor: 'transparent', borderColor: commonPalette.divider }, light: { @@ -89,7 +90,20 @@ export const dataDisplayOverrides = { styleOverrides: { tooltip: { ...themeTypography.caption, - backgroundColor: commonPalette.black[90] + backgroundColor: commonPalette.black[90], + + '.MuiTooltip-popper[data-popper-placement*="top"] &': { + marginBottom: getSpacing(0.5) + }, + '.MuiTooltip-popper[data-popper-placement*="right"] &': { + marginLeft: getSpacing(0.5) + }, + '.MuiTooltip-popper[data-popper-placement*="bottom"] &': { + marginTop: getSpacing(0.5) + }, + '.MuiTooltip-popper[data-popper-placement*="left"] &': { + marginRight: getSpacing(0.5) + } }, arrow: { diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index ee1c94f79..c0d88c9c9 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -137,7 +137,7 @@ export const commonPalette = { dark: baseColors.indigo[500], light: baseColors.indigo[300], contrastText: baseColors.common.white, - relatedDark: '#0d2b4a', + relatedDark: '#0D2B4A', relatedLight: '#E9EEF4' }, success: { diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js index b85f58c55..15144223b 100644 --- a/packages/react-ui/storybook/stories/atoms/Button.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -128,11 +128,13 @@ const BehaviorTemplate = ({ label, icon, ...rest }) => { - {'Overflow + optional tooltip'} + {'Overflow + tooltip'} - + + + @@ -142,9 +144,11 @@ const BehaviorTemplate = ({ label, icon, ...rest }) => { - + + + diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js index b1e6b1b99..fc40bed7e 100644 --- a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { IconButton, Grid } from '@mui/material'; -import { Delete } from '@mui/icons-material'; +import { IconButton, Grid, Tooltip } from '@mui/material'; +import { CheckCircleOutlined } from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; const options = { @@ -44,22 +44,28 @@ const options = { }; export default options; -const IconButtons = ({ color, label, size, disabled, title, ...rest }) => ( - - - {title && {title}} - - - +const IconButtons = ({ color, label, size, disabled, title, ...rest }) => { + const tooltipHelp = '(Unless noted, must be wrapped in a Tooltip)'; + + return ( + + + {title && {title}} + + + + + + - -); + ); +}; const PlaygroundTemplate = ({ label, size, color, ...rest }) => ( @@ -68,10 +74,10 @@ const PlaygroundTemplate = ({ label, size, color, ...rest }) => ( ); const ButtonTemplate = ({ label, ...rest }) => { - const smallLabel = label ? label : 'Small icon button'; - const mediumLabel = label ? label : 'Medium icon button'; - const largeLabel = label ? label : 'Large icon button'; - const disabledLabel = label ? label : 'Disabled icon button'; + const smallLabel = label ? label : 'Small'; + const mediumLabel = label ? label : 'Medium'; + const largeLabel = label ? label : 'Large'; + const disabledLabel = label ? label : 'Disabled'; return ( diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 289e6ff9c..3d73147e1 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -1,9 +1,12 @@ import React from 'react'; -import { ToggleButtonGroup, ToggleButton } from '@mui/material'; -import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk'; -import DriveEtaIcon from '@mui/icons-material/DriveEta'; -import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; -import TrainIcon from '@mui/icons-material/Train'; +import { ToggleButtonGroup, ToggleButton, Grid, Divider } from '@mui/material'; +import { + CheckCircleOutline, + FormatAlignCenter, + FormatAlignJustify, + FormatAlignLeft, + FormatAlignRight +} from '@mui/icons-material'; const options = { title: 'Molecules/Toggle Button', @@ -13,7 +16,7 @@ const options = { defaultValue: 'medium', control: { type: 'select', - options: ['small', 'medium', 'large'] + options: ['small', 'medium'] } }, orientation: { @@ -28,6 +31,17 @@ const options = { control: { type: 'boolean' } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } } }, parameters: { @@ -36,44 +50,32 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' }, status: { - type: 'inDevelopment' + type: 'readyToReview' } } }; export default options; -const Template = (args) => { - const [selected, setSelected] = React.useState(() => ['walk']); - - const handleAlignment = (event, newAlignment) => { - setSelected(newAlignment); - }; +const Toggle = ({ label, ...rest }) => { + const [selected, setSelected] = React.useState(false); return ( - { + setSelected(!selected); + }} > - - - - - - - - - - - - - + {label ? label : } + ); }; -const DefaultPropsTemplate = () => { - const [selected, setSelected] = React.useState(() => ['walk']); +const ToggleRow = ({ label, divider, ...rest }) => { + const [selected, setSelected] = React.useState(() => ['AlignLeft']); const handleAlignment = (event, newAlignment) => { setSelected(newAlignment); @@ -81,34 +83,108 @@ const DefaultPropsTemplate = () => { return ( - - + + {label ? label : } - - + + {label ? label : } - - + {divider && } + + {label ? label : } - - + + {label ? label : } ); }; -export const Playground = Template.bind({}); +const SizesTemplate = (args) => { + return ( + + + + + + + + + + + + ); +}; + +const TextTemplate = (args) => { + return ( + + + + + + + + + ); +}; + +const GroupTemplate = (args) => { + return ( + + + + + + + + + ); +}; + +const VerticalGroupTemplate = (args) => { + return ( + + + + + + + + + ); +}; + +const DividedTemplate = (args) => { + return ( + + + + + + ); +}; + +export const Playground = ToggleRow.bind({}); + +export const Sizes = SizesTemplate.bind({}); + +export const Text = TextTemplate.bind({}); + +export const HorizontalGroup = GroupTemplate.bind({}); + +export const HorizontalTextGroup = GroupTemplate.bind({}); +HorizontalTextGroup.args = { label: 'Text' }; -export const DefaultProps = DefaultPropsTemplate.bind({}); +export const VerticalGroup = VerticalGroupTemplate.bind({}); +VerticalGroup.args = { orientation: 'vertical' }; -export const OrientationVertical = Template.bind({}); -OrientationVertical.args = { orientation: 'vertical' }; +export const DividedGroup = DividedTemplate.bind({}); -export const MultipleSelection = Template.bind({}); -MultipleSelection.args = { exclusive: false }; +export const MultipleSelectionGroup = GroupTemplate.bind({}); +MultipleSelectionGroup.args = { exclusive: false }; From 74998cf3cc91cb2959c450fb01ee1165edb64f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 14 Nov 2022 18:08:16 +0100 Subject: [PATCH 038/154] Radio and Checkbox components adapted to the new design system (#532) --- CHANGELOG.md | 1 + .../src/theme/sections/components/forms.js | 217 ++++++------------ .../storybook/stories/atoms/Button.stories.js | 2 +- .../stories/atoms/Checkbox.stories.js | 113 +++++++-- .../stories/atoms/IconButton.stories.js | 2 +- .../storybook/stories/atoms/Radio.stories.js | 106 +++++---- .../stories/molecules/ButtonGroup.stories.js | 2 +- .../stories/molecules/FAB.stories.js | 2 +- 8 files changed, 238 insertions(+), 207 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 564468d15..11df1fbf2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Radio and Checkbox components adapted to the new design system [#532](https://github.com/CartoDB/carto-react/pull/532/) - Improvements in Components priority 1 after design review [#529](https://github.com/CartoDB/carto-react/pull/529) - Replace kebab-case properties in styles [#530](https://github.com/CartoDB/carto-react/pull/530) - New design system in priority 1 components [#523](https://github.com/CartoDB/carto-react/pull/523) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index c5f6aa795..e530109c3 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -2,109 +2,48 @@ import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; -export const formsOverrides = { - // Input - MuiInputBase: { - styleOverrides: { - root: { - '&.Mui-disabled .MuiInputAdornment-root': { - color: commonPalette.action.disabled - }, - '&.Mui-disabled .MuiTypography-root': { - color: commonPalette.action.disabled - } - } - } - }, +const checkboxRadioOverrides = { + root: ({ ownerState }) => ({ + padding: getSpacing(0.5), - // Outlined Input - MuiOutlinedInput: { - defaultProps: { - notched: false - }, - styleOverrides: { - root: { - '&.Mui-disabled': { - backgroundColor: commonPalette.action.hover - } - }, + ...(ownerState.size === 'small' && { + padding: getSpacing(0.25) + }), - input: { - ...themeTypography.body1, - height: `${themeTypography.body1.lineHeight}em`, - padding: getSpacing(3, 2, 1) - }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.primary.background + }, + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), - inputMarginDense: { - ...themeTypography.body2, - height: `${themeTypography.body2.lineHeight}em`, - padding: getSpacing(1, 1.5), - paddingTop: getSpacing(1), - paddingBottom: getSpacing(1) - }, + ...(ownerState.size === 'small' && { + marginLeft: getSpacing(0.5) + }) + }, - adornedStart: { - '&.MuiFormControl-marginDense': { - paddingLeft: getSpacing(1.5) - } - }, - adornedEnd: { - '&.MuiFormControl-marginDense': { - paddingRight: getSpacing(1.5) - } - }, + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3), - notchedOutline: { - border: `2px solid ${commonPalette.text.disabled}` - }, + ...(ownerState.size === 'small' && { + fontSize: getSpacing(2.5) + }) + } + }) +}; - multiline: { - padding: getSpacing(2.75, 2, 1.25) - } +export const formsOverrides = { + // Checkbox + MuiCheckbox: { + styleOverrides: { + ...checkboxRadioOverrides } }, - // Label - MuiInputLabel: { + // Radio Button + MuiRadio: { styleOverrides: { - root: { - ...themeTypography.body1 - }, - - formControl: { - transform: 'translate(16px, 20px) scale(1)', - - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&.MuiFormControl-marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)' - } - } - }, - - outlined: { - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&.MuiFormControl-marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&.MuiInputLabel-shrink': { - transform: 'translate(0, -20px) scale(1)' - } - } - } + ...checkboxRadioOverrides } }, @@ -188,6 +127,50 @@ export const formsOverrides = { } }, + // Label + MuiInputLabel: { + styleOverrides: { + root: { + ...themeTypography.body1 + }, + + formControl: { + transform: 'translate(16px, 20px) scale(1)', + + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&.MuiFormControl-marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)' + } + } + }, + + outlined: { + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&.MuiFormControl-marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&.MuiInputLabel-shrink': { + transform: 'translate(0, -20px) scale(1)' + } + } + } + } + }, + // Select MuiSelect: { defaultProps: { @@ -234,54 +217,6 @@ export const formsOverrides = { } }, - // Checkbox - MuiCheckbox: { - defaultProps: { - size: 'small' - }, - styleOverrides: { - root: { - ...themeTypography.body2, - padding: getSpacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - } - }, - - // Radio Button - MuiRadio: { - defaultProps: { - size: 'small' - }, - styleOverrides: { - root: { - ...themeTypography.body2, - padding: getSpacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - } - }, - // Switch MuiSwitch: { styleOverrides: { diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js index 15144223b..04e197ec9 100644 --- a/packages/react-ui/storybook/stories/atoms/Button.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -47,7 +47,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index ac89b8a49..0d2c3e8f4 100644 --- a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -5,18 +5,23 @@ const options = { title: 'Atoms/Checkbox', component: Checkbox, argTypes: { - color: { + checked: { + control: { + type: 'boolean' + } + }, + size: { control: { type: 'select', - options: ['primary', 'default', 'secondary'] + options: ['small', 'medium'] } }, - checked: { + disabled: { control: { type: 'boolean' } }, - disabled: { + indeterminate: { control: { type: 'boolean' } @@ -33,43 +38,50 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -const Template = ({ label, color = 'primary', checked = false, ...args }) => { +const CheckboxTemplate = ({ label, size, checked, indeterminate, disabled, ...args }) => { return ( } + control={ + + } label={label} {...args} /> ); }; -const CheckboxTemplate = ({ color, ...args }) => { +const StatesTemplate = ({ size, ...args }) => { return ( } + control={} label='Active' {...args} /> } + control={} label='Inactive' {...args} /> } + control={} label='Indeterminate' {...args} /> @@ -78,21 +90,21 @@ const CheckboxTemplate = ({ color, ...args }) => { } + control={} label='Disabled Active' {...args} /> } + control={} label='Disabled Inactive' {...args} /> } + control={} label='Disabled Indeterminate' {...args} /> @@ -102,11 +114,74 @@ const CheckboxTemplate = ({ color, ...args }) => { ); }; -export const Playground = Template.bind({}); +const SizeTemplate = ({ ...args }) => { + return ( + + + + } + label='Small Active' + {...args} + /> + + + } + label='Small Inactive' + {...args} + /> + + + } + label='Small Indeterminate' + {...args} + /> + + + + + } + label='Medium Active' + {...args} + /> + + + } label='Medium Inactive' {...args} /> + + + } + label='Medium Indeterminate' + {...args} + /> + + + + ); +}; + +const disabledSizesArgTypes = { + size: { table: { disable: true } }, + checked: { table: { disable: true } }, + indeterminate: { table: { disable: true } } +}; + +const disabledStatesArgTypes = { + checked: { table: { disable: true } }, + indeterminate: { table: { disable: true } }, + disabled: { table: { disable: true } } +}; + +export const Playground = CheckboxTemplate.bind({}); Playground.args = { label: 'Text' }; -export const Primary = CheckboxTemplate.bind({}); -Primary.args = { color: 'primary' }; +export const States = StatesTemplate.bind({}); +States.argTypes = disabledStatesArgTypes; +States.args = { size: 'medium' }; -export const Secondary = CheckboxTemplate.bind({}); -Secondary.args = { color: 'secondary' }; +export const Sizes = SizeTemplate.bind({}); +Sizes.argTypes = disabledSizesArgTypes; +Sizes.args = { disabled: false }; diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js index fc40bed7e..15ebee6ba 100644 --- a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -38,7 +38,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1761%3A30090' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js index a0496df47..481b35b64 100644 --- a/packages/react-ui/storybook/stories/atoms/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -1,21 +1,14 @@ import React from 'react'; -import { - FormControl, - FormControlLabel, - FormLabel, - Grid, - Radio, - RadioGroup -} from '@mui/material'; +import { FormControlLabel, Grid, Radio } from '@mui/material'; const options = { title: 'Atoms/Radio', component: Radio, argTypes: { - color: { + size: { control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['small', 'medium'] } }, disabled: { @@ -35,80 +28,107 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -const Template = ({ label, color, checked = false, ...args }) => { +const RadioTemplate = ({ label, size, checked, disabled, ...args }) => { return ( - - Gender - - } - label='Female' - /> - } label='Male' /> - } label='Other' /> - } - label='(Disabled option)' - /> - - + } + label={label} + /> ); }; -const RadioTemplate = ({ color, ...args }) => { +const StatesTemplate = ({ size, ...args }) => { return ( } + control={} label='Active' {...args} /> + + } label='Inactive' {...args} /> + + + + } - label='Inactive' + control={} + label='Disabled Active' + {...args} + /> + + + } + label='Disabled Inactive' {...args} /> + + ); +}; +const SizeTemplate = ({ ...args }) => { + return ( + } - label='Disabled Active' + control={} + label='Small Active' {...args} /> } - label='Disabled Inactive' + control={} + label='Small Inactive' {...args} /> + + + + } label='Medium Active' {...args} /> + + + } label='Medium Inactive' {...args} /> + + ); }; -export const Playground = Template.bind({}); +const disabledSizesArgTypes = { + size: { table: { disable: true } }, + checked: { table: { disable: true } } +}; + +const disabledStatesArgTypes = { + checked: { table: { disable: true } }, + disabled: { table: { disable: true } } +}; + +export const Playground = RadioTemplate.bind({}); Playground.args = { label: 'Text' }; -export const Primary = RadioTemplate.bind({}); -Primary.args = {}; +export const States = StatesTemplate.bind({}); +States.argTypes = disabledStatesArgTypes; +States.args = { size: 'medium' }; -export const Secondary = RadioTemplate.bind({}); -Secondary.args = { color: 'secondary' }; +export const Sizes = SizeTemplate.bind({}); +Sizes.argTypes = disabledSizesArgTypes; +Sizes.args = { disabled: false }; diff --git a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js index a05880d04..4b26639f3 100644 --- a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -49,7 +49,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/FAB.stories.js b/packages/react-ui/storybook/stories/molecules/FAB.stories.js index 1b87e34d4..f4f6a5b86 100644 --- a/packages/react-ui/storybook/stories/molecules/FAB.stories.js +++ b/packages/react-ui/storybook/stories/molecules/FAB.stories.js @@ -44,7 +44,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28899' }, status: { - type: 'readyToReview' + type: 'validated' } } }; From 84574672ed6e4251ab0a5f7be8df7dc2bc29c78a Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 14 Nov 2022 18:14:37 +0100 Subject: [PATCH 039/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-8 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index d8987fa3d..1c6d409e1 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 95eec0c5a..671316cea 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0d55bc3e4..acf1dbb95 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index bf200f12b..d0ff5381e 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 36cea7a2a..bcffdccdc 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 40419b947..537b1a9cf 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d4a9b6573..dae6a4691 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 227f706a5..2dccf51bf 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index d1a2f239f..df42de3c6 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 737c8ad1392053930422fe63abf15f5bad9010ab Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 14 Nov 2022 18:20:17 +0100 Subject: [PATCH 040/154] update peer dependencies tag version --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 671316cea..6dcac6ebf 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index acf1dbb95..1eda064f4 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index d0ff5381e..36eae6ae4 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 537b1a9cf..8fc589f4a 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index dae6a4691..03329d009 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 2dccf51bf..1dbc1bde4 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-7", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From dc600a9c82f3f3511c12ed192378adb51bb09b12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 16 Nov 2022 17:41:20 +0100 Subject: [PATCH 041/154] Design review of Toggle component (#533) --- CHANGELOG.md | 1 + .../src/theme/sections/components/buttons.js | 15 +++- .../stories/molecules/ToggleButton.stories.js | 68 +++++++++++++++++-- 3 files changed, 74 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11df1fbf2..ee75f363d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Design review of Toggle component [#533](https://github.com/CartoDB/carto-react/pull/533) - Radio and Checkbox components adapted to the new design system [#532](https://github.com/CartoDB/carto-react/pull/532/) - Improvements in Components priority 1 after design review [#529](https://github.com/CartoDB/carto-react/pull/529) - Replace kebab-case properties in styles [#530](https://github.com/CartoDB/carto-react/pull/530) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index ac9f34648..bf2438dfb 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -307,6 +307,9 @@ export const buttonsOverrides = { border: 'none', borderRadius: radius, + '&:hover': { + backgroundColor: commonPalette.action.hover + }, // Pairing buttons separation '& + &': { marginLeft: getSpacing(0.5) @@ -319,7 +322,6 @@ export const buttonsOverrides = { backgroundColor: commonPalette.primary.background, '&:hover': { - color: commonPalette.text.secondary, backgroundColor: commonPalette.action.hover } }, @@ -335,7 +337,8 @@ export const buttonsOverrides = { sizeSmall: { minWidth: sizeSmall, height: sizeSmall, - ...themeTypography.caption + ...themeTypography.caption, + fontWeight: 500 } } }, @@ -353,6 +356,7 @@ export const buttonsOverrides = { justifyContent: 'center', borderRadius: getSpacing(1), boxShadow: themeShadows[1], + backgroundColor: commonPalette.background.paper, '& .MuiToggleButtonGroup-grouped:not(:first-of-type), &.Mui-Selected, & .MuiToggleButtonGroup-grouped:not(:last-of-type)': { @@ -370,7 +374,12 @@ export const buttonsOverrides = { margin: getSpacing(1), '&:not(:last-of-type)': { - marginRight: getSpacing(0.5) + marginRight: getSpacing(0.5), + marginLeft: 0, + borderLeft: 'none' + }, + '&:first-of-type': { + marginLeft: getSpacing(1) }, '&.MuiToggleButton-sizeSmall': { height: sizeSmall, diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 3d73147e1..5da07a09f 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -7,6 +7,7 @@ import { FormatAlignLeft, FormatAlignRight } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Molecules/Toggle Button', @@ -38,6 +39,12 @@ const options = { type: 'boolean' } }, + fullWidth: { + defaultValue: false, + control: { + type: 'boolean' + } + }, label: { control: { type: 'text' @@ -50,7 +57,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' }, status: { - type: 'readyToReview' + type: 'validated' } } }; @@ -74,7 +81,7 @@ const Toggle = ({ label, ...rest }) => { ); }; -const ToggleRow = ({ label, divider, ...rest }) => { +const ToggleRow = ({ label, divider, fullWidth, ...rest }) => { const [selected, setSelected] = React.useState(() => ['AlignLeft']); const handleAlignment = (event, newAlignment) => { @@ -86,6 +93,7 @@ const ToggleRow = ({ label, divider, ...rest }) => { {...rest} value={selected} onChange={handleAlignment} + fullWidth={fullWidth} aria-label='text alignment' > @@ -107,7 +115,7 @@ const ToggleRow = ({ label, divider, ...rest }) => { const SizesTemplate = (args) => { return ( - + @@ -123,7 +131,7 @@ const SizesTemplate = (args) => { const TextTemplate = (args) => { return ( - + @@ -136,7 +144,7 @@ const TextTemplate = (args) => { const GroupTemplate = (args) => { return ( - + @@ -149,7 +157,7 @@ const GroupTemplate = (args) => { const VerticalGroupTemplate = (args) => { return ( - + @@ -162,7 +170,7 @@ const VerticalGroupTemplate = (args) => { const DividedTemplate = (args) => { return ( - + @@ -170,6 +178,50 @@ const DividedTemplate = (args) => { ); }; +const BehaviorTemplate = (args) => { + const [selected, setSelected] = React.useState(() => ['opt1']); + const [selected2, setSelected2] = React.useState(() => ['opt1']); + + const handleAlignment = (event, newAlignment) => { + setSelected(newAlignment); + }; + const handleAlignment2 = (event, newAlignment) => { + setSelected2(newAlignment); + }; + + return ( + + + {'Hug Text'} + {'Default behavior'} + + + {'Opt 1'} + {'Opt 2'} + {'Option 3'} + + + + + {'Fill Text'} + {'"fullWidth" with custom width limit'} + + + {'Opt 1'} + {'Opt 2'} + {'Option 3'} + + + + ); +}; + export const Playground = ToggleRow.bind({}); export const Sizes = SizesTemplate.bind({}); @@ -188,3 +240,5 @@ export const DividedGroup = DividedTemplate.bind({}); export const MultipleSelectionGroup = GroupTemplate.bind({}); MultipleSelectionGroup.args = { exclusive: false }; + +export const Behavior = BehaviorTemplate.bind({}); From 39e9fbb3bf6d83706cef4bfb4f0f852db8321298 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 16 Nov 2022 17:42:37 +0100 Subject: [PATCH 042/154] Switch component adapted to the new design system (#534) --- CHANGELOG.md | 1 + .../src/theme/sections/components/forms.js | 144 +++++++----------- .../stories/atoms/Checkbox.stories.js | 2 +- .../storybook/stories/atoms/Radio.stories.js | 2 +- .../storybook/stories/atoms/Switch.stories.js | 10 +- 5 files changed, 64 insertions(+), 95 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ee75f363d..aab5a3945 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Switch component adapted to the new design system [#534](https://github.com/CartoDB/carto-react/pull/534/) - Design review of Toggle component [#533](https://github.com/CartoDB/carto-react/pull/533) - Radio and Checkbox components adapted to the new design system [#532](https://github.com/CartoDB/carto-react/pull/532/) - Improvements in Components priority 1 after design review [#529](https://github.com/CartoDB/carto-react/pull/529) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index e530109c3..1148e4817 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -1,13 +1,18 @@ import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; +import { themeShadows } from '../shadows'; import { themeTypography } from '../typography'; +const switchSizeS = 2; +const switchSizeM = 3; +const switchSizeL = 4; + const checkboxRadioOverrides = { root: ({ ownerState }) => ({ padding: getSpacing(0.5), ...(ownerState.size === 'small' && { - padding: getSpacing(0.25) + padding: '3px' // Forced to a non-standard value to meet with design }), '&:hover, &:focus-visible': { @@ -26,7 +31,7 @@ const checkboxRadioOverrides = { fontSize: getSpacing(3), ...(ownerState.size === 'small' && { - fontSize: getSpacing(2.5) + fontSize: getSpacing(2.25) }) } }) @@ -219,133 +224,96 @@ export const formsOverrides = { // Switch MuiSwitch: { + defaultProps: { + disableRipple: true + }, + styleOverrides: { root: { - height: getSpacing(4.5), - width: getSpacing(6), - padding: getSpacing(1), + width: getSpacing(switchSizeM), + height: getSpacing(switchSizeS), + padding: 0, overflow: 'visible', '& + .MuiFormControlLabel-label': { ...themeTypography.body2, - marginLeft: getSpacing(0.25), + marginLeft: getSpacing(1), color: commonPalette.text.primary } }, switchBase: { - padding: getSpacing(1.5), + width: getSpacing(switchSizeL), + height: getSpacing(switchSizeL), + padding: getSpacing(0.5), borderRadius: '50%', - transform: 'translate(1px, 1px)', color: commonPalette.text.secondary, + transform: 'translate(-8px, -8px)', + '&:hover': { + backgroundColor: commonPalette.action.hover + }, '&.Mui-checked': { + transform: 'translate(0, -8px)', + color: commonPalette.common.white, + '& input': { left: getSpacing(-1.5) }, - - transform: 'translate(13px, 1px)', - color: commonPalette.common.white, - '& + .MuiSwitch-track': { - opacity: 1 + opacity: 1, + border: 0 } } }, thumb: { - width: getSpacing(1.25), - height: getSpacing(1.25), - boxShadow: 'none' + width: getSpacing(1), + height: getSpacing(1), + boxShadow: themeShadows[0], + + '.Mui-checked &': { + boxShadow: themeShadows[1] + }, + '.Mui-disabled &': { + backgroundColor: commonPalette.text.disabled + }, + '.Mui-disabled.Mui-checked &': { + backgroundColor: commonPalette.common.white + } }, input: { - width: getSpacing(6), + width: getSpacing(switchSizeM), + height: getSpacing(switchSizeS), left: 0 }, track: { height: 'auto', - border: `2px solid ${commonPalette.text.secondary}`, + border: `1px solid ${commonPalette.text.secondary}`, borderRadius: getSpacing(2), opacity: 1, - backgroundColor: commonPalette.common.white - }, - - colorPrimary: { - '&.Mui-checked': { - color: commonPalette.common.white, + backgroundColor: commonPalette.common.white, + transitionDuration: '300ms', - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.primary.main, - borderColor: 'transparent' - }, - - '&.Mui-disabled': { - color: commonPalette.grey[100], - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.text.disabled - } - } + '.MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled + &': { + opacity: 1, + borderColor: commonPalette.text.disabled }, - - '&.Mui-disabled': { - color: commonPalette.text.disabled, - - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: commonPalette.common.white, - borderColor: commonPalette.text.disabled - } + '.MuiButtonBase-root.Mui-checked.Mui-disabled + &': { + backgroundColor: commonPalette.text.disabled } }, - colorSecondary: { - '&.Mui-checked': { - color: commonPalette.common.white, - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.secondary.main, - borderColor: 'transparent' - }, - - '&.Mui-disabled': { - color: commonPalette.grey[100], - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.text.disabled - } - } - }, - - '&.Mui-disabled': { - color: commonPalette.text.disabled, - - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: commonPalette.common.white, - borderColor: commonPalette.text.disabled - } + colorPrimary: { + '&.Mui-checked:hover': { + backgroundColor: commonPalette.primary.background } }, - - sizeSmall: { - height: getSpacing(4.5), - width: getSpacing(6), - padding: getSpacing(1), - - '& .MuiSwitch-switchBase': { - padding: getSpacing(1.5), - transform: 'translate(0, 1px)', - - '&.Mui-checked': { - transform: 'translate(15px, 1px)' - } - }, - '& .MuiSwitch-thumb': { - width: getSpacing(1.25), - height: getSpacing(1.25) + colorSecondary: { + '&.Mui-checked:hover': { + backgroundColor: commonPalette.secondary.background } } } diff --git a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index 0d2c3e8f4..3161d7616 100644 --- a/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -38,7 +38,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js index 481b35b64..c90639f72 100644 --- a/packages/react-ui/storybook/stories/atoms/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -28,7 +28,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/Switch.stories.js b/packages/react-ui/storybook/stories/atoms/Switch.stories.js index 18d7c981f..7169907ed 100644 --- a/packages/react-ui/storybook/stories/atoms/Switch.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Switch.stories.js @@ -8,7 +8,7 @@ const options = { color: { control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['primary', 'secondary'] } }, disabled: { @@ -28,13 +28,13 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33096' }, status: { - type: 'needUpdate' + type: 'validated' } } }; export default options; -const Template = ({ label, color, checked, ...args }) => { +const Template = ({ label, color, ...args }) => { return } label={label} {...args} />; }; @@ -47,7 +47,7 @@ const SwitchTemplate = ({ color, ...args }) => { } + control={} label='On' {...args} /> @@ -64,7 +64,7 @@ const SwitchTemplate = ({ color, ...args }) => { } + control={} label='Disabled On' {...args} /> From 017d157581305c0bc3671a7dbdba893d9bdb643b Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 16 Nov 2022 17:56:10 +0100 Subject: [PATCH 043/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-9 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 1c6d409e1..6f82f8ca1 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 6dcac6ebf..f75e740be 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 1eda064f4..d188c00e6 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 36eae6ae4..b80ed69ad 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index bcffdccdc..f141b12c3 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 8fc589f4a..099ab3ae9 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 03329d009..5ebae5292 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 1dbc1bde4..a2c4dc61b 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index df42de3c6..9ee198a89 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From a062ac199f7a5354933d6c4f261ab7736933695b Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 16 Nov 2022 17:58:00 +0100 Subject: [PATCH 044/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f75e740be..0718d154a 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d188c00e6..d97c9ae1c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index b80ed69ad..699c112ea 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 099ab3ae9..eb39c5865 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 5ebae5292..f15284166 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index a2c4dc61b..66905fa3f 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-8", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From d6c62938f256fa8301119b65f599dc517c1ccee7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 18 Nov 2022 14:49:55 +0100 Subject: [PATCH 045/154] Tooltip component adapted to the new design system (#536) --- CHANGELOG.md | 1 + UPGRADE.md | 6 + .../src/components/organisms/TooltipData.js | 93 ++++++ .../theme/sections/components/dataDisplay.js | 38 ++- packages/react-ui/src/types.d.ts | 14 + .../src/widgets/FeatureSelectionWidgetUI.js | 5 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 2 +- .../src/widgets/legend/LegendCategories.js | 4 +- .../react-ui/src/widgets/legend/LegendRamp.js | 2 +- .../src/widgets/legend/LegendWrapper.js | 4 +- .../storybook/stories/atoms/Button.stories.js | 6 +- .../stories/atoms/IconButton.stories.js | 2 +- .../storybook/stories/atoms/Slider.stories.js | 2 +- .../stories/molecules/Tooltip.stories.js | 284 +++++++++++++----- 14 files changed, 362 insertions(+), 101 deletions(-) create mode 100644 packages/react-ui/src/components/organisms/TooltipData.js diff --git a/CHANGELOG.md b/CHANGELOG.md index aab5a3945..28aeceba1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Tooltip component adapted to the new design system [#536](https://github.com/CartoDB/carto-react/pull/536/) - Switch component adapted to the new design system [#534](https://github.com/CartoDB/carto-react/pull/534/) - Design review of Toggle component [#533](https://github.com/CartoDB/carto-react/pull/533) - Radio and Checkbox components adapted to the new design system [#532](https://github.com/CartoDB/carto-react/pull/532/) diff --git a/UPGRADE.md b/UPGRADE.md index 2ed6297e2..c9737aecf 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -104,3 +104,9 @@ So, instead of Mui Button, the component you should use to create buttons is thi `react-ui/src/atoms/Button` For external use: `import { Button } from '@carto/react-ui';`. + +## Tooltip + +Now, by default is placed `top` and has an `arrow` indicator, so you don't need to specify these properties anymore. + +We have a new component for building data structures within Tooltips, `TooltipData`. diff --git a/packages/react-ui/src/components/organisms/TooltipData.js b/packages/react-ui/src/components/organisms/TooltipData.js new file mode 100644 index 000000000..4efeff6a4 --- /dev/null +++ b/packages/react-ui/src/components/organisms/TooltipData.js @@ -0,0 +1,93 @@ +// TODO: replace widgets Tooltip content with this component +// https://app.shortcut.com/cartoteam/story/272209/replace-widgets-tooltip-with-tooltipdata +import React from 'react'; +import PropTypes from 'prop-types'; +import makeStyles from '@mui/styles/makeStyles'; +import Typography from '../atoms/Typography'; + +const useStyles = makeStyles((theme) => ({ + list: { + listStyle: 'none', + paddingLeft: 0, + margin: theme.spacing(0.5, 0, 0, 0) + }, + item: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + + '&:not(:last-child)': { + marginBottom: theme.spacing(0.5) + } + }, + bullet: { + width: theme.spacing(1), + height: theme.spacing(1), + marginRight: theme.spacing(0.5), + border: `2px solid ${theme.palette.qualitative.bold[1]}`, + borderRadius: '50%', + backgroundColor: theme.palette.qualitative.bold[1] + }, + category: { + minWidth: theme.spacing(10), + marginRight: theme.spacing(1.5) + } +})); + +const TooltipData = ({ items, title }) => { + const classes = useStyles(); + + return ( + <> + {title && ( + + {title} + + )} + +
    + {items.map((item, index) => ( +
  • + + {item.category && ( + + {item.category} + + )} + + {item.value} + +
    • + ))} +
+ + ); +}; + +TooltipData.defaultProps = { + items: [ + { + outlinedBullet: false + } + ] +}; + +TooltipData.propTypes = { + items: PropTypes.arrayOf( + PropTypes.shape({ + category: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + outlinedBullet: PropTypes.bool, + color: PropTypes.string + }) + ).isRequired, + title: PropTypes.string +}; + +export default TooltipData; diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 10508f3c0..bc8ffd588 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -2,6 +2,10 @@ import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; +const tooltipArrowSize = 1; +const tooltipSeparation = 0.5; +const tooltipMargin = tooltipArrowSize + tooltipSeparation; + export const dataDisplayOverrides = { // Divider MuiDivider: { @@ -87,26 +91,52 @@ export const dataDisplayOverrides = { // Tooltip MuiTooltip: { + defaultProps: { + arrow: true, + placement: 'top', + enterDelay: 1000, + leaveDelay: 200 + }, + styleOverrides: { tooltip: { ...themeTypography.caption, + fontWeight: 500, + maxWidth: '240px', backgroundColor: commonPalette.black[90], '.MuiTooltip-popper[data-popper-placement*="top"] &': { - marginBottom: getSpacing(0.5) + marginBottom: getSpacing(tooltipSeparation), + + '&.MuiTooltip-tooltipArrow': { + marginBottom: getSpacing(tooltipMargin) + } }, '.MuiTooltip-popper[data-popper-placement*="right"] &': { - marginLeft: getSpacing(0.5) + marginLeft: getSpacing(tooltipSeparation), + + '&.MuiTooltip-tooltipArrow': { + marginLeft: getSpacing(tooltipMargin) + } }, '.MuiTooltip-popper[data-popper-placement*="bottom"] &': { - marginTop: getSpacing(0.5) + marginTop: getSpacing(tooltipSeparation), + + '&.MuiTooltip-tooltipArrow': { + marginTop: getSpacing(tooltipMargin) + } }, '.MuiTooltip-popper[data-popper-placement*="left"] &': { - marginRight: getSpacing(0.5) + marginRight: getSpacing(tooltipSeparation), + + '&.MuiTooltip-tooltipArrow': { + marginRight: getSpacing(tooltipMargin) + } } }, arrow: { + height: getSpacing(tooltipArrowSize), color: commonPalette.black[90] } } diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index f055f9848..30af268b3 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -205,3 +205,17 @@ export interface TypographyProps extends MuiTypographyProps { export interface ButtonProps extends MuiButtonProps { style?: CSSProperties; } + +// Tooltip data +// Export types and component if we need it outsite C4R +type TooltipDataProps = { + items: [ + { + category?: string; + value: string | number; + outlinedBullet?: boolean; + color?: 'primary' | 'secondary'; + } + ]; + title?: string; +}; diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index 23d27db96..641121a35 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -147,7 +147,6 @@ function GeometryViewer({ onEnabledChange(!enabled); return ( - + {icon} @@ -272,7 +271,7 @@ function ModesSelector({ return ( - + - + {props.title} diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 896efe457..33b7e8dce 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -132,13 +132,13 @@ function Row({ label, isMax, isStrokeColor, color = '#000', icon, maskedIcon }) }, [setShowTooltip, labelPhantomRef, labelRef]); return ( - + - + + {title} {!!layerOptionsEnabled && ( - + )} {switchable && ( - + )} diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js index 04e197ec9..f293f2dfe 100644 --- a/packages/react-ui/storybook/stories/atoms/Button.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -132,19 +132,19 @@ const BehaviorTemplate = ({ label, icon, ...rest }) => { - + - + - + diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js index 15ebee6ba..8013fe1d7 100644 --- a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -51,7 +51,7 @@ const IconButtons = ({ color, label, size, disabled, title, ...rest }) => { {title && {title}} - + { const { children, open, value } = props; return ( - + {children} ); diff --git a/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js index 8800348be..76c6e18ec 100644 --- a/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js @@ -1,14 +1,16 @@ import React from 'react'; -import { Button, Grid, Tooltip } from '@mui/material'; +import { Box, Grid, IconButton, Tooltip } from '@mui/material'; +import { InfoOutlined } from '@mui/icons-material'; import makeStyles from '@mui/styles/makeStyles'; import Typography from '../../../src/components/atoms/Typography'; +import TooltipData from '../../../src/components/organisms/TooltipData'; +import { commonPalette } from '../../../src/theme/sections/palette'; const options = { title: 'Molecules/Tooltip', component: Tooltip, argTypes: { title: { - defaultValue: 'Hello World!', control: { type: 'text' } @@ -16,31 +18,13 @@ const options = { placement: { control: { type: 'select', - options: [ - 'top-start', - 'top', - 'top-end', - 'left-start', - 'left', - 'left-end', - 'right-start', - 'right', - 'right-end', - 'bottom-start', - 'bottom', - 'bottom-end' - ] + options: ['top', 'left', 'right', 'bottom'] } }, arrow: { control: { type: 'boolean' } - }, - interactive: { - control: { - type: 'boolean' - } } }, parameters: { @@ -49,105 +33,239 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -const Template = ({ ...args }) => { +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const TooltipBox = ({ title, ...args }) => { + const classes = useStyles(); + return ( - - - + + + {title} + + + + + + + + ); }; -const TooltipTemplate = () => { +const TooltipPlaygroundTemplate = (args) => { + const classes = useStyles(); + return ( - - - - - - - + + + + + + + + ); +}; + +const TooltipTextTemplate = () => { + const classes = useStyles(); + + return ( + + - - + + + + - + + + - + ); }; -const useStyles = makeStyles((theme) => ({ - data: { - padding: theme.spacing(0.5) +const dataTooltip1 = [ + { + value: 123000 + } +]; +const dataTooltip2 = [ + { + value: 123000 }, - list: { - listStyle: 'none', - paddingLeft: 0, - margin: theme.spacing(0.5, 0, 0, 0), - fontWeight: theme.typography.fontWeightRegular + { + value: 123000, + color: commonPalette.qualitative.bold[6] }, - item: { - display: 'inline-block', - width: theme.spacing(1), - height: theme.spacing(1), - borderRadius: '50%', - marginRight: theme.spacing(0.5), - backgroundColor: theme.palette.primary.main, - '&:not(:last-child())': { - marginBottom: theme.spacing(0.5) - } + { + value: 123000, + color: commonPalette.qualitative.bold[9] } -})); +]; +const dataTooltip3 = [ + { + category: 'Category 1', + value: 123000, + outlinedBullet: true + } +]; +const dataTooltip4 = [ + { + category: 'Category 1', + value: 123000, + outlinedBullet: true + }, + { + category: 'Category 2', + value: 123000, + outlinedBullet: true, + color: commonPalette.qualitative.bold[6] + }, + { + category: 'Category 3', + value: 123000, + outlinedBullet: true, + color: commonPalette.qualitative.bold[9] + } +]; -const DataComponent = () => { - const classes = useStyles(); +const TooltipDataTemplate = () => { return ( - - - Category - -
    -
  • - 123,000 -
    • -
  • - 123,000 -
    • -
+ + + }> + + + + + + + }> + + + + + + + }> + + + + + + + }> + + + + + ); }; -const TooltipDataTemplate = () => { +const TooltipArrowTemplate = (args) => { return ( - - - - }> - + + + + + + + + + ); +}; + +const TooltipPositionTemplate = (args) => { + return ( + + + + + + + + + + + + + + + ); +}; + +const TooltipBehaviorTemplate = (args) => { + const classes = useStyles(); + + return ( + + + + + + + + + {'Follow cursor'} + + + + + + - + ); }; -export const Playground = Template.bind({}); -Playground.args = {}; +export const Playground = TooltipPlaygroundTemplate; +Playground.args = { title: 'Text' }; + +export const Text = TooltipTextTemplate.bind({}); -export const Text = TooltipTemplate.bind({}); export const Data = TooltipDataTemplate.bind({}); + +export const Arrow = TooltipArrowTemplate.bind({}); + +export const Position = TooltipPositionTemplate.bind({}); + +export const Behavior = TooltipBehaviorTemplate.bind({}); From 856dc1d01028ed23439bb3b0f5f88ee8569e4a9b Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 18 Nov 2022 15:00:30 +0100 Subject: [PATCH 046/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-10 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 6f82f8ca1..f23d3d518 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 0718d154a..d394d6a51 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d97c9ae1c..d96a61c6c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 699c112ea..c132bed87 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index f141b12c3..8475a5784 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index eb39c5865..bf8c3b6ec 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index f15284166..0a3b3c881 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 66905fa3f..d22302ef4 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 9ee198a89..5313e61fe 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From c985726247dd1aeb89c57d92c872dddbba273fcc Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 18 Nov 2022 15:02:28 +0100 Subject: [PATCH 047/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index d394d6a51..f25c3d72e 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d96a61c6c..d4b1a458d 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index c132bed87..478a620ed 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index bf8c3b6ec..8868d6550 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 0a3b3c881..38bd8dda4 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d22302ef4..cd1cccfa6 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-9", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 43da3657edb9faa5352f13300460df2c1bfc278c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 22 Nov 2022 13:31:33 +0100 Subject: [PATCH 048/154] Tabs component adapted to the new design system (#537) --- CHANGELOG.md | 1 + .../src/theme/sections/components/buttons.js | 3 + .../theme/sections/components/navigation.js | 73 ++--- .../stories/molecules/ToggleButton.stories.js | 17 +- .../stories/molecules/Tooltip.stories.js | 11 +- .../stories/organisms/Tabs.stories.js | 280 +++++++++++++++--- 6 files changed, 301 insertions(+), 84 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 28aeceba1..b77262412 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Tabs component adapted to the new design system [#537](https://github.com/CartoDB/carto-react/pull/537/) - Tooltip component adapted to the new design system [#536](https://github.com/CartoDB/carto-react/pull/536/) - Switch component adapted to the new design system [#534](https://github.com/CartoDB/carto-react/pull/534/) - Design review of Toggle component [#533](https://github.com/CartoDB/carto-react/pull/533) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index bf2438dfb..41b865fde 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -387,6 +387,9 @@ export const buttonsOverrides = { '&:not(:first-of-type)': { marginLeft: 0 + }, + '& + .MuiDivider-root': { + height: sizeMedium } } }, diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index b9c372d1c..ad59ec116 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -15,8 +15,7 @@ export const navigationOverrides = { // Tabs MuiTabs: { defaultProps: { - indicatorColor: 'primary', - textColor: 'primary', + iconPosition: 'start', TabIndicatorProps: { classes: { colorPrimary: 'colorPrimary' @@ -24,54 +23,56 @@ export const navigationOverrides = { } }, styleOverrides: { - indicator: { - height: 4, - '&.colorPrimary': { - backgroundColor: commonPalette.text.primary - } - }, - - vertical: { - '& .MuiTabs-indicator': { - width: 4 - }, + root: ({ ownerState }) => ({ + borderBottom: `1px solid ${commonPalette.black[12]}`, - '& .MuiTab-root': { - padding: getSpacing(0, 2), + ...(ownerState.variant !== 'fullWidth' && { + display: 'inline-flex' + }) + }), - '& .MuiTab-wrapper': { - alignItems: 'flex-start' - } - } + vertical: { + borderBottom: 0 } } }, // Tab MuiTab: { + defaultProps: { + iconPosition: 'start' + }, + styleOverrides: { root: { - padding: getSpacing(0, 1), - marginRight: getSpacing(3), - minWidth: '56px!important', - '&[class*="MuiTab-labelIcon"]': { - flexFlow: 'row', - alignItems: 'center' + minHeight: getSpacing(6), + minWidth: getSpacing(6), + padding: getSpacing(0, 2), + paddingTop: '2px', + borderBottom: '2px solid transparent', + ...themeTypography.subtitle2, + color: commonPalette.text.primary, + transition: 'border 300ms cubic-bezier(0.4, 0, 0.2, 1)', + + '&:hover': { + borderBottomColor: commonPalette.text.primary }, - '&[class*="MuiTab-labelIcon"] .MuiSvgIcon-root': { - marginRight: getSpacing(1), - marginBottom: 0 - } - }, - textColorPrimary: { - color: commonPalette.primary.main, - opacity: 1, '&.Mui-selected': { - color: commonPalette.text.primary + pointerEvents: 'none' }, - '&.Mui-disabled': { - color: commonPalette.action.disabled + '.MuiTabs-vertical &': { + paddingTop: 0, + borderBottom: 0, + paddingLeft: '2px', + borderRight: '2px solid transparent', + + '&:hover': { + borderRightColor: commonPalette.text.primary + } } + }, + wrapped: { + maxWidth: '240px' } } }, diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 5da07a09f..b0a948e86 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -113,7 +113,7 @@ const ToggleRow = ({ label, divider, fullWidth, ...rest }) => { ); }; -const SizesTemplate = (args) => { +const IconTemplate = (args) => { return ( @@ -174,6 +174,9 @@ const DividedTemplate = (args) => { + + + ); }; @@ -224,20 +227,20 @@ const BehaviorTemplate = (args) => { export const Playground = ToggleRow.bind({}); -export const Sizes = SizesTemplate.bind({}); +export const Icon = IconTemplate.bind({}); export const Text = TextTemplate.bind({}); -export const HorizontalGroup = GroupTemplate.bind({}); - -export const HorizontalTextGroup = GroupTemplate.bind({}); -HorizontalTextGroup.args = { label: 'Text' }; - export const VerticalGroup = VerticalGroupTemplate.bind({}); VerticalGroup.args = { orientation: 'vertical' }; +export const HorizontalGroup = GroupTemplate.bind({}); + export const DividedGroup = DividedTemplate.bind({}); +export const HorizontalTextGroup = GroupTemplate.bind({}); +HorizontalTextGroup.args = { label: 'Text' }; + export const MultipleSelectionGroup = GroupTemplate.bind({}); MultipleSelectionGroup.args = { exclusive: false }; diff --git a/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js index 76c6e18ec..2f0264f71 100644 --- a/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js @@ -2,9 +2,10 @@ import React from 'react'; import { Box, Grid, IconButton, Tooltip } from '@mui/material'; import { InfoOutlined } from '@mui/icons-material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/components/atoms/Typography'; -import TooltipData from '../../../src/components/organisms/TooltipData'; import { commonPalette } from '../../../src/theme/sections/palette'; +import TooltipData from '../../../src/components/organisms/TooltipData'; +import Typography from '../../../src/components/atoms/Typography'; +import Button from '../../../src/components/atoms/Button'; const options = { title: 'Molecules/Tooltip', @@ -33,7 +34,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' }, status: { - type: 'readyToReview' + type: 'validated' } } }; @@ -247,9 +248,7 @@ const TooltipBehaviorTemplate = (args) => { arrow={false} title='When followCursor is true, Tooltip should have arrow={false} property too' > - - - + diff --git a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js index 695097d55..aa7973323 100644 --- a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Tab, Tabs } from '@mui/material'; +import { Box, Grid, Tab, Tabs } from '@mui/material'; import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Organisms/Tabs', @@ -9,26 +10,30 @@ const options = { variant: { control: { type: 'select', - options: ['standard', 'filled', 'outlined'] + options: ['default', 'fullWidth'] } }, - indicatorColor: { - default: 'primary', + orientation: { control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['horizontal', 'vertical'] } }, - textColor: { + label: { control: { - type: 'select', - options: ['default', 'primary', 'secondary'] + type: 'text' } }, - orientation: { + wrapped: { + defaultValue: false, control: { - type: 'select', - options: ['horizontal', 'vertical'] + type: 'boolean' + } + }, + disabled: { + defaultValue: true, + control: { + type: 'boolean' } } }, @@ -38,13 +43,31 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -const Template = ({ ...args }) => { +const Template = ({ label, wrapped, disabled, ...args }) => { + const [value, setValue] = React.useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + + + + + + + ); +}; + +const TemplateIcons = ({ label, wrapped, disabled, ...args }) => { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { @@ -52,17 +75,17 @@ const Template = ({ ...args }) => { }; return ( - - - - - - + + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} disabled={disabled} /> ); }; -const TemplateOnlyIcons = ({ ...args }) => { +const TemplateIconsAndText = ({ label, wrapped, disabled, ...args }) => { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { @@ -70,17 +93,17 @@ const TemplateOnlyIcons = ({ ...args }) => { }; return ( - - } /> - } /> - } /> - } /> - } disabled /> + + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} disabled={disabled} /> ); }; -const TemplateIconsLabels = ({ ...args }) => { +const TemplateText = ({ label, wrapped, disabled, ...args }) => { const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { @@ -88,16 +111,203 @@ const TemplateIconsLabels = ({ ...args }) => { }; return ( - - } /> - } /> - } /> - } /> - } disabled /> + + + + + + ); }; +const TemplateWrapped = ({ label, wrapped, disabled, ...args }) => { + const [value, setValue] = React.useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + + + + + ); +}; + +const TemplateVertical = ({ label, wrapped, disabled, ...args }) => { + const [value, setValue] = React.useState(0); + const [value2, setValue2] = React.useState(0); + const [value3, setValue3] = React.useState(0); + const [value4, setValue4] = React.useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + const handleChange2 = (event, newValue) => { + setValue2(newValue); + }; + const handleChange3 = (event, newValue) => { + setValue3(newValue); + }; + const handleChange4 = (event, newValue) => { + setValue4(newValue); + }; + + return ( + + + + } /> + } /> + } /> + } /> + } disabled={disabled} /> + + + + + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} disabled={disabled} /> + + + + + + + + + + + + + + + + + + + + ); +}; + +const BehaviorTemplate = (args) => { + const [value, setValue] = React.useState(0); + const [value2, setValue2] = React.useState(0); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + const handleChange2 = (event, newValue) => { + setValue2(newValue); + }; + + return ( + + + {'Hug Text'} + {'Default behavior'} + + + } /> + } /> + } /> + + + + + {'Fill Text'} + + {'"variant=`fullWidth`" with custom width limit'} + + + + + } /> + } /> + } /> + + + + + ); +}; + +const commonArgs = { label: 'Label', disabled: true }; +const disabledControlsVerticalArgTypes = { + orientation: { table: { disable: true } }, + variant: { table: { disable: true } } +}; +const disabledControlsBehaviorArgTypes = { + label: { table: { disable: true } }, + wrapped: { table: { disable: true } }, + variant: { table: { disable: true } }, + disabled: { table: { disable: true } } +}; + export const Playground = Template.bind({}); -export const OnlyIcons = TemplateOnlyIcons.bind({}); -export const IconsLabels = TemplateIconsLabels.bind({}); +Playground.args = { ...commonArgs }; + +export const Icons = TemplateIcons.bind({}); + +export const IconsAndText = TemplateIconsAndText.bind({}); +IconsAndText.args = { ...commonArgs }; + +export const Text = TemplateText.bind({}); +Text.args = { ...commonArgs }; + +export const WrappedText = TemplateWrapped.bind({}); +WrappedText.args = { label: 'Wrapped Label used for a very long text', wrapped: true }; + +export const Vertical = TemplateVertical.bind({}); +Vertical.args = { ...commonArgs, orientation: 'vertical' }; +Vertical.argTypes = disabledControlsVerticalArgTypes; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.argTypes = disabledControlsBehaviorArgTypes; From 8b146972127d4f910d7d68e000dc5eca65b368d4 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 22 Nov 2022 15:52:06 +0100 Subject: [PATCH 049/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-11 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index f23d3d518..d48c6a587 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f25c3d72e..b1bfbef1f 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d4b1a458d..b8b15bef8 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 478a620ed..a92762211 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 8475a5784..9ff713075 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 8868d6550..a4cba4d84 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 38bd8dda4..2424fa43b 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index cd1cccfa6..a256dde52 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 5313e61fe..bc94d2c8f 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From d12d587d6306ead75b94cd0ac981ed15d72621c8 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 22 Nov 2022 15:53:19 +0100 Subject: [PATCH 050/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index b1bfbef1f..310428333 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index b8b15bef8..0bc9b7674 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a92762211..ef0dba56e 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index a4cba4d84..374c03e16 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 2424fa43b..c6d8a8390 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index a256dde52..f85b6c109 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-10", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 79741f0b00df5356e06af00d8408616f1a457233 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 25 Nov 2022 09:55:10 +0100 Subject: [PATCH 051/154] TextField and TextArea components adapted to the new design system (#538) --- CHANGELOG.md | 1 + UPGRADE.md | 9 + .../react-ui/src/components/atoms/Button.js | 9 +- .../src/components/atoms/PasswordField.js | 29 + packages/react-ui/src/index.d.ts | 4 +- packages/react-ui/src/index.js | 4 +- .../src/theme/sections/components/buttons.js | 18 +- .../theme/sections/components/dataDisplay.js | 5 +- .../src/theme/sections/components/forms.js | 276 ++++-- .../theme/sections/components/navigation.js | 9 +- packages/react-ui/src/theme/themeConstants.js | 6 + packages/react-ui/src/types.d.ts | 5 - .../stories/atoms/Text-area.stories.js | 484 ++++++++++ .../stories/atoms/Text-field.stories.js | 857 +++++++++++++----- .../stories/organisms/Tabs.stories.js | 79 +- 15 files changed, 1417 insertions(+), 378 deletions(-) create mode 100644 packages/react-ui/src/components/atoms/PasswordField.js create mode 100644 packages/react-ui/storybook/stories/atoms/Text-area.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index b77262412..76eb7d5f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- TextField and TextArea component adapted to the new design system [#538](https://github.com/CartoDB/carto-react/pull/538/) - Tabs component adapted to the new design system [#537](https://github.com/CartoDB/carto-react/pull/537/) - Tooltip component adapted to the new design system [#536](https://github.com/CartoDB/carto-react/pull/536/) - Switch component adapted to the new design system [#534](https://github.com/CartoDB/carto-react/pull/534/) diff --git a/UPGRADE.md b/UPGRADE.md index c9737aecf..e503ae3f9 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -110,3 +110,12 @@ For external use: `import { Button } from '@carto/react-ui';`. Now, by default is placed `top` and has an `arrow` indicator, so you don't need to specify these properties anymore. We have a new component for building data structures within Tooltips, `TooltipData`. + +## Password Input Field + +We have a custom component to build the show / hide content logic on top of TextField Mui component. + +Instead of ` ` you can use: +`react-ui/src/atoms/PasswordField` + +For external use: `import { PasswordField } from '@carto/react-ui';`. diff --git a/packages/react-ui/src/components/atoms/Button.js b/packages/react-ui/src/components/atoms/Button.js index af4b56f29..64f029522 100644 --- a/packages/react-ui/src/components/atoms/Button.js +++ b/packages/react-ui/src/components/atoms/Button.js @@ -1,14 +1,13 @@ import React, { forwardRef } from 'react'; -import PropTypes from 'prop-types'; import { Button as MuiButton } from '@mui/material'; import Typography from './Typography'; -const Button = forwardRef(({ style, children, ...otherProps }, ref) => { +const Button = forwardRef(({ 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} @@ -16,8 +15,4 @@ const Button = forwardRef(({ style, children, ...otherProps }, ref) => { ); }); -Button.propTypes = { - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) -}; - export default Button; diff --git a/packages/react-ui/src/components/atoms/PasswordField.js b/packages/react-ui/src/components/atoms/PasswordField.js new file mode 100644 index 000000000..ac9eedc86 --- /dev/null +++ b/packages/react-ui/src/components/atoms/PasswordField.js @@ -0,0 +1,29 @@ +import React, { forwardRef, useState } from 'react'; +import { IconButton, InputAdornment, TextField } from '@mui/material'; +import { VisibilityOffOutlined, VisibilityOutlined } from '@mui/icons-material'; + +const PasswordField = forwardRef(({ ...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 + const [showPassword, setShowPassword] = useState(false); + const handleClickShowPassword = () => setShowPassword(!showPassword); + + return ( + + + {showPassword ? : } + + + ) + }} + /> + ); +}); + +export default PasswordField; diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 993a2220e..e570aab7e 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -24,6 +24,7 @@ import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; +import PasswordField from './components/atoms/PasswordField'; export { theme, @@ -52,5 +53,6 @@ export { LegendProportion, LegendRamp, Typography, - Button + Button, + PasswordField }; diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index c82ab0ca1..e6c9e3d4a 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -24,6 +24,7 @@ import LassoIcon from './assets/LassoIcon'; import CircleIcon from './assets/CircleIcon'; import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; +import PasswordField from './components/atoms/PasswordField'; const featureSelectionIcons = { CursorIcon, @@ -57,5 +58,6 @@ export { LegendProportion, LegendRamp, Typography, - Button + Button, + PasswordField }; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 41b865fde..81039c86f 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -2,11 +2,11 @@ import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; import { themeShadows } from '../shadows'; +import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants'; const sizeSmall = getSpacing(3); const sizeMedium = getSpacing(4); const sizeLarge = getSpacing(6); -const iconSize = getSpacing(2.25); const radius = getSpacing(0.5); export const buttonsOverrides = { @@ -21,7 +21,7 @@ export const buttonsOverrides = { root: { '& .MuiSvgIcon-root': { display: 'flex', - fontSize: iconSize + fontSize: ICON_SIZE } } } @@ -97,7 +97,7 @@ export const buttonsOverrides = { marginRight: getSpacing(0.75), '& .MuiSvgIcon-root': { - fontSize: iconSize + fontSize: ICON_SIZE }, '&.MuiButton-iconSizeSmall': { marginRight: getSpacing(0.5), @@ -108,7 +108,7 @@ export const buttonsOverrides = { marginLeft: getSpacing(0.75), '& .MuiSvgIcon-root': { - fontSize: iconSize + fontSize: ICON_SIZE }, '&.MuiButton-iconSizeSmall': { marginLeft: getSpacing(0.5), @@ -266,7 +266,7 @@ export const buttonsOverrides = { color: commonPalette.text.secondary }), '& .MuiSvgIcon-root': { - fontSize: iconSize + fontSize: ICON_SIZE }, '&:hover, &:focus-visible': { ...(ownerState.color === 'default' && { @@ -423,8 +423,8 @@ export const buttonsOverrides = { }, '& .MuiSvgIcon-root': { - width: getSpacing(3), - height: getSpacing(3) + width: ICON_SIZE_M, + height: ICON_SIZE_M }, '&.MuiFab-extended': { ...themeTypography.body1, @@ -446,8 +446,8 @@ export const buttonsOverrides = { minHeight: getSpacing(4), '& .MuiSvgIcon-root': { - width: iconSize, - height: iconSize + width: ICON_SIZE, + height: ICON_SIZE }, '&.MuiFab-extended': { ...themeTypography.caption, diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index bc8ffd588..8f7d6f545 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -1,3 +1,4 @@ +import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants'; import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; @@ -70,7 +71,7 @@ export const dataDisplayOverrides = { marginLeft: getSpacing(0.75), '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) + fontSize: ICON_SIZE_M } } } @@ -83,7 +84,7 @@ export const dataDisplayOverrides = { width: getSpacing(4.5) }, '& .MuiSvgIcon-root': { - fontSize: getSpacing(2.5) + fontSize: ICON_SIZE } } } diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 1148e4817..7c8f4e03f 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -1,3 +1,4 @@ +import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants'; import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeShadows } from '../shadows'; @@ -28,10 +29,10 @@ const checkboxRadioOverrides = { }, '& .MuiSvgIcon-root': { - fontSize: getSpacing(3), + fontSize: ICON_SIZE_M, ...(ownerState.size === 'small' && { - fontSize: getSpacing(2.25) + fontSize: ICON_SIZE }) } }) @@ -52,82 +53,215 @@ export const formsOverrides = { } }, - // Input Adornment - MuiInputAdornment: { + // Text Field + MuiTextField: { defaultProps: { - disableTypography: true + InputLabelProps: { + shrink: true + } }, + styleOverrides: { + root: { + minWidth: '192px', + + '& legend': { + display: 'none' + }, + '& + &': { + marginLeft: getSpacing(2) + } + } + } + }, + // Input Base + MuiInputBase: { styleOverrides: { root: { + height: getSpacing(6), + padding: getSpacing(0, 2), ...themeTypography.body1, - alignItems: 'baseline', - marginBottom: getSpacing(1.5), - color: commonPalette.text.secondary, - '&:disabled': { - color: commonPalette.action.disabled + '& input': { + padding: 0, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + + '&::placeholder': { + opacity: 1, + color: commonPalette.text.hint + } }, - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body1.lineHeight}em` - } - }, + '&.MuiInputBase-formControl::after': { + top: 0, + transform: 'none', + opacity: 0, + transition: 'border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms' + }, + '&.MuiInputBase-formControl.Mui-focused::after': { + transform: 'none', + opacity: 1 + }, - positionStart: { - marginLeft: getSpacing(0.25) - }, + // Variants + '&.MuiFilledInput-root': { + borderRadius: getSpacing(0.5), + backgroundColor: commonPalette.default.background, - positionEnd: { - marginRight: getSpacing(0.25) - }, + '&:hover': { + backgroundColor: commonPalette.default.background + }, + '&::before': { + top: 0, + borderRadius: getSpacing(0.5), + border: '1px solid transparent', + transition: 'border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms' + }, + '&:hover:not(.Mui-disabled)::before': { + borderColor: commonPalette.text.primary + }, + '&::after': { + borderRadius: getSpacing(0.5), + border: '1px solid transparent' + }, + '&.Mui-focused': { + backgroundColor: commonPalette.background.paper, - marginDense: { - marginBottom: getSpacing(0), - alignItems: 'center', - ...themeTypography.body2, + '&::after': { + border: `2px solid ${commonPalette.primary.main}` + } + }, + '&.Mui-disabled': { + backgroundColor: commonPalette.default.background, - '& .MuiTypography-root': { - ...themeTypography.body2 + '&::before': { + borderBottomStyle: 'solid' + } + }, + '&.Mui-error::after': { + opacity: 1, + border: `2px solid ${commonPalette.error.light}` + } }, - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body2.lineHeight}em` + '&.MuiOutlinedInput-root': { + padding: getSpacing(0, 2), + + '&.MuiInputBase-sizeSmall': { + padding: getSpacing(0, 1.5) + }, + '& .MuiOutlinedInput-notchedOutline': { + top: 0, + borderColor: commonPalette.default.outlinedBorder, + transition: 'border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms' + }, + '&.Mui-error .MuiOutlinedInput-notchedOutline': { + border: `2px solid ${commonPalette.error.light}` + } + }, + + '&.MuiInput-underline': { + marginTop: 0, + padding: 0, + + '&::before': { + borderColor: commonPalette.default.outlinedBorder + }, + '&:hover:not(.Mui-disabled)::before': { + borderBottom: `1px solid ${commonPalette.text.primary}` + }, + '&:not(.Mui-disabled)::after': { + borderBottom: '1px solid transparent' + }, + '&.Mui-focused::after': { + borderBottom: `2px solid ${commonPalette.primary.main}` + }, + '&.Mui-error::after': { + opacity: 1, + borderBottom: `2px solid ${commonPalette.error.light}` + }, + '&.Mui-disabled::before': { + borderBottomStyle: 'solid' + } + }, + + // TextArea (multiline) + '&.MuiInputBase-multiline': { + height: 'auto', + minHeight: getSpacing(12), + alignItems: 'flex-start', + padding: getSpacing(1.5, 2), + + '& textarea': { + ...themeTypography.body1, + + '&::placeholder, &.Mui-disabled::placeholder': { + opacity: 1, + color: commonPalette.text.hint + } + }, + + '&.MuiInputBase-sizeSmall': { + minHeight: getSpacing(9), + padding: getSpacing(1, 1.5), + + '& textarea': { + ...themeTypography.body2 + } + } } - } - } - }, + }, - // Text Field - MuiTextField: { - defaultProps: { - variant: 'outlined' + // size + sizeSmall: { + height: getSpacing(4), + padding: getSpacing(0, 1.5), + + '& input': { + ...themeTypography.body2 + } + } } }, - // Form Helper Text - MuiFormHelperText: { + // Input Adornment + MuiInputAdornment: { styleOverrides: { root: { - ...themeTypography.caption, - '&.MuiFormHelperText-contained': { - marginTop: getSpacing(1) - } - }, - - marginDense: { - '&.MuiFormHelperText-contained': { - marginLeft: getSpacing(0) + '& .MuiTypography-root': { + ...themeTypography.body1, + color: commonPalette.text.secondary + }, + '&.MuiInputAdornment-sizeSmall': { + '& .MuiTypography-root': { + ...themeTypography.body2 + } + }, + '&.MuiInputAdornment-positionStart.MuiInputAdornment-root:not(.MuiInputAdornment-hiddenLabel)': + { + marginTop: 0 + }, + '& .MuiSvgIcon-root': { + fontSize: ICON_SIZE, + color: commonPalette.text.secondary + }, + '.Mui-disabled &': { + '& .MuiTypography-root, & .MuiSvgIcon-root': { + color: commonPalette.text.disabled + } } } } }, - // Form Control - MuiFormControl: { + // Form Helper Text + MuiFormHelperText: { styleOverrides: { root: { - width: '100%' + margin: 0, + marginTop: getSpacing(1) } } }, @@ -136,42 +270,15 @@ export const formsOverrides = { MuiInputLabel: { styleOverrides: { root: { - ...themeTypography.body1 - }, - - formControl: { - transform: 'translate(16px, 20px) scale(1)', - - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&.MuiFormControl-marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)' - } - } + position: 'static', + transform: 'none', + marginBottom: getSpacing(1), + ...themeTypography.caption, + fontWeight: 500, + color: commonPalette.text.primary }, - - outlined: { - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&.MuiFormControl-marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&.MuiInputLabel-shrink': { - transform: 'translate(0, -20px) scale(1)' - } - } + sizeSmall: { + marginBottom: getSpacing(0.5) } } }, @@ -180,6 +287,7 @@ export const formsOverrides = { MuiSelect: { defaultProps: { variant: 'outlined', + MenuProps: { anchorOrigin: { vertical: 'bottom', diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index ad59ec116..a1d29d939 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -1,3 +1,4 @@ +import { ICON_SIZE } from '../../themeConstants'; import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; @@ -24,11 +25,7 @@ export const navigationOverrides = { }, styleOverrides: { root: ({ ownerState }) => ({ - borderBottom: `1px solid ${commonPalette.black[12]}`, - - ...(ownerState.variant !== 'fullWidth' && { - display: 'inline-flex' - }) + borderBottom: `1px solid ${commonPalette.black[12]}` }), vertical: { @@ -88,7 +85,7 @@ export const navigationOverrides = { alignItems: 'center' }, '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body2.lineHeight}em`, + fontSize: ICON_SIZE, marginRight: getSpacing(1) } }, diff --git a/packages/react-ui/src/theme/themeConstants.js b/packages/react-ui/src/theme/themeConstants.js index dd9be0f58..d9e866d5e 100644 --- a/packages/react-ui/src/theme/themeConstants.js +++ b/packages/react-ui/src/theme/themeConstants.js @@ -1,3 +1,5 @@ +import { getSpacing } from './themeUtils'; + // Common export const SPACING = 8; @@ -9,3 +11,7 @@ export const BREAKPOINTS = { LG: 1280, XL: 1600 }; + +// Icons +export const ICON_SIZE = getSpacing(2.25); +export const ICON_SIZE_M = getSpacing(3); diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 30af268b3..0a25eb7a8 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -201,11 +201,6 @@ export interface TypographyProps extends MuiTypographyProps { style?: CSSProperties; } -// Button -export interface ButtonProps extends MuiButtonProps { - style?: CSSProperties; -} - // Tooltip data // Export types and component if we need it outsite C4R type TooltipDataProps = { diff --git a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js new file mode 100644 index 000000000..35be2fda2 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js @@ -0,0 +1,484 @@ +import React from 'react'; +import { Box, Grid, TextField } from '@mui/material'; +import Typography from '../../../src/components/atoms/Typography'; +import makeStyles from '@mui/styles/makeStyles'; + +const options = { + title: 'Atoms/Text Area', + component: TextField, + argTypes: { + variant: { + control: { + type: 'select', + options: ['outlined', 'filled'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium'] + } + }, + required: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + error: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + }, + placeholder: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const PlaygroundTemplate = (args) => ; + +const VariantsTemplate = ({ label, placeholder, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Filled'} + + + + + + + + {'Outlined'} + + + + + + ); +}; + +const LabelAndHelperTextTemplate = ({ label, placeholder, helperText, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Label + helper text'} + + + + + + + + {'Without label + helper text'} + + + + + + + + {'Only label'} + + + + + + + + {'Only helper text'} + + + + + + ); +}; + +const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + return ( + + + + Placeholder + + + + + + + + + + + + Empty + + + + + + + + + + + + Filled + + + + + + + + + + + + Focused + + + + + + + + + + + + Focused filled + + + + + + + + + + + + Disabled + + + + + + + + + + + + Disabled filled + + + + + + + + + + + + Error + + + + + + + + + + + + Error filled + + + + + + + + + + ); +}; + +const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Autosize'} + + + + + + + + + + {'Maximum height (rows="4")'} + + + + + + + ); +}; + +const commonArgs = { + label: 'Label text', + placeholder: 'Placeholder text', + helperText: 'Helper text.' +}; +const sizeArgs = { + helperText: 'This is a error message.', + defaultValue: 'Hello world' +}; + +const disabledControlsVariantsArgTypes = { + variant: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { + variant: { table: { disable: true } }, + error: { table: { disable: true } }, + defaultValue: { table: { disable: true } } +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { ...commonArgs }; + +export const Variants = VariantsTemplate.bind({}); +Variants.args = { ...commonArgs }; +Variants.argTypes = disabledControlsVariantsArgTypes; + +export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); +LabelAndHelperText.args = { ...commonArgs }; + +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...sizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; diff --git a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js index 6ba5b561f..64758ef5b 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -1,7 +1,9 @@ import React from 'react'; -import { Grid, InputAdornment, TextField } from '@mui/material'; -import { Visibility } from '@mui/icons-material'; +import { Box, Grid, InputAdornment, TextField } from '@mui/material'; +import { EuroOutlined, InfoOutlined } from '@mui/icons-material'; +import makeStyles from '@mui/styles/makeStyles'; import Typography from '../../../src/components/atoms/Typography'; +import PasswordField from '../../../src/components/atoms/PasswordField'; const options = { title: 'Atoms/Text Field', @@ -10,7 +12,7 @@ const options = { variant: { control: { type: 'select', - options: ['standard', 'filled', 'outlined'] + options: ['outlined', 'filled', 'standard'] } }, size: { @@ -37,21 +39,14 @@ const options = { type: 'boolean' } }, - multiline: { - defaultValue: false, - control: { - type: 'boolean' - } - }, label: { control: { type: 'text' } }, - margin: { + placeholder: { control: { - type: 'select', - options: ['dense', 'none', 'normal'] + type: 'text' } } }, @@ -61,276 +56,686 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -const Template = (args) => ; +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const startAdornmentText = Kg; +const startAdornmentIcon = ( + + + +); +const endAdornmentText = Kg; +const endAdornmentIcon = ( + + + +); + +const PlaygroundTemplate = (args) => ; + +const VariantsTemplate = ({ label, placeholder, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Filled'} + + + + + + + + {'Outlined'} + + + + + + + + {'Standard'} + + + + + + ); +}; + +const LabelAndHelperTextTemplate = ({ label, placeholder, helperText, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Label + helper text'} + + + + + + + + {'Without label + helper text'} + + + + + + + + {'Only label'} + + + + + + + + {'Only helper text'} + + + + + + ); +}; + +const PrefixAndSuffixTemplate = ({ + label, + placeholder, + startAdornment, + endAdornment, + ...rest +}) => { + const classes = useStyles(); -const TextFieldTemplate = ({ ...rest }) => { - const adornment = { - startAdornment: Kg, - endAdornment: ( - - - - ) - }; + return ( + + + + + {'Prefix and suffix (text)'} + + + + + + + + {'Prefix and suffix (icon)'} + + + + + + + + {'Prefix and suffix (mix)'} + + + + + + + + {'Only prefix'} + + + + + + + + {'Only suffix'} + + + + + + + + {'None'} + + + + + + ); +}; +const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { return ( + + + Placeholder + + + + + + + + + + + + Empty - - - - - - - - - - - - - + + + + + + + + + + + + + + Filled + + + + + + + + + + + + + + + Focused + + + + + + + + + - Active - - - - - - - - - - - - - - + Focused filled + + + + + + + + + + Disabled - - - - - - - - - - - - - + + + + + + + + - Has value - - - - - - - - - - - - - - + Disabled filled + + + + + + + + + - Empty Error - - - - - - - - - - - - - - + Error + + + + + + + + + - Value Error - - - - - - - - - - - - - - + Error filled + + + + + + + + + + + + ); +}; + +const PasswordFieldTemplate = ({ + label, + placeholder, + defaultValue, + helperText, + ...rest +}) => { + const classes = useStyles(); + + return ( + + + + + {'Default'} + + + + + + + + {'Custom component'} + + + ); }; -const MultilineTemplate = ({ ...rest }) => { +const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const classes = useStyles(); + return ( - - - - - - - - + + + + {'Overflow'} + + + + {'Default'} + + + + - - - + + + {'Grouping'} + + + + {'Pairing'} + + + + + + + + + + {'Types'} + + + + {'Examples'} + + + + + + ); }; -const commonArgs = { helperText: 'Helper text' }; -const disabledControlsArgTypes = { +const commonArgs = { + label: 'Label text', + placeholder: 'Placeholder text', + helperText: 'Helper text.' +}; +const sizeArgs = { + helperText: 'This is a error message.', + defaultValue: 'Hello world' +}; + +const disabledControlsVariantsArgTypes = { + variant: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { variant: { table: { disable: true } }, - disabled: { table: { disable: true } }, - required: { table: { disable: true } } + error: { table: { disable: true } }, + defaultValue: { table: { disable: true } } }; -export const Playground = Template.bind({}); -Playground.args = { ...commonArgs, label: 'placeholder' }; +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { ...commonArgs }; -export const Standard = TextFieldTemplate.bind({}); -Standard.args = { ...commonArgs }; -Standard.argTypes = disabledControlsArgTypes; +export const Variants = VariantsTemplate.bind({}); +Variants.args = { ...commonArgs }; +Variants.argTypes = disabledControlsVariantsArgTypes; -export const Small = TextFieldTemplate.bind({}); -Small.args = { ...commonArgs, size: 'small' }; -Small.argTypes = disabledControlsArgTypes; +export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); +LabelAndHelperText.args = { ...commonArgs }; -export const Multiline = MultilineTemplate.bind({}); -Multiline.args = { value: 'Hello world\nwith multiple lines' }; -Multiline.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' - } -}; +export const PrefixAndSuffix = PrefixAndSuffixTemplate.bind({}); +PrefixAndSuffix.args = { ...commonArgs }; -export const MultilineSmall = MultilineTemplate.bind({}); -MultilineSmall.args = { value: 'Hello world\nwith multiple lines', size: 'small' }; -MultilineSmall.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' - } -}; +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...sizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; + +export const Password = PasswordFieldTemplate.bind({}); +Password.args = { ...commonArgs }; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; diff --git a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js index aa7973323..97c5bae01 100644 --- a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -1,6 +1,12 @@ import React from 'react'; import { Box, Grid, Tab, Tabs } from '@mui/material'; -import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; +import { + LayersOutlined, + LocalOfferOutlined, + MapOutlined, + PlaceOutlined, + StoreOutlined +} from '@mui/icons-material'; import Typography from '../../../src/components/atoms/Typography'; const options = { @@ -76,11 +82,11 @@ const TemplateIcons = ({ label, wrapped, disabled, ...args }) => { return ( - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} disabled={disabled} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} disabled={disabled} /> ); }; @@ -94,11 +100,11 @@ const TemplateIconsAndText = ({ label, wrapped, disabled, ...args }) => { return ( - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} disabled={disabled} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} disabled={disabled} /> ); }; @@ -166,11 +172,11 @@ const TemplateVertical = ({ label, wrapped, disabled, ...args }) => { onChange={handleChange} aria-label='tabs example' > - } /> - } /> - } /> - } /> - } disabled={disabled} /> + } /> + } /> + } /> + } /> + } disabled={disabled} /> @@ -181,11 +187,16 @@ const TemplateVertical = ({ label, wrapped, disabled, ...args }) => { onChange={handleChange2} aria-label='tabs example' > - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} /> - } label={label} wrapped={wrapped} disabled={disabled} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } label={label} wrapped={wrapped} /> + } + label={label} + wrapped={wrapped} + disabled={disabled} + /> @@ -240,18 +251,13 @@ const BehaviorTemplate = (args) => { {'Hug Text'} {'Default behavior'} - - - } /> - } /> - } /> - + + + } /> + } /> + } /> + + @@ -267,11 +273,10 @@ const BehaviorTemplate = (args) => { onChange={handleChange2} aria-label='tabs example' variant='fullWidth' - {...args} > - } /> - } /> - } /> + } /> + } /> + } /> From c75791063b68368f7e306a82de708796b978d6cc Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 25 Nov 2022 10:06:49 +0100 Subject: [PATCH 052/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-12 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index d48c6a587..6d628056f 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 310428333..9f8e6551e 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0bc9b7674..cd80b670a 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ef0dba56e..22d42290a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 9ff713075..81758b1cc 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 374c03e16..d94458d41 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index c6d8a8390..a9fc5b39f 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index f85b6c109..820bdf202 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index bc94d2c8f..f990cfbaa 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 1275c26a525364267ac68161fd54f25948d14c17 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 25 Nov 2022 10:07:56 +0100 Subject: [PATCH 053/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 9f8e6551e..fd2081c3b 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index cd80b670a..134ae6daf 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 22d42290a..94ca61822 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index d94458d41..688d3490b 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index a9fc5b39f..5c65eaacb 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 820bdf202..3a9bca35e 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-11", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From c16f1d910ec0c96cfda07e50a4c5e8cf6014a0aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 1 Dec 2022 18:38:01 +0100 Subject: [PATCH 054/154] Select component adapted to the new design system (#544) --- CHANGELOG.md | 1 + UPGRADE.md | 9 + packages/react-ui/src/assets/ArrowDropIcon.js | 15 + .../src/components/atoms/SelectField.js | 91 +++ packages/react-ui/src/index.d.ts | 4 +- packages/react-ui/src/index.js | 4 +- .../src/theme/sections/components/buttons.js | 1 + .../theme/sections/components/dataDisplay.js | 12 + .../src/theme/sections/components/forms.js | 175 ++++- .../theme/sections/components/navigation.js | 34 +- packages/react-ui/src/types.d.ts | 13 + .../storybook/stories/atoms/Select.stories.js | 740 +++++++++++++----- .../stories/atoms/Text-area.stories.js | 36 + .../stories/atoms/Text-field.stories.js | 41 +- .../stories/organisms/Tabs.stories.js | 2 +- 15 files changed, 936 insertions(+), 242 deletions(-) create mode 100644 packages/react-ui/src/assets/ArrowDropIcon.js create mode 100644 packages/react-ui/src/components/atoms/SelectField.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 76eb7d5f4..ffb55feca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Select component adapted to the new design system [#544](https://github.com/CartoDB/carto-react/pull/544/) - TextField and TextArea component adapted to the new design system [#538](https://github.com/CartoDB/carto-react/pull/538/) - Tabs component adapted to the new design system [#537](https://github.com/CartoDB/carto-react/pull/537/) - Tooltip component adapted to the new design system [#536](https://github.com/CartoDB/carto-react/pull/536/) diff --git a/UPGRADE.md b/UPGRADE.md index e503ae3f9..47d206024 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -119,3 +119,12 @@ Instead of ` ` you can use: `react-ui/src/atoms/PasswordField` For external use: `import { PasswordField } from '@carto/react-ui';`. + +## Select Field + +We have a custom component to build the `placeholder` and `multiple selection` logic on top of TextField Mui component. + +Instead of ` ` or ` - Ten - Twenty - Thirty - - -); - -const SelectTemplate = ({ size, ...rest }) => { - const adornment = { - startAdornment: Kg, - endAdornment: ( - - - - ) +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const menuItems = [ + { + label: 'Ten', + value: '10' + }, + { + label: 'Twenty', + value: '20' + }, + { + label: 'Thirty', + value: '30' + } +]; + +const menuItemsLong = [ + { + label: 'table_openstreetmap_pointsofinterest', + value: '10Long' + }, + { + label: 'Twenty', + value: '20' + }, + { + label: 'Thirty', + value: '30' + } +]; + +const PlaygroundTemplate = (args) => ; + +const VariantsTemplate = ({ label, size, required, placeholder, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Filled'} + + + + + + + + {'Outlined'} + + + + + + + + {'Standard'} + + + + + + ); +}; + +const LabelAndHelperTextTemplate = ({ label, placeholder, helperText, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Label + helper text'} + + + + + + + + {'Without label + helper text'} + + + + + + + + {'Only label'} + + + + + + + + {'Only helper text'} + + + + + + ); +}; + +const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const [fixedValue, setFixedValue] = useState('Twenty'); + const [fixedValue2, setFixedValue2] = useState('Ten'); + const [fixedValue3, setFixedValue3] = useState('Thirty'); + const handleChange = (event) => { + setFixedValue(event.target.value); + }; + const handleChange2 = (event) => { + setFixedValue2(event.target.value); + }; + const handleChange3 = (event) => { + setFixedValue3(event.target.value); }; return ( - Empty + Placeholder + Custom component + + + + + + - - - - Label - - Helper text - - - - - Leading adornment - - Helper text - - + + - Active + Empty + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + - - - - Label - - Helper text - - - - - Leading adornment - - Helper text - - + + + {menuItems.map((option) => ( + + {option.label} + + ))} + - Disabled + Filled + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + + + + + {menuItems.map((option) => ( + + {option.label} + + ))} + - - - - Label - - Helper text - - - - - Leading adornment - - Helper text - - + + + {menuItems.map((option) => ( + + {option.label} + + ))} + - Has value + Focused - - - - Label - - Helper text - - - - - Leading adornment - - Helper text - - + + + + + + + + - Empty Error + Disabled - - - - Label - - Helper text - - - - - Leading adornment - - Helper text - - + + + + + + + + - Value Error + Error + + + - - - - Label - - Helper text - - - - - Leading adornment - - Helper text - - + + + + + + + + ); +}; + +const MultipleTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const classes = useStyles(); + + return ( + + + + + {'Default (custom component)'} + + + ); }; -export const Playground = Template.bind({}); +const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const classes = useStyles(); + + return ( + + + + {'Overflow'} + + + + {'Default'} + + + + + + + + {'Grouping'} + + + + {'Pairing'} + + + + + + + + + + {'Width'} + + + + {'Default (fullWidth)'} + + + + + + {'No fullWidth'} + + + + + + ); +}; + +const commonArgs = { + label: 'Label text', + placeholder: 'Placeholder text', + helperText: 'Helper text.' +}; +const sizeArgs = { + helperText: 'This is a error message.' +}; + +const disabledControlsVariantsArgTypes = { + variant: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { + variant: { table: { disable: true } }, + error: { table: { disable: true } }, + defaultValue: { table: { disable: true } } +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { ...commonArgs }; + +export const Variants = VariantsTemplate.bind({}); +Variants.args = { ...commonArgs }; +Variants.argTypes = disabledControlsVariantsArgTypes; + +export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); +LabelAndHelperText.args = { ...commonArgs }; + +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...sizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; -export const Standard = SelectTemplate.bind({}); -Standard.args = {}; +export const MultipleSelection = MultipleTemplate.bind({}); +MultipleSelection.args = { ...commonArgs }; -export const Small = SelectTemplate.bind({}); -Small.args = { size: 'small' }; +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; diff --git a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js index 35be2fda2..7bdbe60b3 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js @@ -406,6 +406,9 @@ const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...res return ( + + {'Height'} + {'Autosize'} @@ -439,6 +442,39 @@ const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...res /> + + + + {'Width'} + + + + {'Default (fullWidth)'} + + + + + + {'No fullWidth'} + + + + ); }; diff --git a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js index 64758ef5b..7c8bacbd7 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -1,6 +1,6 @@ import React from 'react'; import { Box, Grid, InputAdornment, TextField } from '@mui/material'; -import { EuroOutlined, InfoOutlined } from '@mui/icons-material'; +import { EuroOutlined, InfoOutlined, MapOutlined } from '@mui/icons-material'; import makeStyles from '@mui/styles/makeStyles'; import Typography from '../../../src/components/atoms/Typography'; import PasswordField from '../../../src/components/atoms/PasswordField'; @@ -80,7 +80,7 @@ const useStyles = makeStyles((theme) => ({ const startAdornmentText = Kg; const startAdornmentIcon = ( - + ); const endAdornmentText = Kg; @@ -627,7 +627,7 @@ const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...res {'Overflow'} - + {'Default'} @@ -654,6 +654,35 @@ const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...res + + + {'Width'} + + + + {'Default (fullWidth)'} + + + + + + {'No fullWidth'} + + + + + {'Types'} @@ -677,7 +706,11 @@ const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...res defaultValue='3560' type='number' InputProps={{ - startAdornment: startAdornmentIcon + startAdornment: ( + + + + ) }} helperText={helperText} /> diff --git a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js index 97c5bae01..a71108ce1 100644 --- a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -49,7 +49,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' }, status: { - type: 'readyToReview' + type: 'validated' } } }; From 7cf148e2539700d30380d635be6fff1825c15049 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 1 Dec 2022 18:53:00 +0100 Subject: [PATCH 055/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-13 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 6d628056f..b111c5b80 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index fd2081c3b..7cad1665a 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 134ae6daf..db16d85d9 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 94ca61822..57b2b127f 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 81758b1cc..f7edce487 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 688d3490b..83a1e41d4 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 5c65eaacb..4752c0eff 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 3a9bca35e..136f57e06 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index f990cfbaa..5dcb45b02 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 58245a79d877128f2d71cd7fbafb7697826ef189 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 1 Dec 2022 18:53:59 +0100 Subject: [PATCH 056/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 7cad1665a..00c5c62df 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index db16d85d9..b6e5f4752 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 57b2b127f..2a73b5ad4 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 83a1e41d4..b84c23570 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 4752c0eff..e22afd0d3 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 136f57e06..374a66ab0 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-12", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 72370d1dd0e68fb86fbe5cf68cedf2b298527984 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 1 Dec 2022 19:59:21 +0100 Subject: [PATCH 057/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-14 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index b111c5b80..8adf2bb62 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 00c5c62df..280b1cd4b 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index b6e5f4752..17cb0f90f 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 2a73b5ad4..6e2eb6304 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index f7edce487..7f4dfb15f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index b84c23570..9b9988d3f 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e22afd0d3..339debc63 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 374a66ab0..d53735b9f 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 5dcb45b02..fe879e6db 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 7fcb4cdd28da09b0655a2eeb60e6489e15dc066e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 1 Dec 2022 20:01:03 +0100 Subject: [PATCH 058/154] Bump to latest pre-release --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 280b1cd4b..b45de5be7 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 17cb0f90f..d28ef4e88 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 6e2eb6304..854a41fca 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 9b9988d3f..bc2b3a697 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 339debc63..8bee19f60 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d53735b9f..afd745464 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-13", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From d1df5eceec09e33beb4e49f1e181c8a767a9723e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 2 Dec 2022 19:42:31 +0100 Subject: [PATCH 059/154] Divider component adapted to the new design system (#546) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 2 +- .../stories/atoms/Divider.stories.js | 115 ++++++++++++------ 3 files changed, 80 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ffb55feca..ab37548c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) - Select component adapted to the new design system [#544](https://github.com/CartoDB/carto-react/pull/544/) - TextField and TextArea component adapted to the new design system [#538](https://github.com/CartoDB/carto-react/pull/538/) - Tabs component adapted to the new design system [#537](https://github.com/CartoDB/carto-react/pull/537/) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 5ceb3957d..9006ea580 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -16,7 +16,7 @@ export const dataDisplayOverrides = { borderColor: commonPalette.divider }, light: { - borderColor: commonPalette.grey[50] + borderColor: commonPalette.white[12] } } }, diff --git a/packages/react-ui/storybook/stories/atoms/Divider.stories.js b/packages/react-ui/storybook/stories/atoms/Divider.stories.js index d421b58e3..9e6fa8c1c 100644 --- a/packages/react-ui/storybook/stories/atoms/Divider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Divider.stories.js @@ -1,65 +1,106 @@ import React from 'react'; -import { Divider, Grid, List, ListItem, ListItemText } from '@mui/material'; -import { - FormatAlignLeft, - FormatAlignCenter, - FormatAlignRight, - FormatBold, - FormatItalic, - FormatUnderlined -} from '@mui/icons-material'; +import { Box, Divider, Grid } from '@mui/material'; const options = { title: 'Atoms/Divider', component: Divider, + argTypes: { + light: { + defaultValue: false, + control: { + type: 'boolean' + } + } + }, parameters: { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -const Template = ({ ...args }) => { +const Template = ({ light, ...args }) => { + return ( + + + + ); +}; + +const HorizontalTemplate = ({ ...args }) => { return ( - - - - - - - - - - - - - - + + + + + + + + + + + + + ); }; -const VerticalDividerTemplate = ({ ...args }) => { +const VerticalTemplate = ({ ...args }) => { return ( - - - - - - - - + + + + + + + + ); }; export const Playground = Template.bind({}); -export const ListWithDivider = Template.bind({}); +export const Horizontal = HorizontalTemplate.bind({}); -export const VerticalDivider = VerticalDividerTemplate.bind({}); -VerticalDivider.args = {}; +export const Vertical = VerticalTemplate.bind({}); From 7d55be584f3e5fe4b4c247f045e65e85bc06dc26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 2 Dec 2022 19:43:12 +0100 Subject: [PATCH 060/154] Fix disableElevation default prop (#547) --- packages/react-ui/src/theme/sections/components/buttons.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 31b026c1c..db7d59f76 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -13,8 +13,7 @@ export const buttonsOverrides = { // Button Base MuiButtonBase: { defaultProps: { - disableRipple: true, - disableElevation: true + disableRipple: true }, styleOverrides: { @@ -29,6 +28,10 @@ export const buttonsOverrides = { // Button MuiButton: { + defaultProps: { + disableElevation: true + }, + styleOverrides: { root: ({ ownerState }) => ({ maxWidth: '192px', From 7753293a3ee2e3e90cb3bf4e7841c621b128d7a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 2 Dec 2022 19:50:06 +0100 Subject: [PATCH 061/154] UploadField component adapted to the new design system (#545) --- CHANGELOG.md | 1 + UPGRADE.md | 11 + .../src/components/atoms/SelectField.js | 12 +- .../src/components/molecules/UploadField.js | 191 +++++++ .../src/components/organisms/InputFile.js | 143 ----- packages/react-ui/src/index.d.ts | 4 +- packages/react-ui/src/index.js | 4 +- .../src/theme/sections/components/forms.js | 18 +- packages/react-ui/src/types.d.ts | 20 +- ...lect.stories.js => SelectField.stories.js} | 2 +- .../stories/atoms/Text-area.stories.js | 2 +- .../stories/atoms/Text-field.stories.js | 2 +- .../stories/molecules/UploadField.stories.js | 487 ++++++++++++++++++ .../stories/organisms/InputFile.stories.js | 146 ------ 14 files changed, 739 insertions(+), 304 deletions(-) create mode 100644 packages/react-ui/src/components/molecules/UploadField.js delete mode 100644 packages/react-ui/src/components/organisms/InputFile.js rename packages/react-ui/storybook/stories/atoms/{Select.stories.js => SelectField.stories.js} (99%) create mode 100644 packages/react-ui/storybook/stories/molecules/UploadField.stories.js delete mode 100644 packages/react-ui/storybook/stories/organisms/InputFile.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index ab37548c7..d0a6e6b51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Not released - Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) +- UploadField component created for the new design system [#545](https://github.com/CartoDB/carto-react/pull/545/) - Select component adapted to the new design system [#544](https://github.com/CartoDB/carto-react/pull/544/) - TextField and TextArea component adapted to the new design system [#538](https://github.com/CartoDB/carto-react/pull/538/) - Tabs component adapted to the new design system [#537](https://github.com/CartoDB/carto-react/pull/537/) diff --git a/UPGRADE.md b/UPGRADE.md index 47d206024..13231ff3a 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -128,3 +128,14 @@ Instead of ` ` or ` + + ); +} + +UploadField.defaultProps = { + placeholder: 'Drag and drop your file or click to browse', + dragPlaceholder: 'Drop your file here...', + buttonText: 'Browse', + accept: ['application/JSON'], + multiple: false, + error: false, + files: [], + onChange: (files) => files +}; + +UploadField.propTypes = { + placeholder: PropTypes.string, + dragPlaceholder: PropTypes.string, + buttonText: PropTypes.string, + accept: PropTypes.array, + multiple: PropTypes.bool, + error: PropTypes.bool, + files: PropTypes.array, + onChange: PropTypes.func.isRequired +}; + +export default UploadField; diff --git a/packages/react-ui/src/components/organisms/InputFile.js b/packages/react-ui/src/components/organisms/InputFile.js deleted file mode 100644 index 371525284..000000000 --- a/packages/react-ui/src/components/organisms/InputFile.js +++ /dev/null @@ -1,143 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import PropTypes from 'prop-types'; -import { Box, Button } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../atoms/Typography'; - -const useStyles = makeStyles((theme) => ({ - inputFile: { - flex: 1, - width: '100%' - }, - inputWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - flex: 1, - height: theme.spacing(4.5), - marginRight: theme.spacing(1.5), - padding: theme.spacing(0, 1), - border: `2px solid ${theme.palette.action.disabled}`, - borderRadius: theme.spacing(0.5), - transition: theme.transitions.create(['border'], { - duration: theme.transitions.duration.short, - easing: theme.transitions.easing.easeInOut - }) - }, - inputWrapperOver: { - border: `2px solid ${theme.palette.primary.light}` - }, - placeholder: { - opacity: 0.42, - maxWidth: 'calc(100% - 110px)' - }, - placeholderFiles: { - opacity: 1 - } -})); - -function InputFile(props) { - const classes = useStyles(); - const uploadInputRef = useRef(null); - const [filesText, setFilesText] = useState(''); - const [over, setOver] = useState(false); - - useEffect(() => { - if (props.files.length === 0) { - setFilesText(''); - } else if (props.files.length === 1) { - setFilesText(props.files[0].name); - } else { - setFilesText(`${props.files.length} files selected`); - } - }, [props.files]); - - const handleBrowse = () => { - uploadInputRef.current?.click(); - }; - - const handleDragOver = (event) => { - event.preventDefault(); - setOver(true); - }; - - const handleDragLeave = (event) => { - event.preventDefault(); - setOver(false); - }; - - const handleDrop = (event) => { - event.preventDefault(); - - const items = event.dataTransfer.items; - const newFiles = getAllFiles(items); - props.onChange(newFiles); - }; - - const getAllFiles = (items) => { - const newFiles = []; - for (let item of items) { - if (item.kind === 'file') { - const file = item.getAsFile(); - newFiles.push(file); - } - } - - return newFiles; - }; - - const handleFiles = (event) => { - const newFiles = Array.from(event.target.files); - props.onChange(newFiles); - }; - - return ( - - - {filesText || props.placeholder} - - - - - ); -} - -InputFile.defaultProps = { - placeholder: 'Drag and drop your file or click to browse', - buttonText: 'Browse', - accept: 'application/JSON', - multiple: false, - files: [], - onChange: (files) => files -}; - -InputFile.propTypes = { - placeholder: PropTypes.string, - buttonText: PropTypes.string, - accept: PropTypes.string, - multiple: PropTypes.bool, - files: PropTypes.array, - onChange: PropTypes.func.isRequired -}; - -export default InputFile; diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index fad0333a5..574a1b71a 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -26,6 +26,7 @@ import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; import PasswordField from './components/atoms/PasswordField'; import SelectField from './components/atoms/SelectField'; +import UploadField from './components/molecules/UploadField'; export { theme, @@ -56,5 +57,6 @@ export { Typography, Button, PasswordField, - SelectField + SelectField, + UploadField }; diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index ad9b58031..6bebe41ad 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -26,6 +26,7 @@ import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; import PasswordField from './components/atoms/PasswordField'; import SelectField from './components/atoms/SelectField'; +import UploadField from './components/molecules/UploadField'; const featureSelectionIcons = { CursorIcon, @@ -61,5 +62,6 @@ export { Typography, Button, PasswordField, - SelectField + SelectField, + UploadField }; diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 3ffd25abf..f3be1b6d5 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -80,7 +80,7 @@ export const formsOverrides = { '& .MuiInputBase-root': { padding: 0, - '&.MuiOutlinedInput-root': { + '&.MuiOutlinedInput-root, &.MuiFilledInput-root': { padding: 0 }, '& .MuiInputAdornment-positionEnd': { @@ -110,7 +110,8 @@ export const formsOverrides = { } }, '& .MuiSelect-icon': { - right: getSpacing(2) + right: getSpacing(2), + color: commonPalette.text.secondary }, '& .MuiSelect-iconStandard': { right: 0 @@ -118,6 +119,9 @@ export const formsOverrides = { }, '& .MuiInputBase-sizeSmall': { + '&.MuiInputBase-root.MuiFilledInput-root': { + padding: 0 + }, '& .MuiSelect-select': { ...themeTypography.body2, @@ -170,6 +174,7 @@ export const formsOverrides = { // Variants '&.MuiFilledInput-root': { + padding: getSpacing(0, 2), borderRadius: getSpacing(0.5), backgroundColor: commonPalette.default.background, @@ -189,6 +194,9 @@ export const formsOverrides = { borderRadius: getSpacing(0.5), border: '1px solid transparent' }, + '&.MuiInputBase-sizeSmall': { + padding: getSpacing(0, 1.5) + }, '&.Mui-focused': { backgroundColor: commonPalette.background.paper, @@ -218,6 +226,9 @@ export const formsOverrides = { '&.Mui-focused': { backgroundColor: commonPalette.background.paper }, + '&.Mui-disabled': { + backgroundColor: commonPalette.default.background + }, '& .MuiOutlinedInput-notchedOutline': { top: 0, borderColor: commonPalette.default.outlinedBorder, @@ -376,7 +387,8 @@ export const formsOverrides = { padding: 0, '& .MuiSelect-icon': { - right: getSpacing(2) + right: getSpacing(2), + color: commonPalette.text.secondary }, '& .MuiSelect-iconStandard': { right: 0 diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index fc90ca0e9..a3cd55f38 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,8 +1,5 @@ import { GroupDateTypes } from '@carto/react-core'; -import { - ButtonProps as MuiButtonProps, - TypographyProps as MuiTypographyProps -} from '@mui/material'; +import { TextFieldProps, TypographyProps as MuiTypographyProps } from '@mui/material'; import { CSSProperties } from 'react'; export type WrapperWidgetUI = { @@ -216,7 +213,7 @@ type TooltipDataProps = { }; // SelectField -export interface SelectFieldProps { +export interface SelectFieldProps extends TextFieldProps { items: [ { label: string; @@ -225,5 +222,16 @@ export interface SelectFieldProps { ]; multiple?: boolean; placeholder: string; - size?: 'small' | 'medium' | 'large'; + size?: 'small' | 'medium'; +} + +export interface UploadFieldProps extends TextFieldProps { + placeholder?: string; + dragPlaceholder?: string; + buttonText?: string; + accept?: string[]; + multiple?: boolean; + error?: boolean; + files?: []; + onChange: (file?: File | null) => void; } diff --git a/packages/react-ui/storybook/stories/atoms/Select.stories.js b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/atoms/Select.stories.js rename to packages/react-ui/storybook/stories/atoms/SelectField.stories.js index 9c64252b7..396b90951 100644 --- a/packages/react-ui/storybook/stories/atoms/Select.stories.js +++ b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js @@ -108,7 +108,7 @@ const menuItemsLong = [ const PlaygroundTemplate = (args) => ; -const VariantsTemplate = ({ label, size, required, placeholder, ...rest }) => { +const VariantsTemplate = ({ label, required, placeholder, ...rest }) => { const classes = useStyles(); return ( diff --git a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js index 7bdbe60b3..f0d7db739 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js @@ -54,7 +54,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js index 7c8bacbd7..120a84119 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -56,7 +56,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js new file mode 100644 index 000000000..068daf31d --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js @@ -0,0 +1,487 @@ +import React, { useState } from 'react'; +import { Box, Grid } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import Typography from '../../../src/components/atoms/Typography'; +import UploadField from '../../../src/components/molecules/UploadField'; + +const options = { + title: 'Molecules/UploadField', + component: UploadField, + argTypes: { + variant: { + control: { + type: 'select', + options: ['outlined', 'filled'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium'] + } + }, + required: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + error: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + }, + placeholder: { + control: { + type: 'text' + } + }, + dragPlaceholder: { + control: { + type: 'text' + } + }, + buttonText: { + control: { + type: 'text' + } + }, + files: { + defaultValue: [], + description: 'Files handled by the input.' + }, + accept: { + defaultValue: ['application/JSON'], + description: + 'Array of strings that defines the file types the file input should accept.', + control: { + type: 'string' + } + }, + multiple: { + defaultValue: false, + description: 'Specifies that multiple files can be chosen at once.', + control: { + type: 'boolean' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const Template = ({ ...args }) => { + const [files, setFiles] = useState([]); + const handleUploadFieldChange = (files) => { + setFiles(files); + }; + + return ; +}; + +const VariantsTemplate = ({ label, required, placeholder, dragPlaceholder, ...rest }) => { + const classes = useStyles(); + const [files, setFiles] = useState([]); + const [files2, setFiles2] = useState([]); + const handleUploadFieldChange = (files) => { + setFiles(files); + }; + const handleUploadFieldChange2 = (files) => { + setFiles2(files); + }; + + return ( + + + + + {'Filled'} + + + + + + + + {'Outlined'} + + + + + + ); +}; + +const LabelAndHelperTextTemplate = ({ label, placeholder, helperText, ...rest }) => { + const classes = useStyles(); + const [files, setFiles] = useState([]); + const [files2, setFiles2] = useState([]); + const [files3, setFiles3] = useState([]); + const [files4, setFiles4] = useState([]); + const handleUploadFieldChange = (files) => { + setFiles(files); + }; + const handleUploadFieldChange2 = (files) => { + setFiles2(files); + }; + const handleUploadFieldChange3 = (files) => { + setFiles3(files); + }; + const handleUploadFieldChange4 = (files) => { + setFiles4(files); + }; + + return ( + + + + + {'Label + helper text'} + + + + + + + + {'Without label + helper text'} + + + + + + + + {'Only label'} + + + + + + + + {'Only helper text'} + + + + + + ); +}; + +const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const [files, setFiles] = useState([]); + const [files2, setFiles2] = useState([]); + const [files3, setFiles3] = useState([]); + const [files4, setFiles4] = useState([]); + const [files5, setFiles5] = useState([]); + const [files6, setFiles6] = useState([]); + const handleUploadFieldChange = (files) => { + setFiles(files); + }; + const handleUploadFieldChange2 = (files) => { + setFiles2(files); + }; + const handleUploadFieldChange3 = (files) => { + setFiles3(files); + }; + const handleUploadFieldChange4 = (files) => { + setFiles4(files); + }; + const handleUploadFieldChange5 = (files) => { + setFiles5(files); + }; + const handleUploadFieldChange6 = (files) => { + setFiles6(files); + }; + + return ( + + + + Default + + + + + + + + + + + + Focused + + + + + + + + + + + + Disabled + + + + + + + + + + + + Error + + + + + + + + + + ); +}; + +const MultipleTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const classes = useStyles(); + const [files, setFiles] = useState([]); + const handleUploadFieldChange = (files) => { + setFiles(files); + }; + + return ( + + + + + {'Default'} + + + + + + ); +}; + +const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { + const classes = useStyles(); + const [files, setFiles] = useState([]); + const handleUploadFieldChange = (files) => { + setFiles(files); + }; + + return ( + + + + {'Overflow'} + + + + {'Default'} + + + + + + ); +}; + +const commonArgs = { + label: 'Label text', + placeholder: 'Drag and drop your file or click to browse', + dragPlaceholder: 'Drop your file here...', + helperText: 'Upload a CSV or GeoJSON file, or a zip package with your Shapefile', + buttonText: 'Browse', + accept: ['application/JSON', 'image/*'] +}; +const sizeArgs = { + helperText: 'This is a error message.' +}; + +const disabledControlsVariantsArgTypes = { + variant: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { + variant: { table: { disable: true } }, + error: { table: { disable: true } }, + defaultValue: { table: { disable: true } } +}; + +export const Playground = Template.bind({}); +Playground.args = { ...commonArgs }; + +export const Variants = VariantsTemplate.bind({}); +Variants.args = { ...commonArgs }; +Variants.argTypes = disabledControlsVariantsArgTypes; + +export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); +LabelAndHelperText.args = { ...commonArgs }; + +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...sizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; + +export const MultipleSelection = MultipleTemplate.bind({}); +MultipleSelection.args = { ...commonArgs }; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; diff --git a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js deleted file mode 100644 index 33456982c..000000000 --- a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js +++ /dev/null @@ -1,146 +0,0 @@ -import { Box, Button, CircularProgress, FormControl, InputLabel } from '@mui/material'; -import React, { useState } from 'react'; -import InputFile from '../../../src/components/organisms/InputFile'; -import { Alert } from '@mui/material'; -import UploadIcon from '../../../src/assets/UploadIcon'; -import Typography from '../../../src/components/atoms/Typography'; - -const options = { - title: 'Organisms/InputFile', - component: InputFile, - argTypes: { - placeholder: { - defaultValue: 'Drag and drop your file or click to browse', - description: 'Text to display as input placeholder.', - control: { - type: 'text' - } - }, - buttonText: { - defaultValue: 'Browse', - description: 'Text to display on the browse button.' - }, - files: { - defaultValue: [], - description: 'Files handled by the input.' - }, - accept: { - defaultValue: 'application/JSON', - description: 'String that defines the file types the file input should accept.', - control: { - type: 'string' - } - }, - multiple: { - defaultValue: false, - description: 'Specifies that multiple files can be chosen at once.', - control: { - type: 'boolean' - } - } - }, - parameters: { - docs: { - source: { - type: 'auto' - } - }, - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' - } - } -}; -export default options; - -const Template = ({ ...args }) => ; - -const ExampleTemplate = () => { - const [files, setFiles] = useState([]); - const [uploading, setUploading] = useState(false); - const [alert, setAlert] = useState(); - - const handleInputFileChange = (files) => { - // TODO: validate files - setAlert({ - severity: 'warning', - message: 'Some files are too big. The upload will take some time.', - actionText: 'Close' - }); - - setFiles(files); - }; - - const handleUpload = () => { - setUploading(true); - - setTimeout(() => { - setUploading(false); - setFiles([]); - - setAlert({ - severity: 'error', - message: 'Oops! We seem to have a problem with the format of your dataset.', - actionText: 'Close' - }); - }, 2000); - }; - - return ( -
- - Import data - - - - - - - Upload a CSV or GeoJSON file, or a zip package with your Shapefile - - - - - {alert && ( - - setAlert(null)}> - {alert.message} - - - )} -
- ); -}; - -export const Default = Template.bind({}); - -export const Example = ExampleTemplate.bind({}); -Example.parameters = { - docs: { - source: { - type: 'code' - } - } -}; From 7f6f431923fb462b2e1d83517db045481ccdaf40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 2 Dec 2022 20:04:41 +0100 Subject: [PATCH 062/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-15 --- lerna.json | 2 +- packages/react-api/package.json | 8 ++++---- packages/react-auth/package.json | 4 ++-- packages/react-basemaps/package.json | 4 ++-- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 6 +++--- packages/react-ui/package.json | 4 ++-- packages/react-widgets/package.json | 12 ++++++------ packages/react-workers/package.json | 4 ++-- 9 files changed, 23 insertions(+), 23 deletions(-) diff --git a/lerna.json b/lerna.json index 8adf2bb62..e03101cc3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index b45de5be7..f593f11ab 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d28ef4e88..3fb0eeeba 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 854a41fca..ae6dcf54c 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7f4dfb15f..29dcc6a48 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index bc2b3a697..1bc977659 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 8bee19f60..8cbe1cf3b 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index afd745464..d667e0ef9 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index fe879e6db..7ea99e2c0 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-14", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-15", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From a53f16c8708eab484b08cca520a155f67e5084d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 15 Dec 2022 09:24:33 +0100 Subject: [PATCH 063/154] Design changes in UploadField component (#548) --- CHANGELOG.md | 1 + .../src/components/molecules/UploadField.js | 49 ++++++++++++------- packages/react-ui/src/types.d.ts | 5 +- .../stories/atoms/Divider.stories.js | 2 +- .../stories/atoms/SelectField.stories.js | 2 +- .../stories/molecules/UploadField.stories.js | 12 +---- 6 files changed, 35 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d0a6e6b51..6864a9b73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Design changes in UploadField component [#548](https://github.com/CartoDB/carto-react/pull/548/) - Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) - UploadField component created for the new design system [#545](https://github.com/CartoDB/carto-react/pull/545/) - Select component adapted to the new design system [#544](https://github.com/CartoDB/carto-react/pull/544/) diff --git a/packages/react-ui/src/components/molecules/UploadField.js b/packages/react-ui/src/components/molecules/UploadField.js index 8ac448d6d..eeb3f3cbf 100644 --- a/packages/react-ui/src/components/molecules/UploadField.js +++ b/packages/react-ui/src/components/molecules/UploadField.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import { Button, IconButton, InputAdornment, TextField } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; @@ -8,6 +8,7 @@ const useStyles = makeStyles((theme) => ({ uploadField: { '& .MuiInputBase-root': { cursor: 'pointer', + paddingRight: theme.spacing(1), '& input': { cursor: 'pointer' @@ -47,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ } })); -function UploadField(props) { +function UploadField({ buttonText, accept, files, ...props }) { const classes = useStyles(); const uploadInputRef = useRef(null); const textFieldRef = useRef(null); @@ -55,15 +56,17 @@ function UploadField(props) { const [filesText, setFilesText] = useState(''); const [dragOver, setDragOver] = useState(false); + const isSmall = props.size === 'small'; + useEffect(() => { - if (props.files.length === 0) { + if (files.length === 0) { setFilesText(''); - } else if (props.files.length === 1) { - setFilesText(props.files[0].name); + } else if (files.length === 1) { + setFilesText(files[0].name); } else { - setFilesText(`${props.files.length} files selected`); + setFilesText(`${files.length} files selected`); } - }, [props.files]); + }, [files]); const handleBrowse = () => { uploadInputRef.current?.click(); @@ -111,14 +114,26 @@ function UploadField(props) { setFilesText(''); }; - const dragPlaceholderText = dragOver ? props.dragPlaceholder : props.placeholder; + const getPlaceholder = useMemo(() => { + const multipleSuffix = props.multiple ? '(s)' : ''; + const defaultPlaceholder = `Drag and drop your file${multipleSuffix} or click to browse`; + const dragPlaceholder = `Drop your file${multipleSuffix} here...`; + + let placeholderText; + if (dragOver) { + placeholderText = dragPlaceholder; + } else { + placeholderText = props.placeholder || defaultPlaceholder; + } + return placeholderText; + }, [dragOver, props.multiple, props.placeholder]); return ( <> {!filesText ? ( ) : ( @@ -158,7 +173,7 @@ function UploadField(props) { ref={uploadInputRef} style={{ display: 'none' }} type='file' - accept={props.accept} + accept={accept} multiple={props.multiple} onChange={handleFiles} /> @@ -167,25 +182,21 @@ function UploadField(props) { } UploadField.defaultProps = { - placeholder: 'Drag and drop your file or click to browse', - dragPlaceholder: 'Drop your file here...', buttonText: 'Browse', accept: ['application/JSON'], - multiple: false, - error: false, files: [], onChange: (files) => files }; UploadField.propTypes = { placeholder: PropTypes.string, - dragPlaceholder: PropTypes.string, buttonText: PropTypes.string, accept: PropTypes.array, multiple: PropTypes.bool, error: PropTypes.bool, files: PropTypes.array, - onChange: PropTypes.func.isRequired + onChange: PropTypes.func.isRequired, + size: PropTypes.oneOf(['small', 'medium']) }; export default UploadField; diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index a3cd55f38..a6c59c80b 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -225,13 +225,10 @@ export interface SelectFieldProps extends TextFieldProps { size?: 'small' | 'medium'; } +// UploadField export interface UploadFieldProps extends TextFieldProps { - placeholder?: string; - dragPlaceholder?: string; buttonText?: string; accept?: string[]; - multiple?: boolean; - error?: boolean; files?: []; onChange: (file?: File | null) => void; } diff --git a/packages/react-ui/storybook/stories/atoms/Divider.stories.js b/packages/react-ui/storybook/stories/atoms/Divider.stories.js index 9e6fa8c1c..cb8744bf1 100644 --- a/packages/react-ui/storybook/stories/atoms/Divider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Divider.stories.js @@ -18,7 +18,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js index 396b90951..850063763 100644 --- a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js +++ b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js @@ -55,7 +55,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' }, status: { - type: 'readyToReview' + type: 'validated' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js index 068daf31d..4de33d7f0 100644 --- a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js +++ b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js @@ -48,11 +48,6 @@ const options = { type: 'text' } }, - dragPlaceholder: { - control: { - type: 'text' - } - }, buttonText: { control: { type: 'text' @@ -114,7 +109,7 @@ const Template = ({ ...args }) => { return ; }; -const VariantsTemplate = ({ label, required, placeholder, dragPlaceholder, ...rest }) => { +const VariantsTemplate = ({ label, required, placeholder, ...rest }) => { const classes = useStyles(); const [files, setFiles] = useState([]); const [files2, setFiles2] = useState([]); @@ -138,7 +133,6 @@ const VariantsTemplate = ({ label, required, placeholder, dragPlaceholder, ...re files={files} label={label} placeholder={placeholder} - dragPlaceholder={dragPlaceholder} onChange={handleUploadFieldChange} /> @@ -154,7 +148,6 @@ const VariantsTemplate = ({ label, required, placeholder, dragPlaceholder, ...re files={files2} label={label} placeholder={placeholder} - dragPlaceholder={dragPlaceholder} onChange={handleUploadFieldChange2} /> @@ -443,10 +436,7 @@ const BehaviorTemplate = ({ label, placeholder, defaultValue, helperText, ...res const commonArgs = { label: 'Label text', - placeholder: 'Drag and drop your file or click to browse', - dragPlaceholder: 'Drop your file here...', helperText: 'Upload a CSV or GeoJSON file, or a zip package with your Shapefile', - buttonText: 'Browse', accept: ['application/JSON', 'image/*'] }; const sizeArgs = { From 23843ba84cbab43f22a66d96f9b9efc26d7f7c8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 15 Dec 2022 09:27:14 +0100 Subject: [PATCH 064/154] Chip component adapted to the new design system (#551) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 190 ++++-- .../react-ui/storybook/.storybook/main.js | 3 +- .../react-ui/storybook/assets/avatar.jpeg | Bin 0 -> 3909 bytes .../stories/molecules/Avatar.stories.js | 364 +++++++++++ .../stories/molecules/Chip.stories.js | 595 ++++++++++++++++-- .../stories/molecules/UploadField.stories.js | 2 +- 7 files changed, 1060 insertions(+), 95 deletions(-) create mode 100644 packages/react-ui/storybook/assets/avatar.jpeg create mode 100644 packages/react-ui/storybook/stories/molecules/Avatar.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 6864a9b73..1994c8ee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Chip component adapted to the new design system [#551](https://github.com/CartoDB/carto-react/pull/551/) - Design changes in UploadField component [#548](https://github.com/CartoDB/carto-react/pull/548/) - Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) - UploadField component created for the new design system [#545](https://github.com/CartoDB/carto-react/pull/545/) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 9006ea580..22355ccf9 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -222,83 +222,173 @@ export const dataDisplayOverrides = { // Chip MuiChip: { + defaultProps: { + color: 'primary' + }, + styleOverrides: { root: { - backgroundColor: commonPalette.grey[100], - '&:hover': { - backgroundColor: commonPalette.grey[200] - }, + maxWidth: '192px', + padding: getSpacing(0, 0.5), + '& .MuiAvatar-root': { - backgroundColor: '#7f3c8d', - color: commonPalette.common.white - } - }, - colorPrimary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100], - color: commonPalette.text.primary + width: ICON_SIZE_M, + height: ICON_SIZE_M, + margin: 0, + color: commonPalette.secondary.contrastText, + backgroundColor: commonPalette.background.paper }, - '&:hover': { - backgroundColor: commonPalette.primary.dark + '& .MuiChip-icon': { + margin: 0, + marginLeft: getSpacing(0.5) + }, + '& img': { + width: ICON_SIZE_M, + height: ICON_SIZE_M + }, + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground, + + '& .MuiChip-deleteIcon, & .MuiChip-icon': { + color: commonPalette.action.disabled + } } }, - colorSecondary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100] - }, - '&:hover': { - backgroundColor: commonPalette.secondary.light + + // Variants + filled: { + border: 0, + backgroundColor: commonPalette.default.main, + + '& .MuiChip-iconColorPrimary': { + color: commonPalette.primary.contrastText } }, - label: { - fontFamily: '"Open Sans", sans-serif', - letterSpacing: 0.25 + filledPrimary: { + backgroundColor: commonPalette.primary.main }, - labelSmall: { - fontSize: themeTypography.caption.fontSize, - fontWeight: themeTypography.fontWeightLight + filledSecondary: { + backgroundColor: commonPalette.secondary.main }, outlined: { - transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + borderColor: commonPalette.default.outlinedBorder, + '&.Mui-disabled': { + borderColor: commonPalette.default.outlinedBorder, backgroundColor: 'transparent' - }, - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.grey[200], - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } } }, outlinedPrimary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.primary.dark, - color: commonPalette.primary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } - } + borderColor: commonPalette.primary.main }, outlinedSecondary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.secondary.dark, - color: commonPalette.secondary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' + borderColor: commonPalette.secondary.main + }, + + // Sizes + sizeSmall: { + '& img': { + width: ICON_SIZE, + height: ICON_SIZE + }, + '& .MuiAvatar-root': { + width: ICON_SIZE, + height: ICON_SIZE + }, + '& .MuiChip-icon': { + marginLeft: getSpacing(0.25) + } + }, + + // Inner elements + label: { + ...themeTypography.button, + padding: getSpacing(0, 0.75) + }, + labelSmall: { + ...themeTypography.caption, + fontWeight: 500, + padding: getSpacing(0, 0.5) + }, + deleteIcon: { + width: ICON_SIZE, + height: ICON_SIZE, + margin: 0, + marginLeft: '2px', // Forced to a non-standard value to meet with design + marginRight: '3px', // Forced to a non-standard value to meet with design + transition: 'color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', + + '&.MuiChip-deleteIconColorDefault': { + color: commonPalette.text.secondary, + + '&:hover': { + color: commonPalette.text.primary } } }, + deleteIconSmall: { + width: getSpacing(2), + height: getSpacing(2), + marginRight: 0 + }, + clickable: { - '&:focus': { - webkitTapHighlightColor: 'none' + '&:active': { + boxShadow: 'none' + }, + '&:hover': { + '& .MuiChip-deleteIconColorDefault': { + color: commonPalette.text.primary + } + }, + + '&.MuiChip-outlined': { + transitionProperty: 'background, color, border-color', + transitionDuration: '300ms', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + + '&:hover': { + backgroundColor: 'transparent', + + '&.MuiChip-colorPrimary': { + color: commonPalette.primary.dark, + borderColor: commonPalette.primary.dark + }, + '&.MuiChip-colorSecondary': { + color: commonPalette.secondary.dark, + borderColor: commonPalette.secondary.dark + }, + '&.MuiChip-colorDefault': { + borderColor: commonPalette.default.dark + } + } + }, + '&.MuiChip-filled': { + '&:hover': { + '&.MuiChip-colorSecondary': { + backgroundColor: commonPalette.secondary.light + }, + '&.MuiChip-colorDefault': { + backgroundColor: commonPalette.default.dark + } + } } } } }, + // Avatar + MuiAvatar: { + styleOverrides: { + root: { + color: commonPalette.secondary.contrastText, + backgroundColor: commonPalette.secondary.main, + border: `1px solid ${commonPalette.action.hover}` + } + } + }, + // Skeleton MuiSkeleton: { defaultProps: { diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index bdb261c15..20bfdc493 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -6,5 +6,6 @@ module.exports = { 'storybook-addon-designs', '@storybook/addon-viewport', '@etchteam/storybook-addon-status' - ] + ], + staticDirs: ['../assets'] }; diff --git a/packages/react-ui/storybook/assets/avatar.jpeg b/packages/react-ui/storybook/assets/avatar.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..00e8755c8e03c1ea600e78b72df8c98ef4055bf0 GIT binary patch literal 3909 zcmb7?c{J4j_s8F39m+BcC1fmvj+Bgry_QVNybSTnX{ZS2d~l_g6g zF_sL<$NI5`kfrkT{hjmso!`H|$35ru$9>*=&-2{-I{kV&2XG>d5Jmt91OTA308XcY zNPv;y4Eq1POpJ_7U^XzAnHkJ^?mP<{Hz$;vi<65BdO?s6$}7Oj#dS&alE7slVPRn? zpP0B9?1~^v7zScwVgfURIly2J7!MZ@?ElSa2LJ&B;XpV&2m;VSK=csM=?5V3%p)V{ zKUV(-W;%L?GlL+269CblK}XNX#K8O?6?CQmj1VR+VQzU{W;E2rU*str^_E_bYqh=iD_PVz&fn$MyX#>E#hA0D${tVEyZt1?^7WKhN#!9dTG><6Wq%dYB;DBP1n8x+_Atb|Ld270%yIen4*k zg&6gw-_MGicCR;izMJLGECD-EN_)%eZK^JA=9D#t#V)hG4S_MEZU}`gFIDN+J4jag z+sh<0koBZ!b2~cv{^aVr$wM}QA3e`D_~jg%KP`OFC*GdJ*zSDe6K~nyjXcCo+|Kt! z<`kT*P>2g$qzZ3VrS;L9DsJYyBE)ho1t#gduvR8@YBr!3@(QHy-B zs=G7Kz<>9-t2tBVw`_o9h$Jhc=s@^< z>Tq)+Q_UyauZy@7)gK6@ktj+ZJ}u~FLn)HG;=z3QcX&2CElFcvh}1?l|a??YvJxZ@f|eQqs0qF0go5tkNuNN29Sd$;AIYnNV&>pz_;$ zQ)`wgV1>>*`-N4xE+ZwE;grVP{K(Y!jS8R7k8dH7QyT$oIEw7Cn|Jb84Rt(CNAP4^ zo9I!(h_Txvjdiomt-RjqZ=TMv@{LM*aic(_&(TS{L|Z|_FLC@4&war)KZ$NESs-Zfe8>;P zP!7_jiMsPX6xpvz-`EaM{+uoW-9&RWX2D_3_X~$iz4+>x>G%ae^Z9Y*{LZC!MPqWw zA8K2=&Ff0*7Y769{BU5s_QVL=B8rq#>kDyjzu4O2SdgR#J}lZ1uFTHbEQ~nH{cRgc zo#r0y33Vq3`@&%bhbH|CJVSXO-|rH>|Y62gHA{Xd)#?!-L5>Zrx$E7Hi3=* z*b*FhabkUZPW89z%Nq3Tq)mO8kK_JcRbTSA#nhg6J$34Z$A$b`7)OAcqjQX+z&h+x}!yVwudf4v$gDMFA7b1X)>`qgvH@b@ZjE@%L*-79L|EPm&KB<-{ToXLE5M|dG9feTs_(ksd zotW6gvnF;VpV?rDMzThuh8YfroYGe}P5+^s0@sCCHRX%>_Erad|9Rm#3$}V0Sj>f~ z4WP5Obg^3+Y(B2<=^_0s)W)05YL;cO*jx0(f0SZ{dCg!`ev#kDk%FdK4C1ef8@OwV z7qy9<0`h%;XESX)(J!F?IHaiRI6ds!<9DRr*j;Y6=Z=!oi^O_j;zg0HQy{$!+U5}( z;_W;|5;lxZKhozgXM7 z%&s|(E8U)d6(~x(KB9-l#sHahmnEMYZ0zWW73AgUeb`t@;D{-GA*yk=sdI97;alxn zLrbWHw6L+b80m^5+eVWQMqF0FO)0e-Ng=+LDemaTWBqF&8o5tg#&`ov!qWIaF!DGpH%*`oF`tVz@QgH?@Pqz z;p5iFN=lfYb(N~rGHIRR&#~8EV$6|dZz>0-Bl=<*loXJxR5QdyBV2GPxXchRmnhEU zw9*kPd5Qw}F}RXJ+BS-9&j~WV7X7+0wVdx+OVy?hnCyH+VrcfAAFwzTT-zbAikObREIGY#J6zH(8pkEz-AVBH|h;rTcAc8VM8&IX<+v&<`DG=@zY z@IoRCuFh`@4Wvf=TAX+_xRmOVIMJ9~9ar;>49OP!m(JfZ)R(9c{F(ok^Q_$w zy{3ndoU5%@wP5M^%z-aJnr3Rrlx&oHAjCKX=zDC9MTRtMf4?H~C%rKdZFo33(HoF4 zT7_CiaAnKcyUY4m=rxP;RLaQIdfMI2xyJ4|enEqr#lVS5P#{{RJ+f<1ntp@C(|bU& z2xb*XB+t{nXPOC;qP$sXAHUWP(($X0cvC#BctTFM0OujywarE(k{YH=HF&7-sl;qw zt2HE8b2N#0jZNMJPBKMRz!UcpYQBZX)#z~Vm{r3HQDBjLH+K||?Rvo7mdAu?esv8i1x5A6{%8|5koYN}xvtUJ=S$QY z=kn+b5S9H91t6cj6i>vHZkbMBriCeRSjv4o1yr)EiN&Sk`1MzeTEP6uY%YWZ11Uk(fdPFi*e(}asQ}ti*V9P17KR$WQWo3{H zTtS1_EX`I3X%$vjD(UP7%wYo$1YOAvpKGixDE218$a;vmMX?0q?|myV(uh2+UOyfL zHTt3TEcgA?lx;cNRQIrq*}i*^inJ>fZu(KZGE}HPA~Vv`+SW#IiY2qlmFGTOAz7RP_5?X9 z#jZ6{{7qZ&40EF5(zRMX`A;I%$FzISxf&2G#nm1|Wy{IKnS|4(r8IbxRIwZrDUFw9 zR;|*;U;B(pc3rw?Mj&v86RDfwfhj*1c(VQHD||m@iQkUbcr^K7M?I*-b(*B+|ABku z2$Cl*kVjW=4fi?!;<}HmPY%a=An$bk=yAG&jDuas9V1eg9G{Lo3wz-` zNvyqL>)w0aw_J=Z-%mXIDj@dSfAeYL=FPS*Kb&*M@BYm*?^2IJvA(zyGtjI!df3o2 zI68>8_b`zyw<3Jfo4KFRy?Up$p@ttSy`Zn4suUT<3BY+#kNI4|nXqL`!Px zJAUF*aa6sLt+Ig7DcK)eSE=dq|b=qM=ZRc1&cs*H=E#E^6{H9ixlS1Y7=nlJ9UG!RLURRBeOheOwJuKmxIsrF4 z-$E!Jvb_yO5*Lqc>SIoU^-S##22CXxT*VOQEtfRe;Usir6>Do?NaK$=9-h%GgJ!J^ zUN+m(pzc3Df>VbfYF6HAzE9S4PsF#&O9YVn{qo-5Z%sS(D%q5HMM!b1IVe_C-yRB# l#fIs7jG^9L9}IByaSHX?gq=u=r{ ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const Template = ({ ...args }) => { + return ; +}; + +const ShapeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Circular'} + + + + + + + + + + + + + {'Square'} + + + + + + + + + + + + + {'Rounded'} + + + + + + + + + + ); +}; + +const ContentTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Default'} + + + + + + + + + + + + + {'Image'} + + + + + + + + + + + + {'Initial'} + + + + M + + + + + + + + {'Icon'} + + + + + + + + + + + + ); +}; + +const ShapeSizeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Large'} + + + + + + + + + + + + + + + + + + + {'Medium'} + + + + + + + + + + + + + + + + + + + {'Small'} + + + + + + + + + + + + + + + + + + + {'Extra Small'} + + + + + + + + + + + + + + + + ); +}; + +const ContentSizeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Large'} + + + + + + + + + + + M + + + + + + + + + + + + + + + {'Medium'} + + + + + + + + + + M + + + + + + + + + + + + + + {'Small'} + + + + + + + + + + + M + + + + + + + + + + + + + + + {'Extra Small'} + + + + + + + + + + + M + + + + + + + + + + + + ); +}; + +export const Playground = Template.bind({}); + +export const Shape = ShapeTemplate.bind({}); + +export const Content = ContentTemplate.bind({}); + +export const ShapeSizes = ShapeSizeTemplate.bind({}); + +export const ContentSize = ContentSizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/molecules/Chip.stories.js b/packages/react-ui/storybook/stories/molecules/Chip.stories.js index d13dbd082..2c8f5ac5b 100644 --- a/packages/react-ui/storybook/stories/molecules/Chip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Chip.stories.js @@ -1,5 +1,8 @@ import React from 'react'; -import { Avatar, Chip, Grid } from '@mui/material'; +import { Avatar, Chip, Grid, Box, Tooltip } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { FileUploadOutlined } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Molecules/Chip', @@ -17,12 +20,9 @@ const options = { } }, color: { - defaultValue: 'default', - description: - 'The color of the component. It supports those theme colors that make sense for this component.', control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['primary', 'secondary', 'default'] } }, deleteIcon: { @@ -31,7 +31,6 @@ const options = { }, disabled: { defaultValue: false, - description: 'If `true`, the chip should be displayed in a disabled state.', control: { type: 'boolean' } @@ -41,7 +40,6 @@ const options = { }, label: { defaultValue: 'Chip content', - description: 'The content of the label.', control: { type: 'text' } @@ -52,16 +50,12 @@ const options = { defaultValue: null }, size: { - defaultValue: 'medium', - description: 'The size of the chip.', control: { type: 'select', options: ['small', 'medium'] } }, variant: { - defaultValue: 'filled', - description: 'The variant to use.', control: { type: 'select', options: ['filled', 'outlined'] @@ -74,59 +68,574 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -// const Template = ({ ...args }) => { -// return -// }; +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + }, + header: { + minWidth: '200px', + marginTop: theme.spacing(4) + } +})); + const Template = ({ ...args }) => { + return ; +}; + +const VariantsTemplate = ({ ...args }) => { + const classes = useStyles(); + return ( - - - + + + + + {'Filled'} + + + - - + + + + + {'Outlined'} + + + - - + + ); +}; + +const PrefixTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Primary'} + + + + M} /> + + + M} /> + + + } /> + + + } + /> + + + } /> + + + } /> + + + - - + + + + {'Secondary'} + + + + M} /> + + + M} + /> + + + } + /> + + + } + /> + + + } /> + + + } + /> + + + + + + + + + {'Default'} + + + + M} /> + + + M} + /> + + + } + /> + + + } + /> + + + } /> + + + } + /> + + + ); }; -export const Default = Template.bind({}); -Default.args = {}; +const RemovableTemplate = ({ ...args }) => { + const classes = useStyles(); -export const Removable = Template.bind({}); -Removable.args = { onDelete: () => {} }; + return ( + + + + + {'Primary'} + + + + + + + + + + + + + + + + {'Secondary'} + + + + + + + + + + + + + + + + {'Default'} + + + + + + + + + + + + + ); +}; + +const ColorsTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Primary'} + + + + + + + + + + + + + + + {'Secondary'} + + + + + + + + + + + + + + + {'Default'} + + + + + + + + + + + + + ); +}; -export const Thumbnail = Template.bind({}); -Thumbnail.args = { avatar: M }; +const SizeTemplate = ({ ...args }) => { + const classes = useStyles(); -export const ThumbnailRemovable = Template.bind({}); -ThumbnailRemovable.args = { avatar: M, onDelete: () => {} }; + return ( + + + + {'Primary'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + -export const SizeSmall = Template.bind({}); -SizeSmall.args = { size: 'small' }; + + + {'Secondary'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + -export const SizeSmallRemovable = Template.bind({}); -SizeSmallRemovable.args = { size: 'small', onDelete: () => {} }; + + + {'Default'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + + + ); +}; + +const BehaviorTemplate = ({ ...args }) => { + const classes = useStyles(); + const longLabel = 'felipegomezcases@cartodb.com'; + + return ( + + + + + {'Overflow'} + + + + M} + onDelete={() => {}} + /> + + + M} /> + + + + + + + -export const SizeSmallThumbnail = Template.bind({}); -SizeSmallThumbnail.args = { size: 'small', avatar: M }; + + + + {'Hover with Tooltip'} + + + + + M} + onDelete={() => {}} + clickable + /> + + + + + -export const SizeSmallThumbnailRemovable = Template.bind({}); -SizeSmallThumbnailRemovable.args = { - size: 'small', - avatar: M, - onDelete: () => {} + + + + {'Pairing (Grid 8px)'} + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const commonArgs = { + label: 'Chip content' }; +const SizeArgs = { + onDelete: () => {}, + avatar: M +}; +const disabledControlsCommonArgTypes = { + avatar: { table: { disable: true } }, + deleteIcon: { table: { disable: true } }, + icon: { table: { disable: true } }, + onDelete: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { + ...disabledControlsCommonArgTypes, + variant: { table: { disable: true } } +}; + +export const Playground = Template.bind({}); +Playground.args = { ...commonArgs }; + +export const Variants = VariantsTemplate.bind({}); +Variants.argTypes = disabledControlsCommonArgTypes; + +export const Colors = ColorsTemplate.bind({}); +Colors.args = { ...commonArgs }; +Colors.argTypes = disabledControlsCommonArgTypes; + +export const Prefix = PrefixTemplate.bind({}); +Prefix.args = { ...commonArgs }; +Prefix.argTypes = disabledControlsCommonArgTypes; + +export const Removable = RemovableTemplate.bind({}); +Removable.args = { onDelete: () => {} }; +Removable.argTypes = disabledControlsCommonArgTypes; + +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...SizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...SizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; +Behavior.argTypes = disabledControlsCommonArgTypes; diff --git a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js index 4de33d7f0..3b020f67d 100644 --- a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js +++ b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js @@ -79,7 +79,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' }, status: { - type: 'readyToReview' + type: 'validated' } } }; From 328a74bebbb786eabdd2c2b23b349e391caf5c2b Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 15 Dec 2022 09:31:17 +0100 Subject: [PATCH 065/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-16 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index e03101cc3..d2aa6395e 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f593f11ab..8e4f24ee7 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 3fb0eeeba..ce34edd93 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ae6dcf54c..965c17fca 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 29dcc6a48..2f7175081 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 1bc977659..80437866c 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 8cbe1cf3b..1fa04c691 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d667e0ef9..c3992b3cd 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 7ea99e2c0..92428e24e 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From ef52c1695b51a299463b7ad2e5c35e21a50569e7 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 15 Dec 2022 09:34:00 +0100 Subject: [PATCH 066/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 8e4f24ee7..dc70cc6fd 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index ce34edd93..ae61e9117 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 965c17fca..9e09cfa04 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 80437866c..e9483abc1 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1fa04c691..ddeaa5a74 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index c3992b3cd..282048f2a 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-15", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 25fc62bc8eadd86194ef738a9cd6eae0205166d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Fri, 16 Dec 2022 08:44:23 +0100 Subject: [PATCH 067/154] Default props of core components to meet the common use case (#552) --- CHANGELOG.md | 1 + .../react-ui/src/theme/sections/components/forms.js | 11 ++++++++++- .../src/theme/sections/components/navigation.js | 7 +++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1994c8ee6..44ce88f92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Default props of core components to meet the common use case [#552](https://github.com/CartoDB/carto-react/pull/552/) - Chip component adapted to the new design system [#551](https://github.com/CartoDB/carto-react/pull/551/) - Design changes in UploadField component [#548](https://github.com/CartoDB/carto-react/pull/548/) - Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index f3be1b6d5..ac18e2c26 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -584,7 +584,16 @@ export const formsOverrides = { MuiSlider: { defaultProps: { color: 'primary', - marks: false + marks: false, + size: 'small' + }, + + styleOverrides: { + thumb: { + '&:hover, &.Mui-focusVisible': { + boxShadow: `0 0 0 ${getSpacing(1)} ${commonPalette.primary.background}` + } + } } } }; diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 6f8097dfc..cd7896a22 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -127,5 +127,12 @@ export const navigationOverrides = { marginRight: getSpacing(0.5) } } + }, + + // Links + MuiLink: { + defaultProps: { + underline: 'hover' + } } }; From d739a195bc0dbbea3843be5d3a6123faff5b2320 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 16 Dec 2022 08:48:47 +0100 Subject: [PATCH 068/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-17 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index d2aa6395e..2c04f35ef 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index dc70cc6fd..80ec0016b 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index ae61e9117..817263cff 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 9e09cfa04..ad85c9d99 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 2f7175081..7819e42e0 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index e9483abc1..16c137166 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index ddeaa5a74..131d6e2ae 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 282048f2a..4aa1eec98 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 92428e24e..d27365ba0 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 66354bcc0b3c3dd039870c32a87824bab0299707 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 16 Dec 2022 10:12:14 +0100 Subject: [PATCH 069/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 80ec0016b..a017ed369 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 817263cff..b5997edbd 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ad85c9d99..79c43f665 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 16c137166..4b1147fa9 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 131d6e2ae..0f9aa1164 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 4aa1eec98..494cb5f68 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-16", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 2edb4135d09b99f498d4c52ab082f77768e02721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 20 Dec 2022 13:54:47 +0100 Subject: [PATCH 070/154] Adjustments in theme to fix uses cases in cloud-native (#553) --- CHANGELOG.md | 1 + packages/react-ui/src/theme/carto-theme.js | 4 ++- .../src/theme/sections/components/buttons.js | 34 ++++++++++++------- .../theme/sections/components/dataDisplay.js | 16 +++++++-- .../src/theme/sections/components/feedback.js | 11 ++++++ 5 files changed, 51 insertions(+), 15 deletions(-) create mode 100644 packages/react-ui/src/theme/sections/components/feedback.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 44ce88f92..8f1fd27d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Adjustments in theme to fix uses cases in cloud-native [#553](https://github.com/CartoDB/carto-react/pull/553/) - Default props of core components to meet the common use case [#552](https://github.com/CartoDB/carto-react/pull/552/) - Chip component adapted to the new design system [#551](https://github.com/CartoDB/carto-react/pull/551/) - Design changes in UploadField component [#548](https://github.com/CartoDB/carto-react/pull/548/) diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index a121acddd..8b4816851 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -8,6 +8,7 @@ import { CssBaseline } from './sections/cssBaseline'; import { commonPalette } from './sections/palette'; import { themeShadows } from './sections/shadows'; import { themeTypography } from './sections/typography'; +import { feedbackOverrides } from './sections/components/feedback'; import { BREAKPOINTS, SPACING } from './themeConstants'; export const cartoThemeOptions = { @@ -115,7 +116,8 @@ export const cartoThemeOptions = { ...buttonsOverrides, ...formsOverrides, ...navigationOverrides, - ...dataDisplayOverrides + ...dataDisplayOverrides, + ...feedbackOverrides } }; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index db7d59f76..533a754fc 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -18,9 +18,11 @@ export const buttonsOverrides = { styleOverrides: { root: { - '& .MuiSvgIcon-root': { + '& .MuiSvgIcon-root, & svg': { display: 'flex', - fontSize: ICON_SIZE + fontSize: ICON_SIZE, + width: ICON_SIZE, + height: ICON_SIZE } } } @@ -34,7 +36,7 @@ export const buttonsOverrides = { styleOverrides: { root: ({ ownerState }) => ({ - maxWidth: '192px', + // maxWidth: '192px', TODO temporary disabled waiting for a design definition '&:hover, &:focus-visible': { boxShadow: themeShadows[0], @@ -99,8 +101,10 @@ export const buttonsOverrides = { startIcon: { marginRight: getSpacing(0.75), - '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE + '& .MuiSvgIcon-root, & svg': { + fontSize: ICON_SIZE, + width: ICON_SIZE, + height: ICON_SIZE }, '&.MuiButton-iconSizeSmall': { marginRight: getSpacing(0.5), @@ -110,8 +114,10 @@ export const buttonsOverrides = { endIcon: { marginLeft: getSpacing(0.75), - '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE + '& .MuiSvgIcon-root, & svg': { + fontSize: ICON_SIZE, + width: ICON_SIZE, + height: ICON_SIZE }, '&.MuiButton-iconSizeSmall': { marginLeft: getSpacing(0.5), @@ -268,8 +274,10 @@ export const buttonsOverrides = { ...(ownerState.color === 'default' && { color: commonPalette.text.secondary }), - '& .MuiSvgIcon-root': { - fontSize: ICON_SIZE + '& .MuiSvgIcon-root, & svg': { + fontSize: ICON_SIZE, + width: ICON_SIZE, + height: ICON_SIZE }, '&:hover, &:focus-visible': { ...(ownerState.color === 'default' && { @@ -318,7 +326,7 @@ export const buttonsOverrides = { '& + &': { marginLeft: getSpacing(0.5) }, - '.MuiSvgIcon-root': { + '.MuiSvgIcon-root, & svg': { margin: getSpacing(0, -0.75) }, '&.Mui-selected': { @@ -426,7 +434,8 @@ export const buttonsOverrides = { boxShadow: themeShadows[6] }, - '& .MuiSvgIcon-root': { + '& .MuiSvgIcon-root, & svg': { + fontSize: ICON_SIZE_M, width: ICON_SIZE_M, height: ICON_SIZE_M }, @@ -449,7 +458,8 @@ export const buttonsOverrides = { height: getSpacing(4), minHeight: getSpacing(4), - '& .MuiSvgIcon-root': { + '& .MuiSvgIcon-root, & svg': { + fontSize: ICON_SIZE, width: ICON_SIZE, height: ICON_SIZE }, diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 22355ccf9..ed3730917 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -383,8 +383,20 @@ export const dataDisplayOverrides = { styleOverrides: { root: { color: commonPalette.secondary.contrastText, - backgroundColor: commonPalette.secondary.main, - border: `1px solid ${commonPalette.action.hover}` + backgroundColor: commonPalette.secondary.main + }, + img: { + // border: `1px solid ${commonPalette.default.outlinedBorder}` TODO fix the background color overlap + }, + circular: { + '& img': { + borderRadius: '50%' + } + }, + rounded: { + '& img': { + borderRadius: getSpacing(0.5) + } } } }, diff --git a/packages/react-ui/src/theme/sections/components/feedback.js b/packages/react-ui/src/theme/sections/components/feedback.js new file mode 100644 index 000000000..bfa093ae3 --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/feedback.js @@ -0,0 +1,11 @@ +export const feedbackOverrides = { + // SnackBar + MuiSnackBar: { + DefaultProps: { + anchorOrigin: { + vertical: 'bottom', + horizontal: 'center' + } + } + } +}; From 65b6bc94d80bc9b635865696a249196c257aec25 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 20 Dec 2022 14:00:29 +0100 Subject: [PATCH 071/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-18 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 2c04f35ef..b2f182982 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index a017ed369..f47a5d37a 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index b5997edbd..cd8e9fbeb 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 79c43f665..a17eb0ebf 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7819e42e0..eb7d3e001 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 4b1147fa9..710e67134 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 0f9aa1164..a85c870c7 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 494cb5f68..f26499452 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index d27365ba0..4dd34c99a 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From f3a556203ea7aabdab040a2fd728d8f80d3284c9 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 20 Dec 2022 14:05:57 +0100 Subject: [PATCH 072/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f47a5d37a..a8b1b4718 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index cd8e9fbeb..508cfdf98 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a17eb0ebf..b68901270 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 710e67134..16c59ab3b 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index a85c870c7..fbf19ca0a 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index f26499452..177222782 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-17", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 18d91710400733f3bacc5a1a924ef391fff0b088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 21 Dec 2022 10:21:33 +0100 Subject: [PATCH 073/154] New color variant in FAB button (#554) --- CHANGELOG.md | 1 + packages/react-ui/src/theme/carto-theme.d.ts | 7 +++++++ .../src/theme/sections/components/buttons.js | 19 ++++++++++++++++--- .../theme/sections/components/navigation.js | 1 - .../stories/molecules/FAB.stories.js | 6 ++++-- 5 files changed, 28 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f1fd27d1..556404966 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New color variant in FAB button [#554](https://github.com/CartoDB/carto-react/pull/554) - Adjustments in theme to fix uses cases in cloud-native [#553](https://github.com/CartoDB/carto-react/pull/553/) - Default props of core components to meet the common use case [#552](https://github.com/CartoDB/carto-react/pull/552/) - Chip component adapted to the new design system [#551](https://github.com/CartoDB/carto-react/pull/551/) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 881935807..3ec9eb251 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -129,3 +129,10 @@ declare module '@mui/material/Button' { default: true; } } + +// Update the FAB's color prop options +declare module '@mui/material/Fab' { + interface FabPropsColorOverrides { + default: true; + } +} diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 533a754fc..86b0b59c6 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -428,8 +428,12 @@ export const buttonsOverrides = { // FAB button MuiFab: { + defaultProps: { + color: 'primary' + }, + styleOverrides: { - root: { + root: ({ ownerState }) => ({ '&:focus': { boxShadow: themeShadows[6] }, @@ -450,8 +454,17 @@ export const buttonsOverrides = { '& .MuiSvgIcon-root': { marginRight: getSpacing(1.5) } - } - }, + }, + + ...(ownerState.color === 'default' && { + color: commonPalette.text.primary, + backgroundColor: commonPalette.background.paper, + + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.default.light + } + }) + }), sizeSmall: { width: getSpacing(4), diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index cd7896a22..ad8c8e911 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -48,7 +48,6 @@ export const navigationOverrides = { // Tabs MuiTabs: { defaultProps: { - iconPosition: 'start', TabIndicatorProps: { classes: { colorPrimary: 'colorPrimary' diff --git a/packages/react-ui/storybook/stories/molecules/FAB.stories.js b/packages/react-ui/storybook/stories/molecules/FAB.stories.js index f4f6a5b86..301380e72 100644 --- a/packages/react-ui/storybook/stories/molecules/FAB.stories.js +++ b/packages/react-ui/storybook/stories/molecules/FAB.stories.js @@ -14,10 +14,9 @@ const options = { } }, color: { - defaultValue: 'primary', control: { type: 'select', - options: ['primary', 'secondary'] + options: ['primary', 'secondary', 'default'] } }, size: { @@ -127,4 +126,7 @@ PrimaryColor.args = { color: 'primary' }; export const SecondaryColor = Template.bind({}); SecondaryColor.args = { color: 'secondary' }; +export const DefaultColor = Template.bind({}); +DefaultColor.args = { color: 'default' }; + export const Sizes = SizeTemplate.bind({}); From 1145e2edbe4123b42008375e9cad209dc6ee5617 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 21 Dec 2022 10:26:48 +0100 Subject: [PATCH 074/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-19 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index b2f182982..def400d8b 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index a8b1b4718..c1fa2f374 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 508cfdf98..368bb7f41 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index b68901270..524cc7eba 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index eb7d3e001..e6e7fe62b 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 16c59ab3b..cc06e885a 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index fbf19ca0a..0583b1920 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 177222782..285fcdb45 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 4dd34c99a..54e11db57 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From b94354aa825fee10b4caa8b67a645aa2283f2b77 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 21 Dec 2022 10:28:01 +0100 Subject: [PATCH 075/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index c1fa2f374..fb49453bb 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 368bb7f41..41785a93f 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 524cc7eba..177bce6c0 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index cc06e885a..050872673 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 0583b1920..d0cedfe00 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 285fcdb45..c8f6f9624 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-18", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From d57a54ad4794e6e11b45d836d590a5328d0cc927 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 22 Dec 2022 19:17:13 +0100 Subject: [PATCH 076/154] New AppBar component (v1) and default props changes (#555) --- CHANGELOG.md | 1 + UPGRADE.md | 26 ++++- .../src/components/organisms/AppBar.js | 107 ++++++++++++++++++ packages/react-ui/src/index.d.ts | 4 +- packages/react-ui/src/index.js | 6 +- packages/react-ui/src/theme/carto-theme.js | 4 +- .../src/theme/sections/components/buttons.js | 6 + .../theme/sections/components/dataDisplay.js | 22 ++++ .../src/theme/sections/components/surfaces.js | 46 ++++++++ packages/react-ui/src/theme/themeConstants.js | 4 + packages/react-ui/src/types.d.ts | 15 ++- .../react-ui/storybook/assets/carto-logo.svg | 10 ++ .../stories/molecules/ButtonGroup.stories.js | 12 +- .../stories/organisms/AppBar.stories.js | 102 +++++++++++++++++ 14 files changed, 350 insertions(+), 15 deletions(-) create mode 100644 packages/react-ui/src/components/organisms/AppBar.js create mode 100644 packages/react-ui/src/theme/sections/components/surfaces.js create mode 100644 packages/react-ui/storybook/assets/carto-logo.svg create mode 100644 packages/react-ui/storybook/stories/organisms/AppBar.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 556404966..13810e05f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New AppBar component (v1) and default props changes[#555](https://github.com/CartoDB/carto-react/pull/555) - New color variant in FAB button [#554](https://github.com/CartoDB/carto-react/pull/554) - Adjustments in theme to fix uses cases in cloud-native [#553](https://github.com/CartoDB/carto-react/pull/553/) - Default props of core components to meet the common use case [#552](https://github.com/CartoDB/carto-react/pull/552/) diff --git a/UPGRADE.md b/UPGRADE.md index 13231ff3a..be2a766ad 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -46,7 +46,7 @@ We have a `Typography` component that uses `Mui Typography` and extends it with This way we can be more flexible regarding text styles without adding too many variants to the Mui component. In short, instead of Mui Typography, the component you should use to add text is this one: -`react-ui/src/atoms/Typography` +`react-ui/src/components/atoms/Typography` For external use: `import { Typography } from '@carto/react-ui';`. @@ -101,7 +101,7 @@ Design is restringed to a few specific values for shadows, which are: We have a `Button` component that uses `Mui Button` and wraps its children in `Typography` to meet with the designed behavior (text overflow case). So, instead of Mui Button, the component you should use to create buttons is this one: -`react-ui/src/atoms/Button` +`react-ui/src/components/atoms/Button` For external use: `import { Button } from '@carto/react-ui';`. @@ -116,7 +116,7 @@ We have a new component for building data structures within Tooltips, `TooltipDa We have a custom component to build the show / hide content logic on top of TextField Mui component. Instead of ` ` you can use: -`react-ui/src/atoms/PasswordField` +`react-ui/src/components/atoms/PasswordField` For external use: `import { PasswordField } from '@carto/react-ui';`. @@ -125,7 +125,7 @@ For external use: `import { PasswordField } from '@carto/react-ui';`. We have a custom component to build the `placeholder` and `multiple selection` logic on top of TextField Mui component. Instead of ` ` or ` {menuItems.map((option) => ( {option.label} ))} - + - + - + @@ -311,6 +321,9 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) select value={fixedValue} onChange={handleChange} + SelectProps={{ + size: size + }} > {menuItems.map((option) => ( @@ -327,6 +340,9 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) select value={fixedValue2} onChange={handleChange2} + SelectProps={{ + size: size + }} > {menuItems.map((option) => ( @@ -343,6 +359,9 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) select value={fixedValue3} onChange={handleChange3} + SelectProps={{ + size: size + }} > {menuItems.map((option) => ( @@ -364,6 +383,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) label={label} placeholder={placeholder} focused + size={size} items={menuItems} /> @@ -374,6 +394,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) label={label} placeholder={placeholder} focused + size={size} items={menuItems} /> @@ -384,6 +405,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) label={label} placeholder={placeholder} focused + size={size} items={menuItems} /> @@ -400,6 +422,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) label={label} placeholder={placeholder} disabled + size={size} items={menuItems} /> @@ -410,6 +433,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) label={label} placeholder={placeholder} disabled + size={size} items={menuItems} /> @@ -420,6 +444,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) label={label} placeholder={placeholder} disabled + size={size} items={menuItems} /> @@ -437,6 +462,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) placeholder={placeholder} helperText={helperText} error + size={size} items={menuItems} /> @@ -448,6 +474,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) placeholder={placeholder} helperText={helperText} error + size={size} items={menuItems} /> @@ -459,6 +486,7 @@ const SizeTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) placeholder={placeholder} helperText={helperText} error + size={size} items={menuItems} /> @@ -597,7 +625,7 @@ export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); LabelAndHelperText.args = { ...commonArgs }; export const Medium = SizeTemplate.bind({}); -Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.args = { ...commonArgs, ...sizeArgs, size: 'medium' }; Medium.argTypes = disabledControlsSizeArgTypes; export const Small = SizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js index f0d7db739..ee6f44eb6 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-area.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-area.stories.js @@ -509,7 +509,7 @@ export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); LabelAndHelperText.args = { ...commonArgs }; export const Medium = SizeTemplate.bind({}); -Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.args = { ...commonArgs, ...sizeArgs, size: 'medium' }; Medium.argTypes = disabledControlsSizeArgTypes; export const Small = SizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js index 120a84119..39154e3f3 100644 --- a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -760,7 +760,7 @@ export const PrefixAndSuffix = PrefixAndSuffixTemplate.bind({}); PrefixAndSuffix.args = { ...commonArgs }; export const Medium = SizeTemplate.bind({}); -Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.args = { ...commonArgs, ...sizeArgs, size: 'medium' }; Medium.argTypes = disabledControlsSizeArgTypes; export const Small = SizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index 5dc00c6e7..85aa510dd 100644 --- a/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -88,7 +88,7 @@ const AutocompleteTemplate = ({ disabled, size, ...args }) => { getOptionLabel={(option) => option.title} disabled={disabled} renderInput={(params) => ( - + )} size={size} /> @@ -101,7 +101,7 @@ const AutocompleteTemplate = ({ disabled, size, ...args }) => { getOptionLabel={(option) => option.title} disabled={disabled} renderInput={(params) => ( - + )} size={size} /> @@ -116,7 +116,12 @@ const AutocompleteTemplate = ({ disabled, size, ...args }) => { getOptionLabel={(option) => option.title} disabled={disabled} renderInput={(params) => ( - + )} size={size} /> @@ -131,5 +136,5 @@ export const Playground = Template.bind({}); export const Default = AutocompleteTemplate.bind({}); Default.args = {}; -export const Small = AutocompleteTemplate.bind({}); -Small.args = { size: 'small' }; +export const Medium = AutocompleteTemplate.bind({}); +Medium.args = { size: 'medium' }; diff --git a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js index 3b020f67d..3a5575d06 100644 --- a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js +++ b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js @@ -463,7 +463,7 @@ export const LabelAndHelperText = LabelAndHelperTextTemplate.bind({}); LabelAndHelperText.args = { ...commonArgs }; export const Medium = SizeTemplate.bind({}); -Medium.args = { ...commonArgs, ...sizeArgs }; +Medium.args = { ...commonArgs, ...sizeArgs, size: 'medium' }; Medium.argTypes = disabledControlsSizeArgTypes; export const Small = SizeTemplate.bind({}); From 6a3d598f4e4f444502a8a39fe6a1f7a02593a0cb Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 22 Dec 2022 19:52:29 +0100 Subject: [PATCH 078/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-20 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index def400d8b..cdf260b61 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index fb49453bb..777d57631 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 41785a93f..af165db3c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 177bce6c0..e49897cfa 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index e6e7fe62b..fb0fda264 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 050872673..deb69ca30 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d0cedfe00..354c03e77 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index c8f6f9624..67edf11c2 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 54e11db57..a53f7344a 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From e721678c716545b504e42ec3b8134845704440c3 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 22 Dec 2022 19:54:38 +0100 Subject: [PATCH 079/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 777d57631..2d91b1e6d 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index af165db3c..7768e4547 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index e49897cfa..2827b35be 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index deb69ca30..e31589c02 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 354c03e77..79a1fad5b 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 67edf11c2..0f9ac0b0d 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-19", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 9e94ecef66097851a23a7ad83b642b80a8f82d0f Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 23 Dec 2022 12:37:36 +0100 Subject: [PATCH 080/154] appbar fixes --- .../src/components/organisms/AppBar.js | 21 +++++++++++++++---- packages/react-ui/src/types.d.ts | 4 ++-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/react-ui/src/components/organisms/AppBar.js b/packages/react-ui/src/components/organisms/AppBar.js index 0c6a476e7..7550af802 100644 --- a/packages/react-ui/src/components/organisms/AppBar.js +++ b/packages/react-ui/src/components/organisms/AppBar.js @@ -24,6 +24,9 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', marginRight: theme.spacing(1.5), + '& a': { + display: 'flex' + }, '& svg, & img': { width: theme.spacing(4), height: theme.spacing(4) @@ -36,6 +39,10 @@ const useStyles = makeStyles((theme) => ({ flex: 1, marginLeft: theme.spacing(1) }, + text: { + display: 'flex', + alignItems: 'center' + }, textSeparator: { '&::after': { content: '"/"', @@ -73,14 +80,20 @@ const AppBar = ({ {brandLogo &&
{brandLogo}
} {brandText && ( {brandText} )} {secondaryText && ( - + {secondaryText} )} @@ -98,8 +111,8 @@ AppBar.defaultProps = { AppBar.propTypes = { brandLogo: PropTypes.element, - brandText: PropTypes.string, - secondaryText: PropTypes.string, + brandText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), + secondaryText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), onClickMenu: PropTypes.func, showBurgerMenu: PropTypes.bool }; diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index a3efcea13..0e327bd1e 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -240,8 +240,8 @@ export interface UploadFieldProps extends TextFieldProps { // AppBar export interface AppBarProps extends MuiAppBarProps { brandLogo?: React.ReactElement; - brandText?: string; - secondaryText?: string; + brandText?: string | React.ReactElement; + secondaryText?: string | React.ReactElement; onClickMenu?: Function; showBurgerMenu?: boolean; } From 4167fb75572d4cc459e4d9dc1c77f992e12f22d4 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 23 Dec 2022 12:40:13 +0100 Subject: [PATCH 081/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-21 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index cdf260b61..3643ba850 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 2d91b1e6d..3a5784587 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 7768e4547..9fb0e77fb 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 2827b35be..9a78357d0 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index fb0fda264..7b9387707 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index e31589c02..ba42d6f84 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 79a1fad5b..5b3bfcc19 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 0f9ac0b0d..2650b9e2e 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index a53f7344a..8ac109923 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 295d9333236d58386df575a82d9dcabc9e3aff58 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 23 Dec 2022 12:41:26 +0100 Subject: [PATCH 082/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 3a5784587..73b469559 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 9fb0e77fb..1bea66272 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 9a78357d0..e8cd4bd44 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index ba42d6f84..a16ee5ec8 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 5b3bfcc19..4eafd84ba 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 2650b9e2e..9d0365fea 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-20", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 04e1753a660d7786a1322f78910e303f1c452018 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 3 Jan 2023 16:37:04 +0100 Subject: [PATCH 083/154] appbar fixes --- .../react-ui/src/components/organisms/AppBar.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/src/components/organisms/AppBar.js b/packages/react-ui/src/components/organisms/AppBar.js index 7550af802..70965fc23 100644 --- a/packages/react-ui/src/components/organisms/AppBar.js +++ b/packages/react-ui/src/components/organisms/AppBar.js @@ -9,7 +9,9 @@ import { APPBAR_SIZE } from '../../theme/themeConstants'; const useStyles = makeStyles((theme) => ({ row: { display: 'flex', - alignItems: 'center' + alignItems: 'center', + maxWidth: 'calc(100% - 300px)', + overflow: 'hidden' }, menu: { display: 'flex', @@ -36,12 +38,15 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - flex: 1, marginLeft: theme.spacing(1) }, text: { display: 'flex', - alignItems: 'center' + alignItems: 'center', + whiteSpace: 'nowrap' + }, + brandText: { + whiteSpace: 'nowrap' }, textSeparator: { '&::after': { @@ -82,7 +87,11 @@ const AppBar = ({ {brandText} From ee926dd53a76143ab5afcecd2e78dde1d45beeee Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 3 Jan 2023 16:39:39 +0100 Subject: [PATCH 084/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-22 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 3643ba850..f88fbc8e6 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 73b469559..399e2f550 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 1bea66272..7a5b1e336 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index e8cd4bd44..de5586180 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7b9387707..ce97dc984 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index a16ee5ec8..c08455844 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 4eafd84ba..603299828 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 9d0365fea..dcd828def 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 8ac109923..abe0acd31 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From d9209c6105aeb64f11c4b486aa4a7fd7f5082a25 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 3 Jan 2023 16:41:23 +0100 Subject: [PATCH 085/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 399e2f550..5f731aef4 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 7a5b1e336..9f2b55106 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index de5586180..4a861ba78 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index c08455844..b8ce7d476 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 603299828..0f07383e5 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index dcd828def..0b839afab 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-21", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 890e84becebc9e3339890b5a9143f262b43cd2a4 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 3 Jan 2023 17:57:58 +0100 Subject: [PATCH 086/154] appbar fixes --- packages/react-ui/src/components/organisms/AppBar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/organisms/AppBar.js b/packages/react-ui/src/components/organisms/AppBar.js index 70965fc23..6ac7cab98 100644 --- a/packages/react-ui/src/components/organisms/AppBar.js +++ b/packages/react-ui/src/components/organisms/AppBar.js @@ -38,12 +38,12 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', + flex: 1, marginLeft: theme.spacing(1) }, text: { display: 'flex', - alignItems: 'center', - whiteSpace: 'nowrap' + alignItems: 'center' }, brandText: { whiteSpace: 'nowrap' From 2ff5e1a4109ad12b4811585d95ec012447b80cd0 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 3 Jan 2023 18:00:40 +0100 Subject: [PATCH 087/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-23 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index f88fbc8e6..bfaf48739 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 5f731aef4..4afb6cc6e 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 9f2b55106..b948b1d01 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 4a861ba78..39dcfd969 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index ce97dc984..6c058a229 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index b8ce7d476..290373b5a 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 0f07383e5..5ef137dd6 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 0b839afab..cc1fc949f 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index abe0acd31..5fff84147 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 308133a73a56799b0b21ee3616445274524ae6a6 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 3 Jan 2023 18:02:37 +0100 Subject: [PATCH 088/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 4afb6cc6e..aa14a371e 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index b948b1d01..024ec7779 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 39dcfd969..a6355f23d 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 290373b5a..65f617c61 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 5ef137dd6..95ef2a031 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index cc1fc949f..7d3682302 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-22", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From e1b914c7f973ef0c12bc616f094fcc53b680e426 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 4 Jan 2023 09:29:18 +0100 Subject: [PATCH 089/154] appbar story ready --- packages/react-ui/storybook/stories/organisms/AppBar.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js index 09b573d9a..6fc55efc2 100644 --- a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js +++ b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js @@ -34,7 +34,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=3121%3A61435&t=HI1Xd9yGuft4g9kq-0' }, status: { - type: 'inDevelopment' + type: 'readyToReview' } } }; From a874fff37309cfff2e6ce081e3cb5680858a7f97 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 4 Jan 2023 13:51:57 +0100 Subject: [PATCH 090/154] appbar fixes --- packages/react-ui/src/components/organisms/AppBar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-ui/src/components/organisms/AppBar.js b/packages/react-ui/src/components/organisms/AppBar.js index 6ac7cab98..6601902fc 100644 --- a/packages/react-ui/src/components/organisms/AppBar.js +++ b/packages/react-ui/src/components/organisms/AppBar.js @@ -11,6 +11,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', maxWidth: 'calc(100% - 300px)', + minWidth: '200px', overflow: 'hidden' }, menu: { From 778eead4b15c7a113b8affef07e05102c68bb636 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 4 Jan 2023 13:55:15 +0100 Subject: [PATCH 091/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-24 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index bfaf48739..534995023 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index aa14a371e..8adc035cf 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 024ec7779..ae2277bee 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a6355f23d..089803283 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 6c058a229..ab3177a3f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 65f617c61..5b9bb52e0 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 95ef2a031..537c8ba00 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 7d3682302..8b55d17c5 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 5fff84147..e85322ea8 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 73d2b03469251278b1e00b69904723d12d660330 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 4 Jan 2023 13:56:55 +0100 Subject: [PATCH 092/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 8adc035cf..e59153508 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index ae2277bee..ee2447a4b 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 089803283..6fe550e98 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 5b9bb52e0..22c6771bc 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 537c8ba00..d74ccc100 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 8b55d17c5..ec19afcef 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-23", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 7aa48e5c92d03c9652d64faaba407484f1bf8ec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 11 Jan 2023 10:22:58 +0100 Subject: [PATCH 093/154] Adjustments in theme to fix uses cases in cloud-native (#560) --- CHANGELOG.md | 1 + .../src/components/atoms/SelectField.js | 43 +++++++----- .../src/components/organisms/AppBar.js | 7 +- .../src/theme/sections/components/buttons.js | 3 + .../src/theme/sections/components/forms.js | 32 ++++++--- .../theme/sections/components/navigation.js | 6 +- .../stories/atoms/SelectField.stories.js | 70 ++++++++++++++++++- yarn.lock | 2 +- 8 files changed, 132 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9dd9ef753..38a808880 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Adjustments in theme to fix uses cases in cloud-native [#560](https://github.com/CartoDB/carto-react/pull/560) - Inputs size to small by default [#556](https://github.com/CartoDB/carto-react/pull/556) - New AppBar component (v1) and default props changes[#555](https://github.com/CartoDB/carto-react/pull/555) - New color variant in FAB button [#554](https://github.com/CartoDB/carto-react/pull/554) diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js index 22386e64a..0beab9add 100644 --- a/packages/react-ui/src/components/atoms/SelectField.js +++ b/packages/react-ui/src/components/atoms/SelectField.js @@ -1,6 +1,6 @@ import React, { forwardRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Checkbox, MenuItem, TextField } from '@mui/material'; +import { Box, Checkbox, MenuItem, TextField } from '@mui/material'; import Typography from './Typography'; const SelectField = forwardRef( @@ -21,6 +21,7 @@ const SelectField = forwardRef( }; const isSmall = size === 'small'; + const paddingSize = isSmall ? 1.5 : 2; return ( { if (selected.length === 0) { return ( - - {placeholder} - + + + {placeholder} + + ); } - return selected.map((value, index) => ( - - {items.find((item) => item.value === value).label} - {multiple && ', '} - - )); + return ( + + {selected.map((value, index) => ( + + {items.find((item) => item.value === value).label} + {multiple && ', '} + + ))} + + ); }, MenuProps: { anchorOrigin: { diff --git a/packages/react-ui/src/components/organisms/AppBar.js b/packages/react-ui/src/components/organisms/AppBar.js index 6601902fc..d26d6075e 100644 --- a/packages/react-ui/src/components/organisms/AppBar.js +++ b/packages/react-ui/src/components/organisms/AppBar.js @@ -11,8 +11,11 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', maxWidth: 'calc(100% - 300px)', - minWidth: '200px', - overflow: 'hidden' + overflow: 'hidden', + + [theme.breakpoints.down('sm')]: { + minWidth: '188px' + } }, menu: { display: 'flex', diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index a04ce3f9f..b792b7922 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -59,6 +59,9 @@ export const buttonsOverrides = { backgroundColor: commonPalette.secondary.light }) }, + '& svg path': { + fill: 'currentColor' + }, // Pairing buttons separation '& + &': { marginLeft: getSpacing(1) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index d6eacb032..7ac3d8e3f 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -173,6 +173,7 @@ export const formsOverrides = { transform: 'none', opacity: 1 }, + '& legend': { display: 'none' }, // Variants '&.MuiFilledInput-root': { @@ -295,6 +296,11 @@ export const formsOverrides = { ...themeTypography.body2 } } + }, + + // Select Multiple selection + '&.MuiInputBase-root .MuiSelect-multiple.MuiInputBase-input': { + paddingLeft: 0 } }, @@ -347,6 +353,19 @@ export const formsOverrides = { } }, + // Form Control Label (radio, checkbox and switch wrapper) + MuiFormControlLabel: { + styleOverrides: { + root: { + marginLeft: getSpacing(-0.5), + + '& .MuiSwitch-root': { + marginLeft: getSpacing(0.5) + } + } + } + }, + // Form Helper Text MuiFormHelperText: { styleOverrides: { @@ -464,17 +483,14 @@ export const formsOverrides = { styleOverrides: { inputRoot: { '&[class*="MuiOutlinedInput-root"]': { - padding: getSpacing(3, 1.25, 0.5), - '& .MuiAutocomplete-input': { - padding: getSpacing(0, 1.25, 0.5) + padding: 0 } }, - '&.MuiInputBase-marginDense.MuiOutlinedInput-root .MuiInputBase-input.MuiOutlinedInput-inputMarginDense': - { - paddingTop: getSpacing(0.25), - paddingBottom: getSpacing(0.25) - } + '& .MuiAutocomplete-endAdornment': { + top: 0, + right: getSpacing(0.25) + } } } }, diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index ad8c8e911..f63e5a729 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -86,7 +86,11 @@ export const navigationOverrides = { borderBottomColor: commonPalette.text.primary }, '&.Mui-selected': { - pointerEvents: 'none' + pointerEvents: 'none', + + '& svg path': { + fill: commonPalette.primary.main + } }, '.MuiTabs-vertical &': { paddingTop: 0, diff --git a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js index 0c75c5fa6..9c457b14b 100644 --- a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js +++ b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js @@ -1,5 +1,13 @@ import React, { useState } from 'react'; -import { Box, Grid, MenuItem, Select, TextField } from '@mui/material'; +import { + Box, + Chip, + Grid, + MenuItem, + OutlinedInput, + Select, + TextField +} from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import Typography from '../../../src/components/atoms/Typography'; import SelectField from '../../../src/components/atoms/SelectField'; @@ -73,6 +81,12 @@ const useStyles = makeStyles((theme) => ({ }, label: { minWidth: '200px' + }, + chips: { + display: 'flex', + flexWrap: 'wrap', + gap: theme.spacing(1), + overflow: 'auto' } })); @@ -495,8 +509,27 @@ const SizeTemplate = ({ ); }; -const MultipleTemplate = ({ label, placeholder, defaultValue, helperText, ...rest }) => { +const MultipleTemplate = ({ + label, + placeholder, + defaultValue, + helperText, + size, + ...rest +}) => { const classes = useStyles(); + const [personName, setPersonName] = React.useState([]); + const isSmall = size === 'small'; + + const handleChange = (event) => { + const { + target: { value } + } = event; + setPersonName( + // On autofill we get a stringified value. + typeof value === 'string' ? value.split(',') : value + ); + }; return ( @@ -508,12 +541,45 @@ const MultipleTemplate = ({ label, placeholder, defaultValue, helperText, ...res + + + + {'Select (with custom chips)'} + + + + ); }; diff --git a/yarn.lock b/yarn.lock index 5efd883f1..69d583632 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18923,4 +18923,4 @@ zrender@5.2.1: zwitch@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920" - integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== + integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== \ No newline at end of file From 1acb305c06ac760fcf83c4460dfebe26c37d56e7 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 10:28:06 +0100 Subject: [PATCH 094/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-25 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 534995023..35e8a71ba 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index e59153508..792e7ae43 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index ee2447a4b..34d126e4f 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 6fe550e98..8f10db29f 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index ab3177a3f..a56686288 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 22c6771bc..49f3299d4 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index d74ccc100..e2672c834 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index ec19afcef..8e5e9a587 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index e85322ea8..590c05a0e 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From cc2bcc0a976c589b78a3de25e6a02e7fa431c73a Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 10:31:40 +0100 Subject: [PATCH 095/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 792e7ae43..0457a1000 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 34d126e4f..0f52be7ad 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 8f10db29f..826d3ffa9 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 49f3299d4..aeee8c103 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e2672c834..bfb58a78b 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 8e5e9a587..a981d999d 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-24", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From f0fac9c22b1c3c8ba484297bc9535eda520a731f Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 10:59:39 +0100 Subject: [PATCH 096/154] peer dependencies --- packages/react-ui/src/theme/sections/components/buttons.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index b792b7922..a76c15ca8 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -286,6 +286,9 @@ export const buttonsOverrides = { minWidth: ICON_SIZE, height: ICON_SIZE }, + '& svg path': { + fill: 'currentColor' + }, '&:hover, &:focus-visible': { ...(ownerState.color === 'default' && { backgroundColor: commonPalette.action.hover From a76969843cf7b25d433b5a94e330ad9acbe311e8 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 11:01:34 +0100 Subject: [PATCH 097/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-26 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 35e8a71ba..7aa2f50a3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 0457a1000..edee8af3a 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0f52be7ad..4b64dbc83 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 826d3ffa9..85690fcb0 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index a56686288..dcad6541f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index aeee8c103..b27a2d3db 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index bfb58a78b..8dec8011e 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index a981d999d..fae2da9fe 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 590c05a0e..13410a640 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 4929eeacedfc02181dc535d4aec7f5e63f035984 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 11:03:02 +0100 Subject: [PATCH 098/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index edee8af3a..82de25424 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 4b64dbc83..58f6b91b3 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 85690fcb0..1c0d50385 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index b27a2d3db..305c8acd1 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 8dec8011e..a76bd0bde 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index fae2da9fe..28077bfd9 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-25", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 123ad9833bb775b5f7b65d3a3b372b1a4d0f1d9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 11 Jan 2023 15:43:14 +0100 Subject: [PATCH 099/154] Widgets adapted to the new design system (#562) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 1 + packages/react-ui/src/widgets/BarWidgetUI.js | 15 ++++--- .../HistogramWidgetUI/HistogramWidgetUI.js | 30 ++++++++------ packages/react-ui/src/widgets/PieWidgetUI.js | 40 +++++++++---------- .../src/widgets/ScatterPlotWidgetUI.js | 7 ++-- .../components/TimeSeriesChart.js | 15 ++++--- .../react-ui/src/widgets/WrapperWidgetUI.js | 6 +-- .../src/widgets/legend/LegendCategories.js | 3 +- .../src/widgets/legend/LegendWrapper.js | 4 +- 10 files changed, 61 insertions(+), 61 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38a808880..f95e94a69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Widgets adapted to the new design system [#562](https://github.com/CartoDB/carto-react/pull/562) - Adjustments in theme to fix uses cases in cloud-native [#560](https://github.com/CartoDB/carto-react/pull/560) - Inputs size to small by default [#556](https://github.com/CartoDB/carto-react/pull/556) - New AppBar component (v1) and default props changes[#555](https://github.com/CartoDB/carto-react/pull/555) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index cf146b722..51baeaa96 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -202,6 +202,7 @@ export const dataDisplayOverrides = { }, input: { height: getSpacing(4), + width: 'auto', border: `2px solid ${commonPalette.divider}`, borderRadius: getSpacing(0.5), fontWeight: themeTypography.fontWeightMedium, diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index d31c3cb10..0ce27af89 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -11,7 +11,7 @@ const IS_TOUCH_SCREEN = detectTouchScreen(); const useStyles = makeStyles((theme) => ({ optionsSelectedBar: { - marginBottom: theme.spacing(2), + marginBottom: theme.spacingValue * 2, '& .MuiTypography-caption': { color: theme.palette.text.secondary @@ -56,12 +56,11 @@ function BarWidgetUI(props) { () => ({ show: tooltip, trigger: 'axis', - padding: [theme.spacing(0.5), theme.spacing(1)], + padding: [theme.spacingValue * 0.5, theme.spacingValue], borderWidth: 0, textStyle: { ...theme.typography.caption, - fontSize: 12, - lineHeight: 16, + fontSize: 11, color: theme.palette.common.white }, backgroundColor: theme.palette.black[90], @@ -100,7 +99,7 @@ function BarWidgetUI(props) { }, axisLabel: { ...theme.typography.overlineDelicate, - padding: [theme.spacing(0.5), 0, 0, 0] + padding: [theme.spacingValue * 0.5, 0, 0, 0] }, data: xAxisDataWithLabels }), @@ -130,7 +129,7 @@ function BarWidgetUI(props) { axisLabel: { margin: 0, verticalAlign: 'bottom', - padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0], + padding: [0, 0, theme.spacingValue * 1.25, 0], show: true, showMaxLabel: true, showMinLabel: false, @@ -155,9 +154,9 @@ function BarWidgetUI(props) { }), [ maxValue, - theme.palette.black[4], - theme.palette.black[60], + theme.palette.black, theme.typography.overlineDelicate, + theme.spacingValue, yAxisFormatter ] ); diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index 6aa463ccd..d5e625904 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -66,12 +66,11 @@ function HistogramWidgetUI({ () => ({ show: tooltip, trigger: 'item', - padding: [theme.spacing(0.5), theme.spacing(1)], + padding: [theme.spacingValue * 0.5, theme.spacingValue], borderWidth: 0, textStyle: { ...theme.typography.caption, - fontSize: 12, - lineHeight: 16, + fontSize: 11, color: theme.palette.common.white }, backgroundColor: theme.palette.black[90], @@ -107,7 +106,12 @@ function HistogramWidgetUI({ showMaxLabel: true, ...theme.typography.overlineDelicate, hideOverlap: true, - padding: [theme.spacing(0.5), theme.spacing(0.5), 0, theme.spacing(0.5)], + padding: [ + theme.spacingValue * 0.5, + theme.spacingValue * 0.5, + 0, + theme.spacingValue * 0.5 + ], formatter: (value) => { const formattedValue = processFormatterRes(xAxisFormatter(value)); return value === min @@ -141,7 +145,7 @@ function HistogramWidgetUI({ axisLabel: { margin: 0, verticalAlign: 'bottom', - padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0], + padding: [0, 0, theme.spacingValue * 1.25, 0], show: true, showMaxLabel: true, showMinLabel: false, @@ -161,8 +165,8 @@ function HistogramWidgetUI({ } }), [ - theme.palette.black[4], - theme.palette.black[60], + theme.palette.black, + theme.spacingValue, theme.typography.overlineDelicate, data, yAxisFormatter @@ -222,7 +226,7 @@ function HistogramWidgetUI({ }, [ formattedData, markAreaOptions, - theme.palette.black[25], + theme.palette.black, theme.palette.secondary.main, selectedBars, animation @@ -231,10 +235,10 @@ function HistogramWidgetUI({ const options = useMemo( () => ({ grid: { - left: theme.spacing(0.1), - right: theme.spacing(0.1), - top: theme.spacing(2), - bottom: theme.spacing(0.5), + left: theme.spacingValue * 0.1, + right: theme.spacingValue * 0.1, + top: theme.spacingValue * 2, + bottom: theme.spacingValue * 0.5, containLabel: true }, tooltip: tooltipOptions, @@ -260,7 +264,7 @@ function HistogramWidgetUI({ alignItems='center' className={classes.optionsSelectedBar} > - + {selectedBars.length ? yAxisFormatter(countSelectedElements) : 'All'} selected {selectedBars.length > 0 && ( diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js index 5798c2664..f362ebe14 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI.js @@ -50,7 +50,7 @@ function PieWidgetUI({ showTooltip, formatter, theme.palette.common.white, - theme.palette.black[90], + theme.palette.black, tooltipFormatter ] ); @@ -60,12 +60,12 @@ function PieWidgetUI({ () => ({ selectedMode: false, type: 'scroll', - left: theme.spacing(1), - bottom: -theme.spacing(0.5), - itemGap: theme.spacing(3), + left: theme.spacingValue, + bottom: theme.spacingValue * -0.5, + itemGap: theme.spacingValue * 3, icon: 'circle', - itemWidth: theme.spacing(1), - itemHeight: theme.spacing(1), + itemWidth: theme.spacingValue, + itemHeight: theme.spacingValue, // TODO: as prop? formatter: (name) => name.toUpperCase(), textStyle: { @@ -73,7 +73,7 @@ function PieWidgetUI({ color: theme.palette.text.primary, lineHeight: 1, verticalAlign: 'bottom', - padding: [0, 0, 0, theme.spacing(0.5)] + padding: [0, 0, 0, theme.spacingValue * 0.5] }, inactiveColor: theme.palette.text.disabled, pageIcons: { @@ -82,14 +82,12 @@ function PieWidgetUI({ 'path://M9 16.59 13.3265857 12 9 7.41 10.3319838 6 16 12 10.3319838 18z' ] }, - pageIconSize: theme.spacing(1.5), + pageIconSize: theme.spacingValue * 1.5, pageIconColor: theme.palette.text.secondary, pageIconInactiveColor: theme.palette.text.disabled, pageTextStyle: { fontFamily: theme.typography.overlineDelicate.fontFamily, - fontSize: theme.spacing(1.5), - lineHeight: theme.spacing(1.75), - fontWeight: 'normal', + fontSize: 10, color: theme.palette.text.primary } }), @@ -104,15 +102,15 @@ function PieWidgetUI({ rich: { b: { fontFamily: theme.typography.overlineDelicate.fontFamily, - fontSize: theme.spacing(1.75), - lineHeight: theme.spacing(1.75), + fontSize: theme.spacingValue * 1.75, + lineHeight: theme.spacingValue * 1.75, fontWeight: 'normal', color: theme.palette.text.primary }, per: { ...theme.typography, - fontSize: theme.spacing(3), - lineHeight: theme.spacing(4.5), + fontSize: theme.spacingValue * 3, + lineHeight: theme.spacingValue * 4.5, fontWeight: 600, color: theme.palette.text.primary } @@ -150,7 +148,7 @@ function PieWidgetUI({ radius: ['74%', '90%'], selectedOffset: 0, hoverOffset: 5, - bottom: theme.spacing(2.5), + bottom: theme.spacingValue * 2.5, label: { show: showLabel, ...labelOptions }, emphasis: { label: { ...labelOptions, position: undefined } @@ -172,16 +170,16 @@ function PieWidgetUI({ const options = useMemo( () => ({ grid: { - left: theme.spacing(0), - top: theme.spacing(0), - right: theme.spacing(0), - bottom: theme.spacing(0) + left: 0, + top: 0, + right: 0, + bottom: 0 }, tooltip: tooltipOptions, legend: legendOptions, series: seriesOptions }), - [theme, tooltipOptions, seriesOptions, legendOptions] + [tooltipOptions, seriesOptions, legendOptions] ); const clickEvent = useCallback( diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js index 60b59d313..1594782b5 100644 --- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js +++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js @@ -17,11 +17,10 @@ function __generateDefaultConfig( containLabel: true }, tooltip: { - padding: [theme.spacing(0.5), theme.spacing(1)], + padding: [theme.spacingValue * 0.5, theme.spacingValue], textStyle: { ...theme.typography.caption, - fontSize: 12, - lineHeight: 16, + fontSize: 11, color: theme.palette.common.white }, backgroundColor: theme.palette.black[90], @@ -31,7 +30,7 @@ function __generateDefaultConfig( xAxis: { axisLabel: { ...theme.typography.overlineDelicate, - padding: [theme.spacing(0.5), 0, 0, 0], + padding: [theme.spacingValue * 0.5, 0, 0, 0], formatter: (v) => { const formatted = xAxisFormatter(v); return typeof formatted === 'object' diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js index c916619c8..328e287b0 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js @@ -38,11 +38,10 @@ export default function TimeSeriesChart({ () => ({ show: tooltip, trigger: 'axis', - padding: [theme.spacing(0.5), theme.spacing(1)], + padding: [theme.spacingValue * 0.5, theme.spacingValue], textStyle: { ...theme.typography.caption, - fontSize: 12, - lineHeight: 16, + fontSize: 11, color: theme.palette.common.white }, borderWidth: 0, @@ -88,7 +87,7 @@ export default function TimeSeriesChart({ axisLabel: { margin: 0, verticalAlign: 'bottom', - padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0], + padding: [0, 0, theme.spacingValue * 1.25, 0], show: true, showMaxLabel: true, showMinLabel: false, @@ -156,10 +155,10 @@ export default function TimeSeriesChart({ const options = useMemo( () => ({ grid: { - left: theme.spacing(2), - top: theme.spacing(4), - right: theme.spacing(2), - bottom: theme.spacing(3) + left: theme.spacingValue * 2, + top: theme.spacingValue * 4, + right: theme.spacingValue * 2, + bottom: theme.spacingValue * 3 }, color: [theme.palette.secondary.main], tooltip: tooltipOptions, diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 5577922f0..1656f654b 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -154,7 +154,6 @@ function WrapperWidgetUI(props) { aria-label={action.label} onClick={action.action} className={classes.iconAction} - size='large' > {action.icon} @@ -208,14 +207,13 @@ function WrapperWidgetUI(props) { })} {options.length > 0 && ( -
+ <> {optionsIcon} @@ -246,7 +244,7 @@ function WrapperWidgetUI(props) { ))}
- + )} diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 33b7e8dce..2f6d1a0e9 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -76,7 +76,8 @@ const useStyles = makeStyles((theme) => ({ width: '12px', height: '12px', borderRadius: '50%', - position: 'relative' + position: 'relative', + border: '2px solid transparent' }, circle: { '&::after': { diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 50f33a05c..4bc322913 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({ padding: 0 }, content: { - padding: theme.spacing(0, 3, 3, 3) + padding: theme.spacing(0, 2, 2, 3) }, attr: { marginBottom: theme.spacing(1) @@ -82,7 +82,7 @@ export default function LegendWrapper({ {hasChildren && !!children && ( - + {attr && ( By {attr} From 2de6b3a43b3c7a84321a8fd34cc431f8831fef31 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 16:23:50 +0100 Subject: [PATCH 100/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-27 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 7aa2f50a3..eac5fbd05 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 82de25424..f172f4972 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 58f6b91b3..05c082952 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 1c0d50385..6b708d9fd 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index dcad6541f..6f8b07b51 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 305c8acd1..6e0ec67a9 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index a76bd0bde..64c6de93e 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 28077bfd9..9539ecd9c 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 13410a640..25b8ad338 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From a315fa94dac29d0f908bb34206371f3e7e48eaee Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 16:25:15 +0100 Subject: [PATCH 101/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f172f4972..1a95c8207 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 05c082952..e0efbc209 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 6b708d9fd..bc102a6c1 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 6e0ec67a9..cbcfc298d 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 64c6de93e..57e356463 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 9539ecd9c..9c0521581 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-26", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 4c8a59a835eb00f26513aaeaf99814e5d4e97a44 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 19:37:56 +0100 Subject: [PATCH 102/154] widgets fixes --- .../src/theme/sections/components/forms.js | 3 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 1 + .../stories/atoms/SelectField.stories.js | 41 ++++++++++++++----- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 7ac3d8e3f..5baea48f9 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -300,7 +300,8 @@ export const formsOverrides = { // Select Multiple selection '&.MuiInputBase-root .MuiSelect-multiple.MuiInputBase-input': { - paddingLeft: 0 + paddingLeft: 0, + paddingRight: getSpacing(3) } }, diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 1656f654b..a0bee4999 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -65,6 +65,7 @@ const useStyles = makeStyles((theme) => ({ cursor: (props) => (props.expandable ? 'pointer' : 'default'), '& .MuiButton-startIcon': { + marginTop: '3px', marginRight: theme.spacing(1) }, '&:hover': { diff --git a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js index 9c457b14b..d6af76f16 100644 --- a/packages/react-ui/storybook/stories/atoms/SelectField.stories.js +++ b/packages/react-ui/storybook/stories/atoms/SelectField.stories.js @@ -558,19 +558,40 @@ const MultipleTemplate = ({ label={label} size={size} multiple + displayEmpty value={personName} onChange={handleChange} input={} - renderValue={(selected) => ( - - {selected.map((value) => ( - - ))} - - )} + renderValue={(selected) => { + if (selected.length === 0) { + return ( + + Placeholder + + ); + } + + return ( + + {selected.map((value) => ( + + ))} + + ); + }} + // renderValue={(selected) => ( + // + // {selected.map((value) => ( + // + // ))} + // + //)} > {[...Array(10)].map((x, index) => ( From 685741d81d58f9ddda59277228ac64348ea3dab8 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 19:40:27 +0100 Subject: [PATCH 103/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-28 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index eac5fbd05..b874533fe 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 1a95c8207..897e7f692 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index e0efbc209..5f23e8b94 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index bc102a6c1..bbfd01a42 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 6f8b07b51..5684bec38 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index cbcfc298d..15165044d 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 57e356463..f28f6d143 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 9c0521581..135b525e8 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 25b8ad338..c76ff1884 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 82084a058265c0fca806715da94e3fa77b6d8179 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 11 Jan 2023 19:42:00 +0100 Subject: [PATCH 104/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 897e7f692..ec714d971 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 5f23e8b94..076cb6e7a 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index bbfd01a42..5e750acd8 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 15165044d..558df0955 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index f28f6d143..a874fff63 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 135b525e8..d945cac72 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-27", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 071e54ca057ebdda1c2d9aeefadc7f5c34c4c5c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 12 Jan 2023 17:15:26 +0100 Subject: [PATCH 105/154] Cherry pick from #531 PR (#564) --- CHANGELOG.md | 1 + packages/react-api/src/api/SQL.js | 44 +++++++++++++++---- .../src/theme/sections/components/surfaces.js | 10 +---- packages/react-ui/src/theme/themeConstants.js | 1 - 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f95e94a69..e6abf51de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Cherry pick from #531 PR [#564](https://github.com/CartoDB/carto-react/pull/564) - Widgets adapted to the new design system [#562](https://github.com/CartoDB/carto-react/pull/562) - Adjustments in theme to fix uses cases in cloud-native [#560](https://github.com/CartoDB/carto-react/pull/560) - Inputs size to small by default [#556](https://github.com/CartoDB/carto-react/pull/556) diff --git a/packages/react-api/src/api/SQL.js b/packages/react-api/src/api/SQL.js index a8e04bfbe..85aaf617e 100644 --- a/packages/react-api/src/api/SQL.js +++ b/packages/react-api/src/api/SQL.js @@ -20,7 +20,13 @@ const DEFAULT_USER_COMPONENT_IN_URL = '{user}'; * @param { Object } props.opts - Additional options for the HTTP request * @param { import('@deck.gl/carto').QueryParameters } props.queryParameters - SQL query parameters */ -export const executeSQL = async ({ credentials, query, connection, opts, queryParameters }) => { +export const executeSQL = async ({ + credentials, + query, + connection, + opts, + queryParameters +}) => { let response; if (!credentials) { @@ -28,7 +34,13 @@ export const executeSQL = async ({ credentials, query, connection, opts, queryPa } try { - const request = createRequest({ credentials, connection, query, opts, queryParameters }); + const request = createRequest({ + credentials, + connection, + query, + opts, + queryParameters + }); response = await fetch(request); } catch (error) { if (error.name === 'AbortError') throw error; @@ -55,7 +67,13 @@ export const executeSQL = async ({ credentials, query, connection, opts, queryPa * Create an 'SQL query' request * (using GET or POST request, depending on url size) */ -function createRequest({ credentials, connection, query, opts = {}, queryParameters = [] }) { +function createRequest({ + credentials, + connection, + query, + opts = {}, + queryParameters = [] +}) { const { abortController, ...otherOptions } = opts; const { apiVersion = API_VERSIONS.V2 } = credentials; @@ -63,8 +81,7 @@ function createRequest({ credentials, connection, query, opts = {}, queryParamet const rawParams = { client: CLIENT, q: query?.trim(), - ...otherOptions, - queryParameters: queryParameters ? JSON.stringify(queryParameters) : undefined + ...otherOptions }; if (apiVersion === API_VERSIONS.V3) { @@ -79,7 +96,11 @@ function createRequest({ credentials, connection, query, opts = {}, queryParamet } // Get request - const urlParamsForGet = Object.entries(rawParams).map(([key, value]) => + const getParams = { + ...rawParams, + queryParameters: queryParameters ? JSON.stringify(queryParameters) : undefined + }; + const urlParamsForGet = Object.entries(getParams).map(([key, value]) => encodeParameter(key, value) ); const getUrl = generateApiUrl({ @@ -87,7 +108,9 @@ function createRequest({ credentials, connection, query, opts = {}, queryParamet connection, parameters: urlParamsForGet }); - if (getUrl.length < REQUEST_GET_MAX_URL_LENGTH) { + + const isGet = getUrl.length < REQUEST_GET_MAX_URL_LENGTH; + if (isGet) { return getRequest(getUrl, requestOpts); } @@ -96,12 +119,17 @@ function createRequest({ credentials, connection, query, opts = {}, queryParamet apiVersion === API_VERSIONS.V3 ? [`access_token=${credentials.accessToken}`, `client=${CLIENT}`] : null; + + const payload = { + ...rawParams, + queryParameters + }; const postUrl = generateApiUrl({ credentials, connection, parameters: urlParamsForPost }); - return postRequest(postUrl, rawParams, requestOpts); + return postRequest(postUrl, payload, requestOpts); } /** diff --git a/packages/react-ui/src/theme/sections/components/surfaces.js b/packages/react-ui/src/theme/sections/components/surfaces.js index 0f837b74f..69003c355 100644 --- a/packages/react-ui/src/theme/sections/components/surfaces.js +++ b/packages/react-ui/src/theme/sections/components/surfaces.js @@ -16,19 +16,11 @@ export const surfacesOverrides = { color: commonPalette.common.white, boxShadow: themeShadows[0], - ['@media (min-width: ' + BREAKPOINTS.XL + 'px)']: { - height: APPBAR_SIZE_M - }, - '& .MuiToolbar-root': { justifyContent: 'space-between', width: '100%', padding: getSpacing(0, 1), - minHeight: APPBAR_SIZE, - - ['@media (min-width: ' + BREAKPOINTS.XL + 'px)']: { - minHeight: APPBAR_SIZE_M - } + minHeight: APPBAR_SIZE }, '& .MuiTypography-root': { color: commonPalette.common.white diff --git a/packages/react-ui/src/theme/themeConstants.js b/packages/react-ui/src/theme/themeConstants.js index b311483cc..894b405d9 100644 --- a/packages/react-ui/src/theme/themeConstants.js +++ b/packages/react-ui/src/theme/themeConstants.js @@ -18,4 +18,3 @@ export const ICON_SIZE_M = getSpacing(3); // AppBar export const APPBAR_SIZE = getSpacing(6); -export const APPBAR_SIZE_M = getSpacing(8); From c4e5880bc422cd7890f67ae60230f4221e8ec87e Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 17:18:10 +0100 Subject: [PATCH 106/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-29 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index b874533fe..2b06aa315 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index ec714d971..fc73c8fb3 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 076cb6e7a..1e4fa27fc 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 5e750acd8..2cba151bb 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 5684bec38..d9f3791b2 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 558df0955..4d7e925b6 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index a874fff63..2bf0b2e28 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d945cac72..cd1d8f5d2 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index c76ff1884..62f0977a8 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 767dfbf94afafdd94f9b5e5b0f307f8f1c3f2fb3 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 17:19:23 +0100 Subject: [PATCH 107/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index fc73c8fb3..5aa3a82ea 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 1e4fa27fc..d74a20e42 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 2cba151bb..0ed9ef3f7 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 4d7e925b6..7ee59c333 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 2bf0b2e28..c97bf0e7c 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index cd1d8f5d2..ce404dd4d 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-28", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From ebbc128ec5ad5d68b67626cc2b9703f198ae94e1 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 17:51:31 +0100 Subject: [PATCH 108/154] doNotFillIcon --- packages/react-ui/src/theme/sections/components/buttons.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index a76c15ca8..d894e8082 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -59,7 +59,7 @@ export const buttonsOverrides = { backgroundColor: commonPalette.secondary.light }) }, - '& svg path': { + '& svg:not(.doNotFillIcon) path': { fill: 'currentColor' }, // Pairing buttons separation @@ -286,7 +286,7 @@ export const buttonsOverrides = { minWidth: ICON_SIZE, height: ICON_SIZE }, - '& svg path': { + '& svg:not(.doNotFillIcon) path': { fill: 'currentColor' }, '&:hover, &:focus-visible': { From efb51bb220dd879933ecf965461dee16f132d3be Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 17:53:39 +0100 Subject: [PATCH 109/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-30 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 2b06aa315..d21119907 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 5aa3a82ea..fcdb2301c 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d74a20e42..b02435578 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 0ed9ef3f7..e2fd8057e 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index d9f3791b2..2420ee66f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 7ee59c333..161326751 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index c97bf0e7c..1a8710892 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index ce404dd4d..5c4b46d28 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 62f0977a8..e21a88509 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 1474947f9fa3d6169aa541c6619ce69ffc782614 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 18:05:15 +0100 Subject: [PATCH 110/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index fcdb2301c..7d9172f8d 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index b02435578..47cfd65ee 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index e2fd8057e..f4389d1cd 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 161326751..d3fbdd0e6 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1a8710892..891d81415 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 5c4b46d28..a0cd59831 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-29", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 92ff1c249aa5cbfbfb72d6d007052418a0aa5489 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 12 Jan 2023 19:53:05 +0100 Subject: [PATCH 111/154] Fixes in Autocomplete component (#565) --- .../react-ui/src/theme/sections/components/forms.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 5baea48f9..643a231df 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -1,3 +1,4 @@ +import React from 'react'; import { ICON_SIZE, ICON_SIZE_M } from '../../themeConstants'; import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; @@ -481,6 +482,10 @@ export const formsOverrides = { // Autocomplete MuiAutocomplete: { + defaultProps: { + popupIcon: + }, + styleOverrides: { inputRoot: { '&[class*="MuiOutlinedInput-root"]': { @@ -491,7 +496,11 @@ export const formsOverrides = { '& .MuiAutocomplete-endAdornment': { top: 0, right: getSpacing(0.25) - } + }, + '& .MuiAutocomplete-popupIndicator:hover, & .MuiAutocomplete-popupIndicator:focus-visible': + { + backgroundColor: 'transparent' + } } } }, From 04297f632082abda0689dc29e1f503919d5bed9e Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 19:55:13 +0100 Subject: [PATCH 112/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-31 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index d21119907..62904cb1b 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 7d9172f8d..e80d41c3e 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 47cfd65ee..8e4f4705c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index f4389d1cd..e7f7c81a4 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 2420ee66f..b00bbbe9f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index d3fbdd0e6..4934d541b 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 891d81415..fb7398082 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index a0cd59831..da82c2c4a 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index e21a88509..8de916e4d 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 894733f08ecb2261d0b79bfbcc93e88ccfca45f8 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 19:57:47 +0100 Subject: [PATCH 113/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index e80d41c3e..0ea4a2474 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 8e4f4705c..88c705a43 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index e7f7c81a4..b2ac425d0 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 4934d541b..79ea7cb19 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index fb7398082..12e88a19b 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index da82c2c4a..3a176c16e 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-30", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From bf913f1f8dea1d7d300c3be64976c1de3f75299e Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 20:20:58 +0100 Subject: [PATCH 114/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-32 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-ui/src/components/organisms/AppBar.js | 6 +++++- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 10 files changed, 15 insertions(+), 11 deletions(-) diff --git a/lerna.json b/lerna.json index 62904cb1b..52627a45f 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 0ea4a2474..f90eb346e 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 88c705a43..fae3c5e08 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index b2ac425d0..5fa5a30d2 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index b00bbbe9f..658820583 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 79ea7cb19..3013da022 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 12e88a19b..a63607cc1 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/src/components/organisms/AppBar.js b/packages/react-ui/src/components/organisms/AppBar.js index d26d6075e..b6a20f138 100644 --- a/packages/react-ui/src/components/organisms/AppBar.js +++ b/packages/react-ui/src/components/organisms/AppBar.js @@ -24,7 +24,11 @@ const useStyles = makeStyles((theme) => ({ marginRight: theme.spacing(1.5) }, menuButton: { - marginRight: theme.spacing(1) + marginRight: theme.spacing(1), + + '&.MuiButtonBase-root svg path': { + fill: theme.palette.background.paper + } }, logo: { display: 'flex', diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 3a176c16e..75f00d441 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 8de916e4d..737612ba4 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 8e9a6fb557017096d3ae1181aa52c767e5be42b4 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 12 Jan 2023 20:21:53 +0100 Subject: [PATCH 115/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f90eb346e..761a90418 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index fae3c5e08..97531d0f2 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 5fa5a30d2..fb9d15a24 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 3013da022..ffd6ead94 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index a63607cc1..5b7825b35 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 75f00d441..816fef1c3 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-31", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From ac18e1db1b8c42cafd0159bf380926b35adb1059 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 16 Jan 2023 17:40:59 +0100 Subject: [PATCH 116/154] Adjustments in theme to fix uses cases in cloud-native (#567) --- CHANGELOG.md | 1 + UPGRADE.md | 12 ++++++++++++ .../react-ui/src/theme/sections/components/forms.js | 13 ++++++++++--- packages/react-ui/src/theme/sections/typography.js | 4 ++-- packages/react-ui/src/widgets/NoDataAlert.js | 1 + .../stories/widgetsUI/NoDataAlert.stories.js | 4 ++-- 6 files changed, 28 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6abf51de..554612303 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Adjustments in theme to fix uses cases in cloud-native [#567](https://github.com/CartoDB/carto-react/pull/567) - Cherry pick from #531 PR [#564](https://github.com/CartoDB/carto-react/pull/564) - Widgets adapted to the new design system [#562](https://github.com/CartoDB/carto-react/pull/562) - Adjustments in theme to fix uses cases in cloud-native [#560](https://github.com/CartoDB/carto-react/pull/560) diff --git a/UPGRADE.md b/UPGRADE.md index be2a766ad..77551d3da 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -21,10 +21,22 @@ Also added some files for shared constants (`themeConstants.js`) and useful func Removed unused custom `createTheme` function in `carto-theme.js`. +## theme.spacing + We have a new custom spacing constant in carto-theme, `spacingValue`, which you should use instead of the common `theme.spacing()` function in cases where you need to do value calculations, because since Mui v5, theme.spacing is no longer a number, but a string in this format: `number + px`. Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual. +Needed changes: + +1. Change `${theme.spacing(xx)}px` by `${theme.spacing(xx)}`. It means, without the `px` ending, since in Mui v5 it is appended to the end of the string by default. + +Tip: An easy search to catch up this, would be `)}px` + +2. Change `-theme.spacing(xx)` by `theme.spacing(-xx)`. It means, move the negative symbol inside the function. + +Tip: An easy search to catch up this, would be `-theme.spacing(` + ## 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/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 643a231df..9480e4658 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -335,8 +335,11 @@ export const formsOverrides = { { marginTop: 0 }, - '& .MuiSvgIcon-root': { + '& .MuiSvgIcon-root, & svg': { fontSize: ICON_SIZE, + width: ICON_SIZE, + minWidth: ICON_SIZE, + height: ICON_SIZE, color: commonPalette.text.secondary }, '.Mui-disabled &': { @@ -536,12 +539,16 @@ export const formsOverrides = { '&:hover': { backgroundColor: commonPalette.action.hover }, + '&.MuiSwitch-switchBase input': { + top: getSpacing(1), + left: getSpacing(1) + }, '&.Mui-checked': { transform: 'translate(0, -8px)', color: commonPalette.common.white, - '& input': { - left: getSpacing(-1.5) + '&.MuiSwitch-switchBase input': { + left: 0 }, '& + .MuiSwitch-track': { opacity: 1, diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js index 288e4c0df..e30ef0c16 100644 --- a/packages/react-ui/src/theme/sections/typography.js +++ b/packages/react-ui/src/theme/sections/typography.js @@ -97,10 +97,10 @@ const baseTypography = { }, overline: { fontFamily: 'Inter, sans-serif', - fontWeight: 600, + fontWeight: 500, fontSize: getPixelToRem(10), lineHeight: 1.2, - letterSpacing: '2px', + letterSpacing: '1.2px', textTransform: 'uppercase' } }; diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index d8a9bacb8..91fcbe6ba 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -7,6 +7,7 @@ function AlertBody({ color = undefined, children }) { return children ? ( Date: Mon, 16 Jan 2023 18:26:04 +0100 Subject: [PATCH 117/154] v0.0.0-experimental-muiv5-1.5.0-alpha.4-33 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 52627a45f..aa46ffd78 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 761a90418..7502edfb2 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 97531d0f2..bbb70cbbd 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index fb9d15a24..de762dfcf 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 658820583..2ced0205b 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index ffd6ead94..e4198701c 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 5b7825b35..b402688b8 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 816fef1c3..8203d2222 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 737612ba4..84e51b7e5 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 737dc5393ebf8d38b332fd9422f15d21048ac25f Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 16 Jan 2023 18:27:05 +0100 Subject: [PATCH 118/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 7502edfb2..a17c22313 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index bbb70cbbd..9a09d91e1 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index de762dfcf..45419e34a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index e4198701c..dcdd3bec9 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index b402688b8..f7d447c26 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 8203d2222..1ca49d33d 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-32", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 561baa73289ee080d0613dd1665fcfe23223c46c Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 16 Jan 2023 18:43:10 +0100 Subject: [PATCH 119/154] remove unused getMaterialUIContext function --- .../react-ui/__tests__/widgets/testUtils.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 8a1fd18d8..73f01a11d 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -1,16 +1,5 @@ -import React from 'react'; - -import { - createTheme, - responsiveFontSizes, - ThemeProvider, - StyledEngineProvider, - adaptV4Theme -} from '@mui/material'; import * as echarts from 'echarts'; -import { cartoThemeOptions } from '../../src/theme/carto-theme'; - export function currencyFormatter(value) { return { prefix: '$', @@ -23,14 +12,6 @@ export function currencyFormatter(value) { }; } -// export function getMaterialUIContext(children) { -// return ( -// -// {children} -// -// ); -// } - export const mockEcharts = { init() { jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(() => ({ From 275712c485cb45436a96dda5941ff601407c6c30 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 16 Jan 2023 18:47:05 +0100 Subject: [PATCH 120/154] remove unused getMaterialUIContext function --- .../react-ui/__tests__/widgets/testUtils.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 73f01a11d..8a1fd18d8 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -1,5 +1,16 @@ +import React from 'react'; + +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider, + adaptV4Theme +} from '@mui/material'; import * as echarts from 'echarts'; +import { cartoThemeOptions } from '../../src/theme/carto-theme'; + export function currencyFormatter(value) { return { prefix: '$', @@ -12,6 +23,14 @@ export function currencyFormatter(value) { }; } +// export function getMaterialUIContext(children) { +// return ( +// +// {children} +// +// ); +// } + export const mockEcharts = { init() { jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(() => ({ From 195acd0aa14748e4007ded158a9c3f7f003e5cc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Tue, 17 Jan 2023 11:00:14 +0100 Subject: [PATCH 121/154] Update design-system branch with master (#568) --- CHANGELOG.md | 44 ++ DEVELOPERS.md | 11 +- UPGRADE.md | 4 + package.json | 18 +- .../react-api/__tests__/api/model.test.js | 19 +- .../hooks/useCartoLayerProps.test.js | 1 + packages/react-api/package.json | 6 +- packages/react-api/src/api/common.js | 12 +- packages/react-api/src/api/model.js | 12 +- packages/react-api/src/api/stats.js | 11 +- .../src/hooks/FeaturesDroppedLoader.js | 13 + .../react-api/src/hooks/useCartoLayerProps.js | 2 + .../react-api/src/hooks/useTileFeatures.js | 19 +- packages/react-api/src/index.js | 1 + packages/react-basemaps/package.json | 2 +- .../react-basemaps/src/basemaps/GoogleMap.js | 11 +- packages/react-core/package.json | 4 +- packages/react-redux/package.json | 4 +- .../ComparativeCategoryWidgetUI.test.js | 241 +++++++++++ .../widgets/ComparativePieWidgetUI.test.js | 53 +++ .../react-ui/__tests__/widgets/testUtils.js | 20 +- .../src/custom-components/AnimatedNumber.js | 43 ++ .../react-ui/src/hooks/useAnimatedNumber.js | 41 ++ packages/react-ui/src/index.d.ts | 8 +- packages/react-ui/src/index.js | 8 +- packages/react-ui/src/types.d.ts | 78 ++++ packages/react-ui/src/widgets/BarWidgetUI.js | 1 + .../react-ui/src/widgets/CategoryWidgetUI.js | 4 + .../CategoryItem.js | 185 +++++++++ .../CategorySkeleton.js | 40 ++ .../ComparativeCategoryWidgetUI.js | 391 +++++++++++++++++ .../transposeCategoryData.js | 57 +++ .../useCategoryStyles.js | 68 +++ .../comparative/ComparativeFormulaWidgetUI.js | 154 +++++++ .../comparative/ComparativePieWidgetUI.js | 313 ++++++++++++++ .../src/widgets/legend/LegendCategories.js | 1 + .../ComparativeCategoryWidgetUI.stories.js | 47 +++ .../ComparativeFormulaWidgetUI.stories.js | 24 ++ .../ComparativePieWidgetUI.stories.js | 39 ++ packages/react-widgets/package.json | 4 +- .../src/layers/FeatureSelectionLayer.js | 106 ++--- yarn.lock | 392 +++++++++++------- 42 files changed, 2225 insertions(+), 287 deletions(-) create mode 100644 packages/react-api/src/hooks/FeaturesDroppedLoader.js create mode 100644 packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js create mode 100644 packages/react-ui/__tests__/widgets/ComparativePieWidgetUI.test.js create mode 100644 packages/react-ui/src/custom-components/AnimatedNumber.js create mode 100644 packages/react-ui/src/hooks/useAnimatedNumber.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/transposeCategoryData.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js create mode 100644 packages/react-ui/src/widgets/comparative/ComparativePieWidgetUI.js create mode 100644 packages/react-ui/storybook/stories/widgetsUI/ComparativeCategoryWidgetUI.stories.js create mode 100644 packages/react-ui/storybook/stories/widgetsUI/ComparativeFormulaWidgetUI.stories.js create mode 100644 packages/react-ui/storybook/stories/widgetsUI/ComparativePieWidgetUI.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 554612303..4e8498157 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Update design-system branch with master [#563](https://github.com/CartoDB/carto-react/pull/563) - Adjustments in theme to fix uses cases in cloud-native [#567](https://github.com/CartoDB/carto-react/pull/567) - Cherry pick from #531 PR [#564](https://github.com/CartoDB/carto-react/pull/564) - Widgets adapted to the new design system [#562](https://github.com/CartoDB/carto-react/pull/562) @@ -41,6 +42,41 @@ ## 1.5 +## 1.5.0-alpha.11 (2023-01-12) + +- Remove custom fetch function. Fixes issues with icon loading and FillStyleExtensions + +## 1.5.0-alpha.10 (2023-01-04) + +- Allow to use custom version explicitly in GoogleMap (not 'beta' by default now) [#550](https://github.com/CartoDB/carto-react/pull/550) +- Fix lack of refresh in BarWidgetUI when modifying yAxisData dinamically [#558](https://github.com/CartoDB/carto-react/pull/558) + +## 1.5.0-alpha.9 (2022-11-29) + +- Improve rendering performance of FeatureSelectionLayer (mask layer) [#541](https://github.com/CartoDB/carto-react/pull/541) + +## 1.5.0-alpha.8 (2022-11-25) + +- Implement ComparativePieWidgetUI [#510](https://github.com/CartoDB/carto-react/pull/510) +- Fix `executeSQL` through **POST** request [#531](https://github.com/CartoDB/carto-react/pull/531) + +### 1.5.0-alpha.7 (2022-11-09) + +- Implement ComparativeCategoryWidgetUI [#505](https://github.com/CartoDB/carto-react/pull/505) +- Fix `executeModel` through **POST** request [#525](https://github.com/CartoDB/carto-react/pull/525) + +### 1.5.0-alpha.6 (2022-11-02) + +- Fix TileLayer unauthorized error due to [breaking changes](https://github.com/visgl/deck.gl/pull/7287) in deck.gl >=8.9.0-alpha.3 and >=8.8.15 [#519](https://github.com/CartoDB/carto-react/pull/519) +- Bump deck.gl to 8.8.15 [#520](https://github.com/CartoDB/carto-react/pull/520) +- Fix missing implementation in stats to support `queryParameters` in RangeWidget and HistogramWidget [#517](https://github.com/CartoDB/carto-react/pull/517) +- AnimatedNumber component with hook wrapping `animateValue` [#509](https://github.com/CartoDB/carto-react/pull/509) +- Implement ComparativeFormulaWidgetUI [#504](https://github.com/CartoDB/carto-react/pull/504) + +### 1.5.0-alpha.5 (2022-10-26) + +- Fix LegendCategories displaying outlined points [#508](https://github.com/CartoDB/carto-react/pull/508) + ### 1.5.0-alpha.4 (2022-10-14) - Update nebula to latest stable 1.0.4 and deck.gl ^8.9.0-alpha.4 [#491](https://github.com/CartoDB/carto-react/pull/491) @@ -61,6 +97,14 @@ ## 1.4 +### 1.4.3 (2022-11-03) + +- Fix TileLayer unauthorized error due to [breaking changes](https://github.com/visgl/deck.gl/pull/7287) in deck.gl >=8.8.15 [#519](https://github.com/CartoDB/carto-react/pull/519) + +### 1.4.2 (2022-10-27) + +- Support for **deck.gl 8.8.15** _(breaking change)_. It requires ‘quadbin’ >= 0.1.5 + ### 1.4.1 (2022-09-20) - Fix the Feature selection tool by setting the `EditableGeoJsonLayer` billboard property to false to be compatible with Google raster base maps diff --git a/DEVELOPERS.md b/DEVELOPERS.md index 1f39eaafa..d02b2fc9f 100644 --- a/DEVELOPERS.md +++ b/DEVELOPERS.md @@ -35,7 +35,7 @@ Then, inside the proper template folder in carto-react-template, link packages w You will need npm credentials under @carto organization. -To make a **prerelease**: +### To make a **prerelease**: 1. Create a new branch from master, named after the new version (eg, if current version is v1.0.0-rc.2, `git checkout -b release-1.0.0-rc.3`) 2. Modify the changelog, creating a new entry with current contents from `Not released` for the new release; eg: `## 1.0.0-rc.3 (2021-03-22)`. Keep 'Not released' header for the future work, and commit it to the new branch @@ -48,10 +48,15 @@ To make a **prerelease**: 9. Once the npm package has been published, `Merge the PR` to master from github 10. Update the storybook (if required) -To make an official **release**: - +### To make an official **release**: 1. Repeat the same steps as in a prerelease, but executing `yarn publish:release` +### To apply a hotfix patch +- If change also applies to current master, it's recommended to start by creating a PR applying the fix it (to avoid forgetting it). +- Then create a branch for the patch release, but this time start with the desired (usually stable) branch. For example, to create a patch 1.4.8, while not affecting current master, do `git checkout -b release-v1.4.8 release-v1.4.7`. Then apply there, locally, all changes as needed. If you created a first PR for master, you can use cherry-pick to share changes among master & patch. +- After having everything ready, go as usual, with changelog entry + `yarn publish:release` + + ## Firebase deployment of storybook (Restricted to CARTO developers) diff --git a/UPGRADE.md b/UPGRADE.md index 77551d3da..6c8004066 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -48,6 +48,10 @@ Added a few custom variants to the typography set: - code2 - code3 +Some variants have been replaced because they were so specific to some components, these are: + +- charts (replaced by `theme.palette.overline + weight='strong'`) + For external use: `Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. We have a `Typography` component that uses `Mui Typography` and extends it with some useful props: diff --git a/package.json b/package.json index 0b40e3c5e..b5c0974ca 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,14 @@ "packages/*" ], "devDependencies": { - "@deck.gl/aggregation-layers": "^8.9.0-alpha.4", - "@deck.gl/carto": "^8.9.0-alpha.4", - "@deck.gl/core": "^8.9.0-alpha.4", - "@deck.gl/extensions": "^8.9.0-alpha.4", - "@deck.gl/geo-layers": "^8.9.0-alpha.4", - "@deck.gl/google-maps": "^8.9.0-alpha.4", - "@deck.gl/layers": "^8.9.0-alpha.4", - "@deck.gl/mesh-layers": "^8.9.0-alpha.4", + "@deck.gl/aggregation-layers": "^8.8.15", + "@deck.gl/carto": "^8.8.15", + "@deck.gl/core": "^8.8.15", + "@deck.gl/extensions": "^8.8.15", + "@deck.gl/geo-layers": "^8.8.15", + "@deck.gl/google-maps": "^8.8.15", + "@deck.gl/layers": "^8.8.15", + "@deck.gl/mesh-layers": "^8.8.15", "@mui/icons-material": "^5.10.9", "@mui/lab": "^5.0.0-alpha.104", "@mui/material": "^5.10.10", @@ -42,7 +42,7 @@ "lint-staged": "^10.5.3", "nyc": "^15.1.0", "patch-package": "6.4.7", - "quadbin": "^0.1.4", + "quadbin": "^0.1.5", "react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", diff --git a/packages/react-api/__tests__/api/model.test.js b/packages/react-api/__tests__/api/model.test.js index 4cd3e8bb9..65cdfccc4 100644 --- a/packages/react-api/__tests__/api/model.test.js +++ b/packages/react-api/__tests__/api/model.test.js @@ -1,5 +1,10 @@ import { executeModel } from '../../src/api/model'; -import { QUERY_PARAMS_SOURCE, QUERY_SOURCE, TABLE_SOURCE, TILESET_SOURCE } from '../dataMocks'; +import { + QUERY_PARAMS_SOURCE, + QUERY_SOURCE, + TABLE_SOURCE, + TILESET_SOURCE +} from '../dataMocks'; const mockedMakeCall = jest.fn(); @@ -50,9 +55,8 @@ describe('model', () => { body: JSON.stringify({ type: 'query', source: longQuerySource.data, - params: JSON.stringify(DEFAULT_PARAMS), - queryParameters: '', - filters: JSON.stringify(longQuerySource.filters), + params: DEFAULT_PARAMS, + filters: longQuerySource.filters, filtersLogicalOperator: longQuerySource.filtersLogicalOperator }) }, @@ -60,9 +64,12 @@ describe('model', () => { }); }); - test('works correctly when the source has queryParameters', () => { - executeModel({ model: 'formula', source: QUERY_PARAMS_SOURCE, params: DEFAULT_PARAMS }); + executeModel({ + model: 'formula', + source: QUERY_PARAMS_SOURCE, + params: DEFAULT_PARAMS + }); expect(mockedMakeCall).toHaveBeenCalledWith({ credentials: TABLE_SOURCE.credentials, diff --git a/packages/react-api/__tests__/hooks/useCartoLayerProps.test.js b/packages/react-api/__tests__/hooks/useCartoLayerProps.test.js index 5aa2b6ee4..4dbee7aff 100644 --- a/packages/react-api/__tests__/hooks/useCartoLayerProps.test.js +++ b/packages/react-api/__tests__/hooks/useCartoLayerProps.test.js @@ -13,6 +13,7 @@ describe('useCartoLayerProps', () => { 'binary', 'onViewportLoad', 'fetch', + 'loaders', 'onDataLoad', 'id', 'visible', diff --git a/packages/react-api/package.json b/packages/react-api/package.json index a17c22313..4959a5251 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -67,9 +67,9 @@ "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@deck.gl/carto": "^8.9.0-alpha.4", - "@deck.gl/core": "^8.9.0-alpha.4", - "@deck.gl/extensions": "^8.9.0-alpha.4", + "@deck.gl/carto": "^8.8.15", + "@deck.gl/core": "^8.8.15", + "@deck.gl/extensions": "^8.8.15", "react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", diff --git a/packages/react-api/src/api/common.js b/packages/react-api/src/api/common.js index ea8307b6e..e3f581c13 100644 --- a/packages/react-api/src/api/common.js +++ b/packages/react-api/src/api/common.js @@ -31,13 +31,21 @@ export function checkCredentials(credentials) { export async function makeCall({ url, credentials, opts }) { let response; let data; + const isPost = opts?.method === 'POST'; try { response = await fetch(url.toString(), { headers: { - Authorization: `Bearer ${credentials.accessToken}` + Authorization: `Bearer ${credentials.accessToken}`, + ...(isPost ? { 'Content-Type': 'application/json' } : {}) }, + ...(isPost + ? { + method: opts?.method, + body: opts?.body + } + : {}), signal: opts?.abortController?.signal, - ...opts?.otherOptions, + ...opts?.otherOptions }); data = await response.json(); } catch (error) { diff --git a/packages/react-api/src/api/model.js b/packages/react-api/src/api/model.js index bd17ad736..3d604420f 100644 --- a/packages/react-api/src/api/model.js +++ b/packages/react-api/src/api/model.js @@ -39,9 +39,11 @@ export function executeModel(props) { let url = `${source.credentials.apiBaseUrl}/v3/sql/${source.connection}/model/${model}`; - const { filters, filtersLogicalOperator, data, type } = source; - const queryParameters = source.queryParameters ? JSON.stringify(source.queryParameters) : '' - const queryParams = { + const { filters, filtersLogicalOperator, data, type } = source; + const queryParameters = source.queryParameters + ? JSON.stringify(source.queryParameters) + : ''; + let queryParams = { type, source: data, params: JSON.stringify(params), @@ -53,6 +55,10 @@ export function executeModel(props) { const isGet = url.length + JSON.stringify(queryParams).length <= URL_LENGTH; if (isGet) { url += '?' + new URLSearchParams(queryParams).toString(); + } else { + queryParams.params = params; + queryParams.filters = filters; + queryParams.queryParameters = source.queryParameters; } return makeCall({ url, diff --git a/packages/react-api/src/api/stats.js b/packages/react-api/src/api/stats.js index 42e199c11..00456c0de 100644 --- a/packages/react-api/src/api/stats.js +++ b/packages/react-api/src/api/stats.js @@ -37,7 +37,12 @@ export async function getStats(props) { } else { const url = buildUrl(source, column); - return makeCall({ url, credentials: source.credentials, opts, queryParameters: source.queryParameters }); + return makeCall({ + url, + credentials: source.credentials, + opts, + queryParameters: source.queryParameters + }); } } @@ -53,6 +58,10 @@ function buildUrl(source, column) { if (isQuery) { url.searchParams.set('q', source.data); + + if (source.queryParameters) { + url.searchParams.set('queryParameters', JSON.stringify(source.queryParameters)); + } } return url; diff --git a/packages/react-api/src/hooks/FeaturesDroppedLoader.js b/packages/react-api/src/hooks/FeaturesDroppedLoader.js new file mode 100644 index 000000000..2fd08dfcf --- /dev/null +++ b/packages/react-api/src/hooks/FeaturesDroppedLoader.js @@ -0,0 +1,13 @@ +export default { + name: 'FeaturesDroppedLoader', + module: 'carto', + category: 'geometry', + extensions: [], + // By only specifying `carto-vector-tile` the SpatialIndexLayer will not use this loader + mimeTypes: ['application/vnd.carto-vector-tile'], + parse: async (arrayBuffer, options, context) => { + const isDroppingFeatures = context.response.headers['features-dropped-from-tile']; + const result = await context.parse(arrayBuffer, options, context); + return result ? { ...result, isDroppingFeatures } : null; + } +}; diff --git a/packages/react-api/src/hooks/useCartoLayerProps.js b/packages/react-api/src/hooks/useCartoLayerProps.js index 3902eaabd..39faa267e 100644 --- a/packages/react-api/src/hooks/useCartoLayerProps.js +++ b/packages/react-api/src/hooks/useCartoLayerProps.js @@ -5,6 +5,7 @@ import useGeojsonFeatures from './useGeojsonFeatures'; import useTileFeatures from './useTileFeatures'; import { getDataFilterExtensionProps } from './dataFilterExtensionUtil'; import { getMaskExtensionProps } from './maskExtensionUtil'; +import FeaturesDroppedLoader from './FeaturesDroppedLoader'; export default function useCartoLayerProps({ source, @@ -51,6 +52,7 @@ export default function useCartoLayerProps({ ...(viewportFeatures && { onViewportLoad, fetch, + loaders: [FeaturesDroppedLoader], onDataLoad }) }; diff --git a/packages/react-api/src/hooks/useTileFeatures.js b/packages/react-api/src/hooks/useTileFeatures.js index c2ba299b0..00bcf5e23 100644 --- a/packages/react-api/src/hooks/useTileFeatures.js +++ b/packages/react-api/src/hooks/useTileFeatures.js @@ -132,11 +132,7 @@ export default function useTileFeatures({ const fetch = useCallback( (...args) => { stopAnyCompute(); - - if (spatialIndex) { - return Layer.defaultProps.fetch.value(...args); - } - return customFetch(...args); + return Layer.defaultProps.fetch.value(...args); }, [stopAnyCompute, spatialIndex] ); @@ -156,19 +152,6 @@ export default function useTileFeatures({ return [onDataLoad, onViewportLoad, fetch]; } -// WORKAROUND: To read headers and know if the tile is dropping features. -// Remove when the new loader is ready => https://github.com/visgl/loaders.gl/pull/2128 -const customFetch = async (url, { layer, loaders, loadOptions, signal }) => { - loadOptions = loadOptions || layer.getLoadOptions(); - loaders = loaders || layer.props.loaders; - - const response = await fetch(url, { signal }); - const isDroppingFeatures = - response.headers.get('Features-Dropped-From-Tile') === 'true'; - const result = await parse(response, loaders, loadOptions); - return result ? { ...result, isDroppingFeatures } : null; -}; - const getColumnNameFromGeoColumn = (geoColumn) => { const parts = geoColumn.split(':'); return parts.length === 1 ? parts[0] : parts.length === 2 ? parts[1] : null; diff --git a/packages/react-api/src/index.js b/packages/react-api/src/index.js index 3e4ac628a..1316b8dbf 100644 --- a/packages/react-api/src/index.js +++ b/packages/react-api/src/index.js @@ -4,6 +4,7 @@ export { getStats as _getStats } from './api/stats'; export { getTileJson as _getTileJson } from './api/tilejson'; export { executeModel as _executeModel } from './api/model'; +export { default as FeaturesDroppedLoader } from './hooks/FeaturesDroppedLoader'; export { default as useCartoLayerProps } from './hooks/useCartoLayerProps'; export { getDataFilterExtensionProps } from './hooks/dataFilterExtensionUtil'; diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 45419e34a..673247bdf 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -65,7 +65,7 @@ }, "peerDependencies": { "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@deck.gl/google-maps": "^8.9.0-alpha.4", + "@deck.gl/google-maps": "^8.8.15", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/src/basemaps/GoogleMap.js b/packages/react-basemaps/src/basemaps/GoogleMap.js index 035f9f1ff..f98e2f50c 100644 --- a/packages/react-basemaps/src/basemaps/GoogleMap.js +++ b/packages/react-basemaps/src/basemaps/GoogleMap.js @@ -10,11 +10,12 @@ import { debounce } from '@carto/react-core'; * @param { Object } props.basemap.options - *MapOptions* as defined by https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions * @param { Object } props.viewState - Viewstate, as defined by deck.gl. Just center and zoom level are supported * @param { Layer[] } props.layers - deck.gl layers array - * @param { function } props.getTooltip - (Optional). Tooltip handler + * @param { function } props.getTooltip - (Optional) Tooltip handler * @param { function } props.onResize - (Optional) onResize handler * @param { function } props.onViewStateChange - (Optional) onViewStateChange handler * @param { string } props.apiKey - Google Maps API Key * @param { string } props.mapId - Google Maps custom mapId + * @param { string } props.customVersion - (Optional) Google Maps custom version, that will be specified at url level. Eg: if customVersion === 'beta' it will use internally this: https://maps.google.com/maps/api/js?v=beta * @returns { JSX.Element } - Data returned from the SQL query execution */ export function GoogleMap(props) { @@ -26,7 +27,8 @@ export function GoogleMap(props) { onResize, onViewStateChange, apiKey, - mapId + mapId, + customVersion = '' } = props; // based on https://publiuslogic.com/blog/google-maps+react-hooks/ const containerRef = useRef(); @@ -137,7 +139,10 @@ export function GoogleMap(props) { script.id = 'gmaps'; script.async = true; script.type = `text/javascript`; - script.src = `https://maps.google.com/maps/api/js?v=beta&key=` + apiKey; + + let url = `https://maps.google.com/maps/api/js?key=${apiKey}`; + if (customVersion) url = `${url}&v=${customVersion}`; + script.src = url; const headScript = document.getElementsByTagName(`script`)[0]; headScript.parentNode.insertBefore(script, headScript); script.addEventListener(`load`, onLoad); diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 2ced0205b..9ed27c4de 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -64,13 +64,13 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@deck.gl/carto": "^8.9.0-alpha.4", + "@deck.gl/carto": "^8.8.15", "@turf/bbox-clip": "^6.3.0", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", "@turf/intersect": "^6.3.0", "h3-js": "^3.7.2", - "quadbin": "^0.1.4" + "quadbin": "^0.1.5" } } diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index dcdd3bec9..dc29247a2 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -65,8 +65,8 @@ "peerDependencies": { "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@deck.gl/carto": "^8.9.0-alpha.4", - "@deck.gl/core": "^8.9.0-alpha.4", + "@deck.gl/carto": "^8.8.15", + "@deck.gl/core": "^8.8.15", "@reduxjs/toolkit": "^1.5.0" } } diff --git a/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js b/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js new file mode 100644 index 000000000..e3ce05db3 --- /dev/null +++ b/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js @@ -0,0 +1,241 @@ +import React from 'react'; +import ComparativeCategoryWidgetUI from '../../src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI'; +import { fireEvent, render, screen } from '../widgets/utils/testUtils'; +import userEvent from '@testing-library/user-event'; + +const SAMPLE_DATA = [ + [ + { name: 'data 1', value: 245 }, + { name: 'data 2', value: 354 }, + { name: 'data 3', value: 245 }, + { name: 'data 4', value: 354 }, + { name: 'data 5', value: 245 }, + { name: 'data 6', value: 354 } + ], + [ + { name: 'data 1', value: 454 }, + { name: 'data 2', value: 346 }, + { name: 'data 3', value: 454 }, + { name: 'data 4', value: 346 }, + { name: 'data 5', value: 454 }, + { name: 'data 6', value: 346 } + ], + [ + { name: 'data 1', value: 532 }, + { name: 'data 2', value: 758 }, + { name: 'data 3', value: 532 }, + { name: 'data 4', value: 760 }, + { name: 'data 5', value: 532 }, + { name: 'data 6', value: 754 } + ] +]; + +const SAMPLE_NAMES = ['serie 1', 'serie 2', 'serie 3']; + +describe('ComparativeCategoryWidgetUI', () => { + test('item skeleton should display', () => { + const { container } = render(); + expect(container.querySelector('.MuiSkeleton-root')).toBeInTheDocument(); + }); + + test('simple', () => { + render( + + ); + + expect(screen.getByText(/data 1/)).toBeInTheDocument(); + + const [ref, ...others] = SAMPLE_DATA.map((s) => s[0]); + const max = Math.max(...others.map((o) => o.value)); + const value = ref.value - max; + + expect(screen.getAllByText(new RegExp(value))[0]).toBeInTheDocument(); + }); + + test('with one selected category', () => { + render( + + ); + + expect(screen.getByText(/1 selected/)).toBeInTheDocument(); + }); + + describe('order', () => { + test('fixed', () => { + render( + + ); + + const renderedCategories = screen.getAllByText(/data \d/); + expect(renderedCategories[0].textContent).toBe('data 1'); + }); + test('ranking', () => { + render( + + ); + + const renderedCategories = screen.getAllByText(/data \d/); + expect(renderedCategories[0].textContent).toBe('data 4'); + }); + }); + + describe('events', () => { + test('category change', () => { + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + fireEvent.click(screen.getByText(/data 1/)); + expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(1); + }); + + test('clear', () => { + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + fireEvent.click(screen.getByText(/Clear/)); + expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(1); + }); + + test('lock', () => { + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + fireEvent.click(screen.getByText(/data 1/)); + expect(screen.getByText(/Lock/)).toBeInTheDocument(); + expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(1); + }); + + test('unlock', () => { + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + fireEvent.click(screen.getByText(/data 1/)); + expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(1); + + fireEvent.click(screen.getByText(/Lock/)); + expect(screen.queryByText(/Unlock/)).toBeInTheDocument(); + expect(screen.queryByText(/Lock/)).not.toBeInTheDocument(); + + fireEvent.click(screen.getByText(/Unlock/)); + expect(screen.queryByText(/Lock/)).toBeInTheDocument(); + expect(screen.queryByText(/Unlock/)).not.toBeInTheDocument(); + }); + + test('search cycle', () => { + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + fireEvent.click(screen.getByText(/Search in 1 elements/)); + fireEvent.click(screen.getByText(/data 1/)); + fireEvent.click(screen.getByText(/Apply/)); + expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(1); + }); + + test('search category', () => { + HTMLElement.prototype.scrollIntoView = jest.fn(); + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + fireEvent.click(screen.getByText(/Search in 1 elements/)); + userEvent.type(screen.getByRole('textbox'), 'data 1'); + fireEvent.click(screen.getByText(/data 1/)); + fireEvent.click(screen.getByText(/Apply/)); + expect(mockOnSelectedCategoriesChange).toHaveBeenCalledTimes(1); + }); + + test('search cancel', () => { + const mockOnSelectedCategoriesChange = jest.fn(); + render( + + ); + + expect(screen.getByText(/Search in 1 elements/)).toBeInTheDocument(); + fireEvent.click(screen.getByText(/Search in 1 elements/)); + fireEvent.click(screen.getByText(/Cancel/)); + expect(screen.getByText(/Search in 1 elements/)).toBeInTheDocument(); + }); + + test('searchable props', () => { + render( + + ); + + expect(screen.queryByText('Search in 1 elements')).not.toBeInTheDocument(); + expect(screen.getByText('Others (1)')).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/react-ui/__tests__/widgets/ComparativePieWidgetUI.test.js b/packages/react-ui/__tests__/widgets/ComparativePieWidgetUI.test.js new file mode 100644 index 000000000..b4f7ff545 --- /dev/null +++ b/packages/react-ui/__tests__/widgets/ComparativePieWidgetUI.test.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { render } from '../widgets/utils/testUtils'; +import ComparativePieWidgetUI from '../../src/widgets/comparative/ComparativePieWidgetUI'; +import { mockEcharts } from './testUtils'; + +const PIE_DATA_PROPS = { + names: ['name 1', 'name 2'], + data: [ + [ + { name: 'data 1', value: 40 }, + { name: 'data 2', value: 60 } + ], + [ + { name: 'data 1', value: 30 }, + { name: 'data 2', value: 70 } + ] + ], + labels: [ + ['label 1', 'label 2'], + ['label 1', 'label 2'] + ], + colors: [ + ['#6732a8', '#32a852'], + ['#a83232', '#ff9900'] + ] +}; + +describe('ComparativePieWidgetUI', () => { + beforeAll(() => { + mockEcharts.init(); + }); + + afterAll(() => { + mockEcharts.destroy(); + }); + + const Widget = (props) => ; + + test('renders correctly', () => { + render(); + }); + + test('with one selected category', () => { + render(); + }); + + test('rerenders with different selected category', () => { + const { rerender } = render(); + + rerender(); + rerender(); + }); +}); diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 8a1fd18d8..4f12152a8 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -1,16 +1,5 @@ -import React from 'react'; - -import { - createTheme, - responsiveFontSizes, - ThemeProvider, - StyledEngineProvider, - adaptV4Theme -} from '@mui/material'; import * as echarts from 'echarts'; -import { cartoThemeOptions } from '../../src/theme/carto-theme'; - export function currencyFormatter(value) { return { prefix: '$', @@ -23,17 +12,10 @@ export function currencyFormatter(value) { }; } -// export function getMaterialUIContext(children) { -// return ( -// -// {children} -// -// ); -// } - export const mockEcharts = { init() { jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(() => ({ + dispatchAction: jest.fn(), hideLoading: jest.fn(), getOption: jest.fn(() => ({ series: [ diff --git a/packages/react-ui/src/custom-components/AnimatedNumber.js b/packages/react-ui/src/custom-components/AnimatedNumber.js new file mode 100644 index 000000000..5757ed868 --- /dev/null +++ b/packages/react-ui/src/custom-components/AnimatedNumber.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import useAnimatedNumber from '../hooks/useAnimatedNumber'; + +/** + * Renders a widget + * @param {Object} props + * @param {boolean} props.enabled + * @param {number} props.value + * @param {{ duration?: number; animateOnMount?: boolean; initialValue?: number }} [props.options] + * @param {(n: number) => React.ReactNode} [props.formatter] + */ +function AnimatedNumber({ enabled, value, options, formatter }) { + const defaultOptions = { + animateOnMount: true, + disabled: enabled === false || value === null || value === undefined + }; + const animated = useAnimatedNumber(value, { ...defaultOptions, ...options }); + return {formatter ? formatter(animated) : animated}; +} + +AnimatedNumber.displayName = 'AnimatedNumber'; +AnimatedNumber.defaultProps = { + enabled: true, + value: 0, + options: {}, + formatter: null +}; + +export const animationOptionsPropTypes = PropTypes.shape({ + duration: PropTypes.number, + animateOnMount: PropTypes.bool, + initialValue: PropTypes.number +}); + +AnimatedNumber.propTypes = { + enabled: PropTypes.bool, + value: PropTypes.number.isRequired, + options: animationOptionsPropTypes, + formatter: PropTypes.func +}; + +export default AnimatedNumber; diff --git a/packages/react-ui/src/hooks/useAnimatedNumber.js b/packages/react-ui/src/hooks/useAnimatedNumber.js new file mode 100644 index 000000000..504ef9420 --- /dev/null +++ b/packages/react-ui/src/hooks/useAnimatedNumber.js @@ -0,0 +1,41 @@ +import { useEffect, useRef, useState } from 'react'; +import { animateValue } from '../widgets/utils/animations'; + +/** + * React hook to handle animating value changes over time, abstracting the necesary state, refs and effects + * @param {number} value + * @param {{ disabled?: boolean; duration?: number; animateOnMount?: boolean; initialValue?: number; }} [options] + */ +export default function useAnimatedNumber(value, options = {}) { + const { disabled, duration, animateOnMount, initialValue = 0 } = options; + + /** @type {any} */ + const requestAnimationFrameRef = useRef(); + + // if we want to run the animation on mount, we set the starting value of the animated number as 0 (or the number in `initialValue`) and animate to the target value from there + const [animatedValue, setAnimatedValue] = useState(() => + animateOnMount ? initialValue : value + ); + + useEffect(() => { + if (!disabled) { + animateValue({ + start: animatedValue, + end: value, + duration: duration || 500, // 500ms + drawFrame: (val) => setAnimatedValue(val), + requestRef: requestAnimationFrameRef + }); + } else { + setAnimatedValue(value); + } + + return () => { + // eslint-disable-next-line react-hooks/exhaustive-deps + cancelAnimationFrame(requestAnimationFrameRef.current); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value, disabled, duration]); + + return animatedValue; +} diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 8e2674096..83c141170 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -22,6 +22,9 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants'; import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; +import ComparativePieWidgetUI from './widgets/comparative/ComparativePieWidgetUI'; +import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI'; +import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI'; import Typography from './components/atoms/Typography'; import Button from './components/atoms/Button'; import PasswordField from './components/atoms/PasswordField'; @@ -45,10 +48,13 @@ export { useTimeSeriesInteractivity, TimeSeriesProvider, CHART_TYPES as TIME_SERIES_CHART_TYPES, - FeatureSelectionWidgetUI, TableWidgetUI, LegendWidgetUI, RangeWidgetUI, + ComparativePieWidgetUI, + FeatureSelectionWidgetUI, + ComparativeFormulaWidgetUI, + ComparativeCategoryWidgetUI, LEGEND_TYPES, NoDataAlert, LegendCategories, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index d420559d6..624d2a763 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -14,9 +14,12 @@ import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI'; import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; import RangeWidgetUI from './widgets/RangeWidgetUI'; +import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI'; +import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI'; import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants'; import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; +import ComparativePieWidgetUI from './widgets/comparative/ComparativePieWidgetUI'; import CursorIcon from './assets/CursorIcon'; import PolygonIcon from './assets/PolygonIcon'; import RectangleIcon from './assets/RectangleIcon'; @@ -48,12 +51,15 @@ export { BarWidgetUI, PieWidgetUI, ScatterPlotWidgetUI, - TimeSeriesWidgetUI, FeatureSelectionWidgetUI, + TimeSeriesWidgetUI, CHART_TYPES as TIME_SERIES_CHART_TYPES, TableWidgetUI, LegendWidgetUI, RangeWidgetUI, + ComparativePieWidgetUI, + ComparativeFormulaWidgetUI, + ComparativeCategoryWidgetUI, LEGEND_TYPES, NoDataAlert, featureSelectionIcons, diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 0e327bd1e..a2e299b36 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -195,6 +195,84 @@ export type LegendRamp = { }; }; +export type AnimationOptions = { + duration?: number; + animateOnMount?: boolean; + initialValue?: number; +}; + +export type AnimatedNumber = { + enabled: boolean; + value: number; + options?: AnimationOptions; + formatter: (n: number) => React.ReactNode; +}; + +export type FormulaLabels = { + prefix?: React.ReactNode; + suffix?: React.ReactNode; + note?: React.ReactNode; +}; + +export type FormulaColors = { + [key in keyof FormulaLabels]?: string; +} & { + value?: string; +}; + +export type ComparativeFormulaWidgetUI = { + data: number[]; + labels?: FormulaLabels[]; + colors?: FormulaColors[]; + animated?: boolean; + animationOptions?: AnimationOptions; + formatter?: (n: number) => React.ReactNode; +}; + +export enum ORDER_TYPES { + RANKING = 'ranking', + FIXED = 'fixed' +} + +type CategoryData = { + name: string; + value: number; +}; + +export type ComparativeCategoryWidgetUI = { + names: string[]; + data: CategoryData[][]; + labels?: string[]; + colors?: string[]; + maxItems?: number; + order?: ORDER_TYPES; + animation?: boolean; + animationOptions?: AnimationOptions; + searchable?: boolean; + filterable?: boolean; + selectedCategories?: string[]; + onSelectedCategoriesChange?: (categories: string[]) => any; + formatter?: (v: any) => string; +}; + +export type PieData = { + name: string; + value: number; +}; + +export type ComparativePieWidgetUIProps = { + names: string[]; + data: PieData[][]; + labels?: string[][]; + colors?: string[][]; + height?: string; + animation?: boolean; + formatter?: (v: number) => string; + tooltipFormatter?: (v: any) => string; + selectedCategories?: string[]; + onCategorySelected?: (categories: string[]) => any; +}; + // Typography export interface TypographyProps extends MuiTypographyProps { weight?: 'regular' | 'medium' | 'strong'; diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index 0ce27af89..5c623986b 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -317,6 +317,7 @@ function BarWidgetUI(props) { diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 1292bb160..8ab24fef8 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -609,6 +609,10 @@ function CategoryWidgetUI(props) { ); } +/** + * Enum for CategoryWidgetUI order types. 'RANKING' orders the data by value and 'FIXED' keeps the order present in the original data + * @enum {string} + */ CategoryWidgetUI.ORDER_TYPES = { RANKING: 'ranking', FIXED: 'fixed' diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js new file mode 100644 index 000000000..e3f8c21d0 --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js @@ -0,0 +1,185 @@ +import { Box, Checkbox, darken, Tooltip, Typography, useTheme } from '@mui/material'; +import withStyles from '@mui/styles/withStyles'; +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; +import AnimatedNumber, { + animationOptionsPropTypes +} from '../../../custom-components/AnimatedNumber'; +import { transposedCategoryItemPropTypes } from './transposeCategoryData'; +import { OTHERS_KEY } from './ComparativeCategoryWidgetUI'; +import { useCategoryStyles } from './useCategoryStyles'; + +const IDENTITY_FN = (v) => v; +const EMPTY_ARRAY = []; + +function ComparativeCategoryTooltip({ item, names, formatter = IDENTITY_FN }) { + const theme = useTheme(); + const classes = useCategoryStyles(); + + return ( +
+ + {item.label} + + + {item.data.map((d, i) => ( + +
+ + {names[i]} + + + + {formatter(d.value)} + + + ))} + +
+ ); +} + +ComparativeCategoryTooltip.displayName = 'ComparativeCategoryTooltip'; +ComparativeCategoryTooltip.defaultProps = { + names: EMPTY_ARRAY, + formatter: IDENTITY_FN +}; +ComparativeCategoryTooltip.propTypes = { + item: transposedCategoryItemPropTypes, + names: PropTypes.arrayOf(PropTypes.string).isRequired, + formatter: PropTypes.func +}; + +const StyledTooltip = withStyles((theme) => ({ + tooltip: { + color: theme.palette.common.white, + maxWidth: 260 + } +}))(Tooltip); + +function CategoryItem({ + item, + animation, + animationOptions, + maxValue, + showCheckbox, + checkboxChecked, + className, + formatter, + onClick = IDENTITY_FN, + names +}) { + const classes = useCategoryStyles(); + const theme = useTheme(); + const compareValue = useMemo(() => { + const reference = item.data[0].value; + const max = Math.max(...item.data.slice(1).map((d) => d.value)); + return reference - max; + }, [item]); + + const valueColor = + Math.sign(compareValue) === -1 + ? theme.palette.error.main + : theme.palette.success.main; + + const numberColor = item.key === OTHERS_KEY ? theme.palette.text.disabled : valueColor; + + function getProgressbarLength(value) { + return `${Math.min(100, ((value || 0) / maxValue) * 100)}%`; + } + + const tooltipContent = ( + + ); + + return ( + + onClick(item.key)} + className={className} + > + {showCheckbox ? : null} + + + + + {item.label} + + + + + + + {item.data.map((d, i) => ( +
+
+
+ ))} + + + + ); +} + +CategoryItem.displayName = 'CategoryItem'; +CategoryItem.defaultProps = { + animation: true, + animationOptions: {}, + className: '', + formatter: IDENTITY_FN, + onClick: IDENTITY_FN +}; +CategoryItem.propTypes = { + item: transposedCategoryItemPropTypes, + animation: PropTypes.bool, + animationOptions: animationOptionsPropTypes, + maxValue: PropTypes.number.isRequired, + showCheckbox: PropTypes.bool.isRequired, + checkboxChecked: PropTypes.bool.isRequired, + className: PropTypes.string, + formatter: PropTypes.func, + onClick: PropTypes.func, + names: PropTypes.arrayOf(PropTypes.string).isRequired +}; + +export default CategoryItem; diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js new file mode 100644 index 000000000..ae9b5fb7f --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategorySkeleton.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { Box } from '@mui/material'; +import Skeleton from '@mui/material/Skeleton'; +import { useCategoryStyles } from './useCategoryStyles'; +import Typography from '../../../components/atoms/Typography'; + +export default function CategorySkeleton() { + const classes = useCategoryStyles(); + return ( +
+ + + + + + + {[...Array(4)].map((_, i) => ( + + + + + + + + + + {[...Array(3)].map((_, i) => ( +
+ ))} + + ))} + +
+ ); +} diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js new file mode 100644 index 000000000..87d139793 --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js @@ -0,0 +1,391 @@ +import { + Box, + Button, + Divider, + InputAdornment, + Link, + SvgIcon, + TextField, + useTheme +} from '@mui/material'; +import React, { useMemo, useState } from 'react'; +import PropTypes from 'prop-types'; +import { animationOptionsPropTypes } from '../../../custom-components/AnimatedNumber'; +import CategoryWidgetUI from '../../CategoryWidgetUI'; +import { transposeCategoryData } from './transposeCategoryData'; +import { useCategoryStyles } from './useCategoryStyles'; +import CategoryItem from './CategoryItem'; +import CategorySkeleton from './CategorySkeleton'; +import Typography from '../../../components/atoms/Typography'; + +const IDENTITY_FN = (v) => v; +const EMPTY_ARRAY = []; +const ORDER_TYPES = CategoryWidgetUI.ORDER_TYPES; +export const OTHERS_KEY = 'others'; + +function SearchIcon() { + return ( + + + + ); +} + +/** Renders a `` widget + * + * + */ +function ComparativeCategoryWidgetUI({ + names = EMPTY_ARRAY, + data = EMPTY_ARRAY, + labels = EMPTY_ARRAY, + colors, + maxItems = 5, + order = ORDER_TYPES.FIXED, + animation = true, + animationOptions, + searchable = true, + filterable = true, + selectedCategories = EMPTY_ARRAY, + onSelectedCategoriesChange = IDENTITY_FN, + formatter = IDENTITY_FN +}) { + const classes = useCategoryStyles(); + const theme = useTheme(); + const [searchActive, setSearchActive] = useState(false); + const [blockingActive, setBlockingActive] = useState(false); + const [tempSelection, setTempSelection] = useState(selectedCategories); + const [searchValue, setSearchValue] = useState(''); + + // process incoming data to group items by column, apply colors and labels + const processedData = useMemo(() => { + const _colors = colors?.length + ? colors + : [ + theme.palette.secondary.main, + theme.palette.primary.main, + theme.palette.info.main + ]; + return transposeCategoryData(data, _colors, labels, selectedCategories, order); + }, [data, colors, labels, theme, selectedCategories, order]); + + const maxValue = useMemo(() => { + return Math.max(...data.map((group) => group.map((g) => g.value)).flat()); + }, [data]); + + // cut the list created in processedData according to maxItems prop and create the 'Others' category with the rest + const compressedData = useMemo(() => { + if (maxItems >= processedData.length) { + return processedData; + } + + const visibleItems = processedData.slice(0, maxItems); + const otherItems = processedData.slice(maxItems); + + const otherSum = []; + for (const item of otherItems) { + item.data.forEach((d, i) => { + otherSum[i] = otherSum[i] || 0; + otherSum[i] += d.value; + }); + } + + const combinedOther = { + key: OTHERS_KEY, + label: searchable ? 'Others' : `Others (${processedData.length - maxItems})`, + data: otherSum.map((sum) => ({ + value: sum, + color: theme.palette.divider + })) + }; + + return [...visibleItems, combinedOther]; + }, [processedData, searchable, maxItems, theme.palette.divider]); + + // filter the list created in processedData using selected categories + const blockedData = useMemo(() => { + return processedData.filter((c) => selectedCategories.indexOf(c.key) !== -1); + }, [processedData, selectedCategories]); + + const filteredData = useMemo(() => { + if (!searchValue) { + return processedData; + } + + return processedData.filter((el) => { + const key = (el.key || '').toLowerCase(); + const label = (el.label || '').toLowerCase(); + + const keyMatches = key && key.indexOf(searchValue.toLowerCase()) !== -1; + const labelMatches = label && label.indexOf(searchValue.toLowerCase()) !== -1; + + return keyMatches || labelMatches; + }); + }, [processedData, searchValue]); + + const otherCount = processedData.length - compressedData.length + 1; + const showSearchToggle = searchable && !searchActive && maxItems < processedData.length; + + if (processedData.length === 0) { + return ; + } + + const list = searchActive + ? filteredData + : blockingActive + ? blockedData + : compressedData; + + function applyTempSelection() { + setBlockingActive(true); + onSelectedCategoriesChange([...tempSelection]); + disableSearchMode(); + } + + function disableBlocking() { + setBlockingActive(false); + } + + function clearSelection() { + onSelectedCategoriesChange([]); + } + + function enableBlocking() { + setBlockingActive(true); + } + + function enableSearchMode() { + setSearchActive(true); + setTempSelection([...selectedCategories]); + } + + function disableSearchMode() { + setSearchActive(false); + setTempSelection([]); + } + + function selectCategory(category) { + const isSelected = selectedCategories.indexOf(category) !== -1; + const set = new Set(selectedCategories); + if (isSelected) { + set.delete(category); + } else { + set.add(category); + } + + let newCategories = Array.from(set); + if (newCategories.length === processedData.length) { + newCategories = []; + } + + onSelectedCategoriesChange(newCategories); + } + + function selectTempCategory(category) { + const isSelected = tempSelection.indexOf(category) !== -1; + const set = new Set(tempSelection); + if (isSelected) { + set.delete(category); + } else { + set.add(category); + } + + let newCategories = Array.from(set); + if (newCategories.length === processedData.length) { + newCategories = []; + } + + setTempSelection(newCategories); + } + + const clickHandler = filterable + ? searchActive + ? selectTempCategory + : selectCategory + : undefined; + + return ( +
+ {filterable ? ( + + + {selectedCategories.length ? selectedCategories.length : 'All'} + {' selected'} + + + {searchActive ? ( + Apply + ) : blockingActive ? ( + Unlock + ) : selectedCategories.length ? ( + + Lock + + Clear + + ) : null} + + + ) : null} + {searchActive ? ( + + setSearchValue(ev.currentTarget.value)} + onFocus={(ev) => ev.currentTarget.scrollIntoView()} + className={classes.searchInput} + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + + ) : null} + + {list.length === 0 ? ( + <> + No results + + Your search "{searchValue}" didn't match with any value. + + + ) : null} + {list.map((d) => ( + + ))} + + {showSearchToggle ? ( + + ) : null} + {searchActive ? ( + + ) : null} + + {names.map((name, i) => ( + +
+ {name} + + ))} + +
+ ); +} + +ComparativeCategoryWidgetUI.displayName = 'ComparativeCategoryWidgetUI'; +ComparativeCategoryWidgetUI.defaultProps = { + names: EMPTY_ARRAY, + data: EMPTY_ARRAY, + labels: EMPTY_ARRAY, + colors: EMPTY_ARRAY, + maxItems: 5, + order: ORDER_TYPES.FIXED, + animation: true, + animationOptions: {}, + searchable: true, + filterable: true, + selectedCategories: [], + onSelectedCategoriesChange: IDENTITY_FN, + formatter: IDENTITY_FN +}; +ComparativeCategoryWidgetUI.propTypes = { + names: PropTypes.arrayOf(PropTypes.string).isRequired, + data: PropTypes.arrayOf( + PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string.isRequired, + value: PropTypes.number.isRequired + }) + ) + ).isRequired, + labels: PropTypes.arrayOf(PropTypes.string), + colors: PropTypes.arrayOf(PropTypes.string), + maxItems: PropTypes.number, + order: PropTypes.oneOf([ORDER_TYPES.FIXED, ORDER_TYPES.RANKING]), + animation: PropTypes.bool, + animationOptions: animationOptionsPropTypes, + searchable: PropTypes.bool, + filterable: PropTypes.bool, + selectedCategories: PropTypes.arrayOf(PropTypes.string), + onSelectedCategoriesChange: PropTypes.func, + formatter: PropTypes.func +}; + +export default ComparativeCategoryWidgetUI; diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/transposeCategoryData.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/transposeCategoryData.js new file mode 100644 index 000000000..15243831f --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/transposeCategoryData.js @@ -0,0 +1,57 @@ +import { lighten } from '@mui/material/styles'; +import CategoryWidgetUI from '../../CategoryWidgetUI'; +import PropTypes from 'prop-types'; + +const ORDER_TYPES = CategoryWidgetUI.ORDER_TYPES; + +/** transpose incoming data to group items by column, apply colors and labels + * @param {{ name: string; value: number }[][]} data + * @param {string[]} colors + * @param {string[]} labels + * @param {string[]} selectedCategories + * @param {CategoryWidgetUI.ORDER_TYPES} order + * + * @returns {{ label: string; key: string; data: { color: string; value: number }[] }[]} + */ +export function transposeCategoryData(data, colors, labels, selectedCategories, order) { + const reference = data[0] || []; + const transposed = reference.map((item, itemIndex) => { + const isDisabled = + selectedCategories.length > 0 && selectedCategories.indexOf(item.name) === -1; + + const label = labels[itemIndex] || item.name; + const indexData = data.map((group, groupIndex) => ({ + color: isDisabled ? lighten(colors[groupIndex], 0.8) : colors[groupIndex], + value: group[itemIndex] ? group[itemIndex].value : 0 + })); + + return { + label, + key: item.name, + data: indexData + }; + }); + + // only sort the list if order type is 'RANKING' + // if order type is 'FIXED' keep the sort order from data + if (order === ORDER_TYPES.RANKING) { + transposed.sort((a, b) => { + const aMax = Math.max(...a.data.map((d) => d.value)); + const bMax = Math.max(...b.data.map((d) => d.value)); + return bMax - aMax; + }); + } + + return transposed; +} + +export const transposedCategoryItemPropTypes = PropTypes.shape({ + key: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + data: PropTypes.arrayOf( + PropTypes.shape({ + color: PropTypes.string.isRequired, + value: PropTypes.number.isRequired + }) + ).isRequired +}).isRequired; diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js new file mode 100644 index 000000000..5fda315d3 --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js @@ -0,0 +1,68 @@ +import makeStyles from '@mui/styles/makeStyles'; + +export const useCategoryStyles = makeStyles((theme) => ({ + wrapper: { + padding: theme.spacing(2, 0), + ...theme.typography.body2 + }, + categoriesList: { + overflow: 'auto', + maxHeight: theme.spacing(40), + paddingRight: theme.spacing(1), + margin: theme.spacing(0.5, 0) + }, + progressbar: { + height: theme.spacing(0.5), + width: '100%', + margin: theme.spacing(0.5, 0, 1, 0), + borderRadius: theme.spacing(0.5), + backgroundColor: theme.palette.action.disabledBackground, + + '& div': { + width: 0, + height: '100%', + borderRadius: theme.spacing(0.5), + transition: `background-color ${theme.transitions.easing.sharp} ${theme.transitions.duration.shortest}ms, + width ${theme.transitions.easing.sharp} ${theme.transitions.duration.complex}ms` + } + }, + toolbar: { + marginBottom: theme.spacing(2), + paddingRight: theme.spacing(1), + + '& .MuiTypography-caption': { + color: theme.palette.text.secondary + }, + + '& .MuiButton-label': { + ...theme.typography.caption + }, + + '& a': { + cursor: 'pointer' + } + }, + searchInput: { + marginTop: theme.spacing(-0.5) + }, + categoryGroup: { + '& $progressbar div': { + backgroundColor: 'var(--color)' + } + }, + categoryGroupHover: { + cursor: 'pointer', + '&:hover $progressbar div': { + backgroundColor: 'var(--hover-color)' + }, + '& $progressbar div': { + backgroundColor: 'var(--color)' + } + }, + bullet: { + flexShrink: 0, + width: theme.spacing(1), + height: theme.spacing(1), + borderRadius: theme.spacing(1) + } +})); diff --git a/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js b/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js new file mode 100644 index 000000000..3df509000 --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js @@ -0,0 +1,154 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Box, useTheme } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import AnimatedNumber, { + animationOptionsPropTypes +} from '../../custom-components/AnimatedNumber'; +import Typography from '../../components/atoms/Typography'; + +const IDENTITY_FN = (v) => v; +const EMPTY_ARRAY = []; + +const useStyles = makeStyles((theme) => ({ + formulaGroup: { + '& + $formulaGroup': { + marginTop: theme.spacing(2) + } + }, + firstLine: { + margin: 0, + ...theme.typography.h5, + fontWeight: Number(theme.typography.fontWeightMedium), + color: theme.palette.text.primary, + display: 'flex' + }, + unit: { + marginLeft: theme.spacing(0.5) + }, + unitBefore: { + marginLeft: 0, + marginRight: theme.spacing(0.5) + }, + note: { + display: 'inline-block', + marginTop: theme.spacing(0.5) + } +})); + +/** + * Renders a `` widget + * + */ +function ComparativeFormulaWidgetUI({ + data = EMPTY_ARRAY, + labels = EMPTY_ARRAY, + colors = EMPTY_ARRAY, + animated = true, + animationOptions, + formatter = IDENTITY_FN +}) { + const theme = useTheme(); + const classes = useStyles(); + + function getColor(index) { + return colors[index] || {}; + } + function getLabel(index) { + return labels[index] || {}; + } + + return ( +
+ {data + .filter((n) => n !== undefined) + .map((d, i) => ( +
+
+ {getLabel(i).prefix ? ( + + + {getLabel(i).prefix} + + + ) : null} + + + + {getLabel(i).suffix ? ( + + + {getLabel(i).suffix} + + + ) : null} +
+ {getLabel(i).note ? ( + + + {getLabel(i).note} + + + ) : null} +
+ ))} +
+ ); +} + +ComparativeFormulaWidgetUI.displayName = 'ComparativeFormulaWidgetUI'; +ComparativeFormulaWidgetUI.defaultProps = { + data: EMPTY_ARRAY, + labels: EMPTY_ARRAY, + colors: EMPTY_ARRAY, + animated: true, + animationOptions: {}, + formatter: IDENTITY_FN +}; + +const formulaLabelsPropTypes = PropTypes.shape({ + prefix: PropTypes.string, + suffix: PropTypes.string, + note: PropTypes.string +}); + +const formulaColorsPropTypes = PropTypes.shape({ + prefix: PropTypes.string, + suffix: PropTypes.string, + note: PropTypes.string, + value: PropTypes.string +}); + +ComparativeFormulaWidgetUI.propTypes = { + data: PropTypes.arrayOf(PropTypes.number).isRequired, + labels: PropTypes.arrayOf(formulaLabelsPropTypes), + colors: PropTypes.arrayOf(formulaColorsPropTypes), + animated: PropTypes.bool, + animationOptions: animationOptionsPropTypes, + formatter: PropTypes.func +}; + +export default ComparativeFormulaWidgetUI; diff --git a/packages/react-ui/src/widgets/comparative/ComparativePieWidgetUI.js b/packages/react-ui/src/widgets/comparative/ComparativePieWidgetUI.js new file mode 100644 index 000000000..283072208 --- /dev/null +++ b/packages/react-ui/src/widgets/comparative/ComparativePieWidgetUI.js @@ -0,0 +1,313 @@ +import React, { useEffect, useMemo, useRef } from 'react'; +import PropTypes from 'prop-types'; +import { useTheme } from '@mui/material'; +import { lighten } from '@mui/material/styles'; +import EchartsWrapper from '../../custom-components/echarts-for-react'; + +/** + * process incoming data to assign labels, colors and selected / unselected styles + * @param {{ name: string; value: number; }[]} data + * @param {string[]} [colors] + * @param {string[]} [labels] + * @param {Object} [theme] + * @param {string[]} [selectedCategories] + */ +function processData(data, colors = [], labels = [], theme, selectedCategories = []) { + return data.map((item, index) => { + const isDisabled = + selectedCategories.length > 0 && selectedCategories.indexOf(item.name) === -1; + const palette = colors?.length ? colors : theme.palette.qualitative.bold; + return { + ...item, + key: item.name, + color: isDisabled ? lighten(palette[index], 0.8) : palette[index], + name: labels[index] || item.name + }; + }); +} + +function defaultTooltipFormatter(params) { + const titleStyle = ` + font-size: 12px; + line-height: 1.33; + font-weight: 600; + margin: 4px 0 4px 0; + `; + const valueStyle = ` + font-size: 12px; + line-height: 1.33; + font-weight: normal; + margin: 0 0 4px 0; + `; + + const singleParams = Array.isArray(params) ? params[0] : params; + const data = singleParams.data; + const value = params.formatter(data.value); + const label = params.isMultiple ? singleParams.seriesName : value; + + return ` +

${data.name}

+

${singleParams.marker} ${label} (${params.formatter( + singleParams.percent + )} %)

+ `.trim(); +} + +const IDENTITY_FN = (v) => v; +const EMPTY_ARRAY = []; + +/** + * Renders a `` widget + * + * + */ +function ComparativePieWidgetUI({ + names = EMPTY_ARRAY, + data = EMPTY_ARRAY, + labels = EMPTY_ARRAY, + colors = EMPTY_ARRAY, + height = '260px', + animation, + formatter = IDENTITY_FN, + tooltipFormatter = defaultTooltipFormatter, + selectedCategories = [], + onCategorySelected = IDENTITY_FN +}) { + /** @type {any} */ + const theme = useTheme(); + + /** @type {any} */ + const chartRef = useRef(); + + const processedData = useMemo(() => { + return data.map((d, i) => + processData(d, colors[i], labels[i], theme, selectedCategories) + ); + }, [data, colors, labels, theme, selectedCategories]); + + const options = useMemo(() => { + const isMultiple = processedData.length > 1; + const tooltip = { + trigger: 'item', + show: true, + backgroundColor: theme.palette.black[90], + textStyle: { color: theme.palette.common.white }, + confine: true, + borderWidth: 0, + formatter: + !!tooltipFormatter && + ((params) => + tooltipFormatter({ + ...params, + formatter, + isMultiple + })) + }; + + const legendData = isMultiple + ? processedData.map((d, i) => names[i]) + : (processedData[0] || []).map((d) => d.name); + + const legend = { + data: legendData, + selectedMode: false, + type: 'scroll', + left: theme.spacingValue, + bottom: theme.spacingValue * -0.5, + itemGap: theme.spacingValue * 3, + icon: 'circle', + itemWidth: theme.spacingValue, + itemHeight: theme.spacingValue, + textStyle: { + ...theme.typography.overline, + fontWeight: 400, + lineHeight: 1, + color: theme.palette.text.primary, + verticalAlign: 'bottom', + padding: [0, 0, 0, theme.spacingValue * 0.5] + }, + inactiveColor: theme.palette.text.disabled, + pageIcons: { + horizontal: [ + 'path://M15.41 7.41 14 6 8 12 14 18 15.41 16.59 10.83 12z', + 'path://M9 16.59 13.3265857 12 9 7.41 10.3319838 6 16 12 10.3319838 18z' + ] + }, + pageIconSize: theme.spacingValue * 1.5, + pageIconColor: theme.palette.text.secondary, + pageIconInactiveColor: theme.palette.text.disabled, + pageTextStyle: { + fontFamily: theme.typography.overline.fontFamily, + fontSize: theme.spacingValue * 1.5, + lineHeight: theme.spacingValue * 1.75, + fontWeight: 400, + color: theme.palette.text.primary + } + }; + const labelOptions = { + formatter: ({ name, percent }) => `{per|${formatter(percent)}%}\n{b|${name}}`, + position: 'center', + rich: { + b: { + fontFamily: theme.typography.overline.fontFamily, + fontSize: theme.spacingValue * 1.75, + lineHeight: theme.spacingValue * 1.75, + fontWeight: 400, + color: theme.palette.text.primary + }, + per: { + ...theme.typography.overline, + fontSize: theme.spacingValue * 3, + lineHeight: theme.spacingValue * 4.5, + color: theme.palette.text.primary + } + } + }; + const series = processedData.map((data, i) => ({ + type: 'pie', + name: names[i], + itemStyle: { + color: data[0]?.color + }, + animation, + data: data.map((d) => ({ ...d, itemStyle: { color: d.color } })), + radius: i === 0 ? ['75%', '90%'] : ['56%', '72%'], + selectedOffset: 0, + hoverOffset: 5, + bottom: theme.spacingValue * 2.5, + avoidLabelOverlap: true, + label: { show: false, ...labelOptions }, + emphasis: { + label: { + show: true, + formatter: labelOptions.formatter, + rich: labelOptions.rich + } + } + })); + const grid = { + left: 0, + top: 0, + right: 0, + bottom: 0 + }; + return { grid, tooltip, legend, series }; + }, [theme, names, animation, processedData, formatter, tooltipFormatter]); + + const onEvents = { + mouseover: (selected, chart) => { + if (processedData.length === 1) { + if (selected.seriesIndex !== 0 || selected.dataIndex !== 0) { + chart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: 0 + }); + } + } + }, + mouseout: (selected, chart) => { + if (processedData.length === 1) { + chart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: 0 + }); + } + }, + click: (ev) => { + const item = processedData[ev.seriesIndex][ev.dataIndex]; + const category = item.key; + const isSelected = selectedCategories.indexOf(category) !== -1; + const set = new Set(selectedCategories); + if (isSelected) { + set.delete(category); + } else { + set.add(category); + } + + const dataLength = processedData[0].length; + let newCategories = Array.from(set); + if (newCategories.length === dataLength) { + newCategories = []; + } + + onCategorySelected(newCategories); + } + }; + + useEffect(() => { + if (chartRef.current) { + chartRef.current.dispatchAction({ + type: processedData.length === 1 ? 'highlight' : 'downplay', + seriesIndex: 0, + dataIndex: 0 + }); + } + }, [processedData]); + + function onChartReady(chart) { + chartRef.current = chart; + } + + if (!processedData.length) { + return null; + } + + return ( + + ); +} + +ComparativePieWidgetUI.displayName = 'ComparativePieWidgetUI'; +ComparativePieWidgetUI.defaultProps = { + names: EMPTY_ARRAY, + data: EMPTY_ARRAY, + labels: EMPTY_ARRAY, + colors: EMPTY_ARRAY, + height: '260px', + animation: true, + formatter: IDENTITY_FN, + tooltipFormatter: defaultTooltipFormatter, + selectedCategories: [], + onCategorySelected: IDENTITY_FN +}; +ComparativePieWidgetUI.propTypes = { + names: PropTypes.arrayOf(PropTypes.string).isRequired, + data: PropTypes.arrayOf( + PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string, + value: PropTypes.number + }) + ) + ), + labels: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)), + colors: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)), + height: PropTypes.string, + animation: PropTypes.bool, + formatter: PropTypes.func, + tooltipFormatter: PropTypes.func, + selectedCategories: PropTypes.arrayOf(PropTypes.string), + onCategorySelected: PropTypes.func +}; + +export default ComparativePieWidgetUI; diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 2f6d1a0e9..ff0d6176e 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -80,6 +80,7 @@ const useStyles = makeStyles((theme) => ({ border: '2px solid transparent' }, circle: { + border: '2px solid transparent', '&::after': { position: 'absolute', display: ({ isMax }) => (isMax ? 'block' : 'none'), diff --git a/packages/react-ui/storybook/stories/widgetsUI/ComparativeCategoryWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/ComparativeCategoryWidgetUI.stories.js new file mode 100644 index 000000000..cfcffccfe --- /dev/null +++ b/packages/react-ui/storybook/stories/widgetsUI/ComparativeCategoryWidgetUI.stories.js @@ -0,0 +1,47 @@ +import React from 'react'; +import ComparativeCategoryWidgetUI from '../../../src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI'; + +const options = { + title: 'Organisms/Widgets/ComparativeCategoryWidgetUI', + component: ComparativeCategoryWidgetUI +}; + +export default options; + +const Template = (args) => ; + +const categoryData = [ + [ + { name: 'data 1', value: 245 }, + { name: 'data 2', value: 354 }, + { name: 'data 3', value: 245 }, + { name: 'data 4', value: 354 }, + { name: 'data 5', value: 245 }, + { name: 'data 6', value: 354 } + ], + [ + { name: 'data 1', value: 454 }, + { name: 'data 2', value: 346 }, + { name: 'data 3', value: 454 }, + { name: 'data 4', value: 346 }, + { name: 'data 5', value: 454 }, + { name: 'data 6', value: 346 } + ], + [ + { name: 'data 1', value: 532 }, + { name: 'data 2', value: 754 }, + { name: 'data 3', value: 532 }, + { name: 'data 4', value: 754 }, + { name: 'data 5', value: 532 }, + { name: 'data 6', value: 754 } + ] +]; + +export const Default = Template.bind({}); +Default.args = { + data: categoryData, + names: ['serie 1', 'serie 2', 'serie 3'], + labels: ['label 1', 'label 2', 'label 3', 'label 4', 'label 5', 'label 6'], + colors: ['#f27', '#fa0', '#32a852'], + maxItems: 3 +}; diff --git a/packages/react-ui/storybook/stories/widgetsUI/ComparativeFormulaWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/ComparativeFormulaWidgetUI.stories.js new file mode 100644 index 000000000..6b1027913 --- /dev/null +++ b/packages/react-ui/storybook/stories/widgetsUI/ComparativeFormulaWidgetUI.stories.js @@ -0,0 +1,24 @@ +import React from 'react'; +import ComparativeFormulaWidgetUI from '../../../src/widgets/comparative/ComparativeFormulaWidgetUI'; +import { buildReactPropsAsString } from '../../utils'; + +const options = { + title: 'Organisms/Widgets/ComparativeFormulaWidgetUI', + component: ComparativeFormulaWidgetUI +}; + +export default options; + +const Template = (args) => ; +const sampleProps = { + data: [1245, 3435.9], + labels: [ + { prefix: '$', suffix: ' sales', note: 'label 1' }, + { prefix: '$', suffix: ' sales', note: 'label 2' } + ], + colors: [{ note: '#ff9900' }, { note: '#6732a8' }] +}; + +export const Default = Template.bind({}); +Default.args = sampleProps; +Default.parameters = buildReactPropsAsString(sampleProps, 'ComparativeFormulaWidgetUI'); diff --git a/packages/react-ui/storybook/stories/widgetsUI/ComparativePieWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/ComparativePieWidgetUI.stories.js new file mode 100644 index 000000000..1ba7bd434 --- /dev/null +++ b/packages/react-ui/storybook/stories/widgetsUI/ComparativePieWidgetUI.stories.js @@ -0,0 +1,39 @@ +import React from 'react'; +import ComparativePieWidgetUI from '../../../src/widgets/comparative/ComparativePieWidgetUI'; +import { buildReactPropsAsString } from '../../utils'; + +const options = { + title: 'Organisms/Widgets/ComparativePieWidgetUI', + component: ComparativePieWidgetUI +}; + +export default options; + +const Template = (args) => ; + +const sampleProps = { + names: ['name 1', 'name 2'], + data: [ + [ + { name: 'data 1', value: 40 }, + { name: 'data 2', value: 60 } + ], + [ + { name: 'data 1', value: 30 }, + { name: 'data 2', value: 70 } + ] + ], + labels: [ + ['label 1', 'label 2'], + ['label 1', 'label 2'] + ], + colors: [ + ['#6732a8', '#32a852'], + ['#a83232', '#ff9900'] + ], + selectedCategories: ['data 1'] +}; + +export const Default = Template.bind({}); +Default.args = sampleProps; +Default.parameters = buildReactPropsAsString(sampleProps, 'ComparativePieWidgetUI'); diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 1ca49d33d..b437fc945 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -70,8 +70,8 @@ "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@deck.gl/core": "^8.9.0-alpha.4", - "@deck.gl/layers": "^8.9.0-alpha.4", + "@deck.gl/core": "^8.8.15", + "@deck.gl/layers": "^8.8.15", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/material": "^5.10.10", diff --git a/packages/react-widgets/src/layers/FeatureSelectionLayer.js b/packages/react-widgets/src/layers/FeatureSelectionLayer.js index 9dd97b340..fb4c42378 100644 --- a/packages/react-widgets/src/layers/FeatureSelectionLayer.js +++ b/packages/react-widgets/src/layers/FeatureSelectionLayer.js @@ -63,60 +63,62 @@ export default function FeatureSelectionLayer( return [ mask && MaskLayer(), - // @ts-ignore - new EditableCartoGeoJsonLayer({ - eventManager: customEventManager, - id: 'FeatureSelectionLayer', - // billboard need to be false to be compatible with Google Satellite - billboard: false, - pickable: !!selectedMode, - data: { - type: 'FeatureCollection', - features: spatialFilterGeometry ? [spatialFilterGeometry] : [] - }, - mode, - // @ts-ignore - selectedFeatureIndexes: isFinite(selectedFeatureIndex) - ? [selectedFeatureIndex] - : [], - onEdit: ({ updatedData, editType }) => { - // Once the geometry is drawed, disable the tool - if (editType === 'addFeature') { - dispatch(setFeatureSelectionEnabled(false)); - } + (selectedMode || spatialFilterGeometry) && + new EditableCartoGeoJsonLayer({ + eventManager: customEventManager, + id: 'FeatureSelectionLayer', + // billboard need to be false to be compatible with Google Satellite + billboard: false, + pickable: !!selectedMode, + data: { + type: 'FeatureCollection', + features: spatialFilterGeometry ? [spatialFilterGeometry] : [] + }, + // has mask polygon changed? + dataComparator: (data, oldData) => data.features[0] === oldData.features[0], + mode, + // @ts-ignore + selectedFeatureIndexes: isFinite(selectedFeatureIndex) + ? [selectedFeatureIndex] + : [], + onEdit: ({ updatedData, editType }) => { + // Once the geometry is drawed, disable the tool + if (editType === 'addFeature') { + dispatch(setFeatureSelectionEnabled(false)); + } - // Do not update spatial filter if - // 1. updatedData is empty - // 2. editType includes tentative, that means it's being drawn - if (updatedData.features.length !== 0 && !editType.includes('Tentative')) { - const [lastFeature] = updatedData.features.slice(-1); - if (lastFeature) { - dispatch( - addSpatialFilter({ - geometry: lastFeature - }) - ); + // Do not update spatial filter if + // 1. updatedData is empty + // 2. editType includes tentative, that means it's being drawn + if (updatedData.features.length !== 0 && !editType.includes('Tentative')) { + const [lastFeature] = updatedData.features.slice(-1); + if (lastFeature) { + dispatch( + addSpatialFilter({ + geometry: lastFeature + }) + ); + } + } + }, + onClick: ({ index, object }) => { + if (isEdit && object?.geometry.type === 'Polygon') { + setSelectedFeatureIndex(index); } - } - }, - onClick: ({ index, object }) => { - if (isEdit && object?.geometry.type === 'Polygon') { - setSelectedFeatureIndex(index); - } - }, - // Styles once geometry is created or it's being edited - getLineColor: mainColor, - getFillColor: isEdit ? [...mainColor.slice(0, 3), 255 * 0.08] : [0, 0, 0, 0], - // Styles while drawing geometry - getTentativeFillColor: [...primaryAsRgba.slice(0, 3), 255 * 0.08], - getTentativeLineColor: primaryAsRgba, - // Point styles while drawing - getEditHandlePointColor: [0xff, 0xff, 0xff], - getEditHandlePointOutlineColor: primaryAsRgba, - editHandlePointStrokeWidth: 5, - getEditHandlePointRadius: 2, - getLineWidth: 4 - }) + }, + // Styles once geometry is created or it's being edited + getLineColor: mainColor, + getFillColor: isEdit ? [...mainColor.slice(0, 3), 255 * 0.08] : [0, 0, 0, 0], + // Styles while drawing geometry + getTentativeFillColor: [...primaryAsRgba.slice(0, 3), 255 * 0.08], + getTentativeLineColor: primaryAsRgba, + // Point styles while drawing + getEditHandlePointColor: [0xff, 0xff, 0xff], + getEditHandlePointOutlineColor: primaryAsRgba, + editHandlePointStrokeWidth: 5, + getEditHandlePointRadius: 2, + getLineWidth: 4 + }) ]; } diff --git a/yarn.lock b/yarn.lock index 69d583632..23207ab08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1356,25 +1356,25 @@ "@types/react" "*" indefinitely-typed "^1.1.0" -"@deck.gl/aggregation-layers@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/aggregation-layers/-/aggregation-layers-8.9.0-alpha.4.tgz#df1900ee01405d2cd1adff41b70625cfef45da37" - integrity sha512-7czE5+MRKIPiGWgdpkwLTY69nfACKMvLPL2peXIpUezZs9hdVtFPKgGQuiRW8756uV8Jm80TcwAuULdjmc/9Ww== +"@deck.gl/aggregation-layers@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/aggregation-layers/-/aggregation-layers-8.8.16.tgz#764819e0195e70c4b10fcaa06552ad88fe4be3a6" + integrity sha512-HCUJppw5ILondVPhJGqtuYX5fKu8ZxOzn/SgoeKLEwNvhYKqIjPOIHhjxzfcVBEy5aAuZRnSiyEUKG0Nu59f6w== dependencies: "@luma.gl/constants" "^8.5.16" "@luma.gl/shadertools" "^8.5.16" "@math.gl/web-mercator" "^3.6.2" d3-hexbin "^0.2.1" -"@deck.gl/carto@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/carto/-/carto-8.9.0-alpha.4.tgz#ce2a2eb527f5003e712156b9136911bd88d438d0" - integrity sha512-r+zweGraHfCiq9/edkfciDs56rORa12fSo6s/7NJxrQ0OfW+M9XGZJLLe4XfflKPYCZC+bzK202gu/5M9ASn0A== +"@deck.gl/carto@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/carto/-/carto-8.8.16.tgz#0651212ed12fa43e4eb5eabf8bb90aa6cf5e08ad" + integrity sha512-nteghBqgqs/Vb9vmJ+R3LfMofqC9yfk1gKtigHm3zuxSPKQnPOFX/jCwt9/tTmc4iEqV6RnGi9B4060+BrcmBw== dependencies: - "@loaders.gl/gis" "^3.2.5" - "@loaders.gl/loader-utils" "^3.2.5" - "@loaders.gl/mvt" "^3.2.5" - "@loaders.gl/tiles" "^3.2.5" + "@loaders.gl/gis" "^3.2.10" + "@loaders.gl/loader-utils" "^3.2.10" + "@loaders.gl/mvt" "^3.2.10" + "@loaders.gl/tiles" "^3.2.10" "@luma.gl/constants" "^8.5.16" "@math.gl/web-mercator" "^3.6.2" cartocolor "^4.0.2" @@ -1387,13 +1387,13 @@ pbf "^3.2.1" quadbin "^0.1.2" -"@deck.gl/core@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/core/-/core-8.9.0-alpha.4.tgz#d7ba147ce2472251f7ad8fa8b2302ac7152457ae" - integrity sha512-am6oi1m+ATKo08x6w5fixMJXmROpKpdvYNDUVlBKS3jLAqWTE09JmlfwiZs5mi2yfps6zXHaUHz08vK2Aus6QQ== +"@deck.gl/core@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/core/-/core-8.8.16.tgz#0d52619b1e0dda581c4f057eaa97d409d4ed0f7f" + integrity sha512-Fjx9Vl2Rz0yBEYW6UYwOOa+8uyGRr1qfKuZ69Fd4H83VEDEoweZt8ENd8iERx5vempnLSwc7y78peXdyrYPK/g== dependencies: - "@loaders.gl/core" "^3.2.5" - "@loaders.gl/images" "^3.2.5" + "@loaders.gl/core" "^3.2.10" + "@loaders.gl/images" "^3.2.10" "@luma.gl/constants" "^8.5.16" "@luma.gl/core" "^8.5.16" "@math.gl/core" "^3.6.2" @@ -1406,25 +1406,25 @@ math.gl "^3.6.2" mjolnir.js "^2.7.0" -"@deck.gl/extensions@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/extensions/-/extensions-8.9.0-alpha.4.tgz#d419e234645bb78b9e54b185002cdba2bc62bc78" - integrity sha512-t2acaHiN/n987kqj3G2HW0xw1dr7sPyGfbLPG97Hal4WCClRX2lVTqWNwav6VW+eutg4rBRDAvzQYxjAzKsNOA== +"@deck.gl/extensions@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/extensions/-/extensions-8.8.16.tgz#bcf766c48e56c23f935b5d14e35024d24b23bf23" + integrity sha512-fuzupKT38Vlwc5PYF6h8tpare+Ik8XCX40CEU3OGMozGd5b0h2/vvu6Z+7d0+V8bU2fImljXfmmOn8WMFgFzoQ== dependencies: "@luma.gl/shadertools" "^8.5.16" -"@deck.gl/geo-layers@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/geo-layers/-/geo-layers-8.9.0-alpha.4.tgz#ff04b7906b558832addd889c4ab0e4b1a8913d6c" - integrity sha512-QA8UZ9904FD0L6ZQX3Gv7tqv5K8kkj7ffGrKIKVWFMgO4kQXkZluYvxhhtB3ecp+MoRrHGxYnawo1o4igXOQuw== - dependencies: - "@loaders.gl/3d-tiles" "^3.2.5" - "@loaders.gl/gis" "^3.2.5" - "@loaders.gl/loader-utils" "^3.2.5" - "@loaders.gl/mvt" "^3.2.5" - "@loaders.gl/schema" "^3.2.5" - "@loaders.gl/terrain" "^3.2.5" - "@loaders.gl/tiles" "^3.2.5" +"@deck.gl/geo-layers@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/geo-layers/-/geo-layers-8.8.16.tgz#0a48d5a800619d12a4d2c5a52427d24978dbb19f" + integrity sha512-7tXPu6iOHOp+0WDRHhMtKgasUerDeRgKfkipGMGhAbSSccFb3BSJb1BYSERik6K7XT7pez4iZQFgc3aNrXCEQg== + dependencies: + "@loaders.gl/3d-tiles" "^3.2.10" + "@loaders.gl/gis" "^3.2.10" + "@loaders.gl/loader-utils" "^3.2.10" + "@loaders.gl/mvt" "^3.2.10" + "@loaders.gl/schema" "^3.2.10" + "@loaders.gl/terrain" "^3.2.10" + "@loaders.gl/tiles" "^3.2.10" "@luma.gl/constants" "^8.5.16" "@luma.gl/experimental" "^8.5.16" "@math.gl/core" "^3.6.2" @@ -1434,31 +1434,31 @@ h3-js "^3.7.0" long "^3.2.0" -"@deck.gl/google-maps@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/google-maps/-/google-maps-8.9.0-alpha.4.tgz#880cc221197a1ccae57152bec70372953072a818" - integrity sha512-obN2TkVgba7BW/3PN5EPhDSvN+GlwImA2z/ieK8KrNoNQhsK/uJrL0ww21lF5vkPKudhzbQnk9LJNaD5vo8Lpg== +"@deck.gl/google-maps@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/google-maps/-/google-maps-8.8.16.tgz#f1bd8abd342a342f36b1f136c0700870b945f1a9" + integrity sha512-QW29WUw/QBZqpZ428WkabNaCnYobDJDA7IDlFOjnwynNo8VIL6ILxpNCuVqDoEuAmrRC6MRCkFOvFRpCk5Khrg== -"@deck.gl/layers@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/layers/-/layers-8.9.0-alpha.4.tgz#f10d5904c4d11890b6f60a81ee7e088cef6540a5" - integrity sha512-OGOr6monD7o8TfEQvEzDNgF8JyY9Yqv7Kw+J7pVTmwhuR3ZylAEewst09daxLqI/2l294cBeqLMa+uTDLGbQeg== +"@deck.gl/layers@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/layers/-/layers-8.8.16.tgz#d99295fd6cbf4d3109435234eeea640b262420d1" + integrity sha512-8qw/F10ZJEpGKa7EQQKxWKRhrXFW+wPSHGZhvfp4V3gI1lh3tCAFPQIZTrM/S9Rk/cTLwzFSlXvSjiUzqSdFmQ== dependencies: - "@loaders.gl/images" "^3.2.5" - "@loaders.gl/schema" "^3.2.5" + "@loaders.gl/images" "^3.2.10" + "@loaders.gl/schema" "^3.2.10" "@luma.gl/constants" "^8.5.16" - "@mapbox/tiny-sdf" "^2.0.5" + "@mapbox/tiny-sdf" "^1.1.0" "@math.gl/core" "^3.6.2" "@math.gl/polygon" "^3.6.2" "@math.gl/web-mercator" "^3.6.2" - earcut "^2.2.4" + earcut "^2.0.6" -"@deck.gl/mesh-layers@^8.9.0-alpha.4": - version "8.9.0-alpha.4" - resolved "https://registry.yarnpkg.com/@deck.gl/mesh-layers/-/mesh-layers-8.9.0-alpha.4.tgz#34292fcc69b1471f2f38e1e5d89bb034fb919ded" - integrity sha512-O/SJkF0bBQh+cQm7pmf/nV5hXy5t+hrZ5D40LcsyHuWKRuezIfSGA2Lu+1dpc+lJH3NQfa3brcDKxD/L2sYeeA== +"@deck.gl/mesh-layers@^8.8.15": + version "8.8.16" + resolved "https://registry.yarnpkg.com/@deck.gl/mesh-layers/-/mesh-layers-8.8.16.tgz#82f26848cf235ca5c6e0ce63fb6dcb02c97bb7ba" + integrity sha512-KQkLW2qiwRreev7jOs9tzQh7MV8SHAzKPtzYdtVvP5lBW0qjxCvfHuy3nfVC5yqbZ+dHxL4Dyf7y3yjIcpK6KQ== dependencies: - "@loaders.gl/gltf" "^3.2.5" + "@loaders.gl/gltf" "^3.2.10" "@luma.gl/constants" "^8.5.16" "@luma.gl/experimental" "^8.5.16" "@luma.gl/shadertools" "^8.5.16" @@ -2638,48 +2638,59 @@ resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.4.1.tgz#3f587eec5708692135bc9e94cf396130604979f3" integrity sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw== -"@loaders.gl/3d-tiles@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/3d-tiles/-/3d-tiles-3.2.10.tgz#325d000eb9a219fc43b7127bc1e794446504c7a1" - integrity sha512-Z+A5QxVEy/u/l5T+vekuZ/SUZahCvhpgbiBOHgTp/VFNjyj+GiLslXWcjyQRqXsrOEDsRwC0jRSxv8YyfdW9eA== +"@loaders.gl/3d-tiles@^3.2.10": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/3d-tiles/-/3d-tiles-3.2.12.tgz#a9e55526d15231f5365ff1b6960855147640ccb1" + integrity sha512-fhJAW4KiMZ14isp/TaZe7GVptAtB7eT0MqM1nDoqWR7SlsxOrtW4S/hC+g58isf1FQ10DutpL8zs0ORVhSaweQ== dependencies: - "@loaders.gl/draco" "3.2.10" - "@loaders.gl/gltf" "3.2.10" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/math" "3.2.10" - "@loaders.gl/tiles" "3.2.10" + "@loaders.gl/draco" "3.2.12" + "@loaders.gl/gltf" "3.2.12" + "@loaders.gl/loader-utils" "3.2.12" + "@loaders.gl/math" "3.2.12" + "@loaders.gl/tiles" "3.2.12" "@math.gl/core" "^3.5.1" "@math.gl/geospatial" "^3.5.1" -"@loaders.gl/core@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/core/-/core-3.2.10.tgz#793e5f839fa8a919f8272641ba9893929acc751f" - integrity sha512-t/WTJh25d5WdzW+xleMGjDUuZwfevEPjlhdtGGqEh8fx6uhj/yZDxrXbP4O+QezIuo9v1fJ1JOGh8UDw97N11w== +"@loaders.gl/core@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/core/-/core-3.2.11.tgz#711116a1c1a9ff3b26ff1684d34bc60ebb94ef66" + integrity sha512-uWQM1ZAuN0VYWEMMMwrlTKE1c4gor9SgCQXn8TlAW/4+9sL9KJ09T6AxgzYYAFdJmzTmT8BtC5aPUEYv031nRQ== dependencies: "@babel/runtime" "^7.3.1" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/worker-utils" "3.2.10" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/worker-utils" "3.2.11" "@probe.gl/log" "^3.5.0" probe.gl "^3.4.0" -"@loaders.gl/draco@3.2.10": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/draco/-/draco-3.2.10.tgz#bdf63cfd7045cac697f5a9e3a26df7bb197fe33f" - integrity sha512-c+otOznlx0MtsUQN99eKqlSVKg8j1yhuR0SPqFTvpGUwLZJH1ZczHN1NRp/6gYf0BzEY6RHYHXCRtZ5WXKka+g== +"@loaders.gl/draco@3.2.11": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/draco/-/draco-3.2.11.tgz#9d4757ccf712ae93adaacb5636fb4beadd22d0d6" + integrity sha512-cGLcMWFe/AP5ExVEPt23Q4uo8Ewbo6hCBvcFX+b9VDfz/mIbUNa0DLRRtSi7eKgCJBRCQ/MLLz3SCm5OL5CjEA== + dependencies: + "@babel/runtime" "^7.3.1" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/schema" "3.2.11" + "@loaders.gl/worker-utils" "3.2.11" + draco3d "1.4.1" + +"@loaders.gl/draco@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/draco/-/draco-3.2.12.tgz#e561431a2c6b4971abcf39e7704aa1f36a1f5f30" + integrity sha512-QoDlnL3ouwW3OSMRbyE4DyY41oxqadtaQ7wU3K6us4CF0XgvOToZZTG6QnCfF8FauFZ8JMebn6NT1LtobTNVYQ== dependencies: "@babel/runtime" "^7.3.1" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/schema" "3.2.10" - "@loaders.gl/worker-utils" "3.2.10" + "@loaders.gl/loader-utils" "3.2.12" + "@loaders.gl/schema" "3.2.12" + "@loaders.gl/worker-utils" "3.2.12" draco3d "1.4.1" -"@loaders.gl/gis@3.2.10", "@loaders.gl/gis@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/gis/-/gis-3.2.10.tgz#a7e1bb335fce1326f00e43fa0af3e1c462137ad8" - integrity sha512-L+omT4/I6IKGwaspN47s7xHEufuFqKEHXZg8SeZ+fgpvfvF0VEwt/nZ8VtfYgvS3xoXdmbM1WimQSSYf/leiig== +"@loaders.gl/gis@3.2.11", "@loaders.gl/gis@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/gis/-/gis-3.2.11.tgz#5273cdd18f044e76cc0410003d1503454b04c1d6" + integrity sha512-Nehg3QCCFP/GY5ybX5Tbio1hreq0riCvldOefMNp6rVOF1+VX5+oRCEtUP/NdqITzcllRKcqAQF2hFWIY6ozZQ== dependencies: - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/schema" "3.2.10" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/schema" "3.2.11" "@mapbox/vector-tile" "^1.3.1" "@math.gl/polygon" "^3.5.1" pbf "^3.2.1" @@ -2693,22 +2704,39 @@ "@mapbox/vector-tile" "^1.3.1" pbf "^3.2.1" -"@loaders.gl/gltf@3.2.10", "@loaders.gl/gltf@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/gltf/-/gltf-3.2.10.tgz#3d23798650319b9f2a9659f9753746277aa29106" - integrity sha512-3ZTDaoparLajuoHX7QpHg4Uou2Bik4mWZruJioOzIUs82RC+YdtatXKZ6sIsPseYFD96njyPFPY49F5yQhOLrg== +"@loaders.gl/gltf@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/gltf/-/gltf-3.2.12.tgz#3b602986b2e215ffc48c2b110e4be381be0326f5" + integrity sha512-vdLdWruh4nqmDm/9T0HWX30fJ+UVtB35uQk9dhN/couvrXXtdpkvtb7aFdX0nlCLcrbRlcCYbuCfKctt1CF2mg== dependencies: - "@loaders.gl/draco" "3.2.10" - "@loaders.gl/images" "3.2.10" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/textures" "3.2.10" + "@loaders.gl/draco" "3.2.12" + "@loaders.gl/images" "3.2.12" + "@loaders.gl/loader-utils" "3.2.12" + "@loaders.gl/textures" "3.2.12" -"@loaders.gl/images@3.2.10", "@loaders.gl/images@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/images/-/images-3.2.10.tgz#7e41ef755e0737428c6c60b199a4741219a661fb" - integrity sha512-GsGl6c83Qd2nitVjoGtcIUPsg6vkfrLyaJyc/1UJUGoWOvk3DHBrcaSO/ld5bnWxjImUP6enwV5rmw6NylXU0Q== +"@loaders.gl/gltf@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/gltf/-/gltf-3.2.11.tgz#81be57a78504cb859bfe3c39352e0f48a92c4a62" + integrity sha512-jhVFjNWMPydWB7MJVxSGGGdd3zhVgD94WsFKq9L/HcrdMY6s3nQtinALHXErh/G4XjH3efnjkZXfrE8KDzaJsw== dependencies: - "@loaders.gl/loader-utils" "3.2.10" + "@loaders.gl/draco" "3.2.11" + "@loaders.gl/images" "3.2.11" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/textures" "3.2.11" + +"@loaders.gl/images@3.2.11", "@loaders.gl/images@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/images/-/images-3.2.11.tgz#4004163f28af24990a508438cf529452b6cc4bd1" + integrity sha512-ch5JRXptb8JISYo2PQeASCvuiwdJjJx7ucejDT3EoeKfVHBL7vVjNkHY/UjOMQvljYoF2jD0NfmOJoll5DWjTQ== + dependencies: + "@loaders.gl/loader-utils" "3.2.11" + +"@loaders.gl/images@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/images/-/images-3.2.12.tgz#9ab2bab72892f72ecb4450f1343f6d12fcc56ffd" + integrity sha512-acPKRg9EwgrPyItF97x8LM9p4b8GR03JY+wFJwzBlVdOZXx1dmz1t4rVynRDwgAUgybGKLoPfJtwTIKARnICYQ== + dependencies: + "@loaders.gl/loader-utils" "3.2.12" "@loaders.gl/loader-utils@2.3.13": version "2.3.13" @@ -2718,82 +2746,140 @@ "@babel/runtime" "^7.3.1" "@probe.gl/stats" "^3.3.0" -"@loaders.gl/loader-utils@3.2.10", "@loaders.gl/loader-utils@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/loader-utils/-/loader-utils-3.2.10.tgz#2fb644cbe4a890492030fd4270da005bae2d88a1" - integrity sha512-oCxYRN1j93zgu3klByFN4fYCSMdhaZodHtDKvG4VEqTmDWFT3jbFpDkBmjwFseEmHQRirt52vwZSknvIUTSXBQ== +"@loaders.gl/loader-utils@3.2.11", "@loaders.gl/loader-utils@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/loader-utils/-/loader-utils-3.2.11.tgz#584e687f8c031342a467700323f04a7a88f2131e" + integrity sha512-/eQjBLQI1x+5MG3b235xrUcMdKl9ALtzOPMINYeA9TI1TJBULv1xNWBg6HqVdS2ZfaC+JFc9vMxrPI7YaklqNw== dependencies: "@babel/runtime" "^7.3.1" - "@loaders.gl/worker-utils" "3.2.10" + "@loaders.gl/worker-utils" "3.2.11" "@probe.gl/stats" "^3.5.0" -"@loaders.gl/math@3.2.10": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/math/-/math-3.2.10.tgz#d5dff1f21f0d9428203c941eb720112b4048e2bb" - integrity sha512-rWGA/wSidZt+uy7Di7CKPdul+7cVrvarsCFH94tkC8BQw4GMZ8/OH0yy7HP4jmiPjKpnEnsBFC5xfDH8u35Yjw== +"@loaders.gl/loader-utils@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/loader-utils/-/loader-utils-3.2.12.tgz#dfa9093d52a806128ff758e06f4b90cfc46d46db" + integrity sha512-OXu7vqBvYj2HD0Tcle8RwRAktJ5BsBTZc6ADPNia7FOGI9sA2ZDECPa0g8gBtKpbhzluLZzPj5N4OPdL6hNiQg== dependencies: - "@loaders.gl/images" "3.2.10" - "@loaders.gl/loader-utils" "3.2.10" + "@babel/runtime" "^7.3.1" + "@loaders.gl/worker-utils" "3.2.12" + "@probe.gl/stats" "^3.5.0" + +"@loaders.gl/math@3.2.11": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/math/-/math-3.2.11.tgz#2ccfa97047f8c3bc95d6229f985799e3832c0bf5" + integrity sha512-iv3X41ZfvQtYCqLIicStqFnBbovrWvLdWSW1DmlAcmFIiYlvpjeHXJIvFgUwl4nS6Yz3l+qf5p7Nh4VjJ8kN7A== + dependencies: + "@loaders.gl/images" "3.2.11" + "@loaders.gl/loader-utils" "3.2.11" + "@math.gl/core" "^3.5.1" + +"@loaders.gl/math@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/math/-/math-3.2.12.tgz#148853e5708ed9c59b2f7c093bc3e1309579a92e" + integrity sha512-+34kJ6v//33xJq7mFd5ndNe0BU5bgy4afQ5ciy4VVhQns/Keml9hl/i8eOY2lFt/SUs1T2CSe1+X5065L0CWCA== + dependencies: + "@loaders.gl/images" "3.2.12" + "@loaders.gl/loader-utils" "3.2.12" "@math.gl/core" "^3.5.1" -"@loaders.gl/mvt@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/mvt/-/mvt-3.2.10.tgz#8afd5183c5f7cc5e46eaef29b71bb7d01e34ea9f" - integrity sha512-snznCcieApDlmHFe69aJNpFQv0m7UJbtVNpM1IVm498Up3VDI2XSiK3pE45eqBpRsHeH5RAbX0TQJOowk9nytg== +"@loaders.gl/mvt@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/mvt/-/mvt-3.2.11.tgz#b99733a8008cf988f36c3e914b4c0465a3e083c7" + integrity sha512-CsFoAuyJHg7E6D3GuF861Yxhi2s5DjdC4O4r6ka+XO2+6skO1DGZym++hwQQsm+Qdka46OkbDjFGO3lxJ/tiIw== dependencies: - "@loaders.gl/gis" "3.2.10" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/schema" "3.2.10" + "@loaders.gl/gis" "3.2.11" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/schema" "3.2.11" "@math.gl/polygon" "^3.5.1" pbf "^3.2.1" -"@loaders.gl/schema@3.2.10", "@loaders.gl/schema@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/schema/-/schema-3.2.10.tgz#3febcc34b03615b7e5f1162d47ba49ab8ac81faf" - integrity sha512-TeM/E2JBzoLbs/wuljYAEYAXFgiBomshjUIIlbgKTSjM+m13VrMvs1jgRLWJ1kicqiCxENHLQDnK/Zl3hBc0iQ== +"@loaders.gl/schema@3.2.11", "@loaders.gl/schema@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/schema/-/schema-3.2.11.tgz#8650f98446c0437f788d00a1d30092082f157057" + integrity sha512-Fz0cWtHwE5Os0HxhEYxLCnJz5LD7djpZnNWk+lPVzIJ6HWPFlxI6lbD4zc1auN5omD2EXFkJigi8on8l3i63fQ== dependencies: "@types/geojson" "^7946.0.7" apache-arrow "^4.0.0" -"@loaders.gl/terrain@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/terrain/-/terrain-3.2.10.tgz#1cc7c9aa4d060822a4f29dfa426d14e5d587aae6" - integrity sha512-oawMAGVEuTejDd7j/oWBcp8PsRjiTK3lAQ/5ljTIpn9fw5ajv7L9rJBPhtbSu9DfeV1N8XHx+GYPtsH3WbTXjA== +"@loaders.gl/schema@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/schema/-/schema-3.2.12.tgz#312911131d7fc90e05b771e95696dfddacb7c738" + integrity sha512-IP/fniG3PsMvhU+kkryULAoszgNEUSmfCvKZujDtU65xgIHScNQP87+wgqfZFScftEX0iBSahr7QYdQCEsv83w== + dependencies: + "@types/geojson" "^7946.0.7" + apache-arrow "^4.0.0" + +"@loaders.gl/terrain@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/terrain/-/terrain-3.2.11.tgz#a46f5948fafde51ff3abe1ff975f09ba6a1b506c" + integrity sha512-Bsb+uq4BWIF9Y20roXx93sSvI/2f4cOMD0AdU/3stWtjSWOVPv9RZbNIgZdsIe4upKtE7uVyPYS48rzN9dN8xQ== dependencies: "@babel/runtime" "^7.3.1" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/schema" "3.2.10" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/schema" "3.2.11" "@mapbox/martini" "^0.2.0" -"@loaders.gl/textures@3.2.10": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/textures/-/textures-3.2.10.tgz#5278637fee2709200e69cfbb5ea30880400ff12f" - integrity sha512-owrPD3NP5Rx52SMdGgJw0Q3nf65PtNsWOhSMeRjs/CTHqsrq68BCN5YMR1/Mk+7DRQt6SkDFsVvjNqtj/X6oAQ== +"@loaders.gl/textures@3.2.11": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/textures/-/textures-3.2.11.tgz#52607a30fa9a19612b3baebcb73496a6dde619f6" + integrity sha512-GapLQ9XzCfVygVp2uFggk+Gr736hAkm0aZVRyGRi9hQjXffD7IvPOMh+cqNkHuxTcO5vHHR6jnQqYc5gtUODlg== dependencies: - "@loaders.gl/images" "3.2.10" - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/schema" "3.2.10" - "@loaders.gl/worker-utils" "3.2.10" + "@loaders.gl/images" "3.2.11" + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/schema" "3.2.11" + "@loaders.gl/worker-utils" "3.2.11" ktx-parse "^0.0.4" texture-compressor "^1.0.2" -"@loaders.gl/tiles@3.2.10", "@loaders.gl/tiles@^3.2.5": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/tiles/-/tiles-3.2.10.tgz#419c2dba59b53add558cbbe82cf01d5475e0dd51" - integrity sha512-ngDOZvThBmmyfr3eiIzMIxP2xPIlnWrWuE1UyaldgjxK/ZClxVqDdFv7i1djzOxsZGDqrWO4EwYuAljQwUkiXQ== +"@loaders.gl/textures@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/textures/-/textures-3.2.12.tgz#75cda15b13761ba48f56e5751e2f7eb219105b83" + integrity sha512-xludkKPnzdQAHC19J0depqEvUH8x61cjsMId9Q1Et/emwI5TyEiDK78vl7tsIzuOh/IvrPHykRxfXp4uayW+Nw== dependencies: - "@loaders.gl/loader-utils" "3.2.10" - "@loaders.gl/math" "3.2.10" + "@loaders.gl/images" "3.2.12" + "@loaders.gl/loader-utils" "3.2.12" + "@loaders.gl/schema" "3.2.12" + "@loaders.gl/worker-utils" "3.2.12" + ktx-parse "^0.0.4" + texture-compressor "^1.0.2" + +"@loaders.gl/tiles@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/tiles/-/tiles-3.2.12.tgz#27dd8907c1399c27753b7bb95bbb0f872fb239b5" + integrity sha512-4CGPi7UpL/uqO1/RS48rh1YmOYBG5fcHcX0bZMhDXvOKd6wm0bL3xIP5Q9/+5DBfcdWEe8fqQiFRfkGKWUnKLg== + dependencies: + "@loaders.gl/loader-utils" "3.2.12" + "@loaders.gl/math" "3.2.12" + "@math.gl/core" "^3.5.1" + "@math.gl/culling" "^3.5.1" + "@math.gl/geospatial" "^3.5.1" + "@math.gl/web-mercator" "^3.5.1" + "@probe.gl/stats" "^3.5.0" + +"@loaders.gl/tiles@^3.2.10": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/tiles/-/tiles-3.2.11.tgz#a100ca195bec9baf4293c4bbc629cba0807a721a" + integrity sha512-ANjrYTF99cX/jGSKSxmGfCwleYGl8UqXd3Y9VZxRRXOBRZzEAqxS6UlVUqGHkfJS5hiLMGdGY1uYGOwigZCxNQ== + dependencies: + "@loaders.gl/loader-utils" "3.2.11" + "@loaders.gl/math" "3.2.11" "@math.gl/core" "^3.5.1" "@math.gl/culling" "^3.5.1" "@math.gl/geospatial" "^3.5.1" "@math.gl/web-mercator" "^3.5.1" "@probe.gl/stats" "^3.5.0" -"@loaders.gl/worker-utils@3.2.10": - version "3.2.10" - resolved "https://registry.yarnpkg.com/@loaders.gl/worker-utils/-/worker-utils-3.2.10.tgz#cf4d1308b69cca3e8dea6ef02548333b840edf22" - integrity sha512-z75rIsddAGeMV8u1O0jsq1+BGgTYxFHTx6rhmPfOLGQhiZg6bEF2dFSr/mpkUd0xJyyV+Z67+jcC8RUTb1sOTA== +"@loaders.gl/worker-utils@3.2.11": + version "3.2.11" + resolved "https://registry.yarnpkg.com/@loaders.gl/worker-utils/-/worker-utils-3.2.11.tgz#76cc457ace34eb2e28b87f2c1e494b20cefb8a89" + integrity sha512-2DyBkBJGDU66XbLz+eBByTlfbjUD3OarjzqAifenIrOaX1IuOcSqa8r6w2FOgsjlpT1ujcn0d4QO/o0zM8IWJA== + dependencies: + "@babel/runtime" "^7.3.1" + +"@loaders.gl/worker-utils@3.2.12": + version "3.2.12" + resolved "https://registry.yarnpkg.com/@loaders.gl/worker-utils/-/worker-utils-3.2.12.tgz#c47a6ddc2eae2845f7e9be14cf33f672da164fb0" + integrity sha512-MRgk8ln4Ur2RAnalD6OWstSuIAlf0l/26KTHtJiVD+HtmLJDoxSoQOHsnrEsdE18m+8NpAQgTD+rDzZtEpsnlw== dependencies: "@babel/runtime" "^7.3.1" @@ -2890,10 +2976,10 @@ resolved "https://registry.yarnpkg.com/@mapbox/tilebelt/-/tilebelt-1.0.2.tgz#32936c3acad3ea3e669bb083a598bcc7d74b4ec9" integrity sha512-tGJN2VIgWrXqBTPIxFVklklIpcy6ss8W5ouq+cjNLXPXFraRaDR4Ice+5Q8/uLX+6aH23lWBMydOIn8PcdVcpA== -"@mapbox/tiny-sdf@^2.0.5": - version "2.0.5" - resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz#cdba698d3d65087643130f9af43a2b622ce0b372" - integrity sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw== +"@mapbox/tiny-sdf@^1.1.0": + version "1.2.5" + resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz#424c620a96442b20402552be70a7f62a8407cc59" + integrity sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw== "@mapbox/vector-tile@^1.3.1": version "1.3.1" @@ -7022,9 +7108,9 @@ camelize@^1.0.0: integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286: - version "1.0.30001292" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz#4a55f61c06abc9595965cfd77897dc7bc1cdc456" - integrity sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw== + version "1.0.30001441" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz" + integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg== capture-exit@^2.0.0: version "2.0.0" @@ -8620,11 +8706,6 @@ earcut@^2.0.6: resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.3.tgz#d44ced2ff5a18859568e327dd9c7d46b16f55cf4" integrity sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug== -earcut@^2.2.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a" - integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ== - ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" @@ -15419,20 +15500,13 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== -quadbin@^0.1.2: +quadbin@^0.1.2, quadbin@^0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/quadbin/-/quadbin-0.1.5.tgz#aa6dba53d0558236f8070450c90d6ed9b87507c8" integrity sha512-/MQnN7V73myA+31gTxldTGN8ixqrUCXtUoDvRKSI9QZJOaq0cS9SNQkdToMxjC3ZSM2hN7mleOAn+9QVNlPZOg== dependencies: "@mapbox/tile-cover" "^3.0.2" -quadbin@^0.1.4: - version "0.1.4" - resolved "https://registry.yarnpkg.com/quadbin/-/quadbin-0.1.4.tgz#4f3dae4316105ae85cfc0473c450558f9c21f7b5" - integrity sha512-CU4wivjITfW/eewXOWjFtpZbtkRN49rCW+VvOTbd4lrj2MzLA0GGY2iWaawgBkoQQLVb7UCKRtm1ojN1Bej2Ug== - dependencies: - "@mapbox/tile-cover" "^3.0.2" - query-string@^6.13.8: version "6.14.1" resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a" @@ -18923,4 +18997,4 @@ zrender@5.2.1: zwitch@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920" - integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== \ No newline at end of file + integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw== From 42eeffb4ef5b767b33244529585fa4ad697e35ec Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 17 Jan 2023 11:06:37 +0100 Subject: [PATCH 122/154] v0.0.0-experimental-muiv5-1.5.0-alpha.11-01 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index aa46ffd78..fa70719d0 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 4959a5251..07d2102bb 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 9a09d91e1..0fca2c686 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 673247bdf..73eaea638 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 9ed27c4de..bce43b7d4 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index dc29247a2..3141bf884 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index f7d447c26..48a4cdf84 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index b437fc945..28938c43b 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 84e51b7e5..9fa392c2e 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 2ece9e840d3fce7295464cfb382f0ea83d92224d Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 17 Jan 2023 11:14:28 +0100 Subject: [PATCH 123/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 07d2102bb..0d6f8620f 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@deck.gl/extensions": "^8.8.15", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0fca2c686..23eac05bf 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 73eaea638..337fe86e3 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "@deck.gl/google-maps": "^8.8.15", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 3141bf884..ffeb6b5e5 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 48a4cdf84..e0c56b58c 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 28938c43b..554e1bc67 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-33", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", "@deck.gl/core": "^8.8.15", "@deck.gl/layers": "^8.8.15", "@emotion/react": "^11.10.0", From ec617e5c522232a457bf69ef736520bd48df6525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 19 Jan 2023 12:27:34 +0100 Subject: [PATCH 124/154] Adjustments in theme to fix uses cases in cloud-native (#572) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 11 +-- .../theme/sections/components/navigation.js | 7 +- .../src/theme/sections/components/surfaces.js | 2 +- .../src/widgets/legend/LegendCategories.js | 8 +- .../react-ui/src/widgets/legend/LegendIcon.js | 2 +- .../stories/organisms/Menu.stories.js | 83 +++++++++++++++++++ 7 files changed, 104 insertions(+), 10 deletions(-) create mode 100644 packages/react-ui/storybook/stories/organisms/Menu.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e8498157..87b7fb163 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Adjustments in theme to fix uses cases in cloud-native [#572](https://github.com/CartoDB/carto-react/pull/572) - Update design-system branch with master [#563](https://github.com/CartoDB/carto-react/pull/563) - Adjustments in theme to fix uses cases in cloud-native [#567](https://github.com/CartoDB/carto-react/pull/567) - Cherry pick from #531 PR [#564](https://github.com/CartoDB/carto-react/pull/564) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 51baeaa96..b7245b8ec 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -58,7 +58,6 @@ export const dataDisplayOverrides = { defaultProps: { primaryTypographyProps: { variant: 'body2', - style: { fontWeight: themeTypography.fontWeightBold }, noWrap: true }, secondaryTypographyProps: { variant: 'caption' } @@ -67,11 +66,13 @@ export const dataDisplayOverrides = { MuiListItemIcon: { styleOverrides: { root: { - minWidth: getSpacing(5.75), - marginLeft: getSpacing(0.75), + marginRight: getSpacing(1), '& .MuiSvgIcon-root': { fontSize: ICON_SIZE_M + }, + '.MuiMenuItem-root.MuiButtonBase-root &': { + minWidth: getSpacing(2.25) } } } @@ -80,8 +81,8 @@ export const dataDisplayOverrides = { styleOverrides: { root: { '& .MuiAvatar-root': { - height: getSpacing(4.5), - width: getSpacing(4.5) + height: getSpacing(4), + width: getSpacing(4) }, '& .MuiSvgIcon-root': { fontSize: ICON_SIZE diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index f63e5a729..bfcb8d3a5 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -9,6 +9,7 @@ export const navigationOverrides = { styleOverrides: { root: { ...themeTypography.body2, + minHeight: getSpacing(4), height: getSpacing(4), transition: 'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', @@ -41,6 +42,10 @@ export const navigationOverrides = { '& .MuiCheckbox-root, & > .MuiSvgIcon-root': { marginRight: getSpacing(1) } + }, + dense: { + minHeight: getSpacing(3), + height: getSpacing(3) } } }, @@ -88,7 +93,7 @@ export const navigationOverrides = { '&.Mui-selected': { pointerEvents: 'none', - '& svg path': { + '& svg:not(.doNotFillIcon) path': { fill: commonPalette.primary.main } }, diff --git a/packages/react-ui/src/theme/sections/components/surfaces.js b/packages/react-ui/src/theme/sections/components/surfaces.js index 69003c355..aceddf9aa 100644 --- a/packages/react-ui/src/theme/sections/components/surfaces.js +++ b/packages/react-ui/src/theme/sections/components/surfaces.js @@ -1,5 +1,5 @@ import { getSpacing } from '../../themeUtils'; -import { APPBAR_SIZE, APPBAR_SIZE_M, BREAKPOINTS } from '../../themeConstants'; +import { APPBAR_SIZE } from '../../themeConstants'; import { commonPalette } from '../palette'; import { themeShadows } from '../shadows'; diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index ff0d6176e..a8d98b696 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -163,12 +163,16 @@ function Row({ label, isMax, isStrokeColor, color = '#000', icon, maskedIcon }) } /> - + {label} {label} diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 616570e05..4587fbb1f 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -13,7 +13,7 @@ function LegendIcon({ legend }) { {label} - {label} + {label} )); diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js new file mode 100644 index 000000000..a902b1fa8 --- /dev/null +++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js @@ -0,0 +1,83 @@ +import React from 'react'; +import { Divider, ListItemIcon, ListItemText, MenuItem, MenuList } from '@mui/material'; +import { + CloudOutlined, + ContentCopyOutlined, + ContentCutOutlined, + ContentPasteOutlined +} from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; + +const options = { + title: 'Organisms/Menu', + component: MenuList, + argTypes: { + label: { + control: { + type: 'text' + } + }, + dense: { + defaultValue: false, + control: { + type: 'boolean' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29229&t=0T8NJiytWngAdJeO-0' + }, + status: { + type: 'inDevelopment' + } + } +}; +export default options; + +const Template = ({ label, ...args }) => { + return ( + + + + + + {label} + + ⌘X + + + + + + + {label} + + ⌘C + + + + + + + {label} + + ⌘V + + + + + + + + {label} + + + ); +}; + +const commonArgs = { label: 'Label', dense: false }; + +export const Playground = Template.bind({}); +Playground.args = { ...commonArgs }; From 4d9f18a5e41bb250daa09199512188dc98d855cc Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 19 Jan 2023 12:30:24 +0100 Subject: [PATCH 125/154] v0.0.0-experimental-muiv5-1.5.0-alpha.11-02 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index fa70719d0..495c8660c 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 0d6f8620f..6a4b2fc76 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 23eac05bf..7c530fe33 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 337fe86e3..912ea8f98 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index bce43b7d4..2b9c0982f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index ffeb6b5e5..5d5752a1b 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e0c56b58c..5aec9455c 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 554e1bc67..d2b8b21b1 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 9fa392c2e..826431d49 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 0c992b3f626b43203dcfb4fb8dd51db1dd19d28d Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 19 Jan 2023 12:32:45 +0100 Subject: [PATCH 126/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 6a4b2fc76..8fa3559ac 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@deck.gl/extensions": "^8.8.15", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 7c530fe33..d16e62888 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 912ea8f98..ea4ae370f 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "@deck.gl/google-maps": "^8.8.15", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 5d5752a1b..f77f21218 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 5aec9455c..1ea8c78fa 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d2b8b21b1..f8e32949b 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-01", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", "@deck.gl/core": "^8.8.15", "@deck.gl/layers": "^8.8.15", "@emotion/react": "^11.10.0", From b932124af99bd8b224cb3b45d2b6704386ea7a62 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 20 Jan 2023 13:24:03 +0100 Subject: [PATCH 127/154] fix tabs test --- packages/react-ui/src/theme/sections/components/navigation.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index bfcb8d3a5..f37116042 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -61,7 +61,8 @@ export const navigationOverrides = { }, styleOverrides: { root: ({ ownerState }) => ({ - borderBottom: `1px solid ${commonPalette.black[12]}` + boxSizing: 'content-box', + boxShadow: `0 1px 0 0 ${commonPalette.black[12]}` }), vertical: { From b3f7c21b2d7d26e8ab1bb0f075abd6edbd1ee853 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 20 Jan 2023 13:26:15 +0100 Subject: [PATCH 128/154] v0.0.0-experimental-muiv5-1.5.0-alpha.11-03 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 495c8660c..fa2199168 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 8fa3559ac..9349670be 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d16e62888..2bff91cec 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ea4ae370f..7b0f48651 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 2b9c0982f..c4dd8d50f 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index f77f21218..ac9d8d4e8 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1ea8c78fa..222afe46d 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index f8e32949b..023c88bb7 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 826431d49..07c0066c6 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From bc69007f80396c424ee19ce622b192ca80b74428 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 20 Jan 2023 13:27:22 +0100 Subject: [PATCH 129/154] peer dependencies --- lerna.json | 4 +--- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 7 files changed, 14 insertions(+), 16 deletions(-) diff --git a/lerna.json b/lerna.json index fa2199168..852b4c548 100644 --- a/lerna.json +++ b/lerna.json @@ -1,7 +1,5 @@ { - "packages": [ - "packages/*" - ], + "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03" diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 9349670be..268175158 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@deck.gl/extensions": "^8.8.15", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 2bff91cec..e014ff5c0 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 7b0f48651..9f3c50cd6 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "@deck.gl/google-maps": "^8.8.15", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index ac9d8d4e8..f8d107bf3 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 222afe46d..e8eb00e71 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 023c88bb7..92703f4e9 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-02", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", "@deck.gl/core": "^8.8.15", "@deck.gl/layers": "^8.8.15", "@emotion/react": "^11.10.0", From c1613e2f4eab7390f6433b2c97ec23a514aa7c04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 25 Jan 2023 11:48:02 +0100 Subject: [PATCH 130/154] Adjustments in theme to fix uses cases in cloud-native (#585) --- UPGRADE.md | 12 ++ .../theme/sections/components/dataDisplay.js | 10 ++ .../src/theme/sections/components/feedback.js | 4 +- .../stories/molecules/Snackbar.stories.js | 104 ++++++++++++++++++ 4 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 packages/react-ui/storybook/stories/molecules/Snackbar.stories.js diff --git a/UPGRADE.md b/UPGRADE.md index 6c8004066..433e3cdd5 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -27,6 +27,8 @@ 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. +`theme.spacingValue * 2` + Needed changes: 1. Change `${theme.spacing(xx)}px` by `${theme.spacing(xx)}`. It means, without the `px` ending, since in Mui v5 it is appended to the end of the string by default. @@ -37,6 +39,16 @@ Tip: An easy search to catch up this, would be `)}px` Tip: An easy search to catch up this, would be `-theme.spacing(` +## Icons + +We have this kind of rules in buttons to cover the common use cases: + +`svg path { fill: currentColor }` + +In case you don't need the icon to be filled, you can apply this class to the svg parent: `.doNotFillIcon` + +`` + ## 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 b7245b8ec..f82915edc 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -173,6 +173,10 @@ export const dataDisplayOverrides = { } }, MuiDialogTitle: { + defaultProps: { + variant: 'subtitle1' + }, + styleOverrides: { root: { padding: getSpacing(3, 3, 2) @@ -191,6 +195,12 @@ export const dataDisplayOverrides = { MuiDialogContentText: { defaultProps: { variant: 'body2' + }, + + styleOverrides: { + root: { + color: commonPalette.text.primary + } } }, diff --git a/packages/react-ui/src/theme/sections/components/feedback.js b/packages/react-ui/src/theme/sections/components/feedback.js index bfa093ae3..10665a608 100644 --- a/packages/react-ui/src/theme/sections/components/feedback.js +++ b/packages/react-ui/src/theme/sections/components/feedback.js @@ -1,7 +1,7 @@ export const feedbackOverrides = { // SnackBar - MuiSnackBar: { - DefaultProps: { + MuiSnackbar: { + defaultProps: { anchorOrigin: { vertical: 'bottom', horizontal: 'center' diff --git a/packages/react-ui/storybook/stories/molecules/Snackbar.stories.js b/packages/react-ui/storybook/stories/molecules/Snackbar.stories.js new file mode 100644 index 000000000..e39f07d4f --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/Snackbar.stories.js @@ -0,0 +1,104 @@ +import React from 'react'; +import { Button, IconButton, Snackbar } from '@mui/material'; +import { CloseOutlined } from '@mui/icons-material'; + +const options = { + title: 'Molecules/Snackbar', + component: Snackbar, + argTypes: { + message: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=3840%3A74274&t=8yIyrIS5EqFhj2RB-0' + }, + status: { + type: 'inDevelopment' + } + } +}; +export default options; + +const Template = ({ message, ...args }) => { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const action = ( + <> + + + + + + ); + + return ( + <> + + + + ); +}; + +const AutoHideTemplate = ({ message, ...args }) => { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + + setOpen(false); + }; + + const action = ( + <> + + + ); + + return ( + <> + + + + ); +}; + +const commonArgs = { message: 'This is an inline content snackbar' }; + +export const Playground = Template.bind({}); +Playground.args = { ...commonArgs }; + +export const AutoHide = AutoHideTemplate.bind({}); +AutoHide.args = { ...commonArgs }; From 1e41c3f8839e1c5a42b1911274132b30d3bbbf42 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 25 Jan 2023 11:55:18 +0100 Subject: [PATCH 131/154] v0.0.0-experimental-muiv5-1.5.0-alpha.11-04 --- lerna.json | 6 ++++-- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 13 insertions(+), 11 deletions(-) diff --git a/lerna.json b/lerna.json index 852b4c548..c63cfde2e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,8 @@ { - "packages": ["packages/*"], + "packages": [ + "packages/*" + ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 268175158..905413a41 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index e014ff5c0..f02bd7e6c 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 9f3c50cd6..ed5b87ce1 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index c4dd8d50f..7d656662c 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index f8d107bf3..9ac285296 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e8eb00e71..2cb1b39a4 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 92703f4e9..3a4e473d3 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 07c0066c6..5f7abd65e 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 1763a3ea3fefb27a48fe8b105262460ae0b8c348 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 25 Jan 2023 12:01:42 +0100 Subject: [PATCH 132/154] peer dependencies --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 905413a41..658bb7a57 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@deck.gl/extensions": "^8.8.15", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index f02bd7e6c..f7106c9ff 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ed5b87ce1..0f4eb6130 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@deck.gl/google-maps": "^8.8.15", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 9ac285296..0e318b53e 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@deck.gl/carto": "^8.8.15", "@deck.gl/core": "^8.8.15", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 2cb1b39a4..f093f17d4 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 3a4e473d3..1c72082bc 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-03", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@deck.gl/core": "^8.8.15", "@deck.gl/layers": "^8.8.15", "@emotion/react": "^11.10.0", From ed111039485228fa6451b0275f6612bad4636b62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 25 Jan 2023 17:14:31 +0100 Subject: [PATCH 133/154] Update design-system branch with master (1.5.0-alpha.14) (#586) --- CHANGELOG.md | 21 +- jest.config.base.js | 20 +- package.json | 16 +- packages/react-api/package.json | 6 +- .../src/hooks/FeaturesDroppedLoader.js | 4 +- packages/react-api/src/index.d.ts | 1 + packages/react-basemaps/package.json | 2 +- .../react-basemaps/src/basemaps/GoogleMap.js | 4 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 4 +- packages/react-ui/README.md | 2 +- .../ComparativeCategoryWidgetUI.test.js | 8 +- .../ComparativeFormulaWidgetUI.test.js | 61 ++++++ .../src/custom-components/AnimatedNumber.js | 2 +- packages/react-ui/src/types.d.ts | 17 +- packages/react-ui/src/widgets/BarWidgetUI.js | 6 +- .../CategoryItem.js | 201 ++++++++++-------- .../ComparativeCategoryWidgetUI.js | 11 +- .../useCategoryStyles.js | 1 - .../comparative/ComparativeFormulaWidgetUI.js | 128 ++++++----- .../comparative/ComparativePieWidgetUI.js | 3 +- .../ComparativeCategoryWidgetUI.stories.js | 3 +- .../ComparativeFormulaWidgetUI.stories.js | 9 +- packages/react-widgets/package.json | 4 +- packages/react-widgets/src/types.d.ts | 7 + .../src/widgets/FeatureSelectionWidget.js | 7 - .../src/widgets/HistogramWidget.js | 41 ++-- yarn.lock | 154 +++++++------- 28 files changed, 426 insertions(+), 319 deletions(-) create mode 100644 packages/react-ui/__tests__/widgets/ComparativeFormulaWidgetUI.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 87b7fb163..c0e63b8ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,9 +43,26 @@ ## 1.5 -## 1.5.0-alpha.11 (2023-01-12) +## 1.5.0-alpha.14 (2023-01-24) -- Remove custom fetch function. Fixes issues with icon loading and FillStyleExtensions +- Fix isDroppingFeatures converting to Boolean [#583](https://github.com/CartoDB/carto-react/pull/583) + +## 1.5.0-alpha.13 (2023-01-23) + +- Improve typing for FeatureSelectionWidget [#580](https://github.com/CartoDB/carto-react/pull/580) +- Fix ComparativeCategoryWidgetUI tooltip formatter [#579](https://github.com/CartoDB/carto-react/pull/579) +- Fix gmaps warning caused by callback now been mandatary from version >=3.51.6 [#581](https://github.com/CartoDB/carto-react/pull/581) + +## 1.5.0-alpha.12 (2023-01-20) + +- HistogramWidget: fix handling of min/max properties [#574](https://github.com/CartoDB/carto-react/pull/574) +- Adapt comparative category widget design [#575](https://github.com/CartoDB/carto-react/pull/575) +- Improved Comparative Formula UI props interface [#573](https://github.com/CartoDB/carto-react/pull/573) + +## 1.5.0-alpha.11 (2023-01-18) + +- Remove custom fetch function. Fixes issues with icon loading and FillStyleExtensions [#561](https://github.com/CartoDB/carto-react/pull/561) +- Bump deck.gl to latest 8.8.23 [#571](https://github.com/CartoDB/carto-react/pull/571) ## 1.5.0-alpha.10 (2023-01-04) diff --git a/jest.config.base.js b/jest.config.base.js index 4d2d9f641..421c71daf 100644 --- a/jest.config.base.js +++ b/jest.config.base.js @@ -23,7 +23,7 @@ module.exports = { // collectCoverageFrom: undefined, // The directory where Jest should output its coverage files - coverageDirectory: "coverage", + coverageDirectory: 'coverage', // An array of regexp pattern strings used to skip coverage collection // coveragePathIgnorePatterns: [ @@ -40,9 +40,7 @@ module.exports = { // "lcov", // "clover" // ], - coverageReporters: [ - "json" - ], + coverageReporters: ['json'], // An object that configures minimum threshold enforcement for coverage results // coverageThreshold: undefined, @@ -69,9 +67,7 @@ module.exports = { // maxWorkers: "50%", // An array of directory names to be searched recursively up from the requiring module's location - moduleDirectories: [ - "node_modules" - ], + moduleDirectories: ['node_modules'], // An array of file extensions your modules use // moduleFileExtensions: [ @@ -154,10 +150,7 @@ module.exports = { // "**/__tests__/**/*.[jt]s?(x)", // "**/?(*.)+(spec|test).[tj]s?(x)" // ], - testMatch: [ - "**/?(*.)+(spec|test).js" - ], - + testMatch: ['**/?(*.)+(spec|test).js'], // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped // testPathIgnorePatterns: [ @@ -187,8 +180,9 @@ module.exports = { // "/node_modules/", // "\\.pnp\\.[^\\/]+$" // ], - transformIgnorePatterns: ['node_modules/(?!(@mapbox/tiny-sdf|mapbox-gl)/)'], - + transformIgnorePatterns: [ + 'node_modules/(?!(@mapbox/tiny-sdf|mapbox-gl|d3-array|internmap|d3-color|d3-scale|d3-interpolate|d3-format|d3-time|d3-time-format)/)' + ] // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them // unmockedModulePathPatterns: undefined, diff --git a/package.json b/package.json index b5c0974ca..2324e47dd 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,14 @@ "packages/*" ], "devDependencies": { - "@deck.gl/aggregation-layers": "^8.8.15", - "@deck.gl/carto": "^8.8.15", - "@deck.gl/core": "^8.8.15", - "@deck.gl/extensions": "^8.8.15", - "@deck.gl/geo-layers": "^8.8.15", - "@deck.gl/google-maps": "^8.8.15", - "@deck.gl/layers": "^8.8.15", - "@deck.gl/mesh-layers": "^8.8.15", + "@deck.gl/aggregation-layers": "^8.8.23", + "@deck.gl/carto": "^8.8.23", + "@deck.gl/core": "^8.8.23", + "@deck.gl/extensions": "^8.8.23", + "@deck.gl/geo-layers": "^8.8.23", + "@deck.gl/google-maps": "^8.8.23", + "@deck.gl/layers": "^8.8.23", + "@deck.gl/mesh-layers": "^8.8.23", "@mui/icons-material": "^5.10.9", "@mui/lab": "^5.0.0-alpha.104", "@mui/material": "^5.10.10", diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 658bb7a57..56f2ada29 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -67,9 +67,9 @@ "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", - "@deck.gl/carto": "^8.8.15", - "@deck.gl/core": "^8.8.15", - "@deck.gl/extensions": "^8.8.15", + "@deck.gl/carto": "^8.8.23", + "@deck.gl/core": "^8.8.23", + "@deck.gl/extensions": "^8.8.23", "react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", diff --git a/packages/react-api/src/hooks/FeaturesDroppedLoader.js b/packages/react-api/src/hooks/FeaturesDroppedLoader.js index 2fd08dfcf..34ee6d118 100644 --- a/packages/react-api/src/hooks/FeaturesDroppedLoader.js +++ b/packages/react-api/src/hooks/FeaturesDroppedLoader.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/no-anonymous-default-export export default { name: 'FeaturesDroppedLoader', module: 'carto', @@ -6,7 +7,8 @@ export default { // By only specifying `carto-vector-tile` the SpatialIndexLayer will not use this loader mimeTypes: ['application/vnd.carto-vector-tile'], parse: async (arrayBuffer, options, context) => { - const isDroppingFeatures = context.response.headers['features-dropped-from-tile']; + const isDroppingFeatures = + context.response.headers['features-dropped-from-tile'] === 'true'; const result = await context.parse(arrayBuffer, options, context); return result ? { ...result, isDroppingFeatures } : null; } diff --git a/packages/react-api/src/index.d.ts b/packages/react-api/src/index.d.ts index ee9d53cd8..108625970 100644 --- a/packages/react-api/src/index.d.ts +++ b/packages/react-api/src/index.d.ts @@ -4,6 +4,7 @@ export { getStats as _getStats } from './api/stats'; export { getTileJson as _getTileJson } from './api/tilejson'; export { executeModel as _executeModel } from './api/model'; +export { default as FeaturesDroppedLoader } from './hooks/FeaturesDroppedLoader'; export { default as useCartoLayerProps } from './hooks/useCartoLayerProps'; export { Credentials, UseCartoLayerFilterProps } from './types'; diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 0f4eb6130..61dba9349 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -65,7 +65,7 @@ }, "peerDependencies": { "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", - "@deck.gl/google-maps": "^8.8.15", + "@deck.gl/google-maps": "^8.8.23", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/src/basemaps/GoogleMap.js b/packages/react-basemaps/src/basemaps/GoogleMap.js index f98e2f50c..c493e0b6b 100644 --- a/packages/react-basemaps/src/basemaps/GoogleMap.js +++ b/packages/react-basemaps/src/basemaps/GoogleMap.js @@ -15,7 +15,7 @@ import { debounce } from '@carto/react-core'; * @param { function } props.onViewStateChange - (Optional) onViewStateChange handler * @param { string } props.apiKey - Google Maps API Key * @param { string } props.mapId - Google Maps custom mapId - * @param { string } props.customVersion - (Optional) Google Maps custom version, that will be specified at url level. Eg: if customVersion === 'beta' it will use internally this: https://maps.google.com/maps/api/js?v=beta + * @param { string= } props.customVersion - (Optional) Google Maps custom version, that will be specified at url level. Eg: if customVersion === 'beta' it will use internally this: https://maps.google.com/maps/api/js?v=beta * @returns { JSX.Element } - Data returned from the SQL query execution */ export function GoogleMap(props) { @@ -140,7 +140,7 @@ export function GoogleMap(props) { script.async = true; script.type = `text/javascript`; - let url = `https://maps.google.com/maps/api/js?key=${apiKey}`; + let url = `https://maps.google.com/maps/api/js?key=${apiKey}&callback=Function.prototype`; if (customVersion) url = `${url}&v=${customVersion}`; script.src = url; const headScript = document.getElementsByTagName(`script`)[0]; diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7d656662c..03ec7fd84 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@deck.gl/carto": "^8.8.15", + "@deck.gl/carto": "^8.8.23", "@turf/bbox-clip": "^6.3.0", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 0e318b53e..1f986ca8a 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -65,8 +65,8 @@ "peerDependencies": { "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.11-04", - "@deck.gl/carto": "^8.8.15", - "@deck.gl/core": "^8.8.15", + "@deck.gl/carto": "^8.8.23", + "@deck.gl/core": "^8.8.23", "@reduxjs/toolkit": "^1.5.0" } } diff --git a/packages/react-ui/README.md b/packages/react-ui/README.md index 9f5028238..e0b479d9b 100644 --- a/packages/react-ui/README.md +++ b/packages/react-ui/README.md @@ -14,4 +14,4 @@ Package with UI components, based on MaterialUI + a CARTO theme -See the official doc & reference at [CARTO for React](https://docs.carto.com/react/) +See the official doc & reference at [CARTO for React](https://docs.carto.com/development-tools/carto-for-react) diff --git a/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js b/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js index e3ce05db3..109d4ebad 100644 --- a/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/ComparativeCategoryWidgetUI.test.js @@ -49,11 +49,9 @@ describe('ComparativeCategoryWidgetUI', () => { expect(screen.getByText(/data 1/)).toBeInTheDocument(); - const [ref, ...others] = SAMPLE_DATA.map((s) => s[0]); - const max = Math.max(...others.map((o) => o.value)); - const value = ref.value - max; - - expect(screen.getAllByText(new RegExp(value))[0]).toBeInTheDocument(); + SAMPLE_DATA.map((s) => s[0]).forEach((item) => { + expect(screen.getAllByText(new RegExp(String(item.value)))[0]).toBeInTheDocument(); + }); }); test('with one selected category', () => { diff --git a/packages/react-ui/__tests__/widgets/ComparativeFormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/ComparativeFormulaWidgetUI.test.js new file mode 100644 index 000000000..a3e0a97bc --- /dev/null +++ b/packages/react-ui/__tests__/widgets/ComparativeFormulaWidgetUI.test.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { render, screen } from '../widgets/utils/testUtils'; +import ComparativeFormulaWidgetUI from '../../src/widgets/comparative/ComparativeFormulaWidgetUI'; + +const SAMPLE_DATA = [ + { + value: 1234 + }, + { + value: 12 + }, + { + value: 0 + } +]; + +describe('ComparativeFormulaWidgetUI', () => { + test('empty', () => { + const { container } = render( + + ); + expect(container).toBeInTheDocument(); + }); + + test('simple', async () => { + render(); + expect(await screen.findByText(SAMPLE_DATA[0].value)).toBeInTheDocument(); + }); + + test('multiple', async () => { + render(); + const data = await Promise.all( + SAMPLE_DATA.map(async (d) => await screen.findByText(d.value)) + ); + data.forEach((d) => expect(d).toBeInTheDocument()); + }); + + test('simple - data as object', async () => { + const DATA = { value: 1234 }; + render(); + expect(await screen.findByText(DATA.value)).toBeInTheDocument(); + }); + + test('with currency formatter', () => { + render( + { + return Intl.NumberFormat('en-US', { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + notation: 'compact', + compactDisplay: 'short' + }).format(value); + }} + /> + ); + expect(screen.getByText(/1\.23K/)).toBeInTheDocument(); + }); +}); diff --git a/packages/react-ui/src/custom-components/AnimatedNumber.js b/packages/react-ui/src/custom-components/AnimatedNumber.js index 5757ed868..a6f6856ce 100644 --- a/packages/react-ui/src/custom-components/AnimatedNumber.js +++ b/packages/react-ui/src/custom-components/AnimatedNumber.js @@ -15,7 +15,7 @@ function AnimatedNumber({ enabled, value, options, formatter }) { animateOnMount: true, disabled: enabled === false || value === null || value === undefined }; - const animated = useAnimatedNumber(value, { ...defaultOptions, ...options }); + const animated = useAnimatedNumber(value || 0, { ...defaultOptions, ...options }); return {formatter ? formatter(animated) : animated}; } diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index a2e299b36..3d57d94c1 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -208,22 +208,16 @@ export type AnimatedNumber = { formatter: (n: number) => React.ReactNode; }; -export type FormulaLabels = { +export type FormulaData = { prefix?: React.ReactNode; suffix?: React.ReactNode; - note?: React.ReactNode; -}; - -export type FormulaColors = { - [key in keyof FormulaLabels]?: string; -} & { - value?: string; + label?: React.ReactNode; + value: number; }; export type ComparativeFormulaWidgetUI = { - data: number[]; - labels?: FormulaLabels[]; - colors?: FormulaColors[]; + data: FormulaData[]; + colors?: string[]; animated?: boolean; animationOptions?: AnimationOptions; formatter?: (n: number) => React.ReactNode; @@ -253,6 +247,7 @@ export type ComparativeCategoryWidgetUI = { selectedCategories?: string[]; onSelectedCategoriesChange?: (categories: string[]) => any; formatter?: (v: any) => string; + tooltipFormatter?: (v: any) => string; }; export type PieData = { diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index 5c623986b..feddb2b97 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -203,7 +203,7 @@ function BarWidgetUI(props) { xAxisDataWithLabels.length >= 4 ? calculateMargin(xAxisDataWithLabels[0], xAxisDataWithLabels.length) : 0, - top: theme.spacing(2), + top: theme.spacingValue * 2, right: xAxisDataWithLabels.length >= 4 ? calculateMargin( @@ -211,7 +211,7 @@ function BarWidgetUI(props) { xAxisDataWithLabels.length ) : 0, - bottom: theme.spacing(0), + bottom: 0, containLabel: true }, axisPointer: { @@ -441,7 +441,7 @@ function useProcessedProps({ return { ...props, labels, - height: height ?? theme.spacing(22), + height: height ?? theme.spacingValue * 22, selectedBars: formatSelectedBars(_selectedBars), yAxisData, colors, diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js index e3f8c21d0..e0524c01f 100644 --- a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/CategoryItem.js @@ -1,6 +1,6 @@ import { Box, Checkbox, darken, Tooltip, Typography, useTheme } from '@mui/material'; import withStyles from '@mui/styles/withStyles'; -import React, { useMemo } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import AnimatedNumber, { animationOptionsPropTypes @@ -12,41 +12,65 @@ import { useCategoryStyles } from './useCategoryStyles'; const IDENTITY_FN = (v) => v; const EMPTY_ARRAY = []; -function ComparativeCategoryTooltip({ item, names, formatter = IDENTITY_FN }) { +function ComparativeCategoryTooltip({ item, index, names, formatter = IDENTITY_FN }) { const theme = useTheme(); const classes = useCategoryStyles(); + const reference = item.data[0]; + const data = item.data[index]; + const name = names[index]; + + const compareValue = ((data.value - reference.value) / (reference.value || 1)) * 100; + const signText = Math.sign(compareValue) === -1 ? '-' : '+'; + const valueColor = + Math.sign(compareValue) === -1 + ? theme.palette.error.main + : theme.palette.success.main; + + const numberColor = item.key === OTHERS_KEY ? theme.palette.text.disabled : valueColor; return (
{item.label} - - {item.data.map((d, i) => ( + + +
+ + {name} + + -
- {names[i]} - - - - {formatter(d.value)} + {signText} + {formatter(Math.abs(compareValue))} - ))} +
); @@ -55,18 +79,22 @@ function ComparativeCategoryTooltip({ item, names, formatter = IDENTITY_FN }) { ComparativeCategoryTooltip.displayName = 'ComparativeCategoryTooltip'; ComparativeCategoryTooltip.defaultProps = { names: EMPTY_ARRAY, - formatter: IDENTITY_FN + formatter: IDENTITY_FN, + index: 0 }; ComparativeCategoryTooltip.propTypes = { item: transposedCategoryItemPropTypes, names: PropTypes.arrayOf(PropTypes.string).isRequired, - formatter: PropTypes.func + formatter: PropTypes.func, + index: PropTypes.number }; const StyledTooltip = withStyles((theme) => ({ tooltip: { color: theme.palette.common.white, - maxWidth: 260 + maxWidth: 260, + marginBottom: 0, + overflow: 'hidden' } }))(Tooltip); @@ -79,85 +107,90 @@ function CategoryItem({ checkboxChecked, className, formatter, + tooltipFormatter, onClick = IDENTITY_FN, names }) { const classes = useCategoryStyles(); const theme = useTheme(); - const compareValue = useMemo(() => { - const reference = item.data[0].value; - const max = Math.max(...item.data.slice(1).map((d) => d.value)); - return reference - max; - }, [item]); - - const valueColor = - Math.sign(compareValue) === -1 - ? theme.palette.error.main - : theme.palette.success.main; - - const numberColor = item.key === OTHERS_KEY ? theme.palette.text.disabled : valueColor; function getProgressbarLength(value) { return `${Math.min(100, ((value || 0) / maxValue) * 100)}%`; } - const tooltipContent = ( - + const tooltipContent = (index) => ( + ); return ( - + onClick(item.key)} + className={className} + > + {showCheckbox ? : null} onClick(item.key)} - className={className} > - {showCheckbox ? : null} - - + {item.label} + + {item.data.map((d, i) => ( + - - - {item.label} - - - - - - - {item.data.map((d, i) => ( -
-
+
+
-
- ))} - + >
+
+ + + + + + ))} - + ); } @@ -167,6 +200,7 @@ CategoryItem.defaultProps = { animationOptions: {}, className: '', formatter: IDENTITY_FN, + tooltipFormatter: IDENTITY_FN, onClick: IDENTITY_FN }; CategoryItem.propTypes = { @@ -178,6 +212,7 @@ CategoryItem.propTypes = { checkboxChecked: PropTypes.bool.isRequired, className: PropTypes.string, formatter: PropTypes.func, + tooltipFormatter: PropTypes.func, onClick: PropTypes.func, names: PropTypes.arrayOf(PropTypes.string).isRequired }; diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js index 87d139793..2dd45fb50 100644 --- a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI.js @@ -53,6 +53,7 @@ function SearchIcon() { * @param {string[]} [props.selectedCategories] * @param {(categories: string[]) => any} [props.onSelectedCategoriesChange] * @param {(v: any) => any} [props.formatter] + * @param {(v: any) => any} [props.tooltipFormatter] * --> */ function ComparativeCategoryWidgetUI({ @@ -68,7 +69,8 @@ function ComparativeCategoryWidgetUI({ filterable = true, selectedCategories = EMPTY_ARRAY, onSelectedCategoriesChange = IDENTITY_FN, - formatter = IDENTITY_FN + formatter = IDENTITY_FN, + tooltipFormatter = IDENTITY_FN }) { const classes = useCategoryStyles(); const theme = useTheme(); @@ -298,6 +300,7 @@ function ComparativeCategoryWidgetUI({ checkboxChecked={tempSelection.indexOf(d.key) !== -1} className={filterable ? classes.categoryGroupHover : classes.categoryGroup} formatter={formatter} + tooltipFormatter={tooltipFormatter} onClick={clickHandler} names={names} /> @@ -363,7 +366,8 @@ ComparativeCategoryWidgetUI.defaultProps = { filterable: true, selectedCategories: [], onSelectedCategoriesChange: IDENTITY_FN, - formatter: IDENTITY_FN + formatter: IDENTITY_FN, + tooltipFormatter: IDENTITY_FN }; ComparativeCategoryWidgetUI.propTypes = { names: PropTypes.arrayOf(PropTypes.string).isRequired, @@ -385,7 +389,8 @@ ComparativeCategoryWidgetUI.propTypes = { filterable: PropTypes.bool, selectedCategories: PropTypes.arrayOf(PropTypes.string), onSelectedCategoriesChange: PropTypes.func, - formatter: PropTypes.func + formatter: PropTypes.func, + tooltipFormatter: PropTypes.func }; export default ComparativeCategoryWidgetUI; diff --git a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js index 5fda315d3..ebcbf4ed0 100644 --- a/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js +++ b/packages/react-ui/src/widgets/comparative/ComparativeCategoryWidgetUI/useCategoryStyles.js @@ -14,7 +14,6 @@ export const useCategoryStyles = makeStyles((theme) => ({ progressbar: { height: theme.spacing(0.5), width: '100%', - margin: theme.spacing(0.5, 0, 1, 0), borderRadius: theme.spacing(0.5), backgroundColor: theme.palette.action.disabledBackground, diff --git a/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js b/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js index 3df509000..a779c10a1 100644 --- a/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js +++ b/packages/react-ui/src/widgets/comparative/ComparativeFormulaWidgetUI.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import { Box, useTheme } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; @@ -40,9 +40,8 @@ const useStyles = makeStyles((theme) => ({ * Renders a `` widget *