feat: add CheckBox styles to Pentaho Plus theme

lumada-design · Mar 25, 2024 · 28aeff3 · 28aeff3
1 parent d141e67
commit 28aeff3
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 51 deletions.
diff --git a/packages/core/src/BaseCheckBox/BaseCheckBox.styles.ts b/packages/core/src/BaseCheckBox/BaseCheckBox.styles.ts
@@ -6,21 +6,30 @@ import { createClasses } from "../utils/classes";
 export const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
   root: {
     padding: 0,
+    width: 32,
+    minWidth: 32,
+    height: 32,
     borderRadius: theme.radii.base,
     cursor: "pointer",
     "&:hover": {
       backgroundColor: theme.colors.containerBackgroundHover,
     },
+
+    "& svg": {
+      width: 16,
+      height: 16,
+      color: theme.colors.atmo1,
+      borderRadius: theme.radii.none,
+      border: `1px solid ${theme.colors.secondary}`,
+    },
   },
   disabled: {
     "&$root": {
       cursor: "not-allowed",
       pointerEvents: "initial",
-    },
-
-    "& svg": {
-      "& path:nth-of-type(2)": {
-        fill: theme.colors.secondary_60,
+      "& svg": {
+        color: theme.colors.atmo3,
+        borderColor: theme.colors.secondary_60,
       },
     },
   },
@@ -30,4 +39,43 @@ export const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     },
   },
   icon: {},
+  checked: {
+    "& svg": {
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: theme.colors.secondary,
+      color: theme.colors.atmo1,
+    },
+    "&$disabled": {
+      "& svg": {
+        backgroundColor: theme.colors.atmo3,
+        borderColor: theme.colors.atmo3,
+        color: theme.colors.secondary_60,
+      },
+    },
+  },
+  indeterminate: {
+    "& svg": {
+      color: theme.colors.secondary,
+    },
+    "&$disabled": {
+      "& svg": {
+        backgroundColor: theme.colors.atmo3,
+        borderColor: theme.colors.secondary_60,
+        color: theme.colors.secondary_60,
+      },
+    },
+  },
+  semantic: {
+    "& svg": {
+      border: `1px solid ${theme.colors.base_dark}`,
+      color: theme.colors.base_light,
+      backgroundColor: theme.colors.base_dark,
+    },
+    "&$indeterminate": {
+      "& svg": {
+        color: theme.colors.base_dark,
+        backgroundColor: theme.colors.base_light,
+      },
+    },
+  },
 });
diff --git a/packages/core/src/BaseCheckBox/BaseCheckBox.tsx b/packages/core/src/BaseCheckBox/BaseCheckBox.tsx
@@ -4,17 +4,13 @@ import MuiCheckbox, {
   CheckboxProps as MuiCheckboxProps,
 } from "@mui/material/Checkbox";
 
-import {
-  CheckboxCheck as CheckboxCheckIcon,
-  CheckboxPartial as CheckboxPartialIcon,
-  Checkbox as CheckboxIcon,
-} from "@hitachivantara/uikit-react-icons";
-
 import { ExtractNames } from "../utils/classes";
 import { useDefaultProps } from "../hooks/useDefaultProps";
 
 import { staticClasses, useClasses } from "./BaseCheckBox.styles";
 
+import { Box, Check, Partial } from "./icons";
+
 export { staticClasses as baseCheckBoxClasses };
 
 export type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;
@@ -91,32 +87,11 @@ export interface HvBaseCheckBoxProps
   classes?: HvBaseCheckBoxClasses;
 }
 
