Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ContentSwitcher): resolve text contrast violations #8130

Merged
merged 13 commits into from
Mar 29, 2021
Merged

fix(ContentSwitcher): resolve text contrast violations #8130

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
172c3a1
fix(content-switcher): set unselected background color
emyarod Mar 19, 2021
5ab50c8
fix(content-switcher): add unselected switcher button borders
emyarod Mar 19, 2021
09c2969
fix(theme-tokens): update content switcher divider token
emyarod Mar 19, 2021
b79eeb4
fix(content-switcher): update switcher button hover color
emyarod Mar 19, 2021
4666799
fix(content-switcher): remove borders for middle selected switchers
emyarod Mar 19, 2021
3f2e3b9
fix(content-switcher): update disabled switcher button styles
emyarod Mar 19, 2021
d7c3984
fix(content-switcher): update disabled switcher styles
emyarod Mar 19, 2021
b93f803
refactor(content-switcher): remove unused styles
emyarod Mar 19, 2021
cf979be
fix(content-switcher): update divider token per new spec
emyarod Mar 24, 2021
57e8863
docs(ContentSwitcher): mark `light` prop for deprecation
emyarod Mar 24, 2021
7f2b073
refactor(content-switcher): remove redundant light variant styles
emyarod Mar 24, 2021
b7bb110
chore: update snapshots
emyarod Mar 24, 2021
b04c265
Merge branch 'main' into 6745-content-switcher-text-contrast-updates
kodiakhq[bot] Mar 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 30 additions & 35 deletions packages/components/src/components/content-switcher/_content-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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 {
Expand All @@ -66,6 +64,7 @@
}

&:hover {
color: $text-01;
cursor: pointer;
}

Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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;
Expand Down
4 changes: 1 addition & 3 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -854,9 +854,7 @@ Map {
"className": Object {
"type": "string",
},
"light": Object {
"type": "bool",
},
"light": [Function],
"onChange": Object {
"isRequired": true,
"type": "func",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down
7 changes: 6 additions & 1 deletion packages/react/src/components/ContentSwitcher/ContentSwitcher.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand Down