Adapt Mui Button styles

Change-type: minor

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

src/components/DownloadImageDialog/ImageForm.tsx

@@ -421,8 +421,8 @@ export const ImageForm: React.FC<ImageFormProps> = memo(
 				<Divider variant="fullWidth" sx={{ my: 3, borderStyle: 'dashed' }} />
 				<Button
 					onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
-					sx={{ px: 0 }}
-					disableRipple
+					variant="outlined"
+					sx={{ mb: 2 }}
 				>
 					{showAdvancedSettings ? <RemoveIcon /> : <AddIcon />} Advanced
 					settings

src/components/Form/Form.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { RJSForm } from '.';
 
 const meta = {
-	title: 'Mui Components/Form',
+	title: 'Other/RJS Form',
 	component: RJSForm,
 	tags: ['autodocs'],
 } satisfies Meta<typeof RJSForm>;

src/components/Form/index.tsx

@@ -92,10 +92,8 @@ export const RJSForm: React.FC<React.PropsWithChildren<RJSFormProps>> =
 							{!hideSubmitButton && (
 								<Button
 									children={'Submit'}
-									// TODO: remove once we migrate buttons
-									disableRipple
 									{...submitButtonProps}
-									color="customBlue"
+									color="primary"
 									variant="contained"
 									type="submit"
 								/>

src/docs/30_mui_components/buttons.mdx

@@ -0,0 +1,109 @@
+import { Meta } from '@storybook/blocks';
+import {
+	Box,
+	Button,
+	ThemeProvider,
+	ToggleButtonGroup,
+} from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AlarmIcon from '@mui/icons-material/Alarm';
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import { theme } from '../../theme';
+import { LensToggle } from '../utils';
+
+<Meta title="Mui Components/Input/Button" />
+
+# Buttons
+
+## Text
+
+<ThemeProvider theme={theme}>
+	<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+		<Button variant="text" color="primary">Text Primary</Button>
+		<Button variant="text" color="secondary">Text Secondary</Button>
+		<Button variant="text" color="info">Text Info</Button>
+		<Button variant="text" color="success">Text Success</Button>
+		<Button variant="text" color="warning">Text Warning</Button>
+		<Button variant="text" color="error">Text Danger</Button>
+		<Button variant="text" disabled>Text Disabled</Button>
+	</Box>
+</ThemeProvider>
+
+## Contained
+
+<ThemeProvider theme={theme}>
+	<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+		<Button variant="contained" color="primary">Contained Primary</Button>
+		<Button variant="contained" color="secondary">Contained Secondary</Button>
+		<Button variant="contained" color="info">Contained Info</Button>
+		<Button variant="contained" color="success">Contained Success</Button>
+		<Button variant="contained" color="warning">Contained Warning</Button>
+		<Button variant="contained" color="error">Contained Danger</Button>
+		<Button variant="contained" disabled>Contained Disabled</Button>
+	</Box>
+</ThemeProvider>
+
+## Light
+
+<ThemeProvider theme={theme}>
+	<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+		<Button variant="light" color="primary">Light Primary</Button>
+		<Button variant="light" color="secondary">Light Secondary</Button>
+		<Button variant="light" color="info">Light Info</Button>
+		<Button variant="light" color="success">Light Success</Button>
+		<Button variant="light" color="warning">Light Warning</Button>
+		<Button variant="light" color="error">Light Danger</Button>
+		<Button variant="light" disabled>Light Disabled</Button>
+	</Box>
+</ThemeProvider>
+
+## Outlined
+
+<ThemeProvider theme={theme}>
+	<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+		<Button variant="outlined" color="primary">Outlined Primary</Button>
+		<Button variant="outlined" color="secondary">Outlined Secondary</Button>
+		<Button variant="outlined" color="info">Outlined Info</Button>
+		<Button variant="outlined" color="success">Outlined Success</Button>
+		<Button variant="outlined" color="warning">Outlined Warning</Button>
+		<Button variant="outlined" color="error">Outlined Danger</Button>
+		<Button variant="outlined" disabled>Outlined Disabled</Button>
+	</Box>
+</ThemeProvider>
+
+## Icon Button
+
+<ThemeProvider theme={theme}>
+	<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+		<IconButton aria-label="delete">
+			<DeleteIcon />
+		</IconButton>
+		<IconButton aria-label="delete" color="primary">
+			<DeleteIcon />
+		</IconButton>
+		<IconButton aria-label="delete" disabled color="primary">
+			<DeleteIcon />
+		</IconButton>
+		<IconButton color="secondary" aria-label="add an alarm">
+			<AlarmIcon />
+		</IconButton>
+		<IconButton color="primary" aria-label="add to shopping cart">
+			<AddShoppingCartIcon />
+		</IconButton>
+	</Box>
+</ThemeProvider>
+
+## Toggle Button
+
+<ThemeProvider theme={theme}>
+	<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+		<LensToggle color="standard" />
+		<LensToggle color="primary" />
+		<LensToggle color="secondary" />
+		<LensToggle color="info" />
+		<LensToggle color="success" />
+		<LensToggle color="warning" />
+		<LensToggle color="error" />
+	</Box>
+</ThemeProvider> 

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<HTMLElement>,
+		newLens: 'grid' | 'table',
+	) => {
+		setLens(newLens);
+	};
+
+	return (
+		<ToggleButtonGroup onChange={handleChange} exclusive {...props}>
+			<ToggleButton value={'grid'} title="Grid lens" selected={lens === 'grid'}>
+				<GridView />
+			</ToggleButton>
+			<ToggleButton
+				value={'table'}
+				title="Table lens"
+				selected={lens === 'table'}
+			>
+				<TableRows />
+			</ToggleButton>
+		</ToggleButtonGroup>
+	);
+};