-const getSelectorIcons = (
-  options: {
-    disabled: boolean;
-    semantic: boolean;
-  },
-  classes: HvBaseCheckBoxClasses
-) => {
-  const { disabled, semantic } = options;
-  const color =
-    (disabled && ["atmo3", "secondary_60"]) ||
-    (semantic && ["base_light", "base_dark"]) ||
-    undefined;
-  const checkedColor =
-    (disabled && ["atmo3", "secondary_60"]) ||
-    (semantic && ["base_dark", "base_light"]) ||
-    undefined;
-
-  // Default colors: ["atmo1","secondary"]
+const getSelectorIcons = () => {
   return {
-    checkbox: <CheckboxIcon color={color} className={classes.icon} />,
-    checkboxPartial: (
-      <CheckboxPartialIcon color={color} className={classes.icon} />
-    ),
-    checkboxChecked: (
-      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />
-    ),
+    checkbox: <Box />,
+    checkboxPartial: <Partial />,
+    checkboxChecked: <Check />,
   };
 };
 
@@ -154,7 +129,7 @@ export const HvBaseCheckBox = forwardRef<
 
   const [focusVisible, setFocusVisible] = useState<boolean>(false);
 
-  const icons = getSelectorIcons({ disabled, semantic }, classes);
+  const icons = getSelectorIcons();
 
   const onChangeCallback = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -191,7 +166,13 @@ export const HvBaseCheckBox = forwardRef<
       value={value}
       className={cx(
         classes.root,
-        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },
+        {
+          [classes.disabled]: disabled,
+          [classes.focusVisible]: focusVisible,
+          [classes.checked]: checked,
+          [classes.indeterminate]: indeterminate,
+          [classes.semantic]: semantic,
+        },
         className
       )}
       icon={icons.checkbox}

diff --git a/packages/core/src/BaseCheckBox/icons.tsx b/packages/core/src/BaseCheckBox/icons.tsx
@@ -0,0 +1,26 @@
+export const Box = () => {
+  return (
+    <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+      <path fill="currentcolor" d="m0,0l16,0l0,16l-16,0l0,-16z" />
+    </svg>
+  );
+};
+
+export const Check = () => {
+  return (
+    <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z"
+        fill="currentcolor"
+      />
+    </svg>
+  );
+};
+
+export const Partial = () => {
+  return (
+    <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+      <path id="svg_2" d="m3,8l8,0l0,-2l-8,0l0,2z" fill="currentcolor" />
+    </svg>
+  );
+};
diff --git a/packages/core/src/CheckBox/CheckBox.stories.tsx b/packages/core/src/CheckBox/CheckBox.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "@emotion/styled";
 import { Meta, StoryObj } from "@storybook/react";
