From 76c473d98497b91cfcb2c6c09b5ca7658cda2431 Mon Sep 17 00:00:00 2001 From: Jonathan Berger Date: Tue, 20 Feb 2024 12:19:01 +0100 Subject: [PATCH] Adapt Mui Button styles Change-type: minor --- package-lock.json | 35 +-- package.json | 2 +- .../DownloadImageDialog/ImageForm.tsx | 4 +- src/components/Form/Form.stories.tsx | 2 +- src/components/Form/index.tsx | 4 +- .../30_mui_components}/Alert.stories.tsx | 0 src/docs/30_mui_components/buttons.mdx | 109 +++++++++ src/docs/utils.tsx | 34 +++ src/theme.ts | 222 +++++++++++++++++- 9 files changed, 380 insertions(+), 32 deletions(-) rename src/{components/SnackbarProvider => docs/30_mui_components}/Alert.stories.tsx (100%) create mode 100644 src/docs/30_mui_components/buttons.mdx diff --git a/package-lock.json b/package-lock.json index f20b00e9..32eec08d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "3.2.1", "license": "ISC", "dependencies": { - "@balena/design-tokens": "^0.2.0", + "@balena/design-tokens": "^0.4.0", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.16", @@ -2321,9 +2321,9 @@ } }, "node_modules/@balena/design-tokens": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@balena/design-tokens/-/design-tokens-0.2.0.tgz", - "integrity": "sha512-SQJDyW9EbDpcvVR61Bj7i6MdBByhHQ/53K6xzkOElte8MxvHLRLiKeGdLfBmq9M0MsScvpU4tZGvKkLdjhls2w==" + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@balena/design-tokens/-/design-tokens-0.4.0.tgz", + "integrity": "sha512-uJjlgmtQE1IIqJM8e4+Qe3Ag4MJelGX6od1TMedNkZRR62ro29QWQomJJFQZVxxUx7INjsWh2DMlsnIqFeCuaA==" }, "node_modules/@balena/lint": { "version": "6.2.2", @@ -8537,9 +8537,9 @@ "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==" }, "node_modules/@types/node": { - "version": "18.19.17", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.17.tgz", - "integrity": "sha512-SzyGKgwPzuWp2SHhlpXKzCX0pIOfcI4V2eF37nNBJOhwlegQ83omtVQ1XxZpDE06V/d6AQvfQdPfnw0tRC//Ng==", + "version": "18.19.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.18.tgz", + "integrity": "sha512-80CP7B8y4PzZF0GWx15/gVWRrB5y/bIjNI84NK3cmQJu0WZwvmj2WMA5LcofQFVfLqqCSp545+U2LsrVzX36Zg==", "dependencies": { "undici-types": "~5.26.4" } @@ -19843,9 +19843,9 @@ } }, "node_modules/lint-staged/node_modules/npm-run-path": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz", - "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", "dev": true, "dependencies": { "path-key": "^4.0.0" @@ -21641,9 +21641,9 @@ } }, "node_modules/nypm/node_modules/npm-run-path": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz", - "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", "dev": true, "dependencies": { "path-key": "^4.0.0" @@ -22914,9 +22914,12 @@ } }, "node_modules/postcss-load-config/node_modules/yaml": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", - "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.0.tgz", + "integrity": "sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==", + "bin": { + "yaml": "bin.mjs" + }, "engines": { "node": ">= 14" } diff --git a/package.json b/package.json index 361ad45c..b4a70659 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "README.md" ], "dependencies": { - "@balena/design-tokens": "^0.2.0", + "@balena/design-tokens": "^0.4.0", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.16", diff --git a/src/components/DownloadImageDialog/ImageForm.tsx b/src/components/DownloadImageDialog/ImageForm.tsx index 551038c3..437ef9f1 100644 --- a/src/components/DownloadImageDialog/ImageForm.tsx +++ b/src/components/DownloadImageDialog/ImageForm.tsx @@ -421,8 +421,8 @@ export const ImageForm: React.FC = memo( + + + + + + + + + +## Contained + + + + + + + + + + + + + +## Light + + + + + + + + + + + + + +## Outlined + + + + + + + + + + + + + +## Icon Button + + + + + + + + + + + + + + + + + + + + + +## Toggle Button + + + + + + + + + + + + \ No newline at end of file diff --git a/src/docs/utils.tsx b/src/docs/utils.tsx index 7c7dee6c..ba104c0a 100644 --- a/src/docs/utils.tsx +++ b/src/docs/utils.tsx @@ -1,3 +1,11 @@ +import React, { useState } from 'react'; +import { + ToggleButton, + ToggleButtonGroup, + ToggleButtonGroupProps, +} from '@mui/material'; +import { GridView, TableRows } from '@mui/icons-material'; + // TODO move this type to the Design Tokens package type JsonToken = { type: string; @@ -95,3 +103,29 @@ export const getCategoriesFromTokens = (tokens: JsonToken[]) => { return acc; }, []); }; + +export const LensToggle = (props: ToggleButtonGroupProps) => { + const [lens, setLens] = useState<'grid' | 'table'>('grid'); + + const handleChange = ( + _: React.MouseEvent, + newLens: 'grid' | 'table', + ) => { + setLens(newLens); + }; + + return ( + + + + + + + + + ); +}; diff --git a/src/theme.ts b/src/theme.ts index a877da1a..44febd75 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -67,6 +67,10 @@ declare module '@mui/material/Button' { customPurple: true; customGrey: true; } + + interface ButtonPropsVariantOverrides { + light: true; + } } declare module '@mui/material/ButtonGroup' { interface ButtonGroupPropsColorOverrides { @@ -430,23 +434,223 @@ export const theme = createTheme({ `, }, MuiButton: { + defaultProps: { + variant: 'contained', + disableElevation: true, + }, + variants: [ + { + props: { variant: 'light', color: 'primary' }, + style: { + color: color.text.value, + backgroundColor: color.bg.accent.value, + border: `1px solid ${color.border.accent.value}`, + ':hover': { + backgroundColor: color.palette.blue[100].value, + }, + }, + }, + { + props: { variant: 'light', color: 'secondary' }, + style: { + color: color.text.value, + backgroundColor: color.bg.subtle.value, + border: `1px solid ${color.border.value}`, + ':hover': { + backgroundColor: color.palette.neutral[75].value, + }, + }, + }, + { + props: { variant: 'light', color: 'info' }, + style: { + color: color.text.info.value, + backgroundColor: color.bg.info.value, + border: `1px solid ${color.border.info.value}`, + ':hover': { + backgroundColor: color.palette.blue[100].value, + }, + }, + }, + { + props: { variant: 'light', color: 'success' }, + style: { + color: color.text.success.value, + backgroundColor: color.bg.success.value, + border: `1px solid ${color.border.success.value}`, + ':hover': { + backgroundColor: color.palette.green[100].value, + }, + }, + }, + { + props: { variant: 'light', color: 'warning' }, + style: { + color: color.text.warning.value, + backgroundColor: color.bg.warning.value, + border: `1px solid ${color.border.warning.value}`, + ':hover': { + backgroundColor: color.palette.orange[100].value, + }, + }, + }, + { + props: { variant: 'light', color: 'error' }, + style: { + color: color.text.danger.value, + backgroundColor: color.bg.danger.value, + border: `1px solid ${color.border.danger.value}`, + ':hover': { + backgroundColor: color.palette.red[100].value, + }, + }, + }, + { + props: { variant: 'light', disabled: true }, + style: { + color: `${color.text.value} !important`, + border: `1px solid ${color.border.value}`, + backgroundColor: color.bg.value, + opacity: 0.4, + }, + }, + ], styleOverrides: { root: ({ theme }) => ({ - boxShadow: 'none', borderRadius: '24px', paddingLeft: '20px', paddingRight: '20px', fontSize: theme.typography.body1.fontSize, - // TODO: remove once we migrate buttons - '&:hover': { - boxShadow: 'none', - }, - }), - outlined: { textTransform: 'none', + }), + textPrimary: { + color: color.text.accent.value, }, - contained: { - textTransform: 'none', + textSecondary: { + color: color.text.value, + }, + textInfo: { + color: color.text.info.value, + }, + textSuccess: { + color: color.text.success.value, + }, + textWarning: { + color: color.text.warning.value, + }, + textError: { + color: color.text.danger.value, + }, + containedSecondary: { + color: color.text.inverse.value, + backgroundColor: color.bg.strong.value, + }, + containedInfo: { + color: color.text.inverse.value, + backgroundColor: color.bg.info.strong.value, + }, + containedSuccess: { + color: color.text.inverse.value, + backgroundColor: color.bg.success.strong.value, + }, + containedWarning: { + color: color.text.inverse.value, + backgroundColor: color.bg.warning.strong.value, + }, + containedError: { + color: color.text.inverse.value, + backgroundColor: color.bg.danger.strong.value, + }, + outlinedPrimary: { + borderColor: color.border.accent.value, + color: color.text.value, + }, + outlinedSecondary: { + color: color.text.value, + borderColor: color.border.value, + }, + outlinedInfo: { + color: color.text.info.value, + borderColor: color.border.info.value, + }, + outlinedSuccess: { + color: color.text.success.value, + borderColor: color.border.success.value, + }, + outlinedWarning: { + color: color.text.warning.value, + borderColor: color.border.warning.value, + }, + outlinedError: { + color: color.text.danger.value, + borderColor: color.border.danger.value, + }, + }, + }, + MuiToggleButton: { + styleOverrides: { + root: { + border: `1px solid ${color.border.value} !important`, + color: color.text.value, + '&:hover': { + backgroundColor: color.bg.value, + }, + '&.Mui-selected': { + backgroundColor: color.bg.subtle.value, + '&:hover': { + backgroundColor: color.bg.subtle.value, + }, + }, + '&.MuiToggleButton-primary': { + border: `1px solid ${color.border.accent.value} !important`, + color: color.text.accent.value, + '&:hover': { + backgroundColor: color.bg.accent.value, + }, + '&.Mui-selected': { + backgroundColor: color.bg.accent.value, + }, + }, + '&.MuiToggleButton-info': { + border: `1px solid ${color.border.info.value} !important`, + color: color.text.info.value, + '&:hover': { + backgroundColor: color.bg.info.value, + }, + '&.Mui-selected': { + backgroundColor: color.bg.info.value, + }, + }, + '&.MuiToggleButton-success': { + border: `1px solid ${color.border.success.value} !important`, + color: color.text.success.value, + '&:hover': { + backgroundColor: color.bg.success.value, + }, + '&.Mui-selected': { + backgroundColor: color.bg.success.value, + }, + }, + '&.MuiToggleButton-warning': { + border: `1px solid ${color.border.warning.value} !important`, + color: color.text.warning.value, + '&:hover': { + backgroundColor: color.bg.warning.value, + }, + '&.Mui-selected': { + backgroundColor: color.bg.warning.value, + }, + }, + '&.Mui-error': { + border: `1px solid ${color.border.danger.value} !important`, + color: color.text.danger.value, + '&:hover': { + backgroundColor: color.bg.danger.value, + }, + '&.Mui-selected': { + backgroundColor: color.bg.danger.value, + }, + }, }, }, },