feat: add Radio styles to Pentaho Plus theme

lumada-design · Mar 27, 2024 · 64c7d25 · 64c7d25
1 parent 9869fc6
commit 64c7d25
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 41 deletions.
diff --git a/packages/core/src/BaseRadio/BaseRadio.styles.tsx b/packages/core/src/BaseRadio/BaseRadio.styles.tsx
@@ -6,20 +6,28 @@ import { createClasses } from "../utils/classes";
 export const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
   root: {
     padding: 0,
+    width: 32,
+    minWidth: 32,
+    height: 32,
     cursor: "pointer",
     "&:hover": {
       backgroundColor: theme.colors.containerBackgroundHover,
       borderRadius: theme.radii.base,
     },
+    "& svg": {
+      width: 16,
+      height: 16,
+      borderRadius: theme.radii.circle,
+      border: `1px solid ${theme.colors.secondary}`,
+    },
     borderRadius: 0,
   },
   disabled: {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      "& path:nth-of-type(2)": {
-        fill: theme.colors.secondary_60,
-      },
+      border: `1px solid ${theme.colors.secondary_60}`,
+      backgroundColor: theme.colors.atmo3,
     },
   },
   focusVisible: {
@@ -29,4 +37,41 @@ export const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     },
   },
   icon: {},
+  checked: {
+    "& svg": {
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: theme.colors.secondary,
+      color: theme.colors.atmo2,
+    },
+    "&$semantic": {
+      "& svg": {
+        border: `1px solid ${theme.colors.base_dark}`,
+        backgroundColor: theme.colors.base_light,
+        color: theme.colors.base_dark,
+      },
+    },
+    "&$disabled": {
+      "& svg": {
+        border: `1px solid ${theme.colors.secondary_60}`,
+        backgroundColor: theme.colors.secondary_60,
+        color: theme.colors.atmo3,
+      },
+    },
+  },
+  semantic: {
+    "& svg": {
+      border: `1px solid ${theme.colors.base_dark}`,
+      backgroundColor: theme.colors.base_light,
+    },
+  },
+  pagination: {
+    minWidth: 0,
+    width: 16,
+    height: 16,
+    "& svg": {
+      border: "none",
+      width: "unset",
+      height: "unset",
+    },
+  },
 });
diff --git a/packages/core/src/BaseRadio/BaseRadio.tsx b/packages/core/src/BaseRadio/BaseRadio.tsx
@@ -2,15 +2,11 @@ import { useState, useCallback, forwardRef } from "react";
 
 import MuiRadio, { RadioProps as MuiRadioProps } from "@mui/material/Radio";
 
-import {
-  RadioButtonUnselected,
-  RadioButtonSelected,
-} from "@hitachivantara/uikit-react-icons";
-
 import { useDefaultProps } from "../hooks/useDefaultProps";
 import { ExtractNames } from "../utils/classes";
 
 import { staticClasses, useClasses } from "./BaseRadio.styles";
+import { Selected, Unselected } from "./icons";
 
 export { staticClasses as baseRadioClasses };
 
@@ -74,6 +70,10 @@ export interface HvBaseRadioProps
    * Whether the selector should use semantic colors.
    */
   semantic?: boolean;
+  /**
+   * Whether the selector is used on a pagination layout.
+   */
+  pagination?: boolean;
   /**
    * Properties passed on to the input element.
    */
@@ -89,25 +89,10 @@ export interface HvBaseRadioProps
   onBlur?: (event: React.FocusEvent<any>) => void;
 }
 
-export const getSelectorIcons = (
-  options: { disabled: boolean; semantic: boolean },
-  classes: HvBaseRadioClasses
-) => {
-  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;
-
+export const getSelectorIcons = () => {
   return {
-    radio: <RadioButtonUnselected color={color} className={classes.icon} />,
-    radioChecked: (
-      <RadioButtonSelected color={checkedColor} className={classes.icon} />
-    ),
+    radio: <Unselected />, // <RadioButtonUnselected color={color} className={classes.icon} />,
+    radioChecked: <Selected />,
   };
 };
 
@@ -132,6 +117,7 @@ export const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(
       defaultChecked,
       onChange,
       semantic = false,
+      pagination = false,
       inputProps,
       onFocusVisible,
       onBlur,
@@ -158,7 +144,7 @@ export const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(
       [onBlur]
     );
 
-    const icons = getSelectorIcons({ disabled, semantic }, classes);
+    const icons = getSelectorIcons();
 
     const onLocalChange = useCallback(
       (evt: React.ChangeEvent<HTMLInputElement>) => {
@@ -181,11 +167,14 @@ export const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(
           {
             [classes.disabled]: disabled,
             [classes.focusVisible]: focusVisible,
+            [classes.checked]: checked,
+            [classes.semantic]: semantic,
+            [classes.pagination]: pagination,
           },
           className
         )}
-        icon={icons.radio}
-        checkedIcon={icons.radioChecked}
+        icon={others.icon || icons.radio}
+        checkedIcon={others.checkedIcon || icons.radioChecked}
         color="default"
         disabled={disabled}
         required={required}

diff --git a/packages/core/src/BaseRadio/icons.tsx b/packages/core/src/BaseRadio/icons.tsx
@@ -0,0 +1,14 @@
+export const Selected = () => {
+  return (
+    <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m7,11a4,4 0 0 1 -4,-4a4,4 0 0 1 4,-4a4,4 0 0 1 4,4a4,4 0 0 1 -4,4"
+        fill="currentcolor"
+      />
+    </svg>
+  );
+};
+
+export const Unselected = () => {
+  return <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" />;
+};
diff --git a/packages/core/src/DotPagination/DotPagination.tsx b/packages/core/src/DotPagination/DotPagination.tsx
@@ -114,6 +114,7 @@ export const HvDotPagination = (props: HvDotPaginationProps) => {
           icon={icons.radio}
           checkedIcon={icons.radioChecked}
           aria-label={getItemAriaLabel?.(i)}
+          pagination
         />
       ))}
     </HvRadioGroup>

diff --git a/packages/core/src/Radio/Radio.stories.tsx b/packages/core/src/Radio/Radio.stories.tsx
@@ -61,19 +61,85 @@ export const Variants: StoryObj<HvRadioProps> = {
     ),
   ],
   render: () => {
+    const styles = {
+      root: css({
+        display: "flex",
+        flexDirection: "column",
+        gap: 20,
+        flexWrap: "wrap",
+      }),
+      group: css({
+        display: "flex",
+        flexDirection: "row",
+        gap: 20,
+      }),
+    };
+
     return (
-      <>
-        <HvRadio required name="required" label="Required" value="1" />
-        <HvRadio disabled name="disabled" label="Disabled" value="1" />
-        <HvRadio readOnly name="readonly" label="Readonly" value="1" />
-        <HvRadio
-          status="invalid"
-          statusMessage="Oh no!"
-          name="invalid"
-          label="Invalid"
-          value="1"
-        />
-      </>
+      <div className={styles.root}>
+        <HvTypography variant="title3">Disabled</HvTypography>
+        <div className={styles.group}>
+          <HvRadio disabled name="disabled" label="Disabled" value="1" />
+          <HvRadio
+            disabled
+            name="disabled"
+            defaultChecked
+            label="Disabled"
+            value="1"
+          />
+        </div>
+        <HvTypography variant="title3">Readonly</HvTypography>
+        <div className={styles.group}>
+          <HvRadio readOnly name="readonly" label="Readonly" value="1" />
+          <HvRadio
+            readOnly
+            name="readonly"
+            defaultChecked
+            label="Readonly"
+            value="1"
+          />
+        </div>
+        <HvTypography variant="title3">Required</HvTypography>
+        <div className={styles.group}>
+          <HvRadio required name="required" label="Required" value="1" />
+          <HvRadio
+            required
+            name="required"
+            defaultChecked
+            label="Required"
+            value="1"
+          />
+        </div>
+        <HvTypography variant="title3">Invalid</HvTypography>
+        <div className={styles.group}>
+          <HvRadio
+            status="invalid"
+            statusMessage="Oh no!"
+            name="invalid"
+            label="Invalid"
+            value="1"
+          />
+          <HvRadio
+            status="invalid"
+            statusMessage="Oh no!"
+            name="invalid"
+            defaultChecked
+            label="Invalid"
+            value="1"
+          />
+        </div>
+        <HvTypography variant="title3">Semantic</HvTypography>
+        <div className={styles.group}>
+          <HvRadio semantic name="semantic" label="Semantic" value="1" />
+          <HvRadio
+            semantic
+            name="semantic"
+            defaultChecked
+            label="Semantic"
+            value="1"
+          />
+        </div>
+      </div>
     );
   },
 };
@@ -204,3 +270,40 @@ export const ExternalErrorMessage: StoryObj<HvRadioProps> = {
     );
   },
 };
+
+export const Custom: StoryObj<HvRadioProps> = {
+  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.atmo1,
+          color: theme.colors.warning,
+        },
+      }),
+    };
+
+    return (
+      <div className={styles.group}>
+        <HvRadio
+          label="Radio 1"
+          classes={{ root: styles.box, checked: styles.checked }}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/core/src/Radio/Radio.styles.tsx b/packages/core/src/Radio/Radio.styles.tsx
@@ -61,4 +61,6 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
     width: "100%",
   },
   focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },
+  checked: {},
+  semantic: {},
 });
diff --git a/packages/core/src/Radio/Radio.tsx b/packages/core/src/Radio/Radio.tsx
@@ -107,6 +107,10 @@ export interface HvRadioProps
    * Whether the selector should use semantic colors.
    */
   semantic?: boolean;
+  /**
+   * Whether the selector is used on a pagination layout.
+   */
+  pagination?: boolean;
   /**
    * Properties passed on to the input element.
    */
@@ -154,6 +158,7 @@ export const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(
       statusMessage,
       "aria-errormessage": ariaErrorMessage,
       semantic = false,
+      pagination = false,
       inputProps,
       onFocusVisible,
       onBlur,
@@ -229,6 +234,7 @@ export const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(
         value={value}
         checked={isChecked}
         semantic={semantic}
+        pagination={pagination}
         inputProps={{
           "aria-invalid": isStateInvalid ? true : undefined,
           "aria-errormessage": errorMessageId,
@@ -259,6 +265,8 @@ export const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(
               [classes.disabled]: disabled,
               [classes.focusVisible]: !!(focusVisible && label),
               [classes.invalidContainer]: isStateInvalid,
+              [classes.checked]: isChecked,
+              [classes.semantic]: semantic,
             })}
           >
             {radio}