Skip to content

Commit

Permalink
Fix color of disabled states for radio and checkbox (#2871)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
  • Loading branch information
@juliawegmayr
juliawegmayr and juliawegmayr authored Dec 4, 2024
1 parent 7ddea88 commit b51bf6d
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 67 deletions.
7 changes: 7 additions & 0 deletions .changeset/odd-coins-think.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@comet/admin-theme": patch
---

Adapt `Radio` and `Checkbox` styling to Comet DXP design

Fix colors of disabled states.
2 changes: 1 addition & 1 deletion packages/admin/admin-theme/src/componentsTheme/MuiCheckbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const getMuiCheckbox: GetMuiComponentTheme<"MuiCheckbox"> = (component, {
fill: "#fff",
},
"& .background": {
fill: palette.grey[200],
fill: palette.grey[100],
},
},
[`&.${checkboxClasses.indeterminate} .${svgIconClasses.root}`]: {
Expand Down
2 changes: 1 addition & 1 deletion packages/admin/admin-theme/src/componentsTheme/MuiRadio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const getMuiRadio: GetMuiComponentTheme<"MuiRadio"> = (component, { palet
fill: "#fff",
},
"& .background": {
fill: palette.grey[200],
fill: palette.grey[100],
},
},
},
Expand Down
34 changes: 0 additions & 34 deletions storybook/src/admin/form/Checkbox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,40 +49,6 @@ export const Checkbox = () => {
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card variant="outlined">
<CardContent>
<FieldContainer label="Checkboxes with secondary color">
<Field name="uncheckedSecondary" type="checkbox" fullWidth>
{(props) => (
<FormControlLabel
label="Unchecked"
control={<FinalFormCheckbox {...props} color="secondary" />}
/>
)}
</Field>
<Field name="checkedSecondary" type="checkbox" fullWidth>
{(props) => (
<FormControlLabel label="Checked" control={<FinalFormCheckbox {...props} color="secondary" />} />
)}
</Field>
<Field name="disabledUncheckedSecondary" type="checkbox" fullWidth disabled>
{(props) => (
<FormControlLabel label="Disabled" control={<FinalFormCheckbox {...props} color="secondary" />} />
)}
</Field>
<Field name="disabledCheckedSecondary" type="checkbox" fullWidth disabled>
{(props) => (
<FormControlLabel
label="Disabled & Checked"
control={<FinalFormCheckbox {...props} color="secondary" />}
/>
)}
</Field>
</FieldContainer>
</CardContent>
</Card>
</Grid>
</Grid>
</form>
)}
Expand Down
31 changes: 0 additions & 31 deletions storybook/src/admin/form/Radio.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,37 +43,6 @@ export const Radio = () => {
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Card variant="outlined">
<CardContent>
<FieldContainer label="Radios with secondary color">
<Field name="foo3" type="radio" value="bar1" fullWidth>
{(props) => (
<FormControlLabel label="Unchecked" control={<FinalFormRadio {...props} color="secondary" />} />
)}
</Field>
<Field name="foo3" type="radio" value="bar2" fullWidth>
{(props) => (
<FormControlLabel label="Checked" control={<FinalFormRadio {...props} color="secondary" />} />
)}
</Field>
<Field name="foo4" type="radio" value="bar1" fullWidth disabled>
{(props) => (
<FormControlLabel label="Disabled" control={<FinalFormRadio {...props} color="secondary" />} />
)}
</Field>
<Field name="foo4" type="radio" value="bar2" fullWidth disabled>
{(props) => (
<FormControlLabel
label="Disabled & Checked"
control={<FinalFormRadio {...props} color="secondary" />}
/>
)}
</Field>
</FieldContainer>
</CardContent>
</Card>
</Grid>
</Grid>
</form>
)}
Expand Down

0 comments on commit b51bf6d

Please sign in to comment.