Skip to content

Commit 67993a1

Browse files
flowzone-app[bot]flowzone-app[bot]
authored
Merge pull request #260 from balena-io-modules/add-colors-to-icon-buttons
Add colors and a 'contained' variant to icon buttons
2 parents 9a0ae65 + ac4e550 commit 67993a1

File tree

2 files changed

+140
-11
lines changed

2 files changed

+140
-11
lines changed

‎src/docs/30_mui_components/buttons.mdx‎

Lines changed: 60 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,15 @@ import {
1111
faMagic,
1212
faTrashCan,
1313
faPlus,
14+
faCheck,
1415
faDownload,
16+
faExclamationCircle,
1517
faUpRightAndDownLeftFromCenter,
1618
faClose,
17-
faGrip, faTable,
19+
faGrip,
20+
faTable,
21+
faWarning,
22+
faInfoCircle,
1823
} from '@fortawesome/free-solid-svg-icons';
1924
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2025

@@ -125,20 +130,60 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
125130
<FontAwesomeIcon icon={faClose} />
126131
</IconButton>
127132
</Stack>
133+
<Stack direction="row" gap={3} sx={{ flexWrap: 'wrap' }}>
134+
<IconButton color="primary">
135+
<FontAwesomeIcon icon={faPlus} />
136+
</IconButton>
137+
<IconButton color="secondary">
138+
<FontAwesomeIcon icon={faPlus} />
139+
</IconButton>
140+
<IconButton color="info">
141+
<FontAwesomeIcon icon={faInfoCircle} />
142+
</IconButton>
143+
<IconButton color="success">
144+
<FontAwesomeIcon icon={faCheck} />
145+
</IconButton>
146+
<IconButton color="warning">
147+
<FontAwesomeIcon icon={faWarning} />
148+
</IconButton>
149+
<IconButton color="error">
150+
<FontAwesomeIcon icon={faExclamationCircle} />
151+
</IconButton>
152+
</Stack>
153+
<Stack direction="row" gap={3} sx={{ flexWrap: 'wrap' }}>
154+
<IconButton variant="contained" color="primary">
155+
<FontAwesomeIcon icon={faPlus} />
156+
</IconButton>
157+
<IconButton variant="contained" color="secondary">
158+
<FontAwesomeIcon icon={faPlus} />
159+
</IconButton>
160+
<IconButton variant="contained" color="info">
161+
<FontAwesomeIcon icon={faInfoCircle} />
162+
</IconButton>
163+
<IconButton variant="contained" color="success">
164+
<FontAwesomeIcon icon={faCheck} />
165+
</IconButton>
166+
<IconButton variant="contained" color="warning">
167+
<FontAwesomeIcon icon={faWarning} />
168+
</IconButton>
169+
<IconButton variant="contained" color="error">
170+
<FontAwesomeIcon icon={faExclamationCircle} />
171+
</IconButton>
172+
</Stack>
128173
</ThemeProvider>
129174

130175
## Toggle Button
131176

132-
While MUI provides color variants, stick to the default one as the colored variant don't make much semantic sense (expect
177+
While MUI provides color variants, stick to the default one as the colored variant don't make much semantic sense (expect
133178
maybe for the _danger_ one).
134179

135180
### Text
136181

137182
<Unstyled>
138183
<ThemeProvider theme={theme}>
139184
<Stack gap={3} direction="row">
140-
<LensToggle segments={[{label: 'Geo location' }, {label: 'Manual location' }]} />
141-
<LensToggle segments={[{label: 'Geo location' }, {label: 'Manual location' }]} color="primary" />
185+
<LensToggle segments={[{ label: 'Geo location' }, { label: 'Manual location' }]} />
186+
<LensToggle segments={[{ label: 'Geo location' }, { label: 'Manual location' }]} color="primary" />
142187
</Stack>
143188
</ThemeProvider>
144189
</Unstyled>
@@ -148,8 +193,8 @@ maybe for the _danger_ one).
148193
<Unstyled>
149194
<ThemeProvider theme={theme}>
150195
<Stack gap={3} direction="row">
151-
<LensToggle segments={[{icon: faGrip }, {icon: faTable }]} />
152-
<LensToggle segments={[{icon: faGrip }, {icon: faTable }]} color="primary" />
196+
<LensToggle segments={[{ icon: faGrip }, { icon: faTable }]} />
197+
<LensToggle segments={[{ icon: faGrip }, { icon: faTable }]} color="primary" />
153198
</Stack>
154199
</ThemeProvider>
155200
</Unstyled>
@@ -159,8 +204,9 @@ maybe for the _danger_ one).
159204
<Unstyled>
160205
<ThemeProvider theme={theme}>
161206
<Stack gap={3} direction="row">
162-
<LensToggle segments={[{icon: faGrip, label: 'Geo location' }, {icon: faTable, label: 'Manual location' }]} />
163-
<LensToggle segments={[{icon: faGrip, label: 'Geo location' }, {icon: faTable, label: 'Manual location' }]} color="primary" />
207+
<LensToggle segments={[{ icon: faGrip, label: 'Geo location' }, { icon: faTable, label: 'Manual location' }]} />
208+
<LensToggle segments={[{ icon: faGrip, label: 'Geo location' }, { icon: faTable, label: 'Manual location' }]}
209+
color="primary" />
164210
</Stack>
165211
</ThemeProvider>
166212
</Unstyled>
@@ -169,15 +215,18 @@ maybe for the _danger_ one).
169215
on icon only toggles, we have to decrease the padding so that the total size is less or equal to 31px.
170216

