diff --git a/packages/web/src/scss/components/Item/_Item.scss b/packages/web/src/scss/components/Item/_Item.scss index 097c512573..541a038b25 100644 --- a/packages/web/src/scss/components/Item/_Item.scss +++ b/packages/web/src/scss/components/Item/_Item.scss @@ -1,3 +1,5 @@ +// 1. Make the icon span two rows to spread over the whole Item vertically and make it centered. + @use 'sass:map'; @use 'theme'; @use '../../settings/cursors'; @@ -31,7 +33,7 @@ } .Item__label { - @include form-fields.inline-field-label(); + @include form-fields.item-label(); grid-column: 2; } @@ -46,7 +48,7 @@ .Item__icon { display: flex; - grid-row: 1; + grid-row: span 2; // 1. color: theme.$icon-color-default; } @@ -60,10 +62,6 @@ margin-inline-start: theme.$gap; } -.Item--selected .Item__label { - @include form-fields.item-label-checked(); -} - .Item--disabled { @include form-fields.item-disabled(); diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss index 2610197079..90ac9882e1 100644 --- a/packages/web/src/scss/components/Item/_theme.scss +++ b/packages/web/src/scss/components/Item/_theme.scss @@ -1,5 +1,6 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; +@use '../../settings/globals'; -$gap: tokens.$space-400; -$icon-color-default: tokens.$action-selected-default; -$icon-color-disabled: tokens.$action-selected-disabled; +$gap: global-tokens.$space-500; +$icon-color-default: var(--#{globals.$prefix}color-selected-content-basic); +$icon-color-disabled: var(--#{globals.$prefix}color-disabled-content); diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 2465830683..925c32e4bf 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -15,7 +15,7 @@ @forward 'Grid'; // @forward 'Header'; -// @forward 'Item'; +@forward 'Item'; @forward 'Modal'; @forward 'Pagination'; @forward 'PartnerLogo'; diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss index 61033fd87f..41f0c43efc 100644 --- a/packages/web/src/scss/theme/_form-fields.scss +++ b/packages/web/src/scss/theme/_form-fields.scss @@ -70,7 +70,8 @@ $validation-states: ( ); // Item variant -$item-gap: global-tokens.$space-500; +$item-padding-x: global-tokens.$space-700; +$item-padding-y: global-tokens.$space-500; $item-border-radius: global-tokens.$radius-200; $item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default); $item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover); @@ -78,3 +79,4 @@ $item-background-color-active: var(--#{globals.$prefix}color-background-interact $item-label-typography: global-tokens.$body-medium-semibold; $item-validation-text-typography: global-tokens.$body-small-semibold; $item-helper-text-typography: global-tokens.$body-small-regular; +$item-helper-text-margin-top: global-tokens.$space-300; diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss index 8b9f56fc61..c3b055ec4e 100644 --- a/packages/web/src/scss/tools/_form-fields.scss +++ b/packages/web/src/scss/tools/_form-fields.scss @@ -205,8 +205,9 @@ } @mixin item() { + align-items: center; width: 100%; - padding: form-fields-theme.$item-gap; + padding: form-fields-theme.$item-padding-y form-fields-theme.$item-padding-x; margin-block: 0; border-radius: form-fields-theme.$item-border-radius; background-color: form-fields-theme.$item-background-color-default; @@ -232,6 +233,8 @@ @mixin item-label() { @include typography.generate(form-fields-theme.$item-label-typography); + + color: form-fields-theme.$label-color-default; } @mixin helper-text() { @@ -248,4 +251,6 @@ @mixin item-helper-text() { @include typography.generate(form-fields-theme.$item-helper-text-typography); + + margin-top: form-fields-theme.$item-helper-text-margin-top; } diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts index 9891884e5e..255bbeb7df 100644 --- a/tests/e2e/demo-components-compare.spec.ts +++ b/tests/e2e/demo-components-compare.spec.ts @@ -11,7 +11,6 @@ const IGNORED_TESTS: string[] = [ 'FileUploader', 'Header', 'Icon', - 'Item', 'Spinner', 'Stack', 'Toast', diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png index 930c2f1436..fc87bd4041 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png differ diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png index e372e993ee..77c45c1a8d 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/item-chromium-linux.png differ diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png index d5f32fc95c..9631408828 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/radio-chromium-linux.png differ