fix(Input): update error color

fix(WarningText): use span for label & refactor colors render message to DOM, allowing it to be displayed by overriding the styles. element is still invisible to the a11y tree style(form): update invalid/error to negative_120
lumada-design · Nov 13, 2024 · 6601828 · 6601828
1 parent 817e45b
commit 6601828
Show file tree

Hide file tree

Showing 15 changed files with 46 additions and 45 deletions.
diff --git a/packages/core/src/BaseInput/BaseInput.styles.tsx b/packages/core/src/BaseInput/BaseInput.styles.tsx
@@ -53,28 +53,28 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   invalid: {
     "&:not(.disabled)": {
       "& $inputBorderContainer": {
-        backgroundColor: theme.colors.negative,
+        backgroundColor: theme.colors.negative_120,
       },
 
       "&:hover $inputBorderContainer": {
-        backgroundColor: theme.colors.negative,
+        backgroundColor: theme.colors.negative_120,
       },
 
       "& $inputRootMultiline": {
         "& $input": {
-          border: `1px solid ${theme.colors.negative}`,
+          border: `1px solid ${theme.colors.negative_120}`,
         },
       },
 
       "&:hover $inputRootMultiline": {
         "& $input": {
-          border: `1px solid ${theme.colors.negative}`,
+          border: `1px solid ${theme.colors.negative_120}`,
         },
       },
 
       "&:focus-within $inputRootMultiline": {
         "& $input": {
-          border: `1px solid ${theme.colors.negative}`,
+          border: `1px solid ${theme.colors.negative_120}`,
         },
       },
     },
@@ -122,7 +122,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     left: "2px",
     backgroundColor: theme.colors.atmo4,
   },
-  inputRootInvalid: { borderColor: theme.colors.negative },
+  inputRootInvalid: { borderColor: theme.colors.negative_120 },
   inputRootReadOnly: {
     borderColor: theme.colors.secondary_60,
     backgroundColor: theme.colors.atmo2,

diff --git a/packages/core/src/CheckBox/CheckBox.styles.tsx b/packages/core/src/CheckBox/CheckBox.styles.tsx
@@ -33,7 +33,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     },
   },
   invalidContainer: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
 
     "&:hover": {
       borderBottomLeftRadius: "0px",
@@ -42,7 +42,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
   },
   checkbox: { height: "32px" },
   invalidCheckbox: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
     borderBottomLeftRadius: "0px",
     borderBottomRightRadius: "0px",
   },

diff --git a/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx b/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx
@@ -28,7 +28,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
   },
   invalid: {
     paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
   },
   selectAll: {},
   error: {},

