From 6d140272178a328658a550b298cf8e81bf3c1c04 Mon Sep 17 00:00:00 2001 From: Heleen Date: Wed, 7 Jun 2023 13:13:27 +0200 Subject: [PATCH 1/7] WIP, notifications within horizontally aligned forms styling --- .../components/form-base-test.html | 71 +++++++++++ manon/form-horizontal-view-fieldset.scss | 57 ++++++--- manon/form-horizontal-view.scss | 112 +++++++++++++----- manon/notification-block-element.scss | 6 +- manon/notification-form.scss | 28 +++-- manon/notification.scss | 4 - 6 files changed, 216 insertions(+), 62 deletions(-) diff --git a/docs/documentation/components/form-base-test.html b/docs/documentation/components/form-base-test.html index d6360dfc..46286318 100644 --- a/docs/documentation/components/form-base-test.html +++ b/docs/documentation/components/form-base-test.html @@ -480,6 +480,77 @@

Visueel voorbeeld:

</form> + +

Invoerveld met notificatie

+

Visueel voorbeeld:

+
+
+

Toelichting: Lorem ipsum dolor set amet

+ +
+ + +
+
+ +
+ +

Html-voorbeeld:

+ 
+                
+<form action="" method="post" class="horizontal-view">
+  <div class="notification">
+    <p class="explanation" id="notification-message"><span>Toelichting:</span> Lorem ipsum dolor set amet</p>
+    
+    <div>
+        <label for="notification">IBAN-nummer</label>
+        <input id="notification" name="iban" placeholder="Lorem ipsum dolor set" type="text">
+    </div>
+  </div>
+  <button type="submit">Verzend</button>
+</form>
+              
+
+ +

Invoerveld met notificatie binnen fieldset

+

Visueel voorbeeld:

+
+
+ Lorem ipsum + +
+

Toelichting: Lorem ipsum dolor set amet

+ +
+ + +
+
+
+ +
+ +

Html-voorbeeld:

+ 
+                
+<form action="" method="post" class="horizontal-view">
+  <fieldset>
+    <legend>Lorem ipsum</legend>
+
+    <div class="notification">
+      <p class="explanation" id="notification-2-message"><span>Toelichting:</span> Lorem ipsum dolor set amet</p>
+      
+      <div>
+          <label for="notification-2">IBAN-nummer</label>
+          <input id="notification-2" name="iban" placeholder="Lorem ipsum dolor set" type="text">
+      </div>
+    </div>
+  </fieldset>
+  <button type="submit">Verzend</button>
+</form>
+              
+
+
diff --git a/manon/form-horizontal-view-fieldset.scss b/manon/form-horizontal-view-fieldset.scss index 7010da55..ff5e8654 100644 --- a/manon/form-horizontal-view-fieldset.scss +++ b/manon/form-horizontal-view-fieldset.scss @@ -21,9 +21,30 @@ For more information on the bug see: https://github.com/philipwalton/flexbugs#9- and: https://bugs.chromium.org/p/chromium/issues/detail?id=262679 */ form.horizontal-view { - $breakpoint: 24rem; + $breakpoint: 32rem; >fieldset { + + %input-styling { + @media (min-width: $breakpoint) { + width: var(--input-column); + /* resetting gap as it can not be used within fieldsets */ + gap: 0; + /* float objects to move inputs into place even when there is no label */ + float: right; + } + } + + %label-styling { + margin-top: var(--form-horizontal-view-fieldset-label-margin-top); + + @media (min-width: $breakpoint) { + float: left; + width: var(--label-column); + padding-right: var(--form-horizontal-view-gap); + } + } + >div { display: block; /* resetting gap as it can not be used within fieldsets */ @@ -31,25 +52,33 @@ form.horizontal-view { /* Adds margin instead of gap */ margin-bottom: var(--form-base-gap); + >* { + @extend %input-styling; + } + + label { + @extend %label-styling; + } - @media (min-width: $breakpoint) { - >* { - width: var(--input-column); - /* resetting gap as it can not be used within fieldsets */ - gap: 0; - /* float objects to move inputs into place even when there is no label */ - float: right; - } + @media (min-width: $breakpoint) { >div { margin-bottom: 0; } + } + + &.notification { + + >div { + width: 100%; + + >* { + @extend %input-styling; + } - label { - float: left; - width: var(--label-column); - padding-right: var(--form-horizontal-view-gap); - margin-top: var(--form-horizontal-view-fieldset-label-margin-top); + label { + @extend %label-styling; + } } } } diff --git a/manon/form-horizontal-view.scss b/manon/form-horizontal-view.scss index 0a6f27eb..dea9d43b 100644 --- a/manon/form-horizontal-view.scss +++ b/manon/form-horizontal-view.scss @@ -6,6 +6,32 @@ form.horizontal-view { $breakpoint: 24rem !default; + /* Form rows */ + %form-row-styling { + display: flex; + flex-direction: row; + align-items: center; + justify-content: var(--form-horizontal-view-justify-content); + flex-wrap: wrap; + gap: var(--form-horizontal-view-group-gap) var(--form-horizontal-view-group-vertical-gap); + margin: 0; + } + + /* Input */ + %input-styling { + @media (min-width: $breakpoint) { + max-width: var(--input-column); + } + } + + /* Label */ + %label-styling { + @media (min-width: $breakpoint) { + width: 100%; + max-width: var(--form-horizontal-view-label-max-width); + } + } + flex-direction: column; gap: var(--form-horizontal-view-gap); flex-wrap: wrap; @@ -20,13 +46,21 @@ form.horizontal-view { >div, >section { - display: flex; - flex-direction: row; - align-items: center; - justify-content: var(--form-horizontal-view-justify-content); - flex-wrap: wrap; - gap: var(--form-horizontal-view-group-gap) var(--form-horizontal-view-group-vertical-gap); - margin: 0; + @extend %form-row-styling; + + >* { + flex-grow: 1; + box-sizing: border-box; + } + + input[type="color"] { + max-width: var(--form-input-color-max-width); + @extend %input-styling; + } + + label { + @extend %label-styling; + } &.checkbox { gap: var(--form-checkbox-margin-right); @@ -97,38 +131,65 @@ form.horizontal-view { } } + >button, + >a.button, + >input[type="button"], + >input[type="submit"], + >input[type="reset"] { + flex-grow: 0; + } + /* Notifications */ - &.error, - &.warning, - &.explanation, - &.confirmation, - &.system { + %notification-styling { flex-direction: var(--form-horizontal-view-notification-block-element-flex-direction); justify-content: var(--form-horizontal-view-notification-block-element-justify-content); align-items: var(--form-horizontal-view-notification-block-element-align-items); gap: var(--form-horizontal-view-notification-block-element-gap); margin: 0; + max-width: var(--input-column); + margin-left: auto; >* { max-width: 100%; } + + +div { + @extend %form-row-styling; + + input { + @extend %input-styling; + } + + label { + @extend %label-styling; + } + } } - input[type="color"] { - max-width: var(--form-input-color-max-width); + &.notification { + flex-wrap: wrap; + + >div { + max-width: 100%; + } } - >* { - flex-grow: 1; - box-sizing: border-box; + /* Block Notifications */ + &.error, + &.warning, + &.explanation, + &.confirmation, + &.system { + @extend %notification-styling; } - >button, - >a.button, - >input[type="button"], - >input[type="submit"], - >input[type="reset"] { - flex-grow: 0; + /* Notifications */ + .error, + .warning, + .explanation, + .confirmation, + .system { + @extend %notification-styling; } @media (min-width: $breakpoint) { @@ -137,11 +198,6 @@ form.horizontal-view { >* { max-width: var(--input-column); } - - label { - width: 100%; - max-width: var(--form-horizontal-view-label-max-width); - } } } diff --git a/manon/notification-block-element.scss b/manon/notification-block-element.scss index 196ae022..513027a9 100644 --- a/manon/notification-block-element.scss +++ b/manon/notification-block-element.scss @@ -5,13 +5,13 @@ div, section { - &.notification, + &.error, &.warning, &.confirmation, &.explanation, &.system { - display: flex; + display: flex; flex-direction: var(--notification-block-element-flex-direction); justify-content: var(--notification-block-element-justify-content); align-items: var(--notification-block-element-align-items); @@ -27,4 +27,4 @@ section { position: var(--notification-block-element-position); color: var(--notification-block-element-text-color); } -} +} \ No newline at end of file diff --git a/manon/notification-form.scss b/manon/notification-form.scss index 6102fb75..c64b3854 100644 --- a/manon/notification-form.scss +++ b/manon/notification-form.scss @@ -5,7 +5,6 @@ form { - div.notification, div.error, div.warning, div.confirmation, @@ -16,8 +15,8 @@ form { padding-right: var(--notification-form-block-padding-right); padding-bottom: var(--notification-form-block-padding-bottom); padding-left: var(--notification-form-block-padding-left); - - > span:first-of-type { + + >span:first-of-type { font-weight: var(--notification-form-span-font-weight); } @@ -34,15 +33,17 @@ form { } } - > div { + >div { + p, span { + /* Message types that come after fields */ &.error { margin-top: var(--notification-form-fields-gap); } - /* Message types that come before fields */ + /* Message types that come before fields */ &.warning, &.confirmation, &.system, @@ -62,15 +63,15 @@ form { &.error:before { content: var(--notification-form-fields-error-icon); } - + &.warning:before { content: var(--notification-form-fields-warning-icon); } - + &.explanation:before { content: var(--notification-form-fields-explanation-icon); } - + &.confirmation:before { content: var(--notification-form-fields-confirmation-icon); } @@ -80,6 +81,7 @@ form { textarea, select, input { + &.error, &.explanation, &.warning, @@ -89,19 +91,19 @@ form { border-style: var(--notification-form-fields-border-style); } - &.error{ + &.error { border-color: var(--notification-form-fields-error-border-color); } - &.explanation{ + &.explanation { border-color: var(--notification-form-fields-explanation-border-color); } - &.warning{ + &.warning { border-color: var(--notification-form-fields-warning-border-color); } - &.confirmation{ + &.confirmation { border-color: var(--notification-form-fields-confirmation-border-color); } @@ -109,4 +111,4 @@ form { border-color: var(--notification-form-fields-system-border-color); } } -} +} \ No newline at end of file diff --git a/manon/notification.scss b/manon/notification.scss index 45d086dc..f15a65fa 100644 --- a/manon/notification.scss +++ b/manon/notification.scss @@ -35,10 +35,6 @@ } } -.notification { - @include notification; -} - /* Icon */ p, span, From e1d351881f4e0820a75e52d1577dcbc83a8ce50d Mon Sep 17 00:00:00 2001 From: Heleen Date: Wed, 7 Jun 2023 14:06:36 +0200 Subject: [PATCH 2/7] Updates notification styling within forms --- .../components/form-base-test.html | 260 +++++++++--------- manon/form-horizontal-view-fieldset.scss | 10 + manon/form-horizontal-view.scss | 45 ++- manon/notification-form.scss | 2 + 4 files changed, 180 insertions(+), 137 deletions(-) diff --git a/docs/documentation/components/form-base-test.html b/docs/documentation/components/form-base-test.html index 46286318..0f326dad 100644 --- a/docs/documentation/components/form-base-test.html +++ b/docs/documentation/components/form-base-test.html @@ -903,8 +903,8 @@