171217
The root issue is that we use `:only-child` selector on icon only toggle buttons, but text nodes are not considered children
172-
elements in CSS, so icon + text is mistakenly selected by the rule.
218+
elements in CSS, so icon + text is mistakenly selected by the rule.
173219

174220
If you want to prevent that, you can wrap the text in a `span` element, like so:
175221

176222
<Unstyled>
177223
<ThemeProvider theme={theme}>
178224
<Stack gap={3} direction="row">
179-
<LensToggle withWrapAroundLabel segments={[{icon: faGrip, label: 'Geo location' }, {icon: faTable, label: 'Manual location' }]} />
180-
<LensToggle withWrapAroundLabel segments={[{icon: faGrip, label: 'Geo location' }, {icon: faTable, label: 'Manual location' }]} color="primary" />
225+
<LensToggle withWrapAroundLabel
226+
segments={[{ icon: faGrip, label: 'Geo location' }, { icon: faTable, label: 'Manual location' }]} />
227+
<LensToggle withWrapAroundLabel
228+
segments={[{ icon: faGrip, label: 'Geo location' }, { icon: faTable, label: 'Manual location' }]}
229+
color="primary" />
181230
</Stack>
182231
</ThemeProvider>
183232
</Unstyled>

‎src/theme.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,11 @@ declare module '@mui/material/Button' {
140140
light: true;
141141
}
142142
}
143+
declare module '@mui/material/IconButton' {
144+
interface IconButtonOwnProps {
145+
variant?: 'text' | 'contained';
146+
}
147+
}
143148

144149
declare module '@mui/material/Chip' {
145150
interface ChipPropsColorOverrides {
@@ -869,6 +874,66 @@ export const theme = createTheme({
869874
},
870875
},
871876
MuiIconButton: {
877+
defaultProps: {
878+
variant: 'text',
879+
},
880+
variants: [
881+
{
882+
props: { variant: 'contained' },
883+
style: {
884+
color: color.icon.inverse.value,
885+
backgroundColor: color.bg.strong.value,
886+
'&:hover': {
887+
backgroundColor: color.bg.strong.value,
888+
},
889+
},
890+
},
891+
{
892+
props: { variant: 'contained', color: 'primary' },
893+
style: {
894+
backgroundColor: color.bg.accent.strong.value,
895+
'&:hover': {
896+
backgroundColor: color.bg.accent.strong.value,
897+
},
898+
},
899+
},
900+
{
901+
props: { variant: 'contained', color: 'info' },
902+
style: {
903+
backgroundColor: color.bg.info.strong.value,
904+
'&:hover': {
905+
backgroundColor: color.bg.info.strong.value,
906+
},
907+
},
908+
},
909+
{
910+
props: { variant: 'contained', color: 'success' },
911+
style: {
912+
backgroundColor: color.bg.success.strong.value,
913+
'&:hover': {
914+
backgroundColor: color.bg.success.strong.value,
915+
},
916+
},
917+
},
918+
{
919+
props: { variant: 'contained', color: 'warning' },
920+
style: {
921+
backgroundColor: color.bg.warning.strong.value,
922+
'&:hover': {
923+
backgroundColor: color.bg.warning.strong.value,
924+
},
925+
},
926+
},
927+
{
928+
props: { variant: 'contained', color: 'error' },
929+
style: {
930+
backgroundColor: color.bg.danger.strong.value,
931+
'&:hover': {
932+
backgroundColor: color.bg.danger.strong.value,
933+
},
934+
},
935+
},
936+
],
872937
styleOverrides: {
873938
root: {
874939
color: color.icon.value,
@@ -880,6 +945,21 @@ export const theme = createTheme({
880945
opacity: 0.4,
881946
},
882947
},
948+
colorPrimary: {
949+
color: color.icon.accent.value,
950+
},
951+
colorSuccess: {
952+
color: color.icon.success.value,
953+
},
954+
colorInfo: {
955+
color: color.icon.info.value,
956+
},
957+
colorWarning: {
958+
color: color.icon.warning.value,
959+
},
960+
colorError: {
961+
color: color.icon.danger.value,
962+
},
883963
sizeSmall: {
884964
padding: '10px',
885965
fontSize: '12px',

0 commit comments

Comments
 (0)