use webui-notify in from server-side validation

basher · Apr 5, 2024 · 4f86361 · 4f86361
1 parent eb8e3e9
commit 4f86361
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/ui/stories/4. Forms/Form/Form.js b/ui/stories/4. Forms/Form/Form.js
@@ -108,31 +108,31 @@ export const FormHtml = (args) => `
 `;
 
 export const FormServerValidationHtml = () => `
-<div class="message message--error" role="alert">
-    <div class="stack">
-        <h2>Form errors</h2>
-        <p>
-            Optional error summary.<br/>
-            For example, rendered in the HTML on server postback.
-        </p>
-        <ul>
-            <li>
-                <a href="#input-tel">Error text... tel</a>
-            </li>
-            <li>
-                <a href="#select">Error text... select</a>
-            </li>
-            <li>
-                <a href="#checkbox-1">Error text... checkbox</a>
-            </li>
-            <li>
-                <a href="#radio-1">Error text... radio</a>
-            </li>
-        </ul>
-    </div>
-</div>
-
 <form class="form" action="#">
+    <webui-notify data-error role="alert">
+        <div class="stack">
+            <h2>Form errors</h2>
+            <p>
+                Optional error summary.<br/>
+                For example, rendered in the HTML on server postback.
+            </p>
+            <ul>
+                <li>
+                    <a href="#input-tel">Error text... tel</a>
+                </li>
+                <li>
+                    <a href="#select">Error text... select</a>
+                </li>
+                <li>
+                    <a href="#checkbox-1">Error text... checkbox</a>
+                </li>
+                <li>
+                    <a href="#radio-1">Error text... radio</a>
+                </li>
+            </ul>
+        </div>
+    </webui-notify>
+
     <div class="form__field">
         <label for="input-text1" class="label">
             Text input 1 label

diff --git a/ui/stories/4. Forms/Form/Form.mdx b/ui/stories/4. Forms/Form/Form.mdx
@@ -25,7 +25,8 @@ import * as FormNoArgs from './FormNoArgs.stories';
 <Controls of={Form.Form} />
 
 ## Server-side validation
-- It can be a good idea to add an additional error summary block to list all the form errors, with anchors to each field.
+- Use the [`<webui-notify>`](/docs/web-components-or-custom-elements-webui-notify--docs) custom element to add an additional error summary block.
+- List all the form errors, with anchors to each form field that has an error.
 
 <Canvas of={FormNoArgs.FormServerValidation} />
 

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Notify/WebUINotify.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Notify/WebUINotify.js
@@ -11,7 +11,7 @@ export const WebUINotifyHtml = (args) => `
         args.hasCloseButton === true
             ? `<button
             type="button"
-            class="button button--icon message__close"
+            class="button button--icon"
             data-close
         >
             <svg