Lorem ipsum dolor set amet

- -
+ +
Toelichting:

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele voorbeelden:

@@ -918,8 +918,8 @@

Lorem ipsum dolor set amet

- @@ -1197,37 +1197,38 @@

Lorem ipsum dolor set amet

type="text">
-
- +
+

+ Foutmelding: Lorem ipsum dolor set amet +

+
+ -

- Foutmelding: Lorem ipsum dolor set amet -

-
- +
+

+ Waarschuwing: Lorem ipsum +

-

- Waarschuwing: Lorem ipsum -

+
-
- +
+

+ Toelichting: Lorem ipsum +

-

- Toelichting: Lorem ipsum -

+ @@ -1257,14 +1258,15 @@

Lorem ipsum dolor set amet

-
- +
+

+ Toelichting: Lorem ipsum dolor set amet. +

+
+ -

- Toelichting: Lorem ipsum dolor set amet. -

@@ -1305,22 +1307,23 @@

Lorem ipsum dolor set amet

-
- +
+
+ Toelichting: +

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele + voorbeelden:

+
    +
  • Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis de + gewenste opties. +
    • +
  • Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de + gewenste opties. +
    • +
+
+
-
- Toelichting: -

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele - voorbeelden:

-
    -
  • Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis de - gewenste opties. -
    • -
  • Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de - gewenste opties. -
    • -
-
+ + + @@ -2081,25 +2085,26 @@

Lorem ipsum dolor set amet

-
- +
+
+ Toelichting: +

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele + voorbeelden:

+
    +
  • Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis + de gewenste opties. +
    • +
  • Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de + gewenste opties. +
    • +
+
+
-
- Toelichting: -

Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele - voorbeelden:

-
    -
  • Windows: Houd de ctrl-knop ingedrukt en selecteer met de muis - de gewenste opties. -
    • -
  • Mac: Houd de cmd-knop ingedrukt en selecteer met de muis de - gewenste opties. -
    • -
-
+ - @@ -2655,52 +2660,55 @@

Lorem ipsum dolor set amet

naam. Lorem ipsum dolor set amet.
-
- +
+
+ -

- Foutmelding: Lorem ipsum dolor set amet -

+

+ Foutmelding: Lorem ipsum dolor set amet +

-
- +
+

+ Toelichting: Lorem ipsum dolor set amet. +

+
-

- Toelichting: Lorem ipsum dolor set amet. -

+
-
- +
+

+ Waarschuwing: Lorem ipsum dolor set amet +

+
-

- Waarschuwing: Lorem ipsum dolor set amet -

+
-
- +
+

+ Toelichting: Lorem ipsum dolor set amet. +

-

- Toelichting: Lorem ipsum dolor set amet. -

+ -

- Foutmelding: Lorem ipsum dolor set amet -

+
+ +
+ +

+ Foutmelding: Lorem ipsum dolor set amet +

+
- -
-

- Toelichting: Lorem ipsum dolor set amet -

- +
+ +
+

+ Toelichting: Lorem ipsum dolor set amet +

+ +
- -
-

- Waarschuwing: Lorem ipsum dolor set amet -

- +
+ +
+

+ Waarschuwing: Lorem ipsum dolor set amet +

+ +
@@ -844,17 +879,19 @@

Lorem ipsum dolor set amet

- -
-

- Foutmelding: Lorem ipsum dolor set amet -

- +
+ +
+

+ Foutmelding: Lorem ipsum dolor set amet +

+ +
@@ -1235,7 +1272,7 @@

Lorem ipsum dolor set amet

-
+
@@ -1246,7 +1283,7 @@

Lorem ipsum dolor set amet

-
+
Dit veld is verplicht
Lorem ipsum dolor set amet
Meldingen - +
+ -
- -

- Foutmelding: Lorem ipsum dolor set amet -

+
+ +

+ Foutmelding: Lorem ipsum dolor set amet +

+
- -
-

- Toelichting: Lorem ipsum dolor set amet -

- +
+ +
+

+ Toelichting: Lorem ipsum dolor set amet +

+ +
- -
-

