feat(WarningText): align with DS 5.7

lumada-design · Oct 24, 2023 · ba2ed38 · ba2ed38
1 parent 692e6dd
commit ba2ed38
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/packages/core/src/components/Forms/WarningText/WarningText.styles.tsx b/packages/core/src/components/Forms/WarningText/WarningText.styles.tsx
@@ -4,16 +4,13 @@ import { createClasses } from "@core/utils/classes";
 
 export const { staticClasses, useClasses } = createClasses("HvWarningText", {
   root: { display: "none" },
-  defaultIcon: { minWidth: "32px" },
+  defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
   warningText: {
-    color: theme.colors.negative,
+    color: theme.colors.negative_120,
     paddingRight: theme.space.xs,
-    "&:first-of-type": {
-      paddingLeft: theme.space.xs,
-    },
   },
   show: { display: "flex" },
-  topGutter: { paddingTop: 6 },
+  topGutter: { paddingTop: "3px" },
   hideText: {
     // display none or visibility hidden prevents
     // browser to trigger the aria-alert

diff --git a/packages/core/src/components/Forms/WarningText/WarningText.tsx b/packages/core/src/components/Forms/WarningText/WarningText.tsx
@@ -67,7 +67,7 @@ export const HvWarningText = (props: HvWarningTextProps) => {
   const showWarning = localVisible && !localDisabled;
   const content = showWarning ? children : "";
   const localAdornment = adornment || (
-    <Fail className={classes.defaultIcon} color="negative" />
+    <Fail iconSize="XS" className={classes.defaultIcon} color="negative" />
   );
 
   return (
@@ -88,6 +88,7 @@ export const HvWarningText = (props: HvWarningTextProps) => {
           [classes.topGutter]: !disableGutter,
           [classes.hideText]: hideText,
         })}
+        variant="caption1"
         role="status"
         aria-live="polite"
         aria-relevant="additions text"

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -421,6 +421,18 @@ const ds3 = makeTheme((theme) => ({
         },
       },
     },
+    HvBreadCrumbPage: {
+      classes: {
+        link: {
+          "&:hover": {
+            backgroundColor: theme.colors.atmo3,
+          },
+          "&:focus": {
+            backgroundColor: theme.colors.atmo3,
+          },
+        },
+      },
+    },
     HvBulkActions: {
       classes: {
         root: {
@@ -1312,22 +1324,28 @@ const ds3 = makeTheme((theme) => ({
         },
       },
     },
-    HvWizardContainer: {
+    HvWarningText: {
       classes: {
-        paper: {
-          maxHeight: "calc(100% - (2 * 100px))",
+        warningText: {
+          ...theme.typography.body,
+          color: theme.colors.negative,
+        },
+        topGutter: { paddingTop: "8px" },
+        defaultIcon: {
+          minWidth: "32px",
+          width: "32px",
+          height: "32px",
+          "& svg": {
+            height: "16px",
+            width: "16px",
+          },
         },
       },
     },
-    HvBreadCrumbPage: {
+    HvWizardContainer: {
       classes: {
-        link: {
-          "&:hover": {
-            backgroundColor: theme.colors.atmo3,
-          },
-          "&:focus": {
-            backgroundColor: theme.colors.atmo3,
-          },
+        paper: {
+          maxHeight: "calc(100% - (2 * 100px))",
         },
       },
     },