feat(InputCheckbox): refactor InputCheckbox and InputRadio (#904)

* refactor(all): refactor components and colors based on latest figma changes * refactor(rest): fix the rest of the components * feat(all): refactored all components and variables * fix(snapshots): fix test snapshots and a11y errors * refactor(design-tokens): update design tokens based on figma changes * refactor(inputcheckbox): refactored the InputCheckbox and InputRadio icons * refactor(icons): remove unused icons from svgs folder * style(inputcheckbox): fix checkbox border in dark mode and removed the extra background * refactor(github): update PR template
chanzuckerberg · Dec 18, 2024 · 74fec41 · 74fec41
1 parent fee8ee4
commit 74fec41
Show file tree

Hide file tree

Showing 14 changed files with 282 additions and 234 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,14 +2,15 @@
 
 **Structural Element (Base, Gene, DNA, Chromosome or Cell)**
 Github issue: [#XXXX](link)
+
 Copy issue description here
 
 ## Checklist
 
 - [ ] Default Story in Storybook
-- [ ] LivePreview Story in Storybook
 - [ ] Test Story in Storybook
 - [ ] Tests written
-- [ ] Variables from `defaultTheme.ts` used wherever possible
+- [ ] Semantic Variables from `defaultTheme.ts` used wherever possible
 - [ ] If updating an existing component, depreciate flag has been used where necessary
+- [ ] ZeroHeight Documents updated
 - [ ] Chromatic build verified by @chanzuckerberg/sds-design
diff --git a/packages/components/src/common/svgs/IconCheckboxChecked.svg b/packages/components/src/common/svgs/IconCheckboxChecked.svg
diff --git a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg
diff --git a/packages/components/src/common/svgs/IconCheckboxUnchecked.svg b/packages/components/src/common/svgs/IconCheckboxUnchecked.svg
diff --git a/packages/components/src/common/svgs/IconRadioChecked.svg b/packages/components/src/common/svgs/IconRadioChecked.svg
diff --git a/packages/components/src/common/svgs/IconRadioUnchecked.svg b/packages/components/src/common/svgs/IconRadioUnchecked.svg
diff --git a/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputCheckbox/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,25 +2,20 @@
 
 exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
 <label
-  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-f3qi9j-MuiFormControlLabel-root"
+  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-175tvrr-MuiFormControlLabel-root"
 >
   <span
-    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium css-1clqtg2-MuiButtonBase-root-MuiCheckbox-root"
+    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-sizeMedium css-5zzv6g-MuiButtonBase-root-MuiCheckbox-root"
     intent="default"
   >
     <input
       class="PrivateSwitchBase-input css-1m9pwf3"
       data-indeterminate="false"
       type="checkbox"
     />
-    <svg
-      aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-      data-file-name="IconCheckboxUnchecked"
-      data-testid="IconCheckboxUnchecked"
-      fillcontrast="white"
-      focusable="false"
-      viewBox="0 0 16 16"
+    <span
+      class="css-b0i02f"
+      font-size="medium"
     />
     <span
       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"

diff --git a/packages/components/src/core/InputCheckbox/index.tsx b/packages/components/src/core/InputCheckbox/index.tsx
@@ -1,13 +1,13 @@
-import { CheckboxProps as MUICheckboxProps, SvgIcon } from "@mui/material";
-import { ReactComponent as IconCheckboxChecked } from "../../common/svgs/IconCheckboxChecked.svg";
-import { ReactComponent as IconCheckboxIndeterminate } from "../../common/svgs/IconCheckboxIndeterminate.svg";
-import { ReactComponent as IconCheckboxUnchecked } from "../../common/svgs/IconCheckboxUnchecked.svg";
+import { CheckboxProps as MUICheckboxProps } from "@mui/material";
 import {
   CheckboxExtraProps,
   StyledCheckbox,
   StyledCheckboxCaption,
+  StyledCheckboxCheckedIcon,
+  StyledCheckboxDefaultIcon,
   StyledCheckboxLabel,
   StyledFormControlLabel,
+  StyledIcon,
   StyledLabelContainer,
 } from "./styles";
 
@@ -68,9 +68,7 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
   const finalLabel = caption ? (
     <StyledLabelContainer>
       <StyledCheckboxLabel>{label}</StyledCheckboxLabel>
-      <StyledCheckboxCaption disabled={disabled}>
-        {caption}
-      </StyledCheckboxCaption>
+      <StyledCheckboxCaption>{caption}</StyledCheckboxCaption>
     </StyledLabelContainer>
   ) : (
     <StyledLabelContainer>
@@ -82,27 +80,17 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
     <StyledFormControlLabel
       control={
         <StyledCheckbox
-          disabled={disabled}
+          // disabled={disabled}
           checkedIcon={
-            <SvgIcon
-              fillcontrast="white"
-              component={IconCheckboxChecked}
-              viewBox="0 0 16 16"
-            />
-          }
-          icon={
-            <SvgIcon
-              fillcontrast="white"
-              component={IconCheckboxUnchecked}
-              viewBox="0 0 16 16"
-            />
+            <StyledCheckboxCheckedIcon>
+              <StyledIcon sdsIcon="Check" sdsSize="xs" />
+            </StyledCheckboxCheckedIcon>
           }
+          icon={<StyledCheckboxDefaultIcon intent={intent} />}
           indeterminateIcon={
-            <SvgIcon
-              fillcontrast="white"
-              component={IconCheckboxIndeterminate}
-              viewBox="0 0 16 16"
-            />
+            <StyledCheckboxCheckedIcon>
+              <StyledIcon sdsIcon="Minus" sdsSize="xs" />
+            </StyledCheckboxCheckedIcon>
           }
           intent={intent}
           {...checkboxProps}

diff --git a/packages/components/src/core/InputCheckbox/styles.ts b/packages/components/src/core/InputCheckbox/styles.ts
@@ -7,11 +7,13 @@ import styled from "@emotion/styled";
 import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 import {
   CommonThemeProps,
+  getBorders,
   getIconSizes,
   getSemanticColors,
   getSpaces,
 } from "src/core/styles";
 import { SDSPalette, fontBodyXs, fontBodyXxs } from "../styles";
+import Icon from "../Icon";
 
 export interface CheckboxExtraProps extends CommonThemeProps {
   intent?: "default" | "negative" | "notice" | "positive";
@@ -25,87 +27,74 @@ const intentToColor = {
   positive: "positive",
 };
 
-export const StyledCheckbox = styled(RawCheckbox)`
+export const StyledIcon = styled(Icon)`
   ${(props: CheckboxExtraProps) => {
-    const { intent = "default" } = props;
-
     const iconSizes = getIconSizes(props);
-    const spaces = getSpaces(props);
-    const semanticColors = getSemanticColors(props);
-
-    const checkboxColor = intentToColor[intent] as keyof SDSPalette;
 
     return `
-      color: ${semanticColors?.[checkboxColor]?.border};
+      height: ${iconSizes?.xs.height}px;
+      width: ${iconSizes?.xs.width}px;
+    `;
+  }}
+`;
 
-      &:hover {
-        color: ${semanticColors?.base?.borderHover};
-        background-color: transparent;
-      }
+export const StyledCheckboxDefaultIcon = styled("span")`
+  ${(props: CheckboxExtraProps) => {
+    const { intent = "default" } = props;
 
-      &.${checkboxClasses.disabled} {
-        color: ${semanticColors?.base?.borderDisabled};
-      }
+    const iconSizes = getIconSizes(props);
+    const borders = getBorders(props);
 
-      &.${checkboxClasses.checked} {
-        color: ${semanticColors?.accent?.border};
+    const borderColor = intentToColor[intent] as keyof SDSPalette;
 
-        &:hover {
-          color: ${semanticColors?.accent?.borderHover};
-          background-color: transparent;
-        }
+    return `
+      height: ${iconSizes?.s.height}px;
+      width: ${iconSizes?.s.width}px;
+      border: ${borders?.[borderColor]?.default};
+      border-radius: 2px;
+    `;
+  }}
+`;
 
-        &.${checkboxClasses.disabled} {
-          color: ${semanticColors?.base?.borderDisabled};
-        }
-      }
+export const StyledCheckboxCheckedIcon = styled("div")`
+  ${(props: CheckboxExtraProps) => {
+    const iconSizes = getIconSizes(props);
+    const semanticColors = getSemanticColors(props);
 
-      &.${checkboxClasses.root} {
-        ${focusVisibleA11yStyle(props)}
-        padding: 0;
-        margin-right: ${spaces?.s}px;
-        border-radius: 0;
+    return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: ${iconSizes?.s.height}px;
+      width: ${iconSizes?.s.width}px;
+      border-radius: 2px;
+      background-color: ${semanticColors?.accent?.fillPrimary};
+
+      ${StyledIcon} {
+        fill: ${semanticColors?.base?.ornamentPrimaryInverse};
       }
 
-      .MuiSvgIcon-root {
-        height: ${iconSizes?.s.height}px;
-        width: ${iconSizes?.s.width}px;
+      &:hover {
+        background-color: red;
       }
     `;
   }}
 `;
 
-export const StyledFormControlLabel = styled(FormControlLabel)`
+export const StyledCheckbox = styled(RawCheckbox)`
   ${(props: CheckboxExtraProps) => {
-    const { disabled } = props;
-
     const spaces = getSpaces(props);
-    const semanticColors = getSemanticColors(props);
 
     return `
-      align-items: start;
-      margin-bottom: ${spaces?.l}px;
-      margin-left: 0;
-      margin-right: 0;
-      width: fit-content;
-      user-select: ${disabled ? "none" : "auto"};
-
-      &:hover {
-        ${StyledCheckbox} {
-          color: ${semanticColors?.base?.borderHover};
-
-          &.${checkboxClasses.disabled} {
-            color: ${semanticColors?.base?.borderDisabled};
-          }
-
-          &.${checkboxClasses.checked} {
-            color: ${semanticColors?.accent?.borderHover};
-            background-color: transparent;
+      &.${checkboxClasses.root} {
+        ${focusVisibleA11yStyle(props)}
+        
+        padding: 0;
+        margin-right: ${spaces?.s}px;
+        border-radius: 0;
 
-            &.${checkboxClasses.disabled} {
-              color: ${semanticColors?.base?.borderDisabled};
-            }
-          }
+        &:hover {
+          background-color: transparent;
         }
       }
     `;
@@ -133,12 +122,82 @@ export const StyledCheckboxLabel = styled("span")`
 export const StyledCheckboxCaption = styled("span")`
   ${fontBodyXxs}
 
+  ${(props: CheckboxExtraProps) => {
+    const semanticColors = getSemanticColors(props);
+
+    return `
+      color: ${semanticColors?.base?.textSecondary};
+    `;
+  }}
+`;
+
+const disabledStyles = (props: CheckboxExtraProps) => {
+  const semanticColors = getSemanticColors(props);
+  const borders = getBorders(props);
+
+  return `
+    user-select: none;
+
+    ${StyledCheckboxDefaultIcon} {
+      border: ${borders?.base?.disabled};
+    }
+
+    ${StyledCheckboxCheckedIcon} {
+      background-color: ${semanticColors?.base?.ornamentDisabled};
+    }
+
+    ${StyledCheckboxCaption} {
+      color: ${semanticColors?.base?.textDisabled};
+    }
+
+    &:hover, &:active {
+      ${StyledCheckboxDefaultIcon} {
+        border: ${borders?.base?.disabled};
+      }
+
+      ${StyledCheckboxCheckedIcon} {
+        background-color: ${semanticColors?.base?.ornamentDisabled};
+      }
+    }
+  `;
+};
+
+export const StyledFormControlLabel = styled(FormControlLabel)`
   ${(props: CheckboxExtraProps) => {
     const { disabled } = props;
+
+    const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
+    const borders = getBorders(props);
 
     return `
-      color: ${disabled ? semanticColors?.base?.textDisabled : semanticColors?.base?.textSecondary};
+      align-items: start;
+      margin-bottom: ${spaces?.l}px;
+      margin-left: 0;
+      margin-right: 0;
+      width: fit-content;
+
+      &:hover {
+        ${StyledCheckboxDefaultIcon} {
+          border: ${borders?.base?.hover};
+        }
+
+        ${StyledCheckboxCheckedIcon} {
+          background-color: ${semanticColors?.accent?.fillHover};
+        }
+      }
+
+      &:active {
+        ${StyledCheckboxDefaultIcon} {
+          border: ${borders?.base?.pressed};
+        }
+
+        ${StyledCheckboxCheckedIcon} {
+          background-color: ${semanticColors?.accent?.fillPressed};
+        }
+      }
+
+      ${disabled && disabledStyles(props)}
     `;
   }}
 `;