fix(ContentSwitcher): resolve text contrast violations (#8130)

* fix(content-switcher): set unselected background color * fix(content-switcher): add unselected switcher button borders * fix(theme-tokens): update content switcher divider token * fix(content-switcher): update switcher button hover color * fix(content-switcher): remove borders for middle selected switchers * fix(content-switcher): update disabled switcher button styles * fix(content-switcher): update disabled switcher styles * refactor(content-switcher): remove unused styles * fix(content-switcher): update divider token per new spec * docs(ContentSwitcher): mark `light` prop for deprecation * refactor(content-switcher): remove redundant light variant styles * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 29, 2021 · 43a8379 · 43a8379
1 parent e928b91
commit 43a8379
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 40 deletions.
diff --git a/packages/components/src/components/content-switcher/_content-switcher.scss b/packages/components/src/components/content-switcher/_content-switcher.scss
@@ -30,10 +30,6 @@
     height: rem(48px);
   }
 
-  .#{$prefix}--content-switcher--disabled {
-    cursor: not-allowed;
-  }
-
   .#{$prefix}--content-switcher-btn {
     @include reset;
     @include type-style('body-short-01');
@@ -50,8 +46,10 @@
     white-space: nowrap;
     text-align: left;
     text-decoration: none;
-    background-color: $ui-01;
+    background-color: transparent;
     border: none;
+    border-top: rem(1px) solid $ui-05;
+    border-bottom: rem(1px) solid $ui-05;
     transition: all $duration--fast-01 motion(standard, productive);
 
     &:focus {
@@ -66,6 +64,7 @@
     }
 
     &:hover {
+      color: $text-01;
       cursor: pointer;
     }
 
@@ -78,33 +77,38 @@
 
     &:disabled {
       color: $disabled-02;
-      background-color: $disabled-01;
-      pointer-events: none;
+      background-color: transparent;
+      border-color: $disabled-02;
 
       &:hover {
         cursor: not-allowed;
       }
     }
-  }
-
-  .#{$prefix}--content-switcher--light .#{$prefix}--content-switcher-btn {
-    background-color: $ui-02;
 
-    &:hover {
-      background-color: $hover-light-ui;
+    &:disabled:first-child,
+    &:disabled:last-child {
+      border-color: $disabled-02;
     }
   }
 
   .#{$prefix}--content-switcher-btn:first-child {
+    border-left: rem(1px) solid $ui-05;
     border-top-left-radius: rem(4px);
     border-bottom-left-radius: rem(4px);
   }
 
   .#{$prefix}--content-switcher-btn:last-child {
+    border-right: rem(1px) solid $ui-05;
     border-top-right-radius: rem(4px);
     border-bottom-right-radius: rem(4px);
   }
 
+  .#{$prefix}--content-switcher--selected,
+  .#{$prefix}--content-switcher--selected:first-child,
+  .#{$prefix}--content-switcher--selected:last-child {
+    border: 0;
+  }
+
   .#{$prefix}--content-switcher-btn::before {
     position: absolute;
     left: 0;
@@ -120,26 +124,6 @@
     display: none;
   }
 
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn::before {
-    background-color: $decorative-01;
-  }
-
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:focus::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:focus
-    + .#{$prefix}--content-switcher-btn::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:hover::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn:hover
-    + .#{$prefix}--content-switcher-btn::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher--selected::before,
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher--selected
-    + .#{$prefix}--content-switcher-btn::before,
   .#{$prefix}--content-switcher-btn:focus::before,
   .#{$prefix}--content-switcher-btn:focus
     + .#{$prefix}--content-switcher-btn::before,
@@ -152,6 +136,19 @@
     background-color: transparent;
   }
 
+  .#{$prefix}--content-switcher-btn:disabled::before,
+  .#{$prefix}--content-switcher-btn:disabled:hover
+    + .#{$prefix}--content-switcher-btn:disabled::before {
+    background-color: $disabled-02;
+  }
+
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled
+    + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected:disabled:hover
+    + .#{$prefix}--content-switcher-btn::before {
+    background-color: transparent;
+  }
+
   .#{$prefix}--content-switcher__icon {
     transition: fill $duration--fast-01 motion(standard, productive);
     fill: $text-02;
@@ -173,8 +170,6 @@
     fill: $text-01;
   }
 
-  .#{$prefix}--content-switcher--light
-    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected,
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
     z-index: 3;
     color: $inverse-01;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -854,9 +854,7 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "onChange": Object {
         "isRequired": true,
         "type": "func",

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -25,7 +25,7 @@ const sizes = {
 
 const props = {
   contentSwitcher: () => ({
-    light: boolean('Light variant (light)', false),
+    light: boolean('[Deprecated]: Light variant (light)', false),
     selectedIndex: select('Selected index (selectedIndex)', [0, 1, 2], 0),
     selectionMode: select(
       'Selection mode (selectionMode)',

diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import { composeEventHandlers } from '../../tools/events';
 import { getNextIndex, matches, keys } from '../../internal/keyboard';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
@@ -38,7 +39,11 @@ export default class ContentSwitcher extends React.Component {
     /**
      * `true` to use the light variant.
      */
-    light: PropTypes.bool,
+    light: deprecate(
+      PropTypes.bool,
+      'The `light` prop for `ContentSwitcher` is no longer needed and has ' +
+        'been deprecated. It will be removed in the next major release.'
+    ),
 
     /**
      * Specify an `onChange` handler that is called whenever the ContentSwitcher