BREAKING CHANGE(web): Update TextField and TextArea default disab…

…led style #DS-649 Remove the feature class which enabled this behaviour. ## Migration Guide Remove feature class `.spirit-v1-box-field-disabled`, if used. Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · 3ddf8c2 · 3ddf8c2
1 parent d7f2d22
commit 3ddf8c2
Show file tree

Hide file tree

Showing 9 changed files with 6 additions and 116 deletions.
diff --git a/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss b/packages/web/src/scss/components/FileUploader/_FileUploaderInput.scss
@@ -136,7 +136,8 @@ $_field-name: 'FileUploaderInput';
 // stylelint-enable selector-max-compound-selectors, selector-max-specificity
 
 .FileUploaderInput > .FileUploaderInput__input:disabled ~ .FileUploaderInput__dropZone {
-    @include form-fields-tools.box-field-disabled-input-v1();
+    border-color: form-fields-theme.$box-field-input-border-color-disabled;
+    background-color: form-fields-theme.$box-field-input-background-disabled;
 }
 // stylelint-enable selector-max-class
 

diff --git a/packages/web/src/scss/components/Select/_Select.scss b/packages/web/src/scss/components/Select/_Select.scss
@@ -87,7 +87,6 @@ $_field-name: 'Select';
 .Select .Select__input:disabled,
 :is(.Select--disabled, .Select.is-disabled) .Select__input {
     @include form-fields-tools.box-field-disabled-input();
-    @include form-fields-tools.box-field-disabled-input-v1();
 }
 
 :is(.Select--disabled, .Select.is-disabled) .Select__icon {

diff --git a/packages/web/src/scss/components/TextArea/README.md b/packages/web/src/scss/components/TextArea/README.md
@@ -158,30 +158,6 @@ Filled</textarea
 </div>
 ```
 
-### Feature flag to enable a new disabled style
-
-⚠️ This feature flag is only temporary and will be removed in version 1. The new disabled style will be made default.
-
-To enable a new disabled style, add the feature class `spirit-v1-box-field-disabled` to a parent element.
-The preferred one is the `body` element because this way it will affect all TextArea components everywhere.
-
-```html
-<body class="spirit-v1-box-field-disabled">
-  ...
-  <div class="TextArea TextArea--disabled">
-    <label for="textAreaDisabledV1" class="TextArea__label">Label</label>
-    <textarea
-      id="textAreaDisabledV1"
-      class="TextArea__input"
-      name="disabled"
-      placeholder="Placeholder"
-      disabled
-    ></textarea>
-  </div>
-  ...
-</body>
-```
-
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [prefixed]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#prefixing-css-class-names
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
diff --git a/packages/web/src/scss/components/TextArea/_TextArea.scss b/packages/web/src/scss/components/TextArea/_TextArea.scss
@@ -1,6 +1,3 @@
-// 1. Enable redesigned disabled state of the component using `spirit-v1-box-field-disabled` on the root element, eg. body.
-//    This will be removed in v1 and the new disabled state will be the default.
-
 @use 'sass:map';
 @use '../../theme/form-fields' as form-fields-theme;
 @use '../../tools/form-fields' as form-fields-tools;
@@ -61,14 +58,6 @@ $_field-name: 'TextArea';
     @include form-fields-tools.box-field-disabled-input();
 }
 
-// 1.
-// stylelint-disable selector-max-class -- we need to add a feature class
-.spirit-v1-box-field-disabled .TextArea .TextArea__input:disabled,
-.spirit-v1-box-field-disabled :is(.TextArea--disabled, .TextArea.is-disabled) .TextArea__input {
-    @include form-fields-tools.box-field-disabled-input-v1();
-}
-// stylelint-enable
-
 :is(.TextArea--disabled, .TextArea.is-disabled) > :is(.TextArea__validationText, [data-element='validation_text']) {
     @include form-fields-tools.validation-text-disabled();
 }

diff --git a/packages/web/src/scss/components/TextArea/index.html b/packages/web/src/scss/components/TextArea/index.html
@@ -133,20 +133,4 @@ <h2 class="docs-Heading">AutoResize</h2>
   </div>
 </section>
 
-<section class="docs-Section spirit-v1-box-field-disabled">
-  <h2 class="docs-Heading">V1 Feature &mdash; new disabled state</h2>
-
-  <div class="docs-FormFieldGrid">
-    <div class="TextArea TextArea--disabled">
-      <label for="textAreaDisabledV1" class="TextArea__label">Label</label>
-      <textarea id="textAreaDisabledV1" class="TextArea__input" name="disabled" placeholder="Placeholder" disabled></textarea>
-    </div>
-
-    <div class="TextArea TextArea--disabled">
-      <label for="textAreaDisabledFilledV1" class="TextArea__label TextArea__label--required">Label</label>
-      <textarea id="textAreaDisabledFilledV1" class="TextArea__input" name="disabledFilled" disabled required>Filled</textarea>
-    </div>
-  </div>
-</section>
-
 {{/layout/plain }}
diff --git a/packages/web/src/scss/components/TextField/README.md b/packages/web/src/scss/components/TextField/README.md
@@ -265,30 +265,5 @@ JS interaction class when controlled by JavaScript:
 </div>
 ```
 
-### Feature flag to enable a new disabled style
-
-⚠️ This feature flag is only temporary and will be removed in version 1. The new disabled style will be made default.
-
-To enable a new disabled style, add the feature class `spirit-v1-box-field-disabled` to a parent element.
-The preferred one is the `body` element because this way it will affect all TextField components everywhere.
-
-```html
-<body class="spirit-v1-box-field-disabled">
-  ...
-  <div class="TextField TextField--disabled">
-    <label for="textFieldDisabledV1" class="TextField__label TextField__label--required">Label</label>
-    <input
-      type="text"
-      id="textFieldDisabledV1"
-      class="TextField__input"
-      name="disabled"
-      placeholder="Placeholder"
-      disabled
-    />
-  </div>
-  ...
-</body>
-```
-
 [prefixed]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#prefixing-css-class-names
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
diff --git a/packages/web/src/scss/components/TextField/_TextField.scss b/packages/web/src/scss/components/TextField/_TextField.scss
@@ -1,6 +1,3 @@
-// 1. Enable redesigned disabled state of the component using `spirit-v1-box-field-disabled` on the root element, eg. body.
-//    This will be removed in v1 and the new disabled state will be the default.
-
 @use '../../settings/cursors';
 @use '../../theme/form-fields' as form-fields-theme;
 @use '../../tools/form-fields' as form-fields-tools;
@@ -156,14 +153,6 @@ $_field-name: 'TextField';
     @include form-fields-tools.box-field-disabled-input();
 }
 
