fix(styles): Make styling more coherent for forms elements with High contrast mode and focus/hover state

.changeset/shy-peas-count-2.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Introduced new focus style for text input and select, and added new wrapper element `.focus-control-wrapper`, `.form-range-wrapper`, `.form-select-wrapper`.

.changeset/shy-peas-count.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Made styling more coherent for forms elements with High contrast mode and focus/hover state.

packages/documentation/.storybook/styles/preview.scss

@@ -70,7 +70,9 @@
 
     // General styles for content
     a {
-      @include utilities.focus-style();
+      @include utilities.focus-style() {
+        border-radius: post.$border-radius;
+      }
     }
 
     // Style buttons related to the current page next to the tile

packages/documentation/src/shared/tile/tile.component.scss

@@ -7,7 +7,9 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
 
 :host{
   a {
-    @include utilities.focus-style();
+    @include utilities.focus-style() {
+      border-radius: post.$border-radius;
+    }
   }
 
   .tile {

packages/documentation/src/stories/components/datepicker/datepicker-floating-label.sample.html

@@ -1,4 +1,4 @@
-<div class="form-floating">
+<div class="form-control-wrapper form-floating">
   <input
     #d="ngbDatepicker"
     class="form-control"

packages/documentation/src/stories/components/datepicker/datepicker-navigation-arrows.sample.html

@@ -1,4 +1,4 @@
-<div class="position-relative">
+<div class="form-control-wrapper position-relative">
   <input
     #d="ngbDatepicker"
     navigation="arrows"

packages/documentation/src/stories/components/datepicker/datepicker-validation.sample.html

@@ -1,4 +1,4 @@
-<div class="position-relative">
+<div class="form-control-wrapper position-relative">
   <input
     #d="ngbDatepicker"
     aria-label="Datepicker"

packages/documentation/src/stories/components/forms/input/input.stories.ts

@@ -226,10 +226,14 @@ function render(args: Args, context: StoryContext) {
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
+      <div class="form-control-wrapper form-floating">
+        ${[control, label, ...contextual].filter(el => el !== null)}
+      </div>
     `;
   } else {
-    return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
+    return html`<div class="form-control-wrapper">
+      ${[label, control, ...contextual].filter(el => el !== null)}
+    </div>`;
   }
 }
 

packages/documentation/src/stories/components/forms/select/select.stories.ts

@@ -278,12 +278,14 @@ const Template: Story = {
 
     if (args.floatingLabel) {
       return html`
-        <div class="form-floating">
+        <div class="form-select-wrapper form-floating">
           ${[control, label, ...contextuals].filter(el => el !== null)}
         </div>
       `;
     } else {
-      return html` ${[label, control, ...contextuals].filter(el => el !== null)} `;
+      return html`<div class="form-select-wrapper">
+        ${[label, control, ...contextuals].filter(el => el !== null)}
+      </div>`;
     }
   },
 };

packages/documentation/src/stories/components/forms/slider/slider.stories.ts

@@ -228,12 +228,18 @@ function render(args: Args, context: StoryContext) {
   if (args.showValue === 'input') {
     return html`
       <div class="row align-items-end">
-        <div class="col">${[label, control, ...contextual].filter(el => el !== null)}</div>
+        <div class="col">
+          <div class="form-range-wrapper">
+            ${[label, control, ...contextual].filter(el => el !== null)}
+          </div>
+        </div>
         <div class="col-auto">${valueElement}</div>
       </div>
     `;
   } else {
-    return html` ${[label, control, valueElement, ...contextual].filter(el => el !== null)} `;
+    return html`<div class="form-range-wrapper">
+      ${[label, control, valueElement, ...contextual].filter(el => el !== null)}
+    </div>`;
   }
 }
 

packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts

@@ -195,9 +195,14 @@ ${args.textInside ?? nothing}</textarea
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
+      <div class="form-control-wrapper form-floating">
+        ${[control, label, ...contextual].filter(el => el !== null)}
+      </div>
     `;
-  } else return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
+  } else
+    return html`<div class="form-control-wrapper">
+      ${[label, control, ...contextual].filter(el => el !== null)}
+    </div>`;
 }
 
 export const Default: Story = {};

packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html