- Waarschuwing: Lorem ipsum dolor set amet -

- +
+ +
+

+ Waarschuwing: Lorem ipsum dolor set amet +

+ +
@@ -1921,7 +1964,7 @@

Lorem ipsum dolor set amet

Velden met validatie -
+
Lorem ipsum dolor set amet
-
- - +
+ - -

- Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan - minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer. -

+

+ Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan + minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer. +

From 84db540c68c382a1642a19d652b631a07d6bce9a Mon Sep 17 00:00:00 2001 From: Heleen Date: Wed, 7 Jun 2023 22:05:20 +0200 Subject: [PATCH 4/7] Updated form notification styling --- .../components/form-base-test.html | 212 ++++++++-------- .../components/form-notification-test.html | 234 ++++++++++-------- manon/notification-form-variables.scss | 17 +- manon/notification-form.scss | 187 +++++++++----- 4 files changed, 376 insertions(+), 274 deletions(-) diff --git a/docs/documentation/components/form-base-test.html b/docs/documentation/components/form-base-test.html index c9cc5a81..3c2a4b3f 100644 --- a/docs/documentation/components/form-base-test.html +++ b/docs/documentation/components/form-base-test.html @@ -2500,102 +2500,119 @@

Lorem ipsum dolor set amet

ipsum dolor set amet

- -
-

- Toelichting: Lorem ipsum dolor set amet. -

- +
+ +
+

+ Toelichting: Lorem ipsum dolor set amet. +

+ +
- -
-

- Waarschuwing: Lorem ipsum dolor set amet -

- +
+ +
+

+ Waarschuwing: Lorem ipsum dolor set amet +

+ +
- -
-

- Toelichting: Lorem ipsum dolor set amet. -

- +
+ +
+

+ Toelichting: Lorem ipsum dolor set amet. +

+ +
- -
- -

Lorem ipsum dolor set amet.

+
+ +
+ +

Lorem ipsum dolor set amet.

+
- -
- -

- Toelichting: Lorem ipsum dolor set amet. -

+
+ +
+ +

+ Toelichting: Lorem ipsum dolor set amet. +

+
- -
-

- Toelichting: Lorem ipsum dolor set amet. -

- +
+ +
+

+ Toelichting: Lorem ipsum dolor set amet. +

+ +
- -
- -

- Toelichting: Lorem ipsum dolor set amet. -

+
+ +
+ +

+ Toelichting: Lorem ipsum dolor set amet. +

+
+
Radio-selectielijst met reguliere toelichting -

- Toelichting: Lorem ipsum dolor set amet. -

-
-
- - -
-
- - +
+

+ Toelichting: Lorem ipsum dolor set amet. +

+
+
+ + +
+
+ + +
@@ -2603,21 +2620,23 @@

Lorem ipsum dolor set amet

Radio-selectielijst met ingeklapte toelichting -
-
- - -
-
- - +
+
+
+ + +
+
+ + +
+

+ Toelichting: Lorem ipsum dolor set amet. +

-

- Toelichting: Lorem ipsum dolor set amet. -

@@ -2716,10 +2735,6 @@

Lorem ipsum dolor set amet

-

- Toelichting: Lorem ipsum dolor set amet. -

-
@@ -2727,6 +2742,9 @@

Lorem ipsum dolor set amet

name="help-simpel-voorbeeld-text-input-explanation-2" placeholder="Voorbeeld invoerveld toelichting" type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-2-message">
+

+ Toelichting: Lorem ipsum dolor set amet. +

diff --git a/docs/documentation/components/form-notification-test.html b/docs/documentation/components/form-notification-test.html index 590882eb..175e885e 100644 --- a/docs/documentation/components/form-notification-test.html +++ b/docs/documentation/components/form-notification-test.html @@ -47,137 +47,164 @@

Notificatie binnen formulier testpagina

-

Tests

Voorbeelden

-

Het basisvoorbeeld met een invoerveld en een verzendknop.

- -

Notificatie op invoerveld

+

Notificatie onder het invoerveld

Visueel voorbeeld foutmelding:

-
- -

- Foutmelding: Lorem ipsum dolor set amet -

-
+ +

+ Foutmelding: Lorem ipsum dolor set amet +

Html-voorbeeld:

-              
+                        
 <form action="" method="post">
-  <label for="input-error">Input</label>
-  <div>
-    <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
+    <label for="input-error">Input</label>
+    <input id="input-error" class="error" value="Lorem ipsum"
+        aria-describedby="input-error-message" aria-invalid="true">
     <p class="error" id="input-error-message">
         <span>Foutmelding:</span> Lorem ipsum dolor set amet
     </p>
-  </div>
-  <button type="submit">Verzend</button>
+    <button type="submit">Verzend</button>
 </form>
-              
-
+ + +

Notificatie boven het invoerveld

Visueel voorbeeld toelichting:

-
-

- Toelichting: Lorem ipsum dolor set amet -

- + Toelichting: Lorem ipsum dolor set amet +

+ -

Html-voorbeeld:

-              
+                        
 <form action="" method="post">
-  <label for="input-explanation">Input</label>
-  <div>
+    <label for="input-explanation">Input</label>
     <p class="explanation" id="input-explanation-message">
-      <span>Toelichting:</span> Lorem ipsum dolor set amet
+        <span>Toelichting:</span> Lorem ipsum dolor set amet
     </p>
-    <input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
-  </div>
-  <button type="submit">Verzend</button>
+    <input id="input-explanation" class="explanation" value="Lorem ipsum"
+            aria-describedby="input-explanation-message" aria-invalid="true">
+    <button type="submit">Verzend</button>
 </form>
-              
-
+ + +

Link binnen notificatie

Visueel voorbeeld waarschuwing:

- -
-

- Waarschuwing: Lorem ipsum dolor set amet -

- -
+ + +

Html-voorbeeld:

-              
+                        
 <form action="" method="post">
-  <label for="input-warning">Input</label>
-  <div>
-    <p class="warning" id="input-warning-message">
-      <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+    <label for="input-warning-link">Input</label>
+    <input id="input-warning-link" class="warning" value="Lorem ipsum"
+        aria-describedby="input-warning-link-message" aria-invalid="true">
+    <p class="warning" id="input-warning-link-message">
+        <span>Waarschuwing:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
     </p>
-    <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
-  </div>
-  <button type="submit">Verzend</button>
+    <button type="submit">Verzend</button>
+</form>
+                        
+
+ +

Bloknotificatie:

+

Visueel voorbeeld:

+
+ + +
+ Foutmelding: +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.

+
    +
  • Lorem ipsum
    • +
  • Lorem ipsum
    • +
+
+ +
+ +

Html-voorbeeld:

+ 
+                        
+<form action="" method="post">
+    <label for="input-error-block">Input</label>
+    <input id="input-error-block" class="error" value="Lorem ipsum"
+        aria-describedby="input-error-block-message" aria-invalid="true">
+        <div class="error" role="group" aria-label="foutmelding">
+            <span>Foutmelding:</span>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
+            <ul>
+                <li>Lorem ipsum</li>
+                <li>Lorem ipsum</li>
+            </ul>
+            </div>
+    <button type="submit">Verzend</button>
 </form>
-              
-
+ + -

Visueel voorbeeld bevestiging:

+

Span:

+

Visueel voorbeeld:

-
-

+ + Bevestiging: Lorem ipsum dolor set amet -

- -
+

Html-voorbeeld:

-              
+                        
 <form action="" method="post">
