feat(form-field): resolve style, tests & storybook

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

Hide file tree

Showing 4 changed files with 9 additions and 25 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
@@ -1,7 +1,7 @@
 :host(.ods-form-field) {
   display: inline-flex;
-  position: relative;
   flex-direction: column;
+  row-gap: 4px;
 }
 
 .ods-form-field {
@@ -10,13 +10,10 @@
     flex-direction: row;
     align-items: flex-end;
     justify-content: space-between;
-    margin-bottom: 4px;
-    width: 100%;
+    column-gap: 4px;
   }
 
   &__bottom-bar {
-    margin-top: 4px;
-
     &__error-message {
       color: var(--ods-color-critical-500);
     }

diff --git a/packages/ods/src/components/form-field/tests/rendering/ods-form-field.e2e.ts b/packages/ods/src/components/form-field/tests/rendering/ods-form-field.e2e.ts
@@ -40,14 +40,14 @@ describe('ods-form-field rendering', () => {
     await setup('<ods-form-field><ods-input></ods-input><span slot="label">Label</span></ods-form-field>');
     const labelSlot = await el.find('span[slot="label"]');
     expect(labelSlot).not.toBeNull();
-    expect(labelSlot.textContent).toEqual('Label');
+    expect(labelSlot.textContent).toBe('Label');
   });
 
   it('should correctly render content in the visual-hint slot', async() => {
     await setup('<ods-form-field><ods-input></ods-input><span slot="visual-hint">Visual Hint</span></ods-form-field>');
     const visualHintSlot = await el.find('span[slot="visual-hint"]');
     expect(visualHintSlot).not.toBeNull();
-    expect(visualHintSlot.textContent).toEqual('Visual Hint');
+    expect(visualHintSlot.textContent).toBe('Visual Hint');
   });
 
   it('should correctly render content in the default slot', async() => {
@@ -66,13 +66,13 @@ describe('ods-form-field rendering', () => {
     await setup('<ods-form-field><ods-input></ods-input><span slot="helper">Helper</span></ods-form-field>');
     const helperSlot = await el.find('span[slot="helper"]');
     expect(helperSlot).not.toBeNull();
-    expect(helperSlot.textContent).toEqual('Helper');
+    expect(helperSlot.textContent).toBe('Helper');
   });
 
   it('should be displaying the error message if error, even if there is a helper', async() => {
     await setup('<ods-form-field error="Wrong format."><ods-input></ods-input><span slot="helper">Helper Text</span></ods-form-field>');
     const errorMessage = await page.find('ods-form-field >>> .ods-form-field__bottom-bar__error-message');
     expect(errorMessage).not.toBeNull();
-    expect(errorMessage?.textContent).toEqual('Wrong format.');
+    expect(errorMessage?.textContent).toBe('Wrong format.');
   });
 });
diff --git a/packages/storybook/stories/components/form-field/documentation.mdx b/packages/storybook/stories/components/form-field/documentation.mdx
@@ -12,15 +12,15 @@ import * as FormFieldStories from './form-field.stories';
 
 A Form Field component is used to wrap several form components with logic, visual hints and additional styling:
 
-<Canvas of={ FormFieldStories.Default } sourceState='none' />
+<Canvas of={ FormFieldStories.LabelVisualHintHelper } sourceState='none' />
 
 <DocNavigator of={ FormFieldStories } />
 
 <Markdown>{ SpecificationsFormField }</Markdown>
 
 # Style customization
 
-You can add your own style on the form-field elements using `::part` or by directly updating the slot elements.
+You can add your own style on the form-field elements by directly updating the slot elements.
 
 Custom form-field css:
 

diff --git a/packages/storybook/stories/components/form-field/form-field.stories.ts b/packages/storybook/stories/components/form-field/form-field.stories.ts
@@ -77,14 +77,6 @@ export const Default: StoryObj = {
   tags: ['isHidden'],
   render: () => html`
 <ods-form-field>
-  <ods-text slot="label" preset='label'>
-    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>`,
 };
@@ -122,20 +114,15 @@ export const CustomCSS: StoryObj = {
     02/11/1999
   </ods-text>
 
-  <ods-input type="text" class="my-input" value="Hello, ODS!" clearable></ods-input>
+  <ods-input type="text" value="Hello, ODS!" clearable></ods-input>
 </ods-form-field>
 
 <style>
   .my-label {
     transform: skew(50deg, -10deg);
-  }
-  .my-label::part(text) {
     background: yellow;
     color: red;
   }
-  .my-input::part(input) {
-    width: 500px;
-  }
 </style>
   `,
 };