Skip to content

Commit

Permalink
fix(theme): remove field-disabled, layer-disabled tokens (#10535)
Browse files Browse the repository at this point in the history 
* fix(theme): remove fieldDisabled, -disabled, use  instead

* fix(theme): remove layerDisabled, -disabled, use  instead

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>
  • Loading branch information
@tay1orjones @kodiakhq
@joshblack @abbeyhrt
4 people committed Jan 27, 2022
1 parent e7d8d15 commit e791900
Show file tree
Hide file tree
Showing 35 changed files with 132 additions and 189 deletions.
3 changes: 0 additions & 3 deletions docs/migration/v11.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1582,10 +1582,7 @@ For full documentation, visit the
| disabled-02 | text-disabled | | Split |
| disabled-02 | icon-disabled | | Split |
| disabled-02 | button-disabled | | Split |
| disabled-01 | layer-disabled-01 | | Split |
| disabled-01 | field-disabled-01 | | Split |
| disabled-01 | border-disabled-01 | | Split |
| disabled-01 | field-disabled-02 | | Split |
| disabled-01 | border-disabled-03 | | Split |
| decorative-01 | border-subtle-02 | border-subtle | Updated |
| danger-02 | button-danger-secondary | | Updated |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/data-table/_data-table-action.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@

.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
.#{$prefix}--search-magnifier-icon {
background-color: $layer-disabled;
background-color: $layer;
cursor: not-allowed;
transition: background-color none;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/date-picker/_date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@

&:disabled {
border-bottom: 1px solid transparent;
background-color: $field-disabled;
background-color: $field;
color: $text-disabled;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/search/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@

.#{$prefix}--search-input[disabled] {
border-bottom: 1px solid transparent;
background-color: $field-disabled;
background-color: $field;
color: $disabled;
cursor: not-allowed;

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/text-input/_text-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@
@include focus-outline('reset');

border-bottom: 1px solid transparent;
background-color: $field-disabled;
background-color: $field;

color: $text-disabled;
cursor: not-allowed;
Expand Down
2 changes: 0 additions & 2 deletions packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ Array [
"field",
"field01",
"field02",
"fieldDisabled",
"fieldHover",
"fluid",
"fluidDisplay01",
Expand Down Expand Up @@ -234,7 +233,6 @@ Array [
"layerAccentActive",
"layerAccentHover",
"layerActive",
"layerDisabled",
"layerHover",
"layerSelected",
"layerSelectedDisabled",
Expand Down
226 changes: 112 additions & 114 deletions packages/styles/scss/__tests__/theme-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,119 +33,117 @@ describe('@carbon/styles/scss/theme', () => {
theme: true,
});
expect(api.variables).toMatchInlineSnapshot(`
Array [
"fallback",
"theme",
"background",
"background-active",
"background-selected",
"background-selected-hover",
"background-hover",
"background-brand",
"background-inverse",
"background-inverse-hover",
"layer-01",
"layer-active-01",
"layer-hover-01",
"layer-selected-01",
"layer-selected-hover-01",
"layer-02",
"layer-active-02",
"layer-hover-02",
"layer-selected-02",
"layer-selected-hover-02",
"layer-03",
"layer-active-03",
"layer-hover-03",
"layer-selected-03",
"layer-selected-hover-03",
"layer-disabled",
"layer-selected-inverse",
"layer-selected-disabled",
"layer-accent-01",
"layer-accent-active-01",
"layer-accent-hover-01",
"layer-accent-02",
"layer-accent-active-02",
"layer-accent-hover-02",
"layer-accent-03",
"layer-accent-active-03",
"layer-accent-hover-03",
"field-01",
"field-hover-01",
"field-02",
"field-hover-02",
"field-03",
"field-hover-03",
"field-disabled",
"interactive",
"border-subtle-00",
"border-subtle-01",
"border-subtle-selected-01",
"border-subtle-02",
"border-subtle-selected-02",
"border-subtle-03",
"border-subtle-selected-03",
"border-strong-01",
"border-strong-02",
"border-strong-03",
"border-inverse",
"border-interactive",
"border-disabled",
"text-primary",
"text-secondary",
"text-placeholder",
"text-helper",
"text-error",
"text-inverse",
"text-on-color",
"text-on-color-disabled",
"text-disabled",
"link-primary",
"link-primary-hover",
"link-secondary",
"link-inverse",
"link-visited",
"icon-primary",
"icon-secondary",
"icon-inverse",
"icon-on-color",
"icon-on-color-disabled",
"icon-disabled",
"support-error",
"support-success",
"support-warning",
"support-info",
"support-error-inverse",
"support-success-inverse",
"support-warning-inverse",
"support-info-inverse",
"support-caution-major",
"support-caution-minor",
"support-caution-undefined",
"highlight",
"overlay",
"toggle-off",
"shadow",
"focus",
"focus-inset",
"focus-inverse",
"skeleton-background",
"skeleton-element",
"layer",
"layer-active",
"layer-hover",
"layer-selected",
"layer-selected-hover",
"layer-accent",
"layer-accent-hover",
"layer-accent-active",
"field",
"field-hover",
"border-subtle",
"border-subtle-selected",
"border-strong",
]
`);
Array [
"fallback",
"theme",
"background",
"background-active",
"background-selected",
"background-selected-hover",
"background-hover",
"background-brand",
"background-inverse",
"background-inverse-hover",
"layer-01",
"layer-active-01",
"layer-hover-01",
"layer-selected-01",
"layer-selected-hover-01",
"layer-02",
"layer-active-02",
"layer-hover-02",
"layer-selected-02",
"layer-selected-hover-02",
"layer-03",
"layer-active-03",
"layer-hover-03",
"layer-selected-03",
"layer-selected-hover-03",
"layer-selected-inverse",
"layer-selected-disabled",
"layer-accent-01",
"layer-accent-active-01",
"layer-accent-hover-01",
"layer-accent-02",
"layer-accent-active-02",
"layer-accent-hover-02",
"layer-accent-03",
"layer-accent-active-03",
"layer-accent-hover-03",
"field-01",
"field-hover-01",
"field-02",
"field-hover-02",
"field-03",
"field-hover-03",
"interactive",
"border-subtle-00",
"border-subtle-01",
"border-subtle-selected-01",
"border-subtle-02",
"border-subtle-selected-02",
"border-subtle-03",
"border-subtle-selected-03",
"border-strong-01",
"border-strong-02",
"border-strong-03",
"border-inverse",
"border-interactive",
"border-disabled",
"text-primary",
"text-secondary",
"text-placeholder",
"text-helper",
"text-error",
"text-inverse",
"text-on-color",
"text-on-color-disabled",
"text-disabled",
"link-primary",
"link-primary-hover",
"link-secondary",
"link-inverse",
"link-visited",
"icon-primary",
"icon-secondary",
"icon-inverse",
"icon-on-color",
"icon-on-color-disabled",
"icon-disabled",
"support-error",
"support-success",
"support-warning",
"support-info",
"support-error-inverse",
"support-success-inverse",
"support-warning-inverse",
"support-info-inverse",
"support-caution-major",
"support-caution-minor",
"support-caution-undefined",
"highlight",
"overlay",
"toggle-off",
"shadow",
"focus",
"focus-inset",
"focus-inverse",
"skeleton-background",
"skeleton-element",
"layer",
"layer-active",
"layer-hover",
"layer-selected",
"layer-selected-hover",
"layer-accent",
"layer-accent-hover",
"layer-accent-active",
"field",
"field-hover",
"border-subtle",
"border-subtle-selected",
"border-strong",
]
`);
});
});
4 changes: 2 additions & 2 deletions packages/styles/scss/components/code-snippet/_code-snippet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,13 @@ $copy-btn-feedback: $background-inverse !default;
.#{$prefix}--snippet--disabled,
.#{$prefix}--snippet--disabled
.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
background-color: $layer-disabled;
background-color: $layer;
color: $text-disabled;
}

.#{$prefix}--snippet--disabled .#{$prefix}--snippet-btn--expand:hover,
.#{$prefix}--snippet--disabled .#{$prefix}--copy-btn:hover {
background-color: $layer-disabled;
background-color: $layer;
color: $text-disabled;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/data-table/action/_data-table-action.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@

.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
.#{$prefix}--search-magnifier-icon {
background-color: $layer-disabled;
background-color: $layer;
cursor: not-allowed;
transition: background-color none;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/date-picker/_date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@

&:disabled {
border-bottom: 1px solid transparent;
background-color: $field-disabled;
background-color: $field;
color: $text-disabled;
cursor: not-allowed;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/list-box/_list-box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,7 @@ $list-box-menu-width: rem(300px);
}

.#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
@include tag-theme($text-disabled, $field-disabled);
@include tag-theme($text-disabled, $field);

> svg {
fill: $icon-disabled;
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/number-input/_number-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
.#{$prefix}--number input[type='number']:disabled,
.#{$prefix}--number--readonly input[type='number'] {
border-bottom-color: transparent;
background-color: $field-disabled;
background-color: $field;
color: $text-disabled;
cursor: not-allowed;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/scss/components/select/_select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
&:disabled,
&:hover:disabled {
border-bottom-color: $border-disabled;
background-color: $field-disabled;
background-color: $field;
color: $text-disabled;
cursor: not-allowed;
}
Expand Down Expand Up @@ -221,7 +221,7 @@

.#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
.#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
background-color: $field-disabled;
background-color: $field;
}

.#{$prefix}--select--inline .#{$prefix}--select__arrow {
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/slider/_slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@
.#{$prefix}--slider-text-input,
.#{$prefix}--slider--disabled ~ .#{$prefix}--slider-text-input {
border: none;
background-color: $field-disabled;
background-color: $field;
color: $text-disabled;
cursor: not-allowed;
transition: none;
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/tag/_tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
.#{$prefix}--tag--disabled,
.#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
.#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
@include tag-theme($layer-disabled, $text-disabled);
@include tag-theme($layer, $text-disabled);

&:hover {
cursor: not-allowed;
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/text-area/_text-area.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
//-----------------------------
.#{$prefix}--text-area:disabled {
border-bottom: 1px solid transparent;
background-color: $field-disabled;
background-color: $field;
color: $text-disabled;
cursor: not-allowed;
outline: none;
Expand Down

0 comments on commit e791900

Please sign in to comment.