-  <label for="input-confirmation">Input</label>
-  <div>
-    <p class="confirmation" id="input-confirmation-message">
-        <span>Bevestiging:</span> Lorem ipsum dolor set amet
-    </p>
-      <input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
-  </div>
-  <button type="submit">Verzend</button>
+    <label for="input-confirmation">Input</label>
+    <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+        aria-describedby="input-confirmation-message" aria-invalid="true">
+        <span class="confirmation" id="input-confirmation-message">
+            <span>Bevestiging:</span> Lorem ipsum dolor set amet
+        </span>
+    <button type="submit">Verzend</button>
 </form>
-              
-
+ + -

Visueel voorbeeld systeembericht

+

Gegroepeerde content met notificatie

+

Let op: Deze opbouw is niet nodig. Dit is enkel een test om te controleren of het visueel goed blijft gaan.

+

Visueel voorbeeld gegroepeerde input en label:

-
-

- Systeembericht: Lorem ipsum dolor set amet -

- + +
+

+ Foutmelding: Lorem ipsum dolor set amet +

@@ -185,49 +212,50 @@

Visueel voorbeeld systeembericht

                         
 <form action="" method="post">
-  <label for="input-system">Input</label>
-  <div>
-    <p class="system" id="input-system-message">
-        <span>Systeembericht:</span> Lorem ipsum dolor set amet
+    <div>
+        <label for="input-error-grouped-label">Input</label>
+        <input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+    </div>
+    <p class="error" id="input-error-grouped-label-message">
+        <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
     </p>
-    <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
-  </div>
-  <button type="submit">Verzend</button>
+    <button type="submit">Verzend</button>
 </form>
-
-

Link binnen notificatie

-

Visueel voorbeeld foutmelding:

+

Visueel voorbeeld gegroepeerde input en notificatie:

- +
- -

+ +

Foutmelding: Lorem ipsum dolor set amet

+

Html-voorbeeld:

-              
+                        
 <form action="" method="post">
-    <label for="input-error">Input</label>
-    <div>
-        <input id="input-error" class="error" value="Lorem ipsum"
-            aria-describedby="input-error-message" aria-invalid="true">
-        <p class="error" id="input-error-message">
-            <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
-        </p>
-    </div>
-    <button type="submit">Verzend</button>
+    <label for="input-error-grouped-notification">Input</label>
+<div>
+    <input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+        aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+    <p class="error" id="input-error-grouped-notification-message">
+        <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+    </p>
+</div>
+
+<button type="submit">Verzend</button>
 </form>
