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

lmc-eu · Sep 17, 2024 · 0000c0f · 0000c0f
1 parent 883f5b5
commit 0000c0f
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 23 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/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss
@@ -39,21 +39,20 @@ $inline-field-input-border-width: global-tokens.$border-width-200;
 $inline-field-input-background-color-checked: var(--#{globals.$prefix}color-selected-default);
 
 // Box field form components – TextField, TextArea, etc.
-// Commented out to allow nice diff
-//    $box-field-input-color-default: var(--#{globals.$prefix}color-form-field-content);
-//    $box-field-input-border-width: global-tokens.$border-width-100;
-//    $box-field-input-border-style: solid;
-//    $box-field-input-border-color-focus: var(--#{globals.$prefix}color-border-focus);
-//    $box-field-input-focus-shadow: global-tokens.$focus;
-//
-//    $box-field-input-border-radius: global-tokens.$radius-300;
-//    $box-field-input-placeholder-color-default: var(--#{globals.$prefix}color-form-field-placeholder);
-//    $box-field-input-placeholder-color-disabled: var(--#{globals.$prefix}color-disabled-content);
-//    $box-field-input-padding-x: global-tokens.$space-600;
-//    $box-field-input-padding-y: calc(#{global-tokens.$space-500} - #{global-tokens.$border-width-100});
-//    $box-field-input-width: 18rem;
-//    $box-field-label-typography: global-tokens.$body-small-semibold;
-//    $box-field-label-margin-bottom: global-tokens.$space-400;
+$box-field-input-color-default: var(--#{globals.$prefix}color-form-field-content);
+$box-field-input-border-width: global-tokens.$border-width-100;
+$box-field-input-border-style: solid;
+$box-field-input-border-color-focus: var(--#{globals.$prefix}color-border-focus);
+$box-field-input-focus-shadow: global-tokens.$focus;
+
+$box-field-input-border-radius: global-tokens.$radius-300;
+$box-field-input-placeholder-color-default: var(--#{globals.$prefix}color-form-field-placeholder);
+$box-field-input-placeholder-color-disabled: var(--#{globals.$prefix}color-disabled-content);
+$box-field-input-padding-x: global-tokens.$space-600;
+$box-field-input-padding-y: calc(#{global-tokens.$space-500} - #{global-tokens.$border-width-100});
+$box-field-input-width: 18rem;
+$box-field-label-typography: global-tokens.$body-small-semibold;
+$box-field-label-margin-bottom: global-tokens.$space-400;
 
 $validation-states: (
     success: (

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