-import { CSSInterpolation, css } from "@emotion/css";
+import { css } from "@emotion/css";
 import {
   HvBaseCheckBox,
   HvCheckBox,
@@ -52,42 +52,42 @@ export const Main: StoryObj<HvCheckBoxProps> = {
 
 export const Variants: StoryObj<HvCheckBoxProps> = {
   render: () => {
-    const styles: { root: CSSInterpolation; group: CSSInterpolation } = {
-      root: {
+    const styles = {
+      root: css({
         display: "flex",
         flexDirection: "column",
         gap: 20,
         flexWrap: "wrap",
-      },
-      group: {
+      }),
+      group: css({
         display: "flex",
         flexDirection: "row",
         gap: 20,
-      },
+      }),
     };
 
     return (
-      <div className={css(styles.root)}>
+      <div className={styles.root}>
         <HvTypography variant="title3">Disabled</HvTypography>
-        <div className={css(styles.group)}>
+        <div className={styles.group}>
           <HvCheckBox disabled label="Checkbox 1" />
           <HvCheckBox defaultChecked disabled label="Checkbox 2" />
           <HvCheckBox indeterminate disabled label="Checkbox 3" />
         </div>
         <HvTypography variant="title3">Readonly</HvTypography>
-        <div className={css(styles.group)}>
+        <div className={styles.group}>
           <HvCheckBox readOnly label="Checkbox 1" />
           <HvCheckBox defaultChecked readOnly label="Checkbox 2" />
           <HvCheckBox indeterminate readOnly label="Checkbox 3" />
         </div>
         <HvTypography variant="title3">Required</HvTypography>
-        <div className={css(styles.group)}>
+        <div className={styles.group}>
           <HvCheckBox required label="Checkbox 1" />
           <HvCheckBox required defaultChecked label="Checkbox 2" />
           <HvCheckBox required indeterminate label="Checkbox 3" />
         </div>
         <HvTypography variant="title3">Invalid</HvTypography>
-        <div className={css(styles.group)}>
+        <div className={styles.group}>
           <HvCheckBox
             status="invalid"
             statusMessage="No way for this to be valid!"
@@ -107,11 +107,17 @@ export const Variants: StoryObj<HvCheckBoxProps> = {
           />
         </div>
         <HvTypography variant="title3">No label</HvTypography>
-        <div className={css(styles.group)}>
+        <div className={styles.group}>
           <HvCheckBox aria-label="Checkbox 1" />
           <HvCheckBox defaultChecked aria-label="Checkbox 2" />
           <HvCheckBox indeterminate aria-label="Checkbox 3" />
         </div>
+        <HvTypography variant="title3">Semantic</HvTypography>
+        <div className={styles.group}>
+          <HvCheckBox semantic aria-label="Checkbox 1" />
+          <HvCheckBox semantic defaultChecked aria-label="Checkbox 2" />
+          <HvCheckBox semantic indeterminate aria-label="Checkbox 3" />
+        </div>
       </div>
     );
   },
@@ -234,3 +240,56 @@ export const ExternalErrorMessage: StoryObj<HvCheckBoxProps> = {
     );
   },
 };
+
+export const Custom: StoryObj<HvCheckBoxProps> = {
+  parameters: {
+    eyes: { include: false },
+  },
+  render: () => {
+    const styles = {
+      group: css({
+        display: "flex",
+        flexDirection: "row",
+        gap: 20,
+      }),
+      box: css({
+        "& svg": {
+          borderRadius: "6px",
+          border: `1px solid ${theme.colors.warning}`,
+        },
+      }),
+      checked: css({
+        "& svg": {
+          border: `1px solid ${theme.colors.warning}`,
+          backgroundColor: theme.colors.warning,
+          color: theme.colors.atmo1,
+        },
+      }),
+      indeterminate: css({
+        "& svg": {
+          border: `1px solid ${theme.colors.warning_140}`,
+          backgroundColor: theme.colors.warning_140,
+          color: theme.colors.atmo1,
+        },
+      }),
+    };
+
+    return (
+      <div className={styles.group}>
+        <HvCheckBox
+          label="Checkbox 1"
+          classes={{ root: styles.box, checked: styles.checked }}
+        />
+        <HvCheckBox
+          label="Checkbox 1"
+          indeterminate
+          classes={{
+            root: styles.box,
+            checked: styles.checked,
+            indeterminate: styles.indeterminate,
+          }}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/core/src/CheckBox/CheckBox.styles.tsx b/packages/core/src/CheckBox/CheckBox.styles.tsx
@@ -58,4 +58,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     lineHeight: "32px",
     width: "100%",
   },
+  checked: {},
+  indeterminate: {},
+  semantic: {},
 });
diff --git a/packages/core/src/CheckBox/CheckBox.tsx b/packages/core/src/CheckBox/CheckBox.tsx
@@ -182,6 +182,9 @@ export const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(
         name={name}
         className={cx(classes.checkbox, {
           [classes.invalidCheckbox]: isStateInvalid,
+          [classes.checked]: isChecked,
+          [classes.indeterminate]: isIndeterminate,
+          [classes.semantic]: semantic,
         })}
         disabled={disabled}
         readOnly={readOnly}

diff --git a/packages/core/src/List/List.styles.tsx b/packages/core/src/List/List.styles.tsx
@@ -27,7 +27,7 @@ export const { staticClasses, useClasses } = createClasses("HvList", {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.colors.primary_20,
+      backgroundColor: theme.colors.containerBackgroundHover,
     },
   },
   link: {

diff --git a/packages/styles/src/themes/pentahoPlus.ts b/packages/styles/src/themes/pentahoPlus.ts
@@ -221,6 +221,25 @@ const pentahoPlus = makeTheme((theme) => ({
     base: "6px",
   },
   components: {
+    HvBaseCheckBox: {
+      classes: {
+        root: {
+          "& svg": {
+            width: 16,
+            height: 16,
+            borderRadius: "3px",
+            border: `1px solid ${theme.colors.secondary}`,
+          },
+        },
+        checked: {
+          "& svg": {
+            border: `1px solid ${theme.colors.primary}`,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.atmo1,
+          },
+        },
+      },
+    },
     HvBaseSwitch: {
       classes: {
         root: {