-              
-
+ +
diff --git a/manon/notification-form-variables.scss b/manon/notification-form-variables.scss index 18552a22..6d78fc85 100644 --- a/manon/notification-form-variables.scss +++ b/manon/notification-form-variables.scss @@ -27,9 +27,14 @@ --notification-form-fields-confirmation-border-color: var(--confirmation-border-color); --notification-form-fields-system-border-color: var(--system-border-color); + /* For combined fields and messages */ + --notification-before-message-border-width: 0 1px 1px 1px; + --notification-after-message-border-width: 0 1px 1px 1px; + /* Space between fields and notifications */ /* Please note that the default spacing is --form-base-gap */ - --notification-form-fields-gap: calc(var(--form-group-gap) * -1); + --notification-form-fields-gap: calc(var(--form-base-gap) * -1); + --notification-form-group-gap: calc(var(--form-group-gap) * -1); /* Fields notification icon */ --notification-form-fields-icon-font-family: var(--icon-font-family); @@ -40,17 +45,17 @@ --notification-form-fields-icon-margin-right: 0.5rem; /* Fields notification error icon */ - --notification-form-fields-error-icon: var(--notification-error-icon-content); + --notification-form-fields-error-icon: none; /* Fields notification warning icon */ - --notification-form-fields-warning-icon: var(--notification-warning-icon-content); + --notification-form-fields-warning-icon: none; /* Fields notification explanation icon */ - --notification-form-fields-explanation-icon: var(--notification-explanation-icon-content); + --notification-form-fields-explanation-icon: none; /* Fields notification confirmation icon */ - --notification-form-fields-confirmation-icon: var(--notification-confirmation-icon-content); + --notification-form-fields-confirmation-icon: none; /* Fields notification system icon */ - --notification-form-fields-system-icon: var(--notification-system-icon-content); + --notification-form-fields-system-icon: none; } \ No newline at end of file diff --git a/manon/notification-form.scss b/manon/notification-form.scss index ce5da707..6f14efcd 100644 --- a/manon/notification-form.scss +++ b/manon/notification-form.scss @@ -5,6 +5,107 @@ form { + /* Fields with notifications */ + textarea, + select, + input { + + &.error, + &.explanation, + &.warning, + &.confirmation, + &.system { + border-width: var(--notification-form-fields-border-width); + border-style: var(--notification-form-fields-border-style); + } + + &.error { + border-color: var(--notification-form-fields-error-border-color); + } + + &.explanation { + border-color: var(--notification-form-fields-explanation-border-color); + } + + &.warning { + border-color: var(--notification-form-fields-warning-border-color); + } + + &.confirmation { + border-color: var(--notification-form-fields-confirmation-border-color); + } + + &.system { + border-color: var(--notification-form-fields-system-border-color); + } + } + + /* Icons */ + .error, + .explanation, + .warning, + .confirmation, + .system { + &:before { + font-family: var(--notification-form-fields-icon-font-family); + font-size: var(--notification-form-fields-icon-font-size); + padding-right: var(--notification-form-fields-icon-padding-right); + padding-left: var(--notification-form-fields-icon-padding-left); + color: var(--notification-form-fields-icon-text-color); + margin-right: var(--notification-form-fields-icon-margin-right); + } + + &.error:before { + content: var(--notification-form-fields-error-icon); + } + + &.warning:before { + content: var(--notification-form-fields-warning-icon); + } + + &.explanation:before { + content: var(--notification-form-fields-explanation-icon); + } + + &.confirmation:before { + content: var(--notification-form-fields-confirmation-icon); + } + } + + /* The option to connect the input fields and notifications */ + /* Message above input */ + .error, + .warning, + .confirmation, + .explanation, + .system { + + + +input, + +select, + +textarea { + margin-top: var(--notification-form-fields-gap); + border-width: var(--notification-before-message-border-width); + } + + } + + /* Message below input */ + input, + select, + textarea { + + +.error, + +.warning, + +.confirmation, + +.explanation, + +.system { + margin-top: var(--notification-form-fields-gap); + border-width: var(--notification-after-message-border-width); + } + } + + /* Block notification */ div.error, div.warning, div.confirmation, @@ -18,6 +119,7 @@ form { flex-direction: column; align-items: flex-start; + >span:first-of-type { font-weight: var(--notification-form-span-font-weight); } @@ -37,80 +139,29 @@ form { >div { - p, - span { - - /* Message types that come after fields */ - &.error { - margin-top: var(--notification-form-fields-gap); - } - - /* Message types that come before fields */ - &.warning, - &.confirmation, - &.system, - &.explanation { - margin-bottom: var(--notification-form-fields-gap); - } - - &:before { - font-family: var(--notification-form-fields-icon-font-family); - font-size: var(--notification-form-fields-icon-font-size); - padding-right: var(--notification-form-fields-icon-padding-right); - padding-left: var(--notification-form-fields-icon-padding-left); - color: var(--notification-form-fields-icon-text-color); - margin-right: var(--notification-form-fields-icon-margin-right); - } + .error, + .warning, + .confirmation, + .explanation, + .system { - &.error:before { - content: var(--notification-form-fields-error-icon); + +input, + +textarea { + margin-top: var(--notification-form-group-gap); } - &.warning:before { - content: var(--notification-form-fields-warning-icon); - } - - &.explanation:before { - content: var(--notification-form-fields-explanation-icon); - } - - &.confirmation:before { - content: var(--notification-form-fields-confirmation-icon); - } - } - } - - textarea, - select, - input { - - &.error, - &.explanation, - &.warning, - &.confirmation, - &.system { - border-width: var(--notification-form-fields-border-width); - border-style: var(--notification-form-fields-border-style); } - &.error { - border-color: var(--notification-form-fields-error-border-color); - } + input, + textarea { - &.explanation { - border-color: var(--notification-form-fields-explanation-border-color); - } - - &.warning { - border-color: var(--notification-form-fields-warning-border-color); - } - - &.confirmation { - border-color: var(--notification-form-fields-confirmation-border-color); - } - - &.system { - border-color: var(--notification-form-fields-system-border-color); + +.error, + +.warning, + +.confirmation, + +.explanation, + +.system { + margin-top: var(--notification-form-group-gap); + } } } } \ No newline at end of file From 63e9e66234f09addd9bfc99dcbd6b1afff93c62f Mon Sep 17 00:00:00 2001 From: Heleen Date: Wed, 7 Jun 2023 23:12:45 +0200 Subject: [PATCH 5/7] Adds fieldset notification behaviour --- .../form-fieldset-notification-test.html | 310 ++++++++++++++++++ .../form-fieldset-notification.html | 262 +++++++++++++++ .../components/form-notification.html | 104 +++--- docs/documentation/components/forms.html | 1 + manon/form-fieldset-variables.scss | 12 +- manon/form-fieldset.scss | 38 ++- manon/notification-form-variables.scss | 4 +- manon/notification-form.scss | 5 +- 8 files changed, 666 insertions(+), 70 deletions(-) create mode 100644 docs/documentation/components/form-fieldset-notification-test.html create mode 100644 docs/documentation/components/form-fieldset-notification.html diff --git a/docs/documentation/components/form-fieldset-notification-test.html b/docs/documentation/components/form-fieldset-notification-test.html new file mode 100644 index 00000000..29483ed9 --- /dev/null +++ b/docs/documentation/components/form-fieldset-notification-test.html @@ -0,0 +1,310 @@ + + + + + + Notificatie binnen formulier met fieldsets + + + + + + + +
+ + + + + +
+ +
+
+
+
+

Notificatie binnen formulier met fieldsets testpagina

+

Overzicht van het element in mogelijke structuren om te testen.

+
+ +
+

Voorbeelden

+

Notificatie onder het invoerveld

+

Visueel voorbeeld foutmelding:

+
+
+ Lorem ipsum + + +

+ Foutmelding: Lorem ipsum dolor set amet +

+
+ + +
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-error">Input</label>
+        <input id="input-error" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-message" aria-invalid="true">
+        <p class="error" id="input-error-message">
+            <span>Foutmelding:</span> Lorem ipsum dolor set amet
+        </p>
+    </fieldset>
+    
+    <button type="submit">Verzend</button>
+</form>
+                            
+
+ +

Notificatie boven het invoerveld

+

Visueel voorbeeld toelichting:

+
+
+ Lorem ipsum + +

+ Toelichting: Lorem ipsum dolor set amet +

+ +
+ +
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-explanation">Input</label>
+        <p class="explanation" id="input-explanation-message">
+            <span>Toelichting:</span> Lorem ipsum dolor set amet
+        </p>
+        <input id="input-explanation" class="explanation" value="Lorem ipsum"
+                aria-describedby="input-explanation-message" aria-invalid="true">
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
+ +

Link binnen notificatie

+

Visueel voorbeeld waarschuwing:

+
+
+ Lorem ipsum + + + +
+ +
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-warning-link">Input</label>
+        <input id="input-warning-link" class="warning" value="Lorem ipsum"
+            aria-describedby="input-warning-link-message" aria-invalid="true">
+        <p class="warning" id="input-warning-link-message">
+            <span>Waarschuwing:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+        </p>
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
+ +

Bloknotificatie:

+

Visueel voorbeeld:

+
+
+ Lorem ipsum + + +
+ Foutmelding: +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.

+
    +
  • Lorem ipsum
    • +
  • Lorem ipsum
    • +
+
+
+ +
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-error-block">Input</label>
+        <input id="input-error-block" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-block-message" aria-invalid="true">
+            <div class="error" role="group" aria-label="foutmelding">
+                <span>Foutmelding:</span>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
+                <ul>
+                <li>Lorem ipsum</li>
+                <li>Lorem ipsum</li>
+                </ul>
+            </div>
+        </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
+ +

Span:

+

Visueel voorbeeld:

+
+
+ Lorem ipsum + + + + Bevestiging: Lorem ipsum dolor set amet + + +
+
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-confirmation">Input</label>
+        <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+            aria-describedby="input-confirmation-message" aria-invalid="true">
+            <span class="confirmation" id="input-confirmation-message">
+                <span>Bevestiging:</span> Lorem ipsum dolor set amet
+            </span>
+        <button type="submit">Verzend</button>
+    </fieldset>
+</form>
+                            
+
+ +

Gegroepeerde content met notificatie

+

Let op: Deze opbouw is niet nodig. Dit is enkel een test om te controleren of het visueel goed blijft gaan.

+

Visueel voorbeeld gegroepeerde input en label:

+
+
+ Lorem ipsum +
+ + +
+

+ Foutmelding: Lorem ipsum dolor set amet +

+
+ +
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <div>
+            <label for="input-error-grouped-label">Input</label>
+            <input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+        </div>
+        <p class="error" id="input-error-grouped-label-message">
+            <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+        </p>
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
+ +

Visueel voorbeeld gegroepeerde input en notificatie:

+
+
+ Lorem ipsum + +
+ +

+ Foutmelding: Lorem ipsum dolor set amet +

+
+
+ + +
+ +

Html-voorbeeld:

+ 
+                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-error-grouped-notification">Input</label>
+        <div>
+            <input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+            <p class="error" id="input-error-grouped-notification-message">
+                <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+            </p>
+        </div>
+    </fieldset>
+
+    <button type="submit">Verzend</button>
+</form>
+                            
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/documentation/components/form-fieldset-notification.html b/docs/documentation/components/form-fieldset-notification.html new file mode 100644 index 00000000..57f6cda7 --- /dev/null +++ b/docs/documentation/components/form-fieldset-notification.html @@ -0,0 +1,262 @@ + + + + + + Notificatie binnen een formulier met fieldsets + + + + + + + +
+ + + + + +
+ +
+ +
+
+
+

Notificatie binnen een formulier met fieldsets

+ +

Benodigde stappen:

+
    +
  1. + Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde + en optionele bestanden zie: + Bijbehorende bestanden. +
    2. +
  2. Voeg de benodigde HTML toe. Voor meer informatie zie Voorbeelden
    3. +
+ +

Aandachtspunten:

+
    +
  • Let op: visuele feedback op het invoerveld is op zichzelf onvoldoende om toegankelijkheid en een goede + gebruikerservaring te waarborgen.
    • +
  • Vertel de gebruiker altijd wat de vervolgstappen zijn die zij kunnen nemen om het probleem op te lossen + of om zelf verder te kunnen.
    • +
  • Voeg de class toe met het type melding op het invoerveld om gebruik te maken van visuele feedback direct + op het invoerveld. Voorbeeld: class="error".
    • +
  • Voeg voor screenreader gebruikers aria-invalid="true" toe aan invoervelden met een error. + In de HTML-voorbeelden is dit meegenomen.
    • +
  • Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, zodat de gebruiker + eerst de toelichtig leest en daarna het bijbehorende invoerveld tegenkomt. Hierdoor weet de gebruiker hoe + het invoerveld ingevuld dient te worden voordat deze gepresenteerd wordt. Uitzondering hierop zijn + toelichtingsteksten die de gebruiker zelf activeert door middel van de hulpknop. Die teksten worden onder + het gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de gebruiker + interactie mee heeft zo min mogelijk verspringt.
    • +
  • Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker eerst te zien krijgt + wat de context van de foutmelding is. Dit maakt het begrijpen van de foutmelding toegankelijker.
    • +
  • Voor meer informatie over beschikbare notificatie-types en het gebruik zie: Notificaties.
    • +
+
+ +
+

Voorbeelden

+

Het basisvoorbeeld met een invoerveld en een verzendknop.

+ +

Notificatie op invoerveld

+

Visueel voorbeeld foutmelding:

+
+ + +

+ Foutmelding: Lorem ipsum dolor set amet +

+ +
+ +

Html-voorbeeld:

+ 
+              
+<form action="" method="post">
+    <label for="input-error">Input</label>
+    <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
+    <p class="error" id="input-error-message">
+        <span>Foutmelding:</span> Lorem ipsum dolor set amet
+    </p>
+    <button type="submit">Verzend</button>
+</form>
+              
+
+ +

Visueel voorbeeld toelichting:

+
+ +

+ Toelichting: Lorem ipsum dolor set amet +

+ + +
+ +

Html-voorbeeld:

+ 
+              
+<form action="" method="post">
+    <label for="input-explanation">Input</label>
+    <p class="explanation" id="input-explanation-message">
+        <span>Toelichting:</span> Lorem ipsum dolor set amet
+    </p>
+    <input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
+    <button type="submit">Verzend</button>
+</form>
+              
+
+ +

Visueel voorbeeld waarschuwing:

+
+ +

+ Waarschuwing: Lorem ipsum dolor set amet +

+ + +
+ +

Html-voorbeeld:

+ 
+              
+<form action="" method="post">
+    <label for="input-warning">Input</label>
+    <p class="warning" id="input-warning-message">
+        <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+    </p>
+    <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
+    <button type="submit">Verzend</button>
+</form>
+              
+
+ +

Visueel voorbeeld bevestiging:

+
+ +

+ Bevestiging: Lorem ipsum dolor set amet +

+ + +
+ +

Html-voorbeeld:

+ 
+              
+<form action="" method="post">
+    <label for="input-confirmation">Input</label>
+    <p class="confirmation" id="input-confirmation-message">
+        <span>Bevestiging:</span> Lorem ipsum dolor set amet
+    </p>
+    <input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
+    <button type="submit">Verzend</button>
+</form>
+              
+
+ +

Visueel voorbeeld systeembericht

+
+ +

+ Systeembericht: Lorem ipsum dolor set amet +

+ + +
+ +

Html-voorbeeld:

+ 
+              
+<form action="" method="post">
+    <label for="input-system">Input</label>
+    <p class="system" id="input-system-message">
+        <span>Systeembericht:</span> Lorem ipsum dolor set amet
+    </p>
+    <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
+    <button type="submit">Verzend</button>
+</form>
+    
+              
+
+
+ +
+

Bijbehorende bestanden

+

+ Voor meer informatie over importeren en instellen van componenten. Zie: + Componenten gebruiken en styling toevoegen +

+ +

Gerelateerd:

+
    +
  • Voor meer informatie over beschikbare notificatie-types en het gebruik zie: Notificaties.
    • +
+ +

Importeer component via NPM

+ +

CSS-voorbeeld:

+ 
+              
+/* Notification base component */
+@use "@minvws/manon/notification";
+
+/* Notification types, import what is needed */
+@use "@minvws/manon/notification-block-element";
+@use "@minvws/manon/notification-paragraph";
+@use "@minvws/manon/notification-table";
+@use "@minvws/manon/notification-error";
+@use "@minvws/manon/notification-warning";
+@use "@minvws/manon/notification-explanation";
+@use "@minvws/manon/notification-confirmation";
+@use "@minvws/manon/notification-system-message";
+              
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/docs/documentation/components/form-notification.html b/docs/documentation/components/form-notification.html index 9337dd46..31a1bcb3 100644 --- a/docs/documentation/components/form-notification.html +++ b/docs/documentation/components/form-notification.html @@ -74,11 +74,11 @@

Aandachtspunten:

  • Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, zodat de gebruiker eerst de toelichtig leest en daarna het bijbehorende invoerveld tegenkomt. Hierdoor weet de gebruiker hoe het invoerveld ingevuld dient te worden voordat deze gepresenteerd wordt. Uitzondering hierop zijn - toelichtingsteksten die de gerbruiker zelf activeert door middel van de hulpknop. Die teksten worden onder + toelichtingsteksten die de gebruiker zelf activeert door middel van de hulpknop. Die teksten worden onder het gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de gebruiker interactie mee heeft zo min mogelijk verspringt.
  • Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker eerst te zien krijgt - wat de context van de foutmelding is wat het begrijpen van de foutmelding toegankelijker maakt.
    • + wat de context van de foutmelding is. Dit maakt het begrijpen van de foutmelding toegankelijker.
  • Voor meer informatie over beschikbare notificatie-types en het gebruik zie: Notificaties.
    • @@ -92,13 +92,11 @@

    Notificatie op invoerveld

    Visueel voorbeeld foutmelding:

    -
    - -

    - Foutmelding: Lorem ipsum dolor set amet -

    -
    + +

    + Foutmelding: Lorem ipsum dolor set amet +

    @@ -107,12 +105,10 @@

    Visueel voorbeeld foutmelding:

    <form action="" method="post"> <label for="input-error">Input</label> - <div> <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true"> <p class="error" id="input-error-message"> <span>Foutmelding:</span> Lorem ipsum dolor set amet </p> - </div> <button type="submit">Verzend</button> </form> @@ -121,13 +117,11 @@

    Visueel voorbeeld foutmelding:

    Visueel voorbeeld toelichting:

    -
    -

    - Toelichting: Lorem ipsum dolor set amet -

    - -
    +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    @@ -136,12 +130,10 @@

    Visueel voorbeeld toelichting:

    <form action="" method="post"> <label for="input-explanation">Input</label> - <div> - <p class="explanation" id="input-explanation-message"> - <span>Toelichting:</span> Lorem ipsum dolor set amet - </p> - <input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true"> - </div> + <p class="explanation" id="input-explanation-message"> + <span>Toelichting:</span> Lorem ipsum dolor set amet + </p> + <input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true"> <button type="submit">Verzend</button> </form> @@ -150,13 +142,11 @@

    Visueel voorbeeld toelichting:

    Visueel voorbeeld waarschuwing:

    -
    -

    - Waarschuwing: Lorem ipsum dolor set amet -

    - -
    +

    + Waarschuwing: Lorem ipsum dolor set amet +

    +
    @@ -165,12 +155,10 @@

    Visueel voorbeeld waarschuwing:

    <form action="" method="post"> <label for="input-warning">Input</label> - <div> - <p class="warning" id="input-warning-message"> - <span>Waarschuwing:</span> Lorem ipsum dolor set amet - </p> - <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true"> - </div> + <p class="warning" id="input-warning-message"> + <span>Waarschuwing:</span> Lorem ipsum dolor set amet + </p> + <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true"> <button type="submit">Verzend</button> </form> @@ -179,13 +167,11 @@

    Visueel voorbeeld waarschuwing:

    Visueel voorbeeld bevestiging:

    -
    -

    - Bevestiging: Lorem ipsum dolor set amet -

    - -
    +

    + Bevestiging: Lorem ipsum dolor set amet +

    +
    @@ -194,12 +180,10 @@

    Visueel voorbeeld bevestiging:

    <form action="" method="post"> <label for="input-confirmation">Input</label> - <div> - <p class="confirmation" id="input-confirmation-message"> - <span>Bevestiging:</span> Lorem ipsum dolor set amet - </p> - <input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true"> - </div> + <p class="confirmation" id="input-confirmation-message"> + <span>Bevestiging:</span> Lorem ipsum dolor set amet + </p> + <input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true"> <button type="submit">Verzend</button> </form> @@ -208,13 +192,11 @@

    Visueel voorbeeld bevestiging:

    Visueel voorbeeld systeembericht

    -
    -

    - Systeembericht: Lorem ipsum dolor set amet -

    - + Systeembericht: Lorem ipsum dolor set amet +

    + -
    @@ -223,12 +205,10 @@

    Visueel voorbeeld systeembericht

    <form action="" method="post"> <label for="input-system">Input</label> - <div> - <p class="system" id="input-system-message"> - <span>Systeembericht:</span> Lorem ipsum dolor set amet - </p> - <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true"> - </div> + <p class="system" id="input-system-message"> + <span>Systeembericht:</span> Lorem ipsum dolor set amet + </p> + <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true"> <button type="submit">Verzend</button> </form> diff --git a/docs/documentation/components/forms.html b/docs/documentation/components/forms.html index c8234775..7e3a07b4 100644 --- a/docs/documentation/components/forms.html +++ b/docs/documentation/components/forms.html @@ -91,6 +91,7 @@

    Fieldset

  • Onzichtbare fieldset
  • Fieldset radio-selecteerknop - radio
  • Fieldset selectievak - checkbox
    • +
  • Notificatie
    • diff --git a/manon/form-fieldset-variables.scss b/manon/form-fieldset-variables.scss index b37e94a3..4e9ebb8e 100644 --- a/manon/form-fieldset-variables.scss +++ b/manon/form-fieldset-variables.scss @@ -3,9 +3,17 @@ /*---------------------------------------------------------------*/ :root { /* Fields within the fieldset */ - --form-fieldset-fields-margin-top: var(--application-base-gap, 1rem); + --form-fieldset-fields-gap: var(--application-base-gap, 1rem); + + /* Spacing between notifications and fields */ + --form-fieldset-notification-before-gap: 0; + --form-fieldset-notification-after-gap: 0; + + /* For combined fields and messages */ + --form-fieldset-field-after-notification-border-width: 0 1px 1px 1px; + --form-fieldset-notification-after-field-border-width: 0 1px 1px 1px; /* Legend */ --form-fieldset-legend-font-weight: var(--headings-font-weight, bold); --form-fieldset-legend-margin-bottom: var(--application-base-gap, 1rem); -} +} \ No newline at end of file diff --git a/manon/form-fieldset.scss b/manon/form-fieldset.scss index 932a20c7..ae0e315c 100644 --- a/manon/form-fieldset.scss +++ b/manon/form-fieldset.scss @@ -46,6 +46,42 @@ form { } /* Notifications */ + + /* The option to connect the input fields and notifications */ + /* Message above input */ + .error, + .warning, + .confirmation, + .explanation, + .system { + margin-bottom: 0; + + +input, + +select, + +textarea { + margin: 0; + margin-top: var(--form-fieldset-notification-before-gap); + border-width: var(--form-fieldset-field-after-notification-border-width); + } + + } + + /* Message below input */ + input, + select, + textarea { + + +.error, + +.warning, + +.confirmation, + +.explanation, + +.system { + margin: 0; + margin-top: var(--form-fieldset-notification-after-gap); + border-width: var(--form-fieldset-notification-after-field-border-width); + } + } + >div { &.error, @@ -63,7 +99,7 @@ form { /* Fieldsets within fieldsets ignore the "*" all selector */ >*, >fieldset { - margin-bottom: var(--form-fieldset-fields-margin-top); + margin-bottom: var(--form-fieldset-fields-gap); &:last-child { margin-bottom: 0; diff --git a/manon/notification-form-variables.scss b/manon/notification-form-variables.scss index 6d78fc85..90834853 100644 --- a/manon/notification-form-variables.scss +++ b/manon/notification-form-variables.scss @@ -28,8 +28,8 @@ --notification-form-fields-system-border-color: var(--system-border-color); /* For combined fields and messages */ - --notification-before-message-border-width: 0 1px 1px 1px; - --notification-after-message-border-width: 0 1px 1px 1px; + --notification-field-after-notification-border-width: 0 1px 1px 1px; + --notification-after-field-border-width: 0 1px 1px 1px; /* Space between fields and notifications */ /* Please note that the default spacing is --form-base-gap */ diff --git a/manon/notification-form.scss b/manon/notification-form.scss index 6f14efcd..35f41426 100644 --- a/manon/notification-form.scss +++ b/manon/notification-form.scss @@ -80,12 +80,11 @@ form { .explanation, .system { - +input, +select, +textarea { margin-top: var(--notification-form-fields-gap); - border-width: var(--notification-before-message-border-width); + border-width: var(--notification-field-after-notification-border-width); } } @@ -101,7 +100,7 @@ form { +.explanation, +.system { margin-top: var(--notification-form-fields-gap); - border-width: var(--notification-after-message-border-width); + border-width: var(--notification-after-field-border-width); } } From f8ead5814355ee84bd623d89d235ee905c511d25 Mon Sep 17 00:00:00 2001 From: Heleen Date: Thu, 8 Jun 2023 11:20:15 +0200 Subject: [PATCH 6/7] Adds tests --- .../form-fieldset-notification-test.html | 66 +++++++++++++++++++ .../components/form-notification-test.html | 60 +++++++++++++++++ manon/form-fieldset-variables.scss | 2 + manon/form-fieldset.scss | 1 + 4 files changed, 129 insertions(+) diff --git a/docs/documentation/components/form-fieldset-notification-test.html b/docs/documentation/components/form-fieldset-notification-test.html index 29483ed9..23ae9235 100644 --- a/docs/documentation/components/form-fieldset-notification-test.html +++ b/docs/documentation/components/form-fieldset-notification-test.html @@ -116,6 +116,72 @@

    Visueel voorbeeld toelichting:

     +

    Notificatie boven checkbox

    +

    Visueel voorbeeld toelichting:

    +
    +
    + Lorem ipsum +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    + + +
    +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <p class="explanation" id="checkbox-explanation">
+            <span>Toelichting:</span> Lorem ipsum dolor set amet
+        </p>
+        <div class="checkbox">
+            <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+            <label for="checkbox-explanation">Lorem ipsum</label>
+        </div>
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Notificatie boven radio-button

    +

    Visueel voorbeeld toelichting:

    +
    +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    + + +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <p class="explanation" id="radio-explanation-message">
+        <span>Toelichting:</span> Lorem ipsum dolor set amet
+    </p>
+    <div class="radio">
+        <input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+            aria-describedby="radio-explanation-message">
+        <label for="radio-explanation">Optie 1</label>
+        </div>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    +

    Link binnen notificatie

    Visueel voorbeeld waarschuwing:

    diff --git a/docs/documentation/components/form-notification-test.html b/docs/documentation/components/form-notification-test.html index 175e885e..c354c7fe 100644 --- a/docs/documentation/components/form-notification-test.html +++ b/docs/documentation/components/form-notification-test.html @@ -102,6 +102,66 @@

    Visueel voorbeeld toelichting:

    +

    Notificatie boven checkbox

    +

    Visueel voorbeeld toelichting:

    + +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    + + +
    + +
    + +

    Html-voorbeeld:

    + 
    +                        
+<form action="" method="post">
+    <p class="explanation" id="checkbox-explanation">
+        <span>Toelichting:</span> Lorem ipsum dolor set amet
+    </p>
+    <div class="checkbox">
+        <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+        <label for="checkbox-explanation">Lorem ipsun</label>
+        </div>
+    <button type="submit">Verzend</button>
+</form>
+                        
+
    + +

    Notificatie boven radio-button

    +

    Visueel voorbeeld toelichting:

    +
    +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    + + +
    + +
    + +

    Html-voorbeeld:

    + 
    +                        
+<form action="" method="post">
+    <p class="explanation" id="radio-explanation-message">
+        <span>Toelichting:</span> Lorem ipsum dolor set amet
+    </p>
+    <div class="radio">
+        <input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+            aria-describedby="radio-explanation-message">
+        <label for="radio-explanation">Optie 1</label>
+        </div>
+    <button type="submit">Verzend</button>
+</form>
+                        
+
    +

    Link binnen notificatie

    Visueel voorbeeld waarschuwing:

    diff --git a/manon/form-fieldset-variables.scss b/manon/form-fieldset-variables.scss index 4e9ebb8e..41d94884 100644 --- a/manon/form-fieldset-variables.scss +++ b/manon/form-fieldset-variables.scss @@ -2,6 +2,8 @@ /*----------------- form-fieldset-variables.scss ----------------*/ /*---------------------------------------------------------------*/ :root { + --form-fieldset-margin: 0; + /* Fields within the fieldset */ --form-fieldset-fields-gap: var(--application-base-gap, 1rem); diff --git a/manon/form-fieldset.scss b/manon/form-fieldset.scss index ae0e315c..eb2149f7 100644 --- a/manon/form-fieldset.scss +++ b/manon/form-fieldset.scss @@ -23,6 +23,7 @@ main article form, main div form, form { >fieldset { + margin: var(--form-fieldset-margin); legend { font-weight: var(--form-fieldset-legend-font-weight); From 5ccb200b0e745a594b574667762b3289ac66a143 Mon Sep 17 00:00:00 2001 From: Heleen Date: Mon, 12 Jun 2023 13:05:22 +0200 Subject: [PATCH 7/7] Updated documentation --- ...set-horizontal-view-notification-test.html | 376 ++++++++++++++++++ docs/documentation/components/forms.html | 114 ++++-- 2 files changed, 450 insertions(+), 40 deletions(-) create mode 100644 docs/documentation/components/form-fieldset-horizontal-view-notification-test.html diff --git a/docs/documentation/components/form-fieldset-horizontal-view-notification-test.html b/docs/documentation/components/form-fieldset-horizontal-view-notification-test.html new file mode 100644 index 00000000..23ae9235 --- /dev/null +++ b/docs/documentation/components/form-fieldset-horizontal-view-notification-test.html @@ -0,0 +1,376 @@ + + + + + + Notificatie binnen formulier met fieldsets + + + + + + + +
    + + + + + +
    + +
    +
    +
    +
    +

    Notificatie binnen formulier met fieldsets testpagina

    +

    Overzicht van het element in mogelijke structuren om te testen.

    +
    + +
    +

    Voorbeelden

    +

    Notificatie onder het invoerveld

    +

    Visueel voorbeeld foutmelding:

    + +
    + Lorem ipsum + + +

    + Foutmelding: Lorem ipsum dolor set amet +

    +
    + + + + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-error">Input</label>
+        <input id="input-error" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-message" aria-invalid="true">
+        <p class="error" id="input-error-message">
+            <span>Foutmelding:</span> Lorem ipsum dolor set amet
+        </p>
+    </fieldset>
+    
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Notificatie boven het invoerveld

    +

    Visueel voorbeeld toelichting:

    +
    +
    + Lorem ipsum + +

    + Toelichting: Lorem ipsum dolor set amet +

    + +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-explanation">Input</label>
+        <p class="explanation" id="input-explanation-message">
+            <span>Toelichting:</span> Lorem ipsum dolor set amet
+        </p>
+        <input id="input-explanation" class="explanation" value="Lorem ipsum"
+                aria-describedby="input-explanation-message" aria-invalid="true">
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Notificatie boven checkbox

    +

    Visueel voorbeeld toelichting:

    +
    +
    + Lorem ipsum +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    + + +
    +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <p class="explanation" id="checkbox-explanation">
+            <span>Toelichting:</span> Lorem ipsum dolor set amet
+        </p>
+        <div class="checkbox">
+            <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+            <label for="checkbox-explanation">Lorem ipsum</label>
+        </div>
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Notificatie boven radio-button

    +

    Visueel voorbeeld toelichting:

    +
    +

    + Toelichting: Lorem ipsum dolor set amet +

    +
    + + +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <p class="explanation" id="radio-explanation-message">
+        <span>Toelichting:</span> Lorem ipsum dolor set amet
+    </p>
+    <div class="radio">
+        <input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+            aria-describedby="radio-explanation-message">
+        <label for="radio-explanation">Optie 1</label>
+        </div>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Link binnen notificatie

    +

    Visueel voorbeeld waarschuwing:

    +
    +
    + Lorem ipsum + + + +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-warning-link">Input</label>
+        <input id="input-warning-link" class="warning" value="Lorem ipsum"
+            aria-describedby="input-warning-link-message" aria-invalid="true">
+        <p class="warning" id="input-warning-link-message">
+            <span>Waarschuwing:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+        </p>
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Bloknotificatie:

    +

    Visueel voorbeeld:

    +
    +
    + Lorem ipsum + + +
    + Foutmelding: +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.

    +
      +
    • Lorem ipsum
      • +
    • Lorem ipsum
      • +
    +
    +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-error-block">Input</label>
+        <input id="input-error-block" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-block-message" aria-invalid="true">
+            <div class="error" role="group" aria-label="foutmelding">
+                <span>Foutmelding:</span>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
+                <ul>
+                <li>Lorem ipsum</li>
+                <li>Lorem ipsum</li>
+                </ul>
+            </div>
+        </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Span:

    +

    Visueel voorbeeld:

    +
    +
    + Lorem ipsum + + + + Bevestiging: Lorem ipsum dolor set amet + + +
    +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-confirmation">Input</label>
+        <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+            aria-describedby="input-confirmation-message" aria-invalid="true">
+            <span class="confirmation" id="input-confirmation-message">
+                <span>Bevestiging:</span> Lorem ipsum dolor set amet
+            </span>
+        <button type="submit">Verzend</button>
+    </fieldset>
+</form>
+                            
+
    + +

    Gegroepeerde content met notificatie

    +

    Let op: Deze opbouw is niet nodig. Dit is enkel een test om te controleren of het visueel goed blijft gaan.

    +

    Visueel voorbeeld gegroepeerde input en label:

    +
    +
    + Lorem ipsum +
    + + +
    +

    + Foutmelding: Lorem ipsum dolor set amet +

    +
    + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <div>
+            <label for="input-error-grouped-label">Input</label>
+            <input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+        </div>
+        <p class="error" id="input-error-grouped-label-message">
+            <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+        </p>
+    </fieldset>
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    + +

    Visueel voorbeeld gegroepeerde input en notificatie:

    +
    +
    + Lorem ipsum + +
    + +

    + Foutmelding: Lorem ipsum dolor set amet +

    +
    +
    + + +
    + +

    Html-voorbeeld:

    + 
    +                            
+<form action="" method="post">
+    <fieldset>
+        <legend>Lorem ipsum</legend>
+        <label for="input-error-grouped-notification">Input</label>
+        <div>
+            <input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+            <p class="error" id="input-error-grouped-notification-message">
+                <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+            </p>
+        </div>
+    </fieldset>
+
+    <button type="submit">Verzend</button>
+</form>
+                            
+
    +
    + +
    +
    +
    + + + \ No newline at end of file diff --git a/docs/documentation/components/forms.html b/docs/documentation/components/forms.html index 7e3a07b4..6a639a09 100644 --- a/docs/documentation/components/forms.html +++ b/docs/documentation/components/forms.html @@ -45,83 +45,117 @@

    Formulieren

    Beschikbare weergaven

    -