Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@alldoami
alldoami committed Nov 29, 2023
2 parents 52be6c0 + b80c467 commit 31f4faf
Show file tree
Hide file tree
Showing 23 changed files with 75 additions and 62 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
<button
aria-label="search-button"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1fqpm4w-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-5z5hxc-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
</div>
<button
aria-label="Close"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-fkerv1-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-co4rz1-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/Button/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<button /> Default story renders snapshot 1`] = `
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-ok6hdy-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1pykspm-MuiButtonBase-root-MuiButton-root"
tabindex="0"
text="Label"
type="button"
Expand Down
17 changes: 5 additions & 12 deletions packages/components/src/core/Button/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import {
getCorners,
getSpaces,
} from "../styles";
import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";

const sdsPropNames = ["isAllCaps", "isRounded", "sdsStyle", "sdsType"];

const ButtonBase = styled(Button, {
shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
})`
box-shadow: none;
${focusVisibleA11yStyle}
${(props) => {
const { variant } = props;
const colors = getColors(props);
Expand All @@ -40,10 +42,6 @@ const ButtonBase = styled(Button, {
background-color: ${colors?.primary[500]};
box-shadow: none;
}
&:focus-visible {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
&:active {
color: white;
background-color: ${colors?.primary[600]};
Expand Down Expand Up @@ -85,6 +83,8 @@ interface IsAllCaps extends CommonThemeProps {
const MinimalButton = styled(Button, {
shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
})`
${focusVisibleA11yStyle}
${(props: IsAllCaps) => {
const spacings = getSpaces(props);
Expand All @@ -102,10 +102,6 @@ const MinimalButton = styled(Button, {
&:hover, &:focus-visible {
background-color: transparent;
}
&:focus-visible {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
`;

const minimal = (props: CommonThemeProps) => {
Expand Down Expand Up @@ -145,10 +141,7 @@ interface IsRounded extends CommonThemeProps {
export const StyledButton = styled(Button, {
shouldForwardProp: (prop) => !sdsPropNames.includes(prop as string),
})`
&:focus-visible {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
${focusVisibleA11yStyle}
${(props: IsRounded) => {
if (!props.isRounded) return ``;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
icon="[object Object]"
tabindex="0"
type="button"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
<button
aria-label="info"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-7000mn-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1dufxsi-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down
13 changes: 7 additions & 6 deletions packages/components/src/core/ButtonIcon/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import {
SDSWarningTypes,
showWarningIfFirstOccurence,
} from "src/common/warnings";
import { CommonThemeProps, getColors, getIconSizes } from "../styles";
import {
CommonThemeProps,
focusVisibleA11yStyle,
getColors,
getIconSizes,
} from "../styles";

export interface ButtonIconSizeToTypes {
small: "primary" | "secondary" | "tertiary";
Expand Down Expand Up @@ -174,11 +179,7 @@ export const StyledButtonIcon = styled(IconButton, {
shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
})`
padding: 0;
:focus-visible {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
${focusVisibleA11yStyle}
${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
props: ButtonIconExtraProps<ButtonIconSize>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/CellHeader/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
</span>
<button
aria-label="Change sort direction from descending to ascending"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-kqv049-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1tty7jy-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
class="css-1x0reya"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1k5fys6-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-14u7bym-MuiButtonBase-root-MuiButton-root"
label="Click Target"
tabindex="0"
type="button"
Expand Down
30 changes: 15 additions & 15 deletions packages/components/src/core/Dialog/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<Dialog /> Default story renders snapshot 1`] = `
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-gsef57-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-10hgbk7-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -22,7 +22,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
>
<button
aria-label="Close"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1x5a14m-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1sghtpe-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down Expand Up @@ -71,7 +71,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
data-testid="dialog-actions"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-11wkr3v-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -81,7 +81,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -101,7 +101,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
>
<button
aria-label="Close"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1ct9aux-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-fre2k7-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down Expand Up @@ -150,7 +150,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
data-testid="dialog-actions"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-11wkr3v-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -160,7 +160,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -180,7 +180,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
>
<button
aria-label="Close"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zrciyy-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f22o7g-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down Expand Up @@ -229,7 +229,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
data-testid="dialog-actions"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-11wkr3v-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -239,7 +239,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -259,7 +259,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
>
<button
aria-label="Close"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zrciyy-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f22o7g-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
Expand Down Expand Up @@ -308,7 +308,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
data-testid="dialog-actions"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-11wkr3v-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -318,7 +318,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -336,7 +336,7 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
data-testid="dialog-actions"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-4j8oia-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-14ncid9-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -346,7 +346,7 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-39o5u-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-11wkr3v-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<Dropdown /> Default story renders snapshot 1`] = `
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1k5fys6-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-14u7bym-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown"
label="Click Target"
tabindex="0"
Expand Down Expand Up @@ -45,7 +45,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `

exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1k5fys6-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-14u7bym-MuiButtonBase-root-MuiButton-root"
data-testid="dropdown"
label="Click Target"
tabindex="0"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-n82mu-MuiFormControlLabel-root"
>
<span
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-root MuiCheckbox-colorDefault css-1ptfvrq-MuiButtonBase-root-MuiCheckbox-root"
class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-root MuiCheckbox-colorDefault css-pdae7e-MuiButtonBase-root-MuiCheckbox-root"
>
<input
class="PrivateSwitchBase-input css-1m9pwf3"
Expand Down
12 changes: 12 additions & 0 deletions packages/components/src/core/InputCheckbox/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ import {
} from "@mui/material";
import { styled } from "@mui/material/styles";
import { fontBodyXxs } from "../styles";
import { focusVisibleA11yStyle } from "../styles/common/mixins/a11y";
import {
CommonThemeProps,
getColors,
getCorners,
getIconSizes,
getSpaces,
getTypography,
} from "../styles/common/selectors/theme";

Expand Down Expand Up @@ -43,7 +46,9 @@ export const StyledFormControlLabel = styled(RawFormControlLabel)`
export const StyledCheckbox = styled(RawCheckbox)`
${(props) => {
const colors = getColors(props);
const corners = getCorners(props);
const iconSizes = getIconSizes(props);
const spaces = getSpaces(props);
return `
color: ${colors?.gray[400]};
&:hover {
Expand All @@ -64,6 +69,13 @@ export const StyledCheckbox = styled(RawCheckbox)`
}
}
&.MuiCheckbox-root {
${focusVisibleA11yStyle()}
border-radius: ${corners?.s}px;
padding: ${spaces?.xxs}px;
margin: 3px;
}
.MuiSvgIcon-root {
height: ${iconSizes?.input.height}px;
width: ${iconSizes?.input.width}px;
Expand Down
Loading

0 comments on commit 31f4faf

Please sign in to comment.