From 66018284139f0e7b3f004b2f5949b45d15be0f62 Mon Sep 17 00:00:00 2001 From: Bruno Henriques Date: Wed, 22 Nov 2023 15:20:12 +0000 Subject: [PATCH] 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 --- .../core/src/BaseInput/BaseInput.styles.tsx | 12 +++---- .../core/src/CheckBox/CheckBox.styles.tsx | 4 +-- .../CheckBoxGroup/CheckBoxGroup.styles.tsx | 2 +- .../core/src/DatePicker/DatePicker.styles.tsx | 4 +-- .../core/src/Dropdown/Dropdown.styles.tsx | 2 +- .../Forms/WarningText/WarningText.styles.tsx | 12 ++++--- .../src/Forms/WarningText/WarningText.tsx | 33 +++++++++---------- packages/core/src/Radio/Radio.styles.tsx | 4 +-- .../core/src/RadioGroup/RadioGroup.styles.tsx | 2 +- packages/core/src/Select/Select.styles.ts | 2 +- .../SelectionList/SelectionList.styles.tsx | 2 +- packages/core/src/Switch/Switch.styles.tsx | 2 +- .../core/src/TagsInput/TagsInput.styles.tsx | 4 +-- .../core/src/TimePicker/TimePicker.styles.ts | 4 +-- packages/styles/src/themes/ds3.ts | 2 +- 15 files changed, 46 insertions(+), 45 deletions(-) diff --git a/packages/core/src/BaseInput/BaseInput.styles.tsx b/packages/core/src/BaseInput/BaseInput.styles.tsx index 674b0b126d..5da087ab9f 100644 --- 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 index 49a18d6ece..2427dd9cbf 100644 --- 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 index a2661e2199..7a287d3401 100644 --- 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 index 4f874b069d..ef3d7b656b 100644 --- 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 index dc7e1feefb..5098e27fe5 100644 --- 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 index 5127cd364e..306b55c3c0 100644 --- 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 index 98658463a4..41dacf9d4d 100644 --- 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 || ( - + const disabled = disabledProp || elementDisabled; + const visible = isVisibleProp ?? elementStatus === "invalid"; + const id = idProp ?? setId(elementId, "error"); + const showWarning = visible && !disabled; + const adornment = adornmentProp || ( + ); return ( @@ -77,21 +75,20 @@ export const HvWarningText = (props: HvWarningTextProps) => { className, )} > - {!disableAdornment && localAdornment} - - {showWarning && content} - + {showWarning && children} + ); }; diff --git a/packages/core/src/Radio/Radio.styles.tsx b/packages/core/src/Radio/Radio.styles.tsx index 1985864ee6..89cfb5a9fd 100644 --- 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 index 85abe9f337..af64e40ddb 100644 --- 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 index 269cc09c78..7ddc14a1e4 100644 --- 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 index 6f11dcbbe5..d029e43671 100644 --- 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 index 95ece12710..fab787a67c 100644 --- 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 index 5ac6415ef1..01a25356e3 100644 --- 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 index 6a3fdedac1..44ac3c6910 100644 --- 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 index 7e87c1cd2e..a896a0b756 100644 --- 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: {