feat(styles): validation feedback with hint and single radio/check (#…

…4147) Co-authored-by: Travaglini Alessio <[email protected]> Co-authored-by: Oliver Schürch <[email protected]> Co-authored-by: Swiss Post Bot <[email protected]> Co-authored-by: Alizé Debray <[email protected]> Co-authored-by: Alizé Debray <[email protected]>
swisspost · Dec 10, 2024 · 456317c · 456317c
1 parent 416b4a4
commit 456317c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 15 deletions.
diff --git a/packages/documentation/src/stories/components/forms/validation/validation.stories.ts b/packages/documentation/src/stories/components/forms/validation/validation.stories.ts
@@ -120,11 +120,11 @@ export const Input: Story = {
         placeholder="Placeholder"
       />
       <label class="form-label" for="Input_1${props.validationState}${props.scheme}">Label</label>
+      ${feedbackTemplate}
       <p class="form-hint">
         Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel
         illum dolore eu feugiat nulla facilisis.
       </p>
-      ${feedbackTemplate}
     </div> `;
   },
 };
@@ -239,11 +239,11 @@ export const Select: Story = {
       <label class="form-label" for="Select_1${props.validationState}${props.scheme}">
         <span>Label</span>
       </label>
+      ${feedbackTemplate}
       <p class="form-hint">
         Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel
         illum dolore eu feugiat nulla facilisis.
       </p>
-      ${feedbackTemplate}
     </div>`;
   },
 };
@@ -301,11 +301,11 @@ export const TextArea: Story = {
       ><label class="form-label" for="TextArea_1${props.validationState}${props.scheme}"
         >Label</label
       >
+      ${feedbackTemplate}
       <p class="form-hint">
         Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel
         illum dolore eu feugiat nulla facilisis.
       </p>
-      ${feedbackTemplate}
     </div>`;
   },
 };
diff --git a/packages/styles/src/components/form-hint.scss b/packages/styles/src/components/form-hint.scss
@@ -6,9 +6,8 @@ tokens.$default-map: components.$post-assist;
 .form-hint {
   color: tokens.get('assist-enabled-fg');
   padding-inline: tokens.get('assist-padding-inline');
-  padding-block: tokens.get('assist-padding-block');
+  margin-block: tokens.get('post-assist-padding-block') !important;
   font-size: tokens.get('assist-font-size');
-  margin-block-start: 0;
 }
 
 .form-control:disabled .form-hint {

diff --git a/packages/styles/src/components/validation.scss b/packages/styles/src/components/validation.scss
@@ -12,11 +12,9 @@ Default feedback message classes
 .valid-feedback,
 .invalid-feedback {
   display: none;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
   margin: 0;
-  padding: tokens.get('post-validation-input-padding-block')
-    tokens.get('post-validation-input-padding-inline');
   font-size: tokens.get('post-validation-font-size');
 }
 
@@ -56,24 +54,59 @@ Default feedback message classes
   }
 }
 
+input[type='text'],
+select,
+textarea {
+  ~ .invalid-feedback,
+  ~ .valid-feedback {
+    margin-block: tokens.get('assist-padding-block', components.$post-assist) !important;
+    padding-inline: tokens.get('validation-input-padding-inline');
+  }
+}
+
 /*
  Checkbox and Radio box specific classes
 */
 input[type='checkbox'],
 input[type='radio'],
-input[type='range'],
 :has(input[type='checkbox']),
 :has(input[type='radio']) {
   ~ .invalid-feedback,
   ~ .valid-feedback {
+    padding-inline-start: tokens.get('validation-group-padding-inline-start');
+
     &::before {
-      height: tokens.get('post-validation-group-icon-size');
-      width: tokens.get('post-validation-group-icon-size');
-      display: inline-block;
-      margin-inline-end: tokens.get('post-validation-group-gap-inline');
-      background-color: currentColor;
-      color: currentColor;
+      height: tokens.get('validation-group-icon-size');
+      width: tokens.get('validation-group-icon-size');
+      margin-block-start: tokens.get('validation-group-icon-block-start');
+      margin-block-end: tokens.get('validation-group-icon-block-end');
+      margin-inline-end: tokens.get('validation-group-gap-inline');
       content: '';
+      flex-shrink: 0;
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+    }
+  }
+
+  input[type='radio'],
+  :has(input[type='radio']) {
+    ~ .invalid-feedback,
+    ~ .valid-feedback {
+      margin-block-start: tokens.get('radio-button-gap-block-group', components.$post-radio-button);
+      margin-block-end: tokens.get(
+        'radio-button-padding-block-group',
+        components.$post-radio-button
+      );
+    }
+  }
+
+  input[type='checkbox'],
+  :has(input[type='checkbox']) {
+    ~ .invalid-feedback,
+    ~ .valid-feedback {
+      margin-block-start: tokens.get('checkbox-gap-block-group', components.$post-checkbox);
+      margin-block-end: tokens.get('checkbox-padding-block-group', components.$post-checkbox);
     }
   }