diff --git a/UNRELEASED.md b/UNRELEASED.md index f50d13b618d..1f40f313493 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -6,6 +6,8 @@ ### Bug fixes +- Fixed focus state color on monochrome `Buttons` ([#2684](https://github.com/Shopify/polaris-react/pull/2684)) + ### Documentation ### Development workflow diff --git a/documentation/Color system.md b/documentation/Color system.md index 01cfd0ba649..ca1a094ed06 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -238,6 +238,7 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-non-null-content` | `''` | | `--p-choice-size` | `2rem` | | `--p-choice-margin` | `0.1rem` | +| `--p-control-border-width` | `0.2rem` | | `--p-banner-border-default` | `inset 0 0.2rem 0 0 var(--p-border), inset 0 0 0 0.2rem var(--p-border)` | | `--p-banner-border-success` | `inset 0 0.2rem 0 0 var(--p-border-success), inset 0 0 0 0.2rem var(--p-border-success)` | | `--p-banner-border-highlight` | `inset 0 0.2rem 0 0 var(--p-border-highlight), inset 0 0 0 0.2rem var(--p-border-highlight)` | diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 81a4bb6b7f2..6f8f5005c6c 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -80,32 +80,43 @@ $stacking-order: ( border-top-right-radius: 0; border-bottom-right-radius: 0; + &::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &:focus { z-index: z-index(focused, $stacking-order); } } } -// stylelint-disable selector-max-combinators + +// stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-specificity [data-buttongroup-segmented] { - .Button { + .Button, + .Button::after { border-radius: 0; } - > :first-child .Button { + > :first-child .Button, + > :first-child .Button::after { border-top-left-radius: var(--p-border-radius-base, border-radius()); border-bottom-left-radius: var(--p-border-radius-base, border-radius()); } - > :last-child .Button { + > :last-child .Button, + > :last-child .Button::after { border-top-right-radius: var(--p-border-radius-base, border-radius()); border-bottom-right-radius: var(--p-border-radius-base, border-radius()); } } [data-buttongroup-connected-top] { - > :first-child .Button { + > :first-child .Button, + > :first-child .Button::after { border-top-left-radius: 0; } - > :last-child .Button { + > :last-child .Button, + > :last-child .Button::after { border-top-right-radius: 0; } } @@ -115,7 +126,7 @@ $stacking-order: ( @include button-full-width; } } -// stylelint-enable selector-max-combinators +// stylelint-enable selector-max-combinators, selector-max-compound-selectors, selector-max-specificity .Content { @include text-style-button; position: relative; @@ -640,6 +651,10 @@ $stacking-order: ( } } + &:focus { + box-shadow: 0 0 0 1px currentColor; + } + &.globalTheming { box-shadow: 0 0 0 border-width('base') currentColor; @@ -688,5 +703,10 @@ $stacking-order: ( margin-left: rem(1px); border-top-left-radius: 0; border-bottom-left-radius: 0; + + &::after { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } } } diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 499dcaddaa5..57dcfd4b497 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -1,5 +1,4 @@ @import '../../styles/common'; -$control-size: rem(16px); .Checkbox { position: relative; @@ -107,7 +106,7 @@ $control-size: rem(16px); display: block; width: 100%; height: 100%; - @include focus-ring($border-width: var(--control-border-width)); + @include focus-ring($border-width: var(--p-control-border-width)); } .Icon { diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index f7e35840109..4cb8c0614dd 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -74,7 +74,6 @@ } .RadioButton.globalTheming { - --control-border-width: #{rem(2px)}; --icon-size: #{rem(10px)}; margin: var(--p-choice-margin, 0); @@ -86,7 +85,7 @@ display: block; width: 100%; height: 100%; - border: var(--control-border-width) solid var(--p-border-secondary); + border: var(--p-control-border-width) solid var(--p-border-secondary); border-radius: 50%; background-color: var(--p-surface); transition: border-color var(--p-duration-1-0-0) var(--p-ease); @@ -111,7 +110,7 @@ background: ms-high-contrast-color('text'); } - @include focus-ring($border-width: var(--control-border-width)); + @include focus-ring($border-width: var(--p-control-border-width)); &::after { border-radius: 50%; diff --git a/src/components/ResourceList/components/CheckableButton/CheckableButton.scss b/src/components/ResourceList/components/CheckableButton/CheckableButton.scss index 345735a0f02..833de66f4cf 100644 --- a/src/components/ResourceList/components/CheckableButton/CheckableButton.scss +++ b/src/components/ResourceList/components/CheckableButton/CheckableButton.scss @@ -75,6 +75,10 @@ $chekbox-label-margin: rem(20px); border-radius: border-radius(); box-shadow: none; background: transparent; + // stylelint-disable-next-line selector-max-class + &.globalTheming { + border: none; + } &:hover { background: transparent; @@ -100,6 +104,12 @@ $chekbox-label-margin: rem(20px); height: $control-size; width: $control-size; margin-left: (-1 * (spacing(tight) + rem(1px))); // 1px accounts for border + + .globalTheming & { + height: var(--p-choice-size); + width: var(--p-choice-size); + margin-left: calc(-1 * #{spacing(tight)} - var(--p-control-border-width)); + } } .Label { @@ -111,4 +121,7 @@ $chekbox-label-margin: rem(20px); text-overflow: ellipsis; // padding to fix the bottom of letters being cutoff by overflow: hidden padding: rem(1px) 0; + .globalTheming & { + margin-left: calc(#{$chekbox-label-margin} - var(--p-control-border-width)); + } } diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 7752de27f24..305e9037ba5 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -99,21 +99,19 @@ } // design-language } @else if $global-theming == true { - --control-border-width: #{rem(2px)}; - @if $style == base { position: relative; - border: var(--control-border-width) solid var(--p-border-secondary); + border: var(--p-control-border-width) solid var(--p-border-secondary); background-color: var(--p-surface); border-radius: var(--p-border-radius-base); &::before { content: ''; position: absolute; - top: calc(-1 * var(--control-border-width)); - right: calc(-1 * var(--control-border-width)); - bottom: calc(-1 * var(--control-border-width)); - left: calc(-1 * var(--control-border-width)); + top: calc(-1 * var(--p-control-border-width)); + right: calc(-1 * var(--p-control-border-width)); + bottom: calc(-1 * var(--p-control-border-width)); + left: calc(-1 * var(--p-control-border-width)); border-radius: var(--p-border-radius-base); background-color: var(--p-action-interactive); opacity: 0; diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index acb4baeb42a..8811ff5141e 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -24,6 +24,7 @@ const Overrides = { nonNullContent: "''", choiceSize: rem('20px'), choiceMargin: rem('1px'), + controlBorderWidth: rem('2px'), bannerBorderDefault: buildBannerBorder('--p-border'), bannerBorderSuccess: buildBannerBorder('--p-border-success'), bannerBorderHighlight: buildBannerBorder('--p-border-highlight'),