-// 1.
-// stylelint-disable selector-max-class -- we need to add a feature class
-.spirit-v1-box-field-disabled .TextField .TextField__input:disabled,
-.spirit-v1-box-field-disabled :is(.TextField--disabled, .TextField.is-disabled) .TextField__input {
-    @include form-fields-tools.box-field-disabled-input-v1();
-}
-// stylelint-enable
-
 // stylelint-disable no-descending-specificity, selector-max-specificity, selector-max-class, selector-max-compound-selectors
 // -- The code is more comprehensible when styling elements in this order:
 //      1. input (with a pseudo-element),
@@ -183,15 +172,10 @@ $_field-name: 'TextField';
 :is(.TextField--disabled, .TextField.is-disabled) .TextField__passwordToggle__button {
     @include form-fields-tools.input-disabled();
 
+    background-color: form-fields-theme.$box-field-input-background-disabled;
     pointer-events: none;
     cursor: cursors.$disabled;
 }
-
-// 1.
-.spirit-v1-box-field-disabled .TextField .TextField__input:disabled ~ .TextField__passwordToggle__button,
-.spirit-v1-box-field-disabled :is(.TextField--disabled, .TextField.is-disabled) .TextField__passwordToggle__button {
-    background-color: form-fields-theme.$box-field-input-background-disabled;
-}
 // stylelint-enable
 
 :is(.TextField--disabled, .TextField.is-disabled) > :is(.TextField__validationText, [data-element='validation_text']) {

diff --git a/packages/web/src/scss/components/TextField/index.html b/packages/web/src/scss/components/TextField/index.html
@@ -261,20 +261,4 @@ <h2 class="docs-Heading">Password Toggle</h2>
   </div>
 </section>
 
-<section class="docs-Section spirit-v1-box-field-disabled">
-  <h2 class="docs-Heading">V1 Feature &mdash; new disabled state</h2>
-
-  <div class="docs-FormFieldGrid">
-    <div class="TextField TextField--disabled">
-      <label for="textFieldDisabledV1" class="TextField__label">Label</label>
-      <input type="text" id="textFieldDisabledV1" class="TextField__input" name="disabled" placeholder="Placeholder" disabled />
-    </div>
-
-    <div class="TextField TextField--disabled">
-      <label for="textFieldDisabledFilledV1" class="TextField__label TextField__label--required">Label</label>
-      <input type="text" id="textFieldDisabledFilledV1" class="TextField__input" name="disabledFilled" disabled value="Filled" required />
-    </div>
-  </div>
-</section>
-
 {{/layout/plain }}
diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss
@@ -170,16 +170,14 @@
 @mixin box-field-disabled-input() {
     @include input-disabled();
 
+    border-color: form-fields-theme.$box-field-input-border-color-disabled;
+    background-color: form-fields-theme.$box-field-input-background-disabled;
+
     &::placeholder {
         color: form-fields-theme.$box-field-input-placeholder-color-disabled;
     }
 }
 
-@mixin box-field-disabled-input-v1() {
-    border-color: form-fields-theme.$box-field-input-border-color-disabled;
-    background-color: form-fields-theme.$box-field-input-background-disabled;
-}
-
 @mixin item() {
     padding: form-fields-theme.$item-spacing;
     margin-block: 0;