BREAKING CHANGE(web): Switch FieldGroup component to v3 design tokens…

… and improve alignment #DS-1447 Align FieldGroup fields to start if not fluid.
lmc-eu · Sep 17, 2024 · 6ae3b38 · 6ae3b38
1 parent 2a43cd8
commit 6ae3b38
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/packages/web/src/scss/components/FieldGroup/_FieldGroup.scss b/packages/web/src/scss/components/FieldGroup/_FieldGroup.scss
@@ -6,8 +6,6 @@ $_field-name: 'FieldGroup';
 .FieldGroup {
     @include form-fields-tools.box-field-root();
 
-    display: inline-grid;
-    row-gap: theme.$gap;
     border: 0;
 }
 
@@ -21,13 +19,17 @@ $_field-name: 'FieldGroup';
 
 .FieldGroup__fields {
     display: grid;
-    row-gap: theme.$fields-gap;
+    row-gap: theme.$gap;
 }
 
 .FieldGroup--fluid {
     @include form-fields-tools.box-field-fluid();
 }
 
+.FieldGroup:not(.FieldGroup--fluid) .FieldGroup__fields {
+    justify-content: start;
+}
+
 .FieldGroup__validationText,
 .FieldGroup > [data-spirit-element='validation_text'] {
     @include form-fields-tools.validation-text();

diff --git a/packages/web/src/scss/components/FieldGroup/_theme.scss b/packages/web/src/scss/components/FieldGroup/_theme.scss
@@ -1,4 +1,3 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 
-$gap: tokens.$space-400;
-$fields-gap: tokens.$space-600;
+$gap: global-tokens.$space-500;
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -8,8 +8,8 @@
 @forward 'Container';
 @forward 'Divider';
 @forward 'Dropdown';
+@forward 'FieldGroup';
 
-// @forward 'FieldGroup';
 // @forward 'FileUploader';
 @forward 'Flex';
 @forward 'Grid';

diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
@@ -8,7 +8,6 @@ import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from
 const IGNORED_TESTS: string[] = [
   'Accordion',
   'Dropdown',
-  'FieldGroup',
   'FileUploader',
   'Header',
   'Heading',

diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png