refactor: update error message design (#592)

* refactor: update error message design * feat: update token package
cds-snc · Jul 29, 2024 · 5f1b94e · 5f1b94e
1 parent 4b8cadd
commit 5f1b94e
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -47,7 +47,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^1.13.2",
+    "@cdssnc/gcds-tokens": "^1.14.2",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",

diff --git a/packages/web/src/components/gcds-checkbox/readme.md b/packages/web/src/components/gcds-checkbox/readme.md
@@ -63,6 +63,7 @@ graph TD;
   gcds-checkbox --> gcds-error-message
   gcds-hint --> gcds-text
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   style gcds-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/web/src/components/gcds-error-message/gcds-error-message.css b/packages/web/src/components/gcds-error-message/gcds-error-message.css
@@ -12,10 +12,9 @@
 
 @layer default {
   :host .error-message {
-    margin: var(--gcds-error-message-margin);
-    padding: var(--gcds-error-message-padding);
-    background: var(--gcds-error-message-background);
-    border-inline-start: var(--gcds-error-message-border-width) solid
-      var(--gcds-error-message-border-color);
+    &::part(text),
+    gcds-icon {
+      color: var(--gcds-error-message-text-color);
+    }
   }
 }
diff --git a/packages/web/src/components/gcds-error-message/gcds-error-message.tsx b/packages/web/src/components/gcds-error-message/gcds-error-message.tsx
@@ -25,8 +25,11 @@ export class GcdsErrorMessage {
         id={`error-message-${messageId}`}
         class="gcds-error-message-wrapper"
       >
-        <gcds-text class="error-message" role="alert" margin-bottom="0">
-          <slot></slot>
+        <gcds-text class="error-message" role="alert" margin-bottom="300">
+          <gcds-icon name="triangle-exclamation" margin-right="100"></gcds-icon>
+          <strong>
+            <slot></slot>
+          </strong>
         </gcds-text>
       </Host>
     );

diff --git a/packages/web/src/components/gcds-error-message/readme.md b/packages/web/src/components/gcds-error-message/readme.md
@@ -26,11 +26,13 @@
 ### Depends on
 
 - [gcds-text](../gcds-text)
+- [gcds-icon](../gcds-icon)
 
 ### Graph
 ```mermaid
 graph TD;
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   gcds-checkbox --> gcds-error-message
   gcds-fieldset --> gcds-error-message
   gcds-file-uploader --> gcds-error-message

diff --git a/packages/web/src/components/gcds-error-message/test/gcds-error-message.spec.ts b/packages/web/src/components/gcds-error-message/test/gcds-error-message.spec.ts
@@ -10,8 +10,11 @@ describe('gcds-error-message', () => {
     expect(root).toEqualHtml(`
       <gcds-error-message message-id="input-renders" id="error-message-input-renders" class="gcds-error-message-wrapper">
         <mock:shadow-root>
-          <gcds-text class="error-message" role="alert" margin-bottom="0">
-            <slot></slot>
+          <gcds-text class="error-message" role="alert" margin-bottom="300">
+            <gcds-icon name="triangle-exclamation" margin-right="100"></gcds-icon>
+            <strong>
+              <slot></slot>
+            </strong>
           </gcds-text>
         </mock:shadow-root>
         This field is required

diff --git a/packages/web/src/components/gcds-fieldset/readme.md b/packages/web/src/components/gcds-fieldset/readme.md
@@ -56,6 +56,7 @@ graph TD;
   gcds-fieldset --> gcds-error-message
   gcds-hint --> gcds-text
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   style gcds-fieldset fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/web/src/components/gcds-file-uploader/readme.md b/packages/web/src/components/gcds-file-uploader/readme.md
@@ -69,6 +69,7 @@ graph TD;
   gcds-file-uploader --> gcds-icon
   gcds-hint --> gcds-text
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   style gcds-file-uploader fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/web/src/components/gcds-icon/readme.md b/packages/web/src/components/gcds-icon/readme.md
@@ -24,6 +24,7 @@
 
  - [gcds-alert](../gcds-alert)
  - [gcds-button](../gcds-button)
+ - [gcds-error-message](../gcds-error-message)
  - [gcds-file-uploader](../gcds-file-uploader)
  - [gcds-link](../gcds-link)
  - [gcds-nav-group](../gcds-nav-group)
@@ -36,6 +37,7 @@
 graph TD;
   gcds-alert --> gcds-icon
   gcds-button --> gcds-icon
+  gcds-error-message --> gcds-icon
   gcds-file-uploader --> gcds-icon
   gcds-link --> gcds-icon
   gcds-nav-group --> gcds-icon

diff --git a/packages/web/src/components/gcds-input/readme.md b/packages/web/src/components/gcds-input/readme.md
@@ -66,6 +66,7 @@ graph TD;
   gcds-input --> gcds-error-message
   gcds-hint --> gcds-text
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   style gcds-input fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/web/src/components/gcds-select/readme.md b/packages/web/src/components/gcds-select/readme.md
@@ -63,6 +63,7 @@ graph TD;
   gcds-select --> gcds-error-message
   gcds-hint --> gcds-text
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   style gcds-select fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/web/src/components/gcds-textarea/readme.md b/packages/web/src/components/gcds-textarea/readme.md
@@ -68,6 +68,7 @@ graph TD;
   gcds-textarea --> gcds-text
   gcds-hint --> gcds-text
   gcds-error-message --> gcds-text
+  gcds-error-message --> gcds-icon
   style gcds-textarea fill:#f9f,stroke:#333,stroke-width:4px
 ```