Skip to content

Commit d9ced52

Browse files
pmakode-akamaipmakode-akamai
authored
change: [M3-9430] - Akamai Design System: Checkbox Component (linode#11871)
* Initial attempt * More progress... * More progress * More progress + clean up... * Added changeset: Add `Checkbox` design tokens and update styles to match Akamai Design System * Update style ordering * Sort import * Some fixes... * Comments clean up...
1 parent ba33b07 commit d9ced52

File tree

5 files changed

+154
-32
lines changed

5 files changed

+154
-32
lines changed

‎packages/ui/.changeset/pr-11871-changed-1742300523305.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/ui": Changed
3+
---
4+
5+
Add `Checkbox` design tokens and update styles to match Akamai Design System ([#11871](https://github.com/linode/manager/pull/11871))

‎packages/ui/src/components/Checkbox/Checkbox.stories.tsx‎

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
import React from 'react';
22

3+
import { Box } from '../Box';
34
import { Checkbox } from './Checkbox';
45

5-
import type { Meta, StoryObj } from '@storybook/react';
6+
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
67

78
const meta: Meta<typeof Checkbox> = {
89
component: Checkbox,
10+
decorators: [
11+
(Story: StoryFn) => (
12+
<Box sx={(theme) => ({ margin: theme.tokens.spacing.S16 })}>
13+
<Story />
14+
</Box>
15+
),
16+
],
917
title: 'Foundations/Checkbox',
1018
};
1119

20+
export default meta;
21+
1222
type Story = StoryObj<typeof Checkbox>;
1323

1424
export const Default: Story = {
@@ -27,43 +37,81 @@ export const Default: Story = {
2737
args: {
2838
checked: false,
2939
},
30-
render: (args) => <Checkbox {...args} />,
40+
};
41+
42+
export const Unchecked: Story = {
43+
args: {
44+
checked: false,
45+
},
3146
};
3247

3348
export const Checked: Story = {
3449
args: {
3550
checked: true,
3651
},
37-
render: (args) => <Checkbox {...args} />,
3852
};
3953

40-
export const Unchecked: Story = {
54+
export const Indeterminate: Story = {
4155
args: {
42-
checked: false,
56+
indeterminate: true,
57+
},
58+
};
59+
60+
export const UncheckedDisabled: Story = {
61+
args: {
62+
disabled: true,
63+
},
64+
};
65+
66+
export const CheckedDisabled: Story = {
67+
args: {
68+
checked: true,
69+
disabled: true,
4370
},
44-
render: (args) => <Checkbox {...args} />,
4571
};
4672

47-
export const Label: Story = {
73+
export const IndeterminateDisabled: Story = {
74+
args: {
75+
indeterminate: true,
76+
disabled: true,
77+
},
78+
};
79+
80+
export const UncheckedReadOnly: Story = {
81+
args: {
82+
readOnly: true,
83+
},
84+
};
85+
86+
export const CheckedReadOnly: Story = {
87+
args: {
88+
readOnly: true,
89+
checked: true,
90+
},
91+
};
92+
93+
export const IndeterminateReadOnly: Story = {
94+
args: {
95+
readOnly: true,
96+
indeterminate: true,
97+
},
98+
};
99+
100+
export const WithLabel: Story = {
48101
args: {
49102
text: 'This Checkbox has a label',
50103
},
51-
render: (args) => <Checkbox {...args} />,
52104
};
53105

54-
export const Tooltip: Story = {
106+
export const WithTooltip: Story = {
55107
args: {
56108
toolTipText: 'This is the tooltip!',
57109
},
58-
render: (args) => <Checkbox {...args} />,
59110
};
60111

61-
export const LabelAndTooltip: Story = {
112+
export const WithLabelAndTooltip: Story = {
62113
args: {
63114
text: 'This Checkbox has a tooltip',
64115
toolTipText: 'This is the tooltip!',
65116
},
66-
render: (args) => <Checkbox {...args} />,
67117
};
68-
69-
export default meta;

‎packages/ui/src/components/Checkbox/Checkbox.tsx‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @todo: modularization - Import from 'ui' package once FormControlLabel is migrated.
2-
import { FormControlLabel } from '@mui/material';
31
import _Checkbox from '@mui/material/Checkbox';
42
import { styled } from '@mui/material/styles';
53
import * as React from 'react';
@@ -10,6 +8,7 @@ import {
108
CheckboxIndeterminateIcon,
119
} from '../../assets/icons';
1210
import { TooltipIcon } from '../TooltipIcon';
11+
import { FormControlLabel } from '../FormControlLabel';
1312

1413
import type { CheckboxProps } from '@mui/material/Checkbox';
1514
import type { SxProps, Theme } from '@mui/material/styles';
@@ -80,25 +79,42 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
8079
'& .defaultFill': {
8180
transition: theme.transitions.create(['fill']),
8281
},
83-
'&:hover': {
84-
color: theme.palette.primary.main,
85-
},
86-
color: theme.tokens.color.Neutrals[40],
82+
padding: theme.tokens.spacing.S8,
8783
transition: theme.transitions.create(['color']),
88-
...(props.checked && {
89-
color: theme.palette.primary.main,
90-
}),
91-
...(props.disabled && {
92-
'& .defaultFill': {
93-
fill: `${theme.bg.main}`,
94-
opacity: 0.5,
95-
},
96-
color: `${theme.tokens.color.Neutrals[40]} !important`,
97-
fill: `${theme.bg.main} !important`,
84+
// Unchecked & Readonly
85+
...(props.readOnly && {
86+
color: theme.tokens.component.Checkbox.Empty.ReadOnly.Border,
9887
pointerEvents: 'none',
9988
}),
89+
// Checked & Readonly
90+
...(props.checked &&
91+
props.readOnly && {
92+
svg: {
93+
'#Check': {
94+
fill: theme.tokens.component.Checkbox.Checked.ReadOnly.Icon,
95+
},
96+
border: `1px solid ${theme.tokens.component.Checkbox.Checked.ReadOnly.Border}`,
97+
},
98+
color: `${theme.tokens.component.Checkbox.Checked.ReadOnly.Background} !important`,
99+
pointerEvents: 'none',
100+
}),
101+
// Indeterminate & Readonly
102+
...(props.indeterminate &&
103+
props.readOnly && {
104+
svg: {
105+
'g rect:nth-of-type(2)': {
106+
fill: theme.tokens.component.Checkbox.Indeterminated.ReadOnly.Icon,
107+
},
108+
border: `1px solid ${theme.tokens.component.Checkbox.Indeterminated.ReadOnly.Border}`,
109+
},
110+
color: `${theme.tokens.component.Checkbox.Checked.ReadOnly.Background} !important`,
111+
pointerEvents: 'none',
112+
}),
100113
}));
101114

102-
const StyledFormControlLabel = styled(FormControlLabel)(() => ({
115+
const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
116+
'& .MuiFormControlLabel-label': {
117+
paddingTop: theme.tokens.spacing.S2,
118+
},
103119
marginRight: 0,
104120
}));

‎packages/ui/src/foundations/themes/dark.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,29 @@ export const darkTheme: ThemeOptions = {
385385
},
386386
},
387387
},
388+
MuiCheckbox: {
389+
styleOverrides: {
390+
root: {
391+
// Unchecked & Disabled
392+
'&.Mui-disabled': {
393+
'& svg': {
394+
backgroundColor: Component.Checkbox.Empty.Disabled.Background,
395+
},
396+
color: Component.Checkbox.Empty.Disabled.Border,
397+
pointerEvents: 'none',
398+
},
399+
// Checked & Disabled
400+
'&.Mui-checked.Mui-disabled': {
401+
color: Component.Checkbox.Checked.Disabled.Background,
402+
},
403+
// Indeterminate & Disabled
404+
'&.MuiCheckbox-indeterminate.Mui-disabled': {
405+
color: Component.Checkbox.Indeterminated.Disabled.Background,
406+
},
407+
color: Component.Checkbox.Empty.Default.Border,
408+
},
409+
},
410+
},
388411
MuiChip: {
389412
defaultProps: {
390413
// In dark mode, we decided our Chips will be our primary color by default.

‎packages/ui/src/foundations/themes/light.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -590,7 +590,37 @@ export const lightTheme: ThemeOptions = {
590590
MuiCheckbox: {
591591
styleOverrides: {
592592
root: {
593-
color: Color.Neutrals[40],
593+
'&:active': {
594+
color: `${Component.Checkbox.Empty.Active.Border} !important`,
595+
},
596+
'&:hover': {
597+
color: `${Component.Checkbox.Empty.Hover.Border} !important`,
598+
},
599+
// Checked
600+
'&.Mui-checked': {
601+
color: Component.Checkbox.Checked.Default.Background,
602+
},
603+
// Indeterminate
604+
'&.MuiCheckbox-indeterminate': {
605+
color: Component.Checkbox.Indeterminated.Default.Background,
606+
},
607+
// Unchecked & Disabled
608+
'&.Mui-disabled': {
609+
'& svg': {
610+
backgroundColor: Component.Checkbox.Empty.Disabled.Background,
611+
},
612+
color: Component.Checkbox.Empty.Disabled.Border,
613+
pointerEvents: 'none',
614+
},
615+
// Checked & Disabled
616+
'&.Mui-checked.Mui-disabled': {
617+
color: Component.Checkbox.Checked.Disabled.Background,
618+
},
619+
// Indeterminate & Disabled
620+
'&.MuiCheckbox-indeterminate.Mui-disabled': {
621+
color: Component.Checkbox.Indeterminated.Disabled.Background,
622+
},
623+
color: Component.Checkbox.Empty.Default.Border,
594624
},
595625
},
596626
},

0 commit comments

Comments
 (0)