New design system applied to priority 1 components

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)

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';`.

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';
 

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",

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 (
+    <MuiButton {...otherProps} ref={ref} style={style}>
+      <Typography variant='inherit' color='inherit' noWrap component='span'>
+        {children}
+      </Typography>
+    </MuiButton>
+  );
+});
+
+Button.propTypes = {
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+
+export default Button;

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
 };

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
 };

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;
+  }
+}