diff --git a/packages/web/src/scss/components/FieldGroup/_FieldGroup.scss b/packages/web/src/scss/components/FieldGroup/_FieldGroup.scss index 675d2feae4..0c814048a0 100644 --- 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 index 98d36c029f..2b512ff66e 100644 --- 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 index 2e2d1e6fb6..5143281888 100644 --- 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 index c71b407706..1aeb560a33 100644 --- 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 index 2c6cd83813..cdc7a4160a 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/fieldgroup-chromium-linux.png differ