From 272e2f530351c86d60efde9a03137c9751b19224 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 11 Nov 2021 17:11:52 -0800 Subject: [PATCH 1/6] fix: WHCM Button components --- .../components/button/skin.css | 386 +++++++++++++++++- .../button/stories/Button.stories.tsx | 149 +++++++ .../button/stories/ToggleButton.stories.tsx | 13 + 3 files changed, 547 insertions(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css index e450874f0fa..b44697df4ba 100644 --- a/packages/@adobe/spectrum-css-temp/components/button/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/button/skin.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. .spectrum-LogicButton, .spectrum-Button, -.spectrum-ActionButton--emphasized { +.spectrum-ActionButton { &:focus-ring, &.is-focused { &:after { @@ -1019,3 +1019,387 @@ governing permissions and limitations under the License. color: var(--spectrum-fieldbutton-text-color-disabled); } } + +@media (forced-colors: active) { + .spectrum-ActionButton, + .spectrum-Button, + .spectrum-ClearButton, + .spectrum-LogicButton, + .spectrum-FieldButton { + forced-color-adjust: none; + --spectrum-actionbutton-background-color: ButtonFace; + --spectrum-actionbutton-background-color-disabled: ButtonFace; + --spectrum-actionbutton-background-color-down: ButtonFace; + --spectrum-actionbutton-background-color-hover: ButtonFace; + --spectrum-actionbutton-background-color-key-focus: ButtonFace; + --spectrum-actionbutton-background-color-selected: Highlight; + --spectrum-actionbutton-background-color-selected-disabled: ButtonFace; + --spectrum-actionbutton-background-color-selected-down: Highlight; + --spectrum-actionbutton-background-color-selected-hover: Highlight; + --spectrum-actionbutton-background-color-selected-key-focus: Highlight; + --spectrum-actionbutton-border-color: ButtonText; + --spectrum-actionbutton-border-color-disabled: GrayText; + --spectrum-actionbutton-border-color-down: Highlight; + --spectrum-actionbutton-border-color-hover: Highlight; + --spectrum-actionbutton-border-color-key-focus: CanvasText; + --spectrum-actionbutton-border-color-selected: HighlightText; + --spectrum-actionbutton-border-color-selected-disabled: GrayText; + --spectrum-actionbutton-border-color-selected-down: HighlightText; + --spectrum-actionbutton-border-color-selected-hover: HighlightText; + --spectrum-actionbutton-border-color-selected-key-focus: CanvasText; + --spectrum-actionbutton-emphasized-background-color: ButtonFace; + --spectrum-actionbutton-emphasized-background-color-disabled: ButtonFace; + --spectrum-actionbutton-emphasized-background-color-down: Highlight; + --spectrum-actionbutton-emphasized-background-color-hover: Highlight; + --spectrum-actionbutton-emphasized-background-color-key-focus: ButtonFace; + --spectrum-actionbutton-emphasized-background-color-selected: Highlight; + --spectrum-actionbutton-emphasized-background-color-selected-disabled: ButtonFace; + --spectrum-actionbutton-emphasized-background-color-selected-down: Highlight; + --spectrum-actionbutton-emphasized-background-color-selected-hover: Highlight; + --spectrum-actionbutton-emphasized-background-color-selected-key-focus: Highlight; + --spectrum-actionbutton-emphasized-border-color: ButtonText; + --spectrum-actionbutton-emphasized-border-color-disabled: GrayText; + --spectrum-actionbutton-emphasized-border-color-down: ButtonText; + --spectrum-actionbutton-emphasized-border-color-hover: ButtonText; + --spectrum-actionbutton-emphasized-border-color-selected: HighlightText; + --spectrum-actionbutton-emphasized-border-color-selected-disabled: GrayText; + --spectrum-actionbutton-emphasized-border-color-selected-downed: HighlightText; + --spectrum-actionbutton-emphasized-border-color-selected-hover: HighlightText; + --spectrum-actionbutton-emphasized-hold-icon-color: ButtonText; + --spectrum-actionbutton-emphasized-hold-icon-color-disabled: GrayText; + --spectrum-actionbutton-emphasized-hold-icon-color-down: HighlightText; + --spectrum-actionbutton-emphasized-hold-icon-color-hover: HighlightText; + --spectrum-actionbutton-emphasized-hold-icon-color-key-focus: ButtonText; + --spectrum-actionbutton-emphasized-hold-icon-color-selected: ButtonFace; + --spectrum-actionbutton-emphasized-icon-color: ButtonText; + --spectrum-actionbutton-emphasized-icon-color-disabled: GrayText; + --spectrum-actionbutton-emphasized-icon-color-hover: HighlightText; + --spectrum-actionbutton-emphasized-icon-color-key-focus: ButtonText; + --spectrum-actionbutton-emphasized-icon-color-selected: HighlightText; + --spectrum-actionbutton-emphasized-icon-color-selected-disabled: GrayText; + --spectrum-actionbutton-emphasized-icon-color-selected-down: HighlightText; + --spectrum-actionbutton-emphasized-icon-color-selected-hover: HighlightText; + --spectrum-actionbutton-emphasized-icon-color-selected-key-focus: HighlightText; + --spectrum-actionbutton-emphasized-text-color: ButtonText; + --spectrum-actionbutton-emphasized-text-color-disabled: GrayText; + --spectrum-actionbutton-emphasized-text-color-down: HighlightText; + --spectrum-actionbutton-emphasized-text-color-hover: HighlightText; + --spectrum-actionbutton-emphasized-text-color-key-focus: ButtonText; + --spectrum-actionbutton-emphasized-text-color-selected: HighlightText; + --spectrum-actionbutton-emphasized-text-color-selected-disabled: GrayText; + --spectrum-actionbutton-emphasized-text-color-selected-down: HighlightText; + --spectrum-actionbutton-emphasized-text-color-selected-hover: HighlightText; + --spectrum-actionbutton-emphasized-text-color-selected-key-focus: HighlightText; + --spectrum-actionbutton-hold-icon-color: ButtonText; + --spectrum-actionbutton-hold-icon-color-disabled: GrayText; + --spectrum-actionbutton-hold-icon-color-down: ButtonText; + --spectrum-actionbutton-hold-icon-color-hover: ButtonText; + --spectrum-actionbutton-hold-icon-color-key-focus: ButtonText; + --spectrum-actionbutton-icon-color: ButtonText; + --spectrum-actionbutton-icon-color-disabled: GrayText; + --spectrum-actionbutton-icon-color-hover: ButtonText; + --spectrum-actionbutton-icon-color-key-focus: ButtonText; + --spectrum-actionbutton-icon-color-selected: HighlightText; + --spectrum-actionbutton-icon-color-selected-disabled: GrayText; + --spectrum-actionbutton-icon-color-selected-down: HighlightText; + --spectrum-actionbutton-icon-color-selected-hover: HighlightText; + --spectrum-actionbutton-icon-color-selected-key-focus: HighlightText; + --spectrum-actionbutton-quiet-background-color: ButtonFace; + --spectrum-actionbutton-quiet-background-color-disabled: ButtonFace; + --spectrum-actionbutton-quiet-background-color-down: ButtonFace; + --spectrum-actionbutton-quiet-background-color-hover: ButtonFace; + --spectrum-actionbutton-quiet-background-color-key-focus: ButtonFace; + --spectrum-actionbutton-quiet-background-color-selected: Highlight; + --spectrum-actionbutton-quiet-background-color-selected-disabled: ButtonFace; + --spectrum-actionbutton-quiet-background-color-selected-down: Highlight; + --spectrum-actionbutton-quiet-background-color-selected-hover: Highlight; + --spectrum-actionbutton-quiet-background-color-selected-key-focus: Highlight; + --spectrum-actionbutton-quiet-border-color: ButtonFace; + --spectrum-actionbutton-quiet-border-color-disabled: ButtonFace; + --spectrum-actionbutton-quiet-border-color-down: Highlight; + --spectrum-actionbutton-quiet-border-color-hover: Highlight; + --spectrum-actionbutton-quiet-border-color-key-focus: CanvasText; + --spectrum-actionbutton-quiet-border-color-selected: HighlightText; + --spectrum-actionbutton-quiet-border-color-selected-disabled: Canvas; + --spectrum-actionbutton-quiet-border-color-selected-down: HighlightText; + --spectrum-actionbutton-quiet-border-color-selected-hover: HighlightText; + --spectrum-actionbutton-quiet-border-color-selected-key-focus: HighlightText; + --spectrum-actionbutton-quiet-text-color: ButtonText; + --spectrum-actionbutton-quiet-text-color-disabled: GrayText; + --spectrum-actionbutton-quiet-text-color-down: ButtonText; + --spectrum-actionbutton-quiet-text-color-hover: ButtonText; + --spectrum-actionbutton-quiet-text-color-key-focus: ButtonText; + --spectrum-actionbutton-quiet-text-color-selected: HighlightText; + --spectrum-actionbutton-quiet-text-color-selected-disabled: GrayText; + --spectrum-actionbutton-quiet-text-color-selected-down: HighlightText; + --spectrum-actionbutton-quiet-text-color-selected-hover: HighlightText; + --spectrum-actionbutton-quiet-text-color-selected-key-focus: HighlightText; + --spectrum-actionbutton-static-background-color-active: ButtonFace; + --spectrum-actionbutton-static-background-color-focus: ButtonFace; + --spectrum-actionbutton-static-background-color-hover: ButtonFace; + --spectrum-actionbutton-static-border-color: ButtonText; + --spectrum-actionbutton-static-border-color-active: ButtonText; + --spectrum-actionbutton-static-border-color-focus: Highlight; + --spectrum-actionbutton-static-border-color-hover: ButtonText; + --spectrum-actionbutton-static-color: Highlight; + --spectrum-actionbutton-static-color-disabled: GrayText; + --spectrum-actionbutton-static-color-focus: Highlight; + --spectrum-actionbutton-static-color-selected: ButtonFace; + --spectrum-actionbutton-text-color: ButtonText; + --spectrum-actionbutton-text-color-disabled: GrayText; + --spectrum-actionbutton-text-color-down: ButtonText; + --spectrum-actionbutton-text-color-hover: ButtonText; + --spectrum-actionbutton-text-color-key-focus: ButtonText; + --spectrum-actionbutton-text-color-selected: HighlightText; + --spectrum-actionbutton-text-color-selected-disabled: GrayText; + --spectrum-actionbutton-text-color-selected-down: HighlightText; + --spectrum-actionbutton-text-color-selected-hover: HighlightText; + --spectrum-actionbutton-text-color-selected-key-focus: HighlightText; + --spectrum-button-cta-background-color: ButtonText; + --spectrum-button-cta-background-color-disabled: ButtonFace; + --spectrum-button-cta-background-color-down: Highlight; + --spectrum-button-cta-background-color-hover: Highlight; + --spectrum-button-cta-background-color-key-focus: Highlight; + --spectrum-button-cta-border-color: ButtonFace; + --spectrum-button-cta-border-color-disabled: GrayText; + --spectrum-button-cta-border-color-down: Highlight; + --spectrum-button-cta-border-color-hover: Highlight; + --spectrum-button-cta-border-color-key-focus: Highlight; + --spectrum-button-cta-text-color: ButtonFace; + --spectrum-button-cta-text-color-disabled: GrayText; + --spectrum-button-cta-text-color-down: ButtonFace; + --spectrum-button-cta-text-color-hover: ButtonFace; + --spectrum-button-cta-text-color-key-focus: ButtonFace; + --spectrum-button-over-background-background-color: ButtonFace; + --spectrum-button-over-background-background-color-disabled: ButtonFace; + --spectrum-button-over-background-background-color-down: ButtonFace; + --spectrum-button-over-background-background-color-hover: ButtonFace; + --spectrum-button-over-background-border-color: ButtonText; + --spectrum-button-over-background-border-color-disabled: GrayText; + --spectrum-button-over-background-border-color-down: Highlight; + --spectrum-button-over-background-border-color-hover: Highlight; + --spectrum-button-over-background-border-color-key-focus: Highlight; + --spectrum-button-over-background-text-color: ButtonText; + --spectrum-button-over-background-text-color-disabled: GrayText; + --spectrum-button-primary-background-color: ButtonFace; + --spectrum-button-primary-background-color-disabled: ButtonFace; + --spectrum-button-primary-background-color-down: ButtonFace; + --spectrum-button-primary-background-color-hover: ButtonFace; + --spectrum-button-primary-background-color-key-focus: ButtonFace; + --spectrum-button-primary-border-color: ButtonText; + --spectrum-button-primary-border-color-disabled: GrayText; + --spectrum-button-primary-border-color-down: Highlight; + --spectrum-button-primary-border-color-hover: Highlight; + --spectrum-button-primary-border-color-key-focus: Highlight; + --spectrum-button-primary-text-color: ButtonText; + --spectrum-button-primary-text-color-disabled: GrayText; + --spectrum-button-primary-text-color-down: ButtonText; + --spectrum-button-primary-text-color-hover: ButtonText; + --spectrum-button-primary-text-color-key-focus: ButtonText; + --spectrum-button-quiet-over-background-background-color: ButtonFace; + --spectrum-button-quiet-over-background-background-color-disabled: ButtonFace; + --spectrum-button-quiet-over-background-background-color-down: ButtonFace; + --spectrum-button-quiet-over-background-background-color-hover: ButtonFace; + --spectrum-button-quiet-over-background-border-color: ButtonFace; + --spectrum-button-quiet-over-background-border-color-disabled: ButtonFace; + --spectrum-button-quiet-over-background-border-color-down: Highlight; + --spectrum-button-quiet-over-background-border-color-hover: Highlight; + --spectrum-button-quiet-over-background-text-color: ButtonText; + --spectrum-button-quiet-over-background-text-color-disabled: GrayText; + --spectrum-button-quiet-over-background-text-color-down: ButtonText; + --spectrum-button-quiet-over-background-text-color-hover: ButtonText; + --spectrum-button-quiet-primary-background-color: ButtonFace; + --spectrum-button-quiet-primary-background-color-disabled: ButtonFace; + --spectrum-button-quiet-primary-background-color-down: ButtonFace; + --spectrum-button-quiet-primary-background-color-hover: ButtonFace; + --spectrum-button-quiet-primary-background-color-key-focus: ButtonFace; + --spectrum-button-quiet-primary-border-color: ButtonFace; + --spectrum-button-quiet-primary-border-color-disabled: ButtonFace; + --spectrum-button-quiet-primary-border-color-down: Highlight; + --spectrum-button-quiet-primary-border-color-hover: Highlight; + --spectrum-button-quiet-primary-border-color-key-focus: Highlight; + --spectrum-button-quiet-primary-text-color: ButtonText; + --spectrum-button-quiet-primary-text-color-disabled: GrayText; + --spectrum-button-quiet-primary-text-color-down: ButtonText; + --spectrum-button-quiet-primary-text-color-hover: ButtonText; + --spectrum-button-quiet-primary-text-color-key-focus: ButtonText; + --spectrum-button-quiet-secondary-background-color: ButtonFace; + --spectrum-button-quiet-secondary-background-color-disabled: ButtonFace; + --spectrum-button-quiet-secondary-background-color-down: ButtonFace; + --spectrum-button-quiet-secondary-background-color-hover: ButtonFace; + --spectrum-button-quiet-secondary-background-color-key-focus: ButtonFace; + --spectrum-button-quiet-secondary-border-color: ButtonFace; + --spectrum-button-quiet-secondary-border-color-disabled: ButtonFace; + --spectrum-button-quiet-secondary-border-color-down: Highlight; + --spectrum-button-quiet-secondary-border-color-hover: Highlight; + --spectrum-button-quiet-secondary-border-color-key-focus: Highlight; + --spectrum-button-quiet-secondary-text-color: ButtonText; + --spectrum-button-quiet-secondary-text-color-disabled: GrayText; + --spectrum-button-quiet-secondary-text-color-down: ButtonText; + --spectrum-button-quiet-secondary-text-color-hover: ButtonText; + --spectrum-button-quiet-secondary-text-color-key-focus: ButtonText; + --spectrum-button-quiet-warning-background-color: ButtonFace; + --spectrum-button-quiet-warning-background-color-disabled: ButtonFace; + --spectrum-button-quiet-warning-background-color-down: ButtonFace; + --spectrum-button-quiet-warning-background-color-hover: ButtonFace; + --spectrum-button-quiet-warning-background-color-key-focus: ButtonFace; + --spectrum-button-quiet-warning-border-color: ButtonFace; + --spectrum-button-quiet-warning-border-color-disabled: ButtonFace; + --spectrum-button-quiet-warning-border-color-down: Highlight; + --spectrum-button-quiet-warning-border-color-hover: Highlight; + --spectrum-button-quiet-warning-border-color-key-focus: Highlight; + --spectrum-button-quiet-warning-text-color: ButtonText; + --spectrum-button-quiet-warning-text-color-disabled: GrayText; + --spectrum-button-quiet-warning-text-color-down: ButtonText; + --spectrum-button-quiet-warning-text-color-hover: ButtonText; + --spectrum-button-quiet-warning-text-color-key-focus: ButtonText; + --spectrum-button-secondary-background-color: ButtonFace; + --spectrum-button-secondary-background-color-disabled: ButtonFace; + --spectrum-button-secondary-background-color-down: ButtonFace; + --spectrum-button-secondary-background-color-hover: ButtonFace; + --spectrum-button-secondary-background-color-key-focus: ButtonFace; + --spectrum-button-secondary-border-color: ButtonText; + --spectrum-button-secondary-border-color-disabled: GrayText; + --spectrum-button-secondary-border-color-down: Highlight; + --spectrum-button-secondary-border-color-hover: Highlight; + --spectrum-button-secondary-border-color-key-focus: Highlight; + --spectrum-button-secondary-text-color: ButtonText; + --spectrum-button-secondary-text-color-disabled: GrayText; + --spectrum-button-secondary-text-color-down: ButtonText; + --spectrum-button-secondary-text-color-hover: ButtonText; + --spectrum-button-secondary-text-color-key-focus: ButtonText; + --spectrum-button-warning-background-color: ButtonFace; + --spectrum-button-warning-background-color-disabled: ButtonFace; + --spectrum-button-warning-background-color-down: ButtonFace; + --spectrum-button-warning-background-color-hover: ButtonFace; + --spectrum-button-warning-background-color-key-focus: ButtonFace; + --spectrum-button-warning-border-color: ButtonText; + --spectrum-button-warning-border-color-disabled: GrayText; + --spectrum-button-warning-border-color-down: Highlight; + --spectrum-button-warning-border-color-hover: Highlight; + --spectrum-button-warning-border-color-key-focus: Highlight; + --spectrum-button-warning-text-color: ButtonText; + --spectrum-button-warning-text-color-disabled: GrayText; + --spectrum-button-warning-text-color-down: ButtonText; + --spectrum-button-warning-text-color-hover: ButtonText; + --spectrum-button-warning-text-color-key-focus: ButtonText; + --spectrum-clearbutton-medium-background-color: ButtonFace; + --spectrum-clearbutton-medium-background-color-disabled: ButtonFace; + --spectrum-clearbutton-medium-background-color-down: ButtonFace; + --spectrum-clearbutton-medium-background-color-hover: ButtonFace; + --spectrum-clearbutton-medium-background-color-key-focus: ButtonFace; + --spectrum-clearbutton-medium-icon-color: ButtonText; + --spectrum-clearbutton-medium-icon-color-disabled: GrayText; + --spectrum-clearbutton-medium-icon-color-down: Highlight; + --spectrum-clearbutton-medium-icon-color-hover: Highlight; + --spectrum-clearbutton-medium-icon-color-key-focus: Highlight; + --spectrum-fieldbutton-background-color: ButtonFace; + --spectrum-fieldbutton-background-color-disabled: ButtonFace; + --spectrum-fieldbutton-background-color-down: ButtonFace; + --spectrum-fieldbutton-background-color-hover: ButtonFace; + --spectrum-fieldbutton-background-color-key-focus: ButtonFace; + --spectrum-fieldbutton-border-color: ButtonText; + --spectrum-fieldbutton-border-color-down: Highlight; + --spectrum-fieldbutton-border-color-error: ButtonText; + --spectrum-fieldbutton-border-color-error-down: Highlight; + --spectrum-fieldbutton-border-color-error-hover: Highlight; + --spectrum-fieldbutton-border-color-error-key-focus: Highlight; + --spectrum-fieldbutton-border-color-hover: Highlight; + --spectrum-fieldbutton-border-color-key-focus: Highlight; + --spectrum-fieldbutton-icon-color-disabled: GrayText; + --spectrum-fieldbutton-placeholder-text-color-key-focus: ButtonText; + --spectrum-fieldbutton-quiet-background-color: ButtonFace; + --spectrum-fieldbutton-quiet-background-color-disabled: ButtonFace; + --spectrum-fieldbutton-quiet-background-color-down: ButtonFace; + --spectrum-fieldbutton-quiet-background-color-hover: ButtonFace; + --spectrum-fieldbutton-quiet-background-color-key-focus: ButtonFace; + --spectrum-fieldbutton-quiet-border-color: ButtonFace; + --spectrum-fieldbutton-quiet-border-color-down: Highlight; + --spectrum-fieldbutton-quiet-placeholder-text-color-key-focus: ButtonText; + --spectrum-fieldbutton-text-color: ButtonText; + --spectrum-fieldbutton-text-color-disabled: GrayText; + --spectrum-fieldbutton-text-color-hover: ButtonText; + --spectrum-fieldbutton-text-color-key-focus: ButtonText; + --spectrum-logicbutton-and-background-color: ButtonFace; + --spectrum-logicbutton-and-background-color-disabled: ButtonFace; + --spectrum-logicbutton-and-background-color-hover: ButtonFace; + --spectrum-logicbutton-and-border-color: ButtonText; + --spectrum-logicbutton-and-border-color-disabled: GrayText; + --spectrum-logicbutton-and-border-color-hover: Highlight; + --spectrum-logicbutton-and-text-color: ButtonText; + --spectrum-logicbutton-and-text-color-disabled: GrayText; + --spectrum-logicbutton-or-background-color: ButtonFace; + --spectrum-logicbutton-or-background-color-hover: ButtonFace; + --spectrum-logicbutton-or-border-color: ButtonText; + --spectrum-logicbutton-or-border-color-hover: Highlight; + --spectrum-logicbutton-or-text-color: ButtonText; + --spectrum-button-primary-focus-ring-color-key-focus: CanvasText; + --spectrum-button-primary-focus-ring-size-key-focus: 3px; + } + .spectrum-Button--overBackground { + &:hover { + color: ButtonText; + } + &:focus-ring { + color: ButtonText; + } + &.is-active { + color: ButtonText; + } + } + .spectrum-ActionButton { + &:focus-ring, + &.is-focused { + outline: CanvasText solid 3px; + + } + } + .spectrum-ActionButton--staticWhite, + .spectrum-ActionButton--staticBlack { + mix-blend-mode: normal; + --spectrum-actionbutton-static-background-color-hover: ButtonFace; + --spectrum-actionbutton-static-background-color-focus: ButtonFace; + --spectrum-actionbutton-static-background-color-active: ButtonFace; + --spectrum-actionbutton-static-border-color: ButtonText; + --spectrum-actionbutton-static-border-color-hover: ButtonText; + --spectrum-actionbutton-static-border-color-active: ButtonText; + --spectrum-actionbutton-static-border-color-focus: CanvasText; + --spectrum-actionbutton-static-border-disabled: GrayText; + --spectrum-actionbutton-static-color: ButtonText; + --spectrum-actionbutton-static-color-selected: HighlightText; /* becomes the background of the parent element due to mix-blend-mode */ + --spectrum-actionbutton-static-color-disabled: GrayText; + } + + .spectrum-ActionButton--emphasized { + &.spectrum-ActionButton--quiet.is-selected { + &:disabled, + &.is-disabled { + border-color: ButtonFace; + } + } + &.spectrum-ActionButton--quiet { + &:hover { + background-color: Highlight; + color: HighlightText; + + .spectrum-Icon { + fill: HighlightText; + } + + .spectrum-ActionButton-hold { + fill: HighlightText; + } + } + + &.is-active { + background-color: Highlight; + color: HighlightText; + + .spectrum-ActionButton-hold { + fill: HighlightText; + } + } + } + } + +} \ No newline at end of file diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx index 4a651ff3dd8..83cd88f98c1 100644 --- a/packages/@react-spectrum/button/stories/Button.stories.tsx +++ b/packages/@react-spectrum/button/stories/Button.stories.tsx @@ -89,6 +89,10 @@ storiesOf('Button', module) .add( 'element: a, rel: \'noopener noreferrer\'', () => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', variant: 'primary'}) + ) + .add( + 'styles to check WHCM support', + () => renderStyles() ); function render(props: SpectrumButtonProps = {variant: 'primary'}) { @@ -121,4 +125,149 @@ function render(props: SpectrumButtonProps )} ); + } + function renderStyles(props: SpectrumButtonProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx b/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx index d1b32ece4e1..c63714746f6 100644 --- a/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx +++ b/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx @@ -53,6 +53,19 @@ storiesOf('Button/ToggleButton', module) ) + ) + .add( + 'styles to check WHCM support', + () => ( + + + {render()} + {render({isEmphasized: true})} + {render({isQuiet: true})} + {render({isQuiet: true, isEmphasized: true})} + + + ) ); function render(props = {}) { From 8535f3332ca27472f32a2c56bcea2bccfd3cc3b7 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 1 Dec 2021 16:10:43 -0800 Subject: [PATCH 2/6] revert change in main style --- packages/@adobe/spectrum-css-temp/components/button/skin.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css index b44697df4ba..d55ef068f9f 100644 --- a/packages/@adobe/spectrum-css-temp/components/button/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/button/skin.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. .spectrum-LogicButton, .spectrum-Button, -.spectrum-ActionButton { +.spectrum-ActionButton--emphasized { &:focus-ring, &.is-focused { &:after { From f5d0ee7d6e4b9c5403bb23d08fb61d9ba71ffacc Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 1 Dec 2021 16:42:46 -0800 Subject: [PATCH 3/6] spacing --- .../@adobe/spectrum-css-temp/components/button/skin.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css index d55ef068f9f..05abc5ff813 100644 --- a/packages/@adobe/spectrum-css-temp/components/button/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/button/skin.css @@ -1369,7 +1369,6 @@ governing permissions and limitations under the License. --spectrum-actionbutton-static-color-selected: HighlightText; /* becomes the background of the parent element due to mix-blend-mode */ --spectrum-actionbutton-static-color-disabled: GrayText; } - .spectrum-ActionButton--emphasized { &.spectrum-ActionButton--quiet.is-selected { &:disabled, @@ -1381,25 +1380,20 @@ governing permissions and limitations under the License. &:hover { background-color: Highlight; color: HighlightText; - .spectrum-Icon { fill: HighlightText; } - .spectrum-ActionButton-hold { fill: HighlightText; } } - &.is-active { background-color: Highlight; color: HighlightText; - .spectrum-ActionButton-hold { fill: HighlightText; } } } } - } \ No newline at end of file From 5f6ef6fe84ffdfefe1e3ec4cb1a5c8633caafc61 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Wed, 1 Dec 2021 18:21:01 -0800 Subject: [PATCH 4/6] fix linter --- .../button/stories/Button.stories.tsx | 288 +++++++++--------- 1 file changed, 144 insertions(+), 144 deletions(-) diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx index 83cd88f98c1..c88eca8e861 100644 --- a/packages/@react-spectrum/button/stories/Button.stories.tsx +++ b/packages/@react-spectrum/button/stories/Button.stories.tsx @@ -125,149 +125,149 @@ function render(props: SpectrumButtonProps )} ); - } - function renderStyles(props: SpectrumButtonProps = {}) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +} +function renderStyles(props: SpectrumButtonProps = {variant: 'primary'}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + - ); + + + + + + ); } From f99acf60445b51cdd2eaf92f925ea3f57da4b02e Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 16 Dec 2021 12:30:20 -0800 Subject: [PATCH 5/6] updating WHCM var overrides removed most of the css properties and replaced with var overrides --- .../components/button/skin.css | 65 ++++++------------- .../stories/ActionGroup.stories.tsx | 2 +- 2 files changed, 21 insertions(+), 46 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/button/skin.css b/packages/@adobe/spectrum-css-temp/components/button/skin.css index 05abc5ff813..54797e05ef8 100644 --- a/packages/@adobe/spectrum-css-temp/components/button/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/button/skin.css @@ -13,6 +13,8 @@ governing permissions and limitations under the License. :root { /* Overridden because of the way we draw focus rings */ --spectrum-actionbutton-quiet-border-size-key-focus: 1px; + /* Interactions with overbackground button should match background. Not a DNA token, overridden in WHCM. */ + --spectrum-button-over-background-color: inherit; } .spectrum-LogicButton, @@ -209,13 +211,13 @@ governing permissions and limitations under the License. &:hover { background-color: var(--spectrum-button-over-background-background-color-hover); border-color: var(--spectrum-button-over-background-border-color-hover); - color: inherit; + color: var(--spectrum-button-over-background-color); } &:focus-ring { background-color: var(--spectrum-button-over-background-background-color-hover); border-color: var(--spectrum-button-over-background-border-color-hover); - color: inherit; + color: var(--spectrum-button-over-background-color);; &:after { box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size) var(--spectrum-button-over-background-border-color-key-focus); @@ -225,7 +227,7 @@ governing permissions and limitations under the License. &.is-active { background-color: var(--spectrum-button-over-background-background-color-down); border-color: var(--spectrum-button-over-background-border-color-down); - color: inherit; + color: var(--spectrum-button-over-background-color);; } &:disabled, @@ -1336,26 +1338,14 @@ governing permissions and limitations under the License. --spectrum-button-primary-focus-ring-color-key-focus: CanvasText; --spectrum-button-primary-focus-ring-size-key-focus: 3px; } + .spectrum-Button--overBackground { - &:hover { - color: ButtonText; - } - &:focus-ring { - color: ButtonText; - } - &.is-active { - color: ButtonText; - } - } - .spectrum-ActionButton { - &:focus-ring, - &.is-focused { - outline: CanvasText solid 3px; - - } + --spectrum-button-over-background-color: ButtonText; } + .spectrum-ActionButton--staticWhite, .spectrum-ActionButton--staticBlack { + /* For some reason, making this a var doesn't work, the value is inlined in the css */ mix-blend-mode: normal; --spectrum-actionbutton-static-background-color-hover: ButtonFace; --spectrum-actionbutton-static-background-color-focus: ButtonFace; @@ -1369,31 +1359,16 @@ governing permissions and limitations under the License. --spectrum-actionbutton-static-color-selected: HighlightText; /* becomes the background of the parent element due to mix-blend-mode */ --spectrum-actionbutton-static-color-disabled: GrayText; } - .spectrum-ActionButton--emphasized { - &.spectrum-ActionButton--quiet.is-selected { - &:disabled, - &.is-disabled { - border-color: ButtonFace; - } - } - &.spectrum-ActionButton--quiet { - &:hover { - background-color: Highlight; - color: HighlightText; - .spectrum-Icon { - fill: HighlightText; - } - .spectrum-ActionButton-hold { - fill: HighlightText; - } - } - &.is-active { - background-color: Highlight; - color: HighlightText; - .spectrum-ActionButton-hold { - fill: HighlightText; - } - } + + .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet { + --spectrum-actionbutton-emphasized-border-color-selected-disabled: ButtonFace; + --spectrum-actionbutton-quiet-background-color-hover: Highlight; + --spectrum-actionbutton-quiet-text-color-hover: HighlightText; + --spectrum-actionbutton-quiet-background-color-down: Highlight; + --spectrum-actionbutton-quiet-text-color-down: HighlightText; + + &.is-active { + --spectrum-actionbutton-emphasized-icon-color-key-focus: HighlightText; } } -} \ No newline at end of file +} diff --git a/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx index 9f5b89854e1..aed2e31896c 100644 --- a/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx +++ b/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx @@ -158,7 +158,7 @@ storiesOf('ActionGroup', module) ) .add( 'isQuiet, isEmphasized', - () => render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1']}, viewItems) + () => render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1', '2'], disabledKeys:['2']}, viewItems) ) .add( 'staticColor=white', From f5a1671bc028ae3a094cee54ffd1e3957c59447c Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 22 Dec 2021 12:26:38 -0800 Subject: [PATCH 6/6] Fix lint --- .../@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx index aed2e31896c..5ffafc232a0 100644 --- a/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx +++ b/packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx @@ -158,7 +158,7 @@ storiesOf('ActionGroup', module) ) .add( 'isQuiet, isEmphasized', - () => render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1', '2'], disabledKeys:['2']}, viewItems) + () => render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1', '2'], disabledKeys: ['2']}, viewItems) ) .add( 'staticColor=white',