feat(form-field): resolve style & storybook

ovh · Jul 29, 2024 · ecae256 · ecae256
1 parent 086d085
commit ecae256
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 40 deletions.
diff --git a/packages/ods/src/components/form-field/src/components/ods-form-field/ods-form-field.scss b/packages/ods/src/components/form-field/src/components/ods-form-field/ods-form-field.scss
@@ -5,17 +5,21 @@
 }
 
 .ods-form-field {
-  &__top-bar {
+  &__bottom-bar {
     display: flex;
     flex-direction: row;
-    align-items: flex-end;
-    justify-content: space-between;
     column-gap: 4px;
-  }
+    align-items: flex-start;
+    justify-content: space-between;
 
-  &__bottom-bar {
     &__error-message {
       color: var(--ods-color-critical-500);
+      font-weight: 600;
+    }
+
+    &__separator {
+      flex: 1;
+      content: '';
     }
   }
 }
diff --git a/packages/ods/src/components/form-field/src/components/ods-form-field/ods-form-field.tsx b/packages/ods/src/components/form-field/src/components/ods-form-field/ods-form-field.tsx
@@ -15,7 +15,6 @@ export class OdsFormField {
       <Host class='ods-form-field'>
         <div class='ods-form-field__top-bar'>
           <slot name='label'></slot>
-          <slot name='visual-hint'></slot>
         </div>
         <slot></slot>
         <div class='ods-form-field__bottom-bar'>
@@ -30,6 +29,8 @@ export class OdsFormField {
               </ods-text>
               : <slot name='helper'></slot>
           }
+          <div class='ods-form-field__bottom-bar__separator'></div>
+          <slot name='visual-hint'></slot>
         </div>
       </Host>
     );

diff --git a/packages/storybook/stories/components/form-field/documentation.mdx b/packages/storybook/stories/components/form-field/documentation.mdx
@@ -32,9 +32,6 @@ Custom form-field css:
 
 <Canvas of={ FormFieldStories.Default } sourceState='shown' />
 
-## Error
-<Canvas of={ FormFieldStories.Error } sourceState='shown' />
-
 ## Label only
 <Canvas of={ FormFieldStories.Label } sourceState='shown' />
 
@@ -48,4 +45,7 @@ Custom form-field css:
 <Canvas of={ FormFieldStories.Tooltip } sourceState='shown' />
 
 ## Textarea
-<Canvas of={ FormFieldStories.Textarea } sourceState='shown' />
+<Canvas of={ FormFieldStories.Textarea } sourceState='shown' />
+
+## Error
+<Canvas of={ FormFieldStories.Error } sourceState='shown' />
diff --git a/packages/storybook/stories/components/form-field/form-field.stories.ts b/packages/storybook/stories/components/form-field/form-field.stories.ts
@@ -18,9 +18,16 @@ export const Demo: StoryObj = {
   <ods-form-field error="${arg.error}">
     ${unsafeHTML(arg.label)}
     ${unsafeHTML(arg.visualHint)}
-    ${unsafeHTML(arg.mainSlot)}
+    ${unsafeHTML(arg.content)}
     ${unsafeHTML(arg.helper)}
   </ods-form-field>
+  <style>
+    ods-text[slot="label"],
+    ods-text[slot="helper"],
+    ods-text[slot="visual-hint"] {
+      color: #4d5592;
+    }
+  </style>
     `,
   argTypes: orderControls({
     error: {
@@ -39,36 +46,35 @@ export const Demo: StoryObj = {
       control: 'text',
       description: 'Set a label on the top-left corner of the field.',
     },
-    visualHint: {
+    content: {
       table: {
         category: CONTROL_CATEGORY.slot,
         defaultValue: { summary: 'ø' },
       },
       control: 'text',
-      description: 'Set a visual hint on the top-right corner of the field.',
     },
-    mainSlot: {
+    helper: {
       table: {
         category: CONTROL_CATEGORY.slot,
         defaultValue: { summary: 'ø' },
       },
       control: 'text',
-      description: 'Set the main field.',
+      description: 'Set a helper text on the bottom-left corner of the field.',
     },
-    helper: {
+    visualHint: {
       table: {
         category: CONTROL_CATEGORY.slot,
         defaultValue: { summary: 'ø' },
       },
       control: 'text',
-      description: 'Set a helper text under the field.',
+      description: 'Set a visual hint on the bottom-right corner of the field.',
     },
   }),
   args: {
     error: '',
     label: `<ods-text slot="label" preset='label'>Description</ods-text>`,
     visualHint: `<ods-text slot="visual-hint" preset='caption'>02/11/1999</ods-text>`,
-    mainSlot: `<ods-input type="text" value="Hello, ODS!" clearable></ods-input>`,
+    content: `<ods-input type="text" value="Hello, ODS!" clearable></ods-input>`,
     helper: `<ods-text slot="helper" preset='span'>A little helper text</ods-text>`,
   },
 };
@@ -89,15 +95,15 @@ export const Error: StoryObj = {
     Description
   </ods-text>
 
-  <ods-text slot="visual-hint" preset='caption'>
-    02/11/1999
-  </ods-text>
-
   <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
 
   <ods-text slot="helper" preset='span'>
     A little helper text
   </ods-text>
+
+  <ods-text slot="visual-hint" preset='caption'>
+    02/11/1999
+  </ods-text>
 </ods-form-field>
   `,
 };
@@ -110,18 +116,12 @@ export const CustomCSS: StoryObj = {
     Description
   </ods-text>
 
-  <ods-text slot="visual-hint" preset='caption'>
-    02/11/1999
-  </ods-text>
-
   <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
 </ods-form-field>
 
 <style>
   .my-label {
-    transform: skew(50deg, -10deg);
-    background: yellow;
-    color: red;
+    color: #b63f81;
   }
 </style>
   `,
@@ -148,11 +148,11 @@ export const LabelVisualHint: StoryObj = {
     Description
   </ods-text>
 
+  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
+
   <ods-text slot="visual-hint" preset='caption'>
     02/11/1999
   </ods-text>
-
-  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
 </ods-form-field>
   `,
 };
@@ -165,15 +165,15 @@ export const LabelVisualHintHelper: StoryObj = {
     Description
   </ods-text>
 
-  <ods-text slot="visual-hint" preset='caption'>
-    02/11/1999
-  </ods-text>
+  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
 
   <ods-text slot="helper" preset='span'>
     A little helper text
   </ods-text>
 
-  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
+  <ods-text slot="visual-hint" preset='caption'>
+    02/11/1999
+  </ods-text>
 </ods-form-field>
   `,
 };
@@ -186,15 +186,13 @@ export const Tooltip: StoryObj = {
     Description
   </ods-text>
 
-  <ods-text slot="visual-hint" id="tooltip-trigger" preset='caption'>
-    (???)
-  </ods-text>
+  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
+
+  <ods-icon slot="visual-hint" id="tooltip-trigger" name="help-circle"></ods-icon>
 
   <ods-tooltip trigger-id="tooltip-trigger">
     02/11/1999
   </ods-tooltip>
-
-  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
 </ods-form-field>
   `,
 };