@@ -1,4 +1,4 @@
-<div class="form-floating mb-3">
+<div class="form-control-wrapper form-floating mb-3">
   <input
     id="typeahead-basic"
     placeholder=" "

packages/documentation/src/stories/components/typeahead/typeahead.sample.html

@@ -1,4 +1,4 @@
-<div class="form-floating mb-3">
+<div class="form-control-wrapper form-floating mb-3">
   <input
     id="typeahead-basic"
     placeholder=" "

packages/documentation/src/stories/patterns/forms/forms.stories.ts

@@ -16,21 +16,27 @@ type Story = StoryObj;
 
 export const BasicInput: Story = {
   render: () => html`
-    <label class="form-label" for="firstname">Firstname</label>
-    <input type="text" id="firstname" class="form-control" />
+    <div class="form-control-wrapper"></div>
+      <label class="form-label" for="firstname">Firstname</label>
+      <input type="text" id="firstname" class="form-control" />
+    </div>
   `,
 };
 
 export const RowSimple: Story = {
   render: () => html`
     <div class="row row-cols-1 row-cols-md-2">
       <div class="col">
-        <label class="form-label" for="firstname">Firstname</label>
-        <input type="text" id="firstname" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="firstname">Firstname</label>
+          <input type="text" id="firstname" class="form-control" />
+        </div>
       </div>
       <div class="col">
-        <label class="form-label" for="lastname">Lastname</label>
-        <input type="text" id="lastname" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="lastname">Lastname</label>
+          <input type="text" id="lastname" class="form-control" />
+        </div>
       </div>
     </div>
   `,
@@ -40,12 +46,16 @@ export const ColSimple: Story = {
   render: () => html`
     <div class="row">
       <div class="col-8">
-        <label class="form-label" for="city">City</label>
-        <input type="text" id="city" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="city">City</label>
+          <input type="text" id="city" class="form-control" />
+        </div>
       </div>
       <div class="col-4">
-        <label class="form-label" for="state">State</label>
-        <input type="text" id="state" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="state">State</label>
+          <input type="text" id="state" class="form-control" />
+        </div>
       </div>
     </div>
   `,
@@ -55,12 +65,16 @@ export const CustomWidth: Story = {
   render: () => html`
     <div class="row">
       <div class="col-auto">
-        <label class="form-label" for="zip">Zip</label>
-        <input type="number" id="zip" class="form-control" style="max-width: 11ch" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="zip">Zip</label>
+          <input type="number" id="zip" class="form-control" style="max-width: 11ch" />
+        </div>
       </div>
       <div class="col">
-        <label class="form-label" for="city">City</label>
-        <input type="text" id="city" class="form-control" />
+        <div class="form-control-wrapper">
+          <label class="form-label" for="city">City</label>
+          <input type="text" id="city" class="form-control" />
+        </div>
       </div>
     </div>
   `,
@@ -69,25 +83,33 @@ export const CustomWidth: Story = {
 export const VerticalSpacing: Story = {
   render: () => html`
     <div class="mb-regular">
-      <label for="firstname">Firstname</label>
-      <input type="text" id="firstname" class="form-control" />
+      <div class="form-control-wrapper">
+        <label for="firstname">Firstname</label>
+        <input type="text" id="firstname" class="form-control" />
+      </div>
     </div>
     <div class="mb-regular">
-      <label for="lastname">Lastname</label>
-      <input type="text" id="lastname" class="form-control" />
+      <div class="form-control-wrapper">
+        <label for="lastname">Lastname</label>
+        <input type="text" id="lastname" class="form-control" />
+      </div>
     </div>
   `,
 };
 
 export const Buttons: Story = {
   render: () => html`
     <div class="mb-regular">
-      <label for="firstname">Firstname</label>
-      <input type="text" id="firstname" class="form-control" />
+      <div class="form-control-wrapper">
+        <label for="firstname">Firstname</label>
+        <input type="text" id="firstname" class="form-control" />
+      </div>
     </div>
     <div class="d-flex flex-row-reverse gap-mini">
-      <button class="btn btn-primary">Send</button>
-      <button class="btn btn-secondary">Cancel</button>
+      <div class="form-control-wrapper">
+        <button class="btn btn-primary">Send</button>
+        <button class="btn btn-secondary">Cancel</button>
+      </div>
     </div>
   `,
 };
@@ -96,13 +118,13 @@ export const FloatingLabels: Story = {
   render: () => html`
     <div class="row">
       <div class="col">
-        <div class="form-floating">
+        <div class="form-control-wrapper form-floating">
           <input type="text" id="firstname" class="form-control" placeholder=" " />
           <label class="form-label" for="firstname">Firstname</label>
         </div>
       </div>
       <div class="col">
-        <div class="form-floating">
+        <div class="form-control-wrapper form-floating">
           <input type="text" id="lastname" class="form-control" placeholder=" " />
           <label class="form-label" for="lastname">Lastname</label>
         </div>
@@ -117,7 +139,7 @@ export const Validation: Story = {
       <!-- Form Control -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input
               id="formControlInvalid"
               type="text"
@@ -130,7 +152,7 @@ export const Validation: Story = {
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input
               id="FormControlValid"
               type="text"
@@ -147,14 +169,14 @@ export const Validation: Story = {
       <!-- Form Select -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select id="FormSelectInvalid" class="form-select is-invalid" required></select>
             <label class="form-label" for="FormSelectInvalid">Invalid Select</label>
             <p class="invalid-feedback">Error message</p>
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select id="FormSelectValid" class="form-select is-valid">
               <option disabled>Select one..</option>
               <option value="1">Value 1</option>
@@ -169,7 +191,7 @@ export const Validation: Story = {
       <!-- Form Select Multiple-->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select
               id="FormSelectMultipleInvalid"
               class="form-select is-invalid"
@@ -183,7 +205,7 @@ export const Validation: Story = {
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-select-wrapper form-floating">
             <select id="FormSelectMultipleValid" class="form-select is-valid" multiple>
               <option value="1">Value 1</option>
               <option value="2">Value 2</option>
@@ -197,14 +219,14 @@ export const Validation: Story = {
       <!-- Form File -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input id="FormFileInvalid" type="file" class="form-control is-invalid" required />
             <label class="form-label" for="FormFileInvalid">Invalid File</label>
             <p class="invalid-feedback">Error message</p>
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <input id="FormFileValid" type="file" class="form-control is-valid" />
             <label class="form-label" for="FormFileValid">Valid File</label>
             <p class="valid-feedback">Success message (optional)</p>
@@ -215,7 +237,7 @@ export const Validation: Story = {
       <!-- Form Textarea -->
       <div class="row mb-regular">
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <textarea
               id="FormTextareaInvalid"
               type="text"
@@ -228,7 +250,7 @@ export const Validation: Story = {
           </div>
         </div>
         <div class="col">
-          <div class="form-floating">
+          <div class="form-control-wrapper form-floating">
             <textarea
               id="FormTextareaValid"
               type="text"
@@ -287,14 +309,18 @@ Value</textarea
       <!-- Form Range -->
       <div class="row mb-regular">
         <div class="col">
-          <label class="form-label" for="FormRangeInvalid">Invalid Range</label>
-          <input class="form-range is-invalid" id="FormRangeInvalid" type="range" />
-          <p class="invalid-feedback">Error message</p>
+          <div class="form-range-wrapper">
+            <label class="form-label" for="FormRangeInvalid">Invalid Range</label>
+            <input class="form-range is-invalid" id="FormRangeInvalid" type="range" />
+            <p class="invalid-feedback">Error message</p>
+          </div>
         </div>
         <div class="col">
-          <label class="form-label" for="FormRangeValid">Valid Range</label>
-          <input class="form-range is-valid" id="FormRangeValid" type="range" />
-          <p class="valid-feedback">Success message (optional)</p>
+          <div class="form-range-wrapper">
+            <label class="form-label" for="FormRangeValid">Valid Range</label>
+            <input class="form-range is-valid" id="FormRangeValid" type="range" />
+            <p class="valid-feedback">Success message (optional)</p>
+          </div>
         </div>
       </div>
 
@@ -332,7 +358,7 @@ Value</textarea
 
 export const Hints: Story = {
   render: () => html`
-    <div class="form-floating">
+    <div class="form-control-wrapper form-floating">
       <input
         type="text"
         id="firstname"