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

lmc-eu · Sep 11, 2024 · fba5449 · fba5449
1 parent 5b135e3
commit fba5449
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/packages/web/src/scss/components/TextField/_TextField.scss b/packages/web/src/scss/components/TextField/_TextField.scss
@@ -151,6 +151,8 @@ $_field-name: 'TextField';
 .TextField .TextField__input:disabled,
 :is(.TextField--disabled, .TextField.is-disabled) .TextField__input {
     @include form-fields-tools.box-field-disabled-input();
+
+    border-color: transparent;
 }
 
 // stylelint-disable no-descending-specificity, selector-max-specificity, selector-max-class, selector-max-compound-selectors
@@ -165,7 +167,7 @@ $_field-name: 'TextField';
 :is(.TextField--disabled, .TextField.is-disabled)
     .TextField__passwordToggle
     .TextField__passwordToggle__button::before {
-    border-color: theme.$input-border-color-disabled;
+    border-color: form-fields-theme.$input-border-color-disabled;
 }
 
 .TextField .TextField__input:disabled ~ .TextField__passwordToggle__button,

diff --git a/packages/web/src/scss/components/TextField/_theme.scss b/packages/web/src/scss/components/TextField/_theme.scss
@@ -1,7 +1,7 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$input-border-color-disabled: tokens.$border-primary-disabled;
 $input-number-arrows-width: 1.25rem;
-$input-password-toggle-padding: tokens.$space-400;
-$input-password-toggle-icon-size: tokens.$space-700;
+$input-password-toggle-padding: global-tokens.$space-500;
+$input-password-toggle-icon-size: global-tokens.$space-900;
 $input-size-characters: (2, 3, 4);
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
@@ -31,7 +31,8 @@
 @forward 'Tag';
 
 // @forward 'TextArea';
-// @forward 'TextField';
+@forward 'TextField';
+
 // @forward 'Toast';
 // @forward 'Tooltip';
 @forward 'UNSTABLE_ActionLayout';

diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
@@ -22,7 +22,6 @@ const IGNORED_TESTS: string[] = [
   'Stack',
   'Text',
   'TextArea',
-  'TextField',
   'Toast',
   'Tooltip',
   'UNSTABLE_Slider',

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