fix(styles): remove redundant spacing between form items [ci visual]

SAP · Oct 7, 2024 · 7b106e4 · 7b106e4
1 parent 7642772
commit 7b106e4
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git a/packages/styles/src/form-group.scss b/packages/styles/src/form-group.scss
@@ -7,12 +7,15 @@ $block: #{$fd-namespace}-form-group;
 
 .#{$block} {
   @include fd-reset();
+  @include fd-flex(column);
 
   &--inline {
-    @include fd-flex() {
-      justify-content: flex-start;
-      flex-wrap: wrap;
-    }
+    flex-flow: row wrap;
+    justify-content: flex-start;
+  }
+
+  &--with-spacing {
+    gap: 0.625rem;
   }
 
   &__header {

diff --git a/packages/styles/src/form-item.scss b/packages/styles/src/form-item.scss
@@ -8,15 +8,12 @@ $block: #{$fd-namespace}-form-item;
 .#{$block} {
   @include fd-reset();
 
-  position: relative;
-  display: flex;
-  align-content: center;
-  flex-direction: column;
-
-  & + .#{$block} {
-    margin-block-start: 0.625rem;
+  @include fd-flex(column) {
+    flex: 1;
   }
 
+  position: relative;
+
   &__label-container {
     @include fd-flex() {
       justify-content: space-between

diff --git a/packages/styles/stories/AI/Patterns/ai-guided-prompt/ai-guided-prompt.example.html b/packages/styles/stories/AI/Patterns/ai-guided-prompt/ai-guided-prompt.example.html
@@ -27,7 +27,7 @@ <h5 class="fd-title fd-title--h5" aria-label="text">Improve Text</h5>
             </div>
         </header>
 
-        <div style="padding: 1rem; min-width: 500px;">
+        <div class="fd-form-group fd-form-group--with-spacing" style="padding: 1rem; min-width: 500px;">
             <div class="fd-form-item">
                 <label class="fd-form-label" id="structureLabel">Structure:</label>
                 <div class="fd-popover">

diff --git a/packages/styles/stories/Components/Forms/form-group/group-header-in-form-grid.example.html b/packages/styles/stories/Components/Forms/form-group/group-header-in-form-grid.example.html
@@ -1,6 +1,6 @@
 <div class="fd-container fd-form-layout-grid-container">
         <div class="fd-row">
-            <div class="fd-form-group fd-col fd-col-md--6  fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid1GroupHeader">
+            <div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6  fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid1GroupHeader">
                 <div class="fd-form-group__header"  id="grid1GroupHeader">
                     <h1 class="fd-form-group__header-text">Group Header 1</h1>
                 </div>
@@ -29,7 +29,7 @@ <h1 class="fd-form-group__header-text">Group Header 1</h1>
                     </div>
                 </div>
             </div>
-            <div class="fd-form-group fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid2GroupHeader">
+            <div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid2GroupHeader">
                 <div class="fd-form-group__header">
                     <h1 class="fd-form-group__header-text" id="grid2GroupHeader">Group Header 2</h1>
                 </div>
@@ -58,7 +58,7 @@ <h1 class="fd-form-group__header-text" id="grid2GroupHeader">Group Header 2</h1>
                     </div>
                 </div>
             </div>
-            <div class="fd-form-group fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid3GroupHeader">
+            <div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid3GroupHeader">
                 <div class="fd-form-group__header">
                     <h1 class="fd-form-group__header-text" id="grid3GroupHeader">Group Header 3</h1>
                 </div>

diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -202,7 +202,7 @@ exports[`Check stories > AI/Patterns/Guided Prompt > Story AIGuidedPrompt > Shou
             </div>
         </header>
 
-        <div style=\\"padding: 1rem; min-width: 500px;\\">
+        <div class=\\"fd-form-group fd-form-group--with-spacing\\" style=\\"padding: 1rem; min-width: 500px;\\">
             <div class=\\"fd-form-item\\">
                 <label class=\\"fd-form-label\\" id=\\"structureLabel\\">Structure:</label>
                 <div class=\\"fd-popover\\">
@@ -20613,7 +20613,7 @@ exports[`Check stories > Components/Forms/Form Group > Story GroupHeader > Shoul
 exports[`Check stories > Components/Forms/Form Group > Story GroupHeaderInFormGrid > Should match snapshot 1`] = `
 "<div class=\\"fd-container fd-form-layout-grid-container\\">
         <div class=\\"fd-row\\">
-            <div class=\\"fd-form-group fd-col fd-col-md--6  fd-col-lg--6 fd-col-xl--6 fd-col--wrap\\" role=\\"group\\" aria-labelledby=\\"grid1GroupHeader\\">
+            <div class=\\"fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6  fd-col-lg--6 fd-col-xl--6 fd-col--wrap\\" role=\\"group\\" aria-labelledby=\\"grid1GroupHeader\\">
                 <div class=\\"fd-form-group__header\\"  id=\\"grid1GroupHeader\\">
                     <h1 class=\\"fd-form-group__header-text\\">Group Header 1</h1>
                 </div>
@@ -20642,7 +20642,7 @@ exports[`Check stories > Components/Forms/Form Group > Story GroupHeaderInFormGr
                     </div>
                 </div>
             </div>
-            <div class=\\"fd-form-group fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap\\" role=\\"group\\" aria-labelledby=\\"grid2GroupHeader\\">
+            <div class=\\"fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap\\" role=\\"group\\" aria-labelledby=\\"grid2GroupHeader\\">
                 <div class=\\"fd-form-group__header\\">
                     <h1 class=\\"fd-form-group__header-text\\" id=\\"grid2GroupHeader\\">Group Header 2</h1>
                 </div>
@@ -20671,7 +20671,7 @@ exports[`Check stories > Components/Forms/Form Group > Story GroupHeaderInFormGr
                     </div>
                 </div>
             </div>
-            <div class=\\"fd-form-group fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap\\" role=\\"group\\" aria-labelledby=\\"grid3GroupHeader\\">
+            <div class=\\"fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap\\" role=\\"group\\" aria-labelledby=\\"grid3GroupHeader\\">
                 <div class=\\"fd-form-group__header\\">
                     <h1 class=\\"fd-form-group__header-text\\" id=\\"grid3GroupHeader\\">Group Header 3</h1>
                 </div>