Feat(web): Switch FieldGroup component to v3 design tokens #DS-1447

lmc-eu · Sep 17, 2024 · 3e37d72 · 3e37d72
1 parent 6a7df65
commit 3e37d72
Show file tree

Hide file tree

Showing 5 changed files with 4 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,7 +19,7 @@ $_field-name: 'FieldGroup';
 
 .FieldGroup__fields {
     display: grid;
-    row-gap: theme.$fields-gap;
+    row-gap: theme.$gap;
 }
 
 .FieldGroup--fluid {

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