diff --git a/packages/core/src/DatePicker/DatePicker.styles.tsx b/packages/core/src/DatePicker/DatePicker.styles.tsx
@@ -28,9 +28,9 @@ export const { staticClasses, useClasses } = createClasses("HvDatePicker", {
   panel: {},
 
   dropdownHeaderInvalid: {
-    border: `1px solid ${theme.colors.negative}`,
+    border: `1px solid ${theme.colors.negative_120}`,
     "&:hover": {
-      border: `1px solid ${theme.colors.negative}`,
+      border: `1px solid ${theme.colors.negative_120}`,
     },
   },
   dropdownHeaderOpen: {},

diff --git a/packages/core/src/Dropdown/Dropdown.styles.tsx b/packages/core/src/Dropdown/Dropdown.styles.tsx
@@ -28,7 +28,7 @@ export const { staticClasses, useClasses } = createClasses("HvDropdown", {
     borderRadius: theme.radii.base,
 
     "& $dropdownHeaderInvalid": {
-      border: `1px solid ${theme.colors.negative}`,
+      border: `1px solid ${theme.colors.negative_120}`,
     },
   },
   arrow: {},

diff --git a/packages/core/src/Forms/WarningText/WarningText.styles.tsx b/packages/core/src/Forms/WarningText/WarningText.styles.tsx
@@ -2,10 +2,14 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses("HvWarningText", {
-  root: { display: "none" },
-  defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
-  warningText: {
+  root: {
+    display: "none",
     color: theme.colors.negative_120,
+  },
+  defaultIcon: { width: "24px", height: "24px" },
+  warningText: {
+    ...theme.typography.caption1,
+    color: "inherit",
     paddingRight: theme.space.xs,
   },
   show: { display: "flex" },
@@ -19,5 +23,5 @@ export const { staticClasses, useClasses } = createClasses("HvWarningText", {
     margin: 0,
     overflow: "hidden",
   },
-  topBorder: { borderTop: `solid 1px ${theme.colors.negative}` },
+  topBorder: { borderTop: "1px solid currentcolor" },
 });
diff --git a/packages/core/src/Forms/WarningText/WarningText.tsx b/packages/core/src/Forms/WarningText/WarningText.tsx
@@ -6,7 +6,6 @@ import {
 } from "@hitachivantara/uikit-react-utils";
 
 import { HvBaseProps } from "../../types/generic";
-import { HvTypography } from "../../Typography";
 import { setId } from "../../utils/setId";
 import { HvFormElementContext } from "../FormElement";
 import { staticClasses, useClasses } from "./WarningText.styles";
@@ -40,12 +39,12 @@ export interface HvWarningTextProps extends HvBaseProps {
 export const HvWarningText = (props: HvWarningTextProps) => {
   const {
     children,
-    adornment,
-    isVisible,
+    adornment: adornmentProp,
+    isVisible: isVisibleProp,
     classes: classesProp,
     className,
-    id,
-    disabled,
+    id: idProp,
+    disabled: disabledProp,
     disableGutter = false,
     disableBorder = false,
     disableAdornment = false,
@@ -57,13 +56,12 @@ export const HvWarningText = (props: HvWarningTextProps) => {
 
   const { elementId, elementStatus, elementDisabled } =
     useContext(HvFormElementContext);
-  const localDisabled = disabled || elementDisabled;
-  const localVisible = isVisible ?? elementStatus === "invalid";
-  const localId = id ?? setId(elementId, "error");
-  const showWarning = localVisible && !localDisabled;
-  const content = showWarning ? children : "";
-  const localAdornment = adornment || (
-    <Fail iconSize="XS" className={classes.defaultIcon} color="negative" />
+  const disabled = disabledProp || elementDisabled;
+  const visible = isVisibleProp ?? elementStatus === "invalid";
+  const id = idProp ?? setId(elementId, "error");
+  const showWarning = visible && !disabled;
+  const adornment = adornmentProp || (
+    <Fail size="xs" className={classes.defaultIcon} />
   );
 
   return (
@@ -77,21 +75,20 @@ export const HvWarningText = (props: HvWarningTextProps) => {
         className,
       )}
     >
-      {!disableAdornment && localAdornment}
-      <HvTypography
-        id={localId}
+      {!disableAdornment && adornment}
+      <span
+        id={id}
         className={cx(classes.warningText, {
           [classes.topGutter]: !disableGutter,
           [classes.hideText]: hideText,
         })}
-        variant="caption1"
         role="status"
         aria-live="polite"
         aria-relevant="additions text"
         {...others}
       >
-        {showWarning && content}
-      </HvTypography>
+        {showWarning && children}
+      </span>
     </div>
   );
 };
diff --git a/packages/core/src/Radio/Radio.styles.tsx b/packages/core/src/Radio/Radio.styles.tsx
@@ -20,7 +20,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
     },
   },
   invalidContainer: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
 
     "&:hover": {
       borderBottomLeftRadius: "0px",
@@ -41,7 +41,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
     },
   },
   invalidRadio: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
 
     "&:hover": {
       borderBottomLeftRadius: "0px",

diff --git a/packages/core/src/RadioGroup/RadioGroup.styles.tsx b/packages/core/src/RadioGroup/RadioGroup.styles.tsx
@@ -28,7 +28,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
   },
   invalid: {
     paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
   },
   error: {},
 });
diff --git a/packages/core/src/Select/Select.styles.ts b/packages/core/src/Select/Select.styles.ts
@@ -11,7 +11,7 @@ export const { staticClasses, useClasses } = createClasses("HvSelect", {
   disabled: {},
   readOnly: {},
   invalid: {
-    border: `1px solid ${theme.colors.negative}`,
+    border: `1px solid ${theme.colors.negative_120}`,
   },
   labelContainer: {
     display: "flex",

diff --git a/packages/core/src/SelectionList/SelectionList.styles.tsx b/packages/core/src/SelectionList/SelectionList.styles.tsx
@@ -32,5 +32,5 @@ export const { staticClasses, useClasses } = createClasses("HvSelectionList", {
       zIndex: 1,
     },
   },
-  invalid: { borderBottom: `1px solid ${theme.colors.negative}` },
+  invalid: { borderBottom: `1px solid ${theme.colors.negative_120}` },
 });
diff --git a/packages/core/src/Switch/Switch.styles.tsx b/packages/core/src/Switch/Switch.styles.tsx
@@ -18,6 +18,6 @@ export const { staticClasses, useClasses } = createClasses("HvSwitch", {
   },
   invalidSwitch: {
     paddingBottom: "1px",
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
   },
 });
diff --git a/packages/core/src/TagsInput/TagsInput.styles.tsx b/packages/core/src/TagsInput/TagsInput.styles.tsx
@@ -107,11 +107,11 @@ export const { staticClasses, useClasses } = createClasses("HvTagsInput", {
     },
 
     "&$error": {
-      border: `1px solid ${theme.colors.negative}`,
+      border: `1px solid ${theme.colors.negative_120}`,
     },
 
     "&$invalid": {
-      border: `1px solid ${theme.colors.negative}`,
+      border: `1px solid ${theme.colors.negative_120}`,
     },
   },
   tagInputContainerRoot: {

diff --git a/packages/core/src/TimePicker/TimePicker.styles.ts b/packages/core/src/TimePicker/TimePicker.styles.ts
@@ -27,9 +27,9 @@ export const { useClasses, staticClasses } = createClasses("HvTimePicker", {
   dropdownHeader: {},
   dropdownHeaderOpen: {},
   dropdownHeaderInvalid: {
-    border: `1px solid ${theme.colors.negative}`,
+    border: `1px solid ${theme.colors.negative_120}`,
     "&:hover": {
-      border: `1px solid ${theme.colors.negative}`,
+      border: `1px solid ${theme.colors.negative_120}`,
     },
   },
   dropdownPanel: {},

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -1422,7 +1422,7 @@ const ds3 = makeTheme((theme) => ({
       classes: {
         warningText: {
           ...theme.typography.body,
-          color: theme.colors.negative,
+          color: "inherit",
         },
         topGutter: { paddingTop: "8px" },
         defaultIcon: {