Skip to content

Commit

Permalink
Fix button design issues (#3741)
Browse files Browse the repository at this point in the history
  • Loading branch information
@devongovett
devongovett authored Nov 15, 2022
1 parent e4ab489 commit d311731
Show file tree
Hide file tree
Showing 16 changed files with 94 additions and 83 deletions.
112 changes: 64 additions & 48 deletions packages/@adobe/spectrum-css-temp/components/button/skin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,22 @@ governing permissions and limitations under the License.
/* Interactions with overbackground button should match background. Not a DNA token, overridden in WHCM. */
--spectrum-button-over-background-color: inherit;

--spectrum-actionbutton-background-color-selected: var(--spectrum-alias-toggle-color-selected);
--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-alias-toggle-color-selected-hover);
--spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-alias-toggle-color-selected-key-focus);
--spectrum-actionbutton-background-color-selected-down: var(--spectrum-alias-toggle-color-selected-down);
--spectrum-actionbutton-border-color-selected: var(--spectrum-actionbutton-background-color-selected);
--spectrum-actionbutton-border-color-selected-hover: var(--spectrum-actionbutton-background-color-selected-hover);
--spectrum-actionbutton-border-color-selected-key-focus: var(--spectrum-actionbutton-background-color-selected-key-focus);
--spectrum-actionbutton-border-color-selected-down: var(--spectrum-actionbutton-background-color-selected-down);
--spectrum-actionbutton-text-color-selected: white;
--spectrum-actionbutton-text-color-selected-hover: white;
--spectrum-actionbutton-text-color-selected-key-focus: white;
--spectrum-actionbutton-text-color-selected-down: white;
--spectrum-actionbutton-icon-color-selected: white;
--spectrum-actionbutton-icon-color-selected-hover: white;
--spectrum-actionbutton-icon-color-selected-key-focus: white;
--spectrum-actionbutton-icon-color-selected-down: white;
--spectrum-actionbutton-text-color-selected: var(--spectrum-gray-50);
--spectrum-actionbutton-text-color-selected-hover: var(--spectrum-gray-50);
--spectrum-actionbutton-text-color-selected-key-focus: var(--spectrum-gray-50);
--spectrum-actionbutton-text-color-selected-down: var(--spectrum-gray-50);
--spectrum-actionbutton-icon-color-selected: var(--spectrum-gray-50);
--spectrum-actionbutton-icon-color-selected-hover: var(--spectrum-gray-50);
--spectrum-actionbutton-icon-color-selected-key-focus: var(--spectrum-gray-50);
--spectrum-actionbutton-icon-color-selected-down: var(--spectrum-gray-50);

--spectrum-actionbutton-emphasized-background-color-selected: var(--spectrum-accent-background-color-default);
--spectrum-actionbutton-emphasized-background-color-selected-hover: var(--spectrum-accent-background-color-hover);
Expand Down Expand Up @@ -112,31 +116,27 @@ governing permissions and limitations under the License.
/* high contrast overrides all colors */
/* xvar is passed through. without it, some postcss plugin breaks variable fallback... */
background-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-color));
border-color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-color));
border-color: transparent;
color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color));

&:hover {
background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-hover));
border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-hover));
color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-hover));
}

&:focus-ring {
background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-key-focus));
}

&.is-active {
background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-down));
border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-down));
color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-down));
}

&:disabled,
&.is-disabled {
background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-color-disabled));
border-color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-color-disabled));
color: xvar(--spectrum-high-contrast-gray-text, var(--spectrum-button-text-color-disabled));
}
}
Expand Down Expand Up @@ -194,34 +194,50 @@ governing permissions and limitations under the License.
--spectrum-button-text-color: black;
--spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
}

&[data-style=outline] {
--spectrum-button-color: rgba(255, 255, 255, 0.9);
--spectrum-button-color-hover: white;
--spectrum-button-color-down: white;
--spectrum-button-color-key-focus: white;
--spectrum-button-color-disabled: rgba(255, 255, 255, 0.25);
--spectrum-button-text-color: white;
--spectrum-button-text-color-hover: white;
--spectrum-button-text-color-down: white;
--spectrum-button-text-color-key-focus: white;
--spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
--spectrum-button-background-color-hover: rgba(255, 255, 255, 0.1);
--spectrum-button-background-color-down: rgba(255, 255, 255, 0.15);
--spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.1);
}
}

&[data-variant=secondary] {
&[data-style=fill] {
--spectrum-button-color: rgba(255, 255, 255, 0.1);
--spectrum-button-color-hover: rgba(255, 255, 255, 0.25);
--spectrum-button-color-down: rgba(255, 255, 255, 0.4);
--spectrum-button-color-key-focus: rgba(255, 255, 255, 0.25);
--spectrum-button-color: rgba(255, 255, 255, 0.07);
--spectrum-button-color-hover: rgba(255, 255, 255, 0.1);
--spectrum-button-color-down: rgba(255, 255, 255, 0.15);
--spectrum-button-color-key-focus: rgba(255, 255, 255, 0.1);
--spectrum-button-color-disabled: rgba(255, 255, 255, 0.1);
--spectrum-button-text-color: white;
--spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
}
}

&[data-style=outline] {
--spectrum-button-color: rgba(255, 255, 255, 0.25);
--spectrum-button-color-hover: rgba(255, 255, 255, 0.4);
--spectrum-button-color-down: rgba(255, 255, 255, 0.55);
--spectrum-button-color-key-focus: rgba(255, 255, 255, 0.4);
--spectrum-button-color-disabled: rgba(255, 255, 255, 0.25);
--spectrum-button-text-color: white;
--spectrum-button-text-color-hover: white;
--spectrum-button-text-color-down: white;
--spectrum-button-text-color-key-focus: white;
--spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
--spectrum-button-background-color-hover: rgba(255, 255, 255, 0.25);
--spectrum-button-background-color-down: rgba(255, 255, 255, 0.4);
--spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.25);
&[data-style=outline] {
--spectrum-button-color: rgba(255, 255, 255, 0.25);
--spectrum-button-color-hover: rgba(255, 255, 255, 0.4);
--spectrum-button-color-down: rgba(255, 255, 255, 0.55);
--spectrum-button-color-key-focus: rgba(255, 255, 255, 0.4);
--spectrum-button-color-disabled: rgba(255, 255, 255, 0.25);
--spectrum-button-text-color: white;
--spectrum-button-text-color-hover: white;
--spectrum-button-text-color-down: white;
--spectrum-button-text-color-key-focus: white;
--spectrum-button-text-color-disabled: rgba(255, 255, 255, 0.55);
--spectrum-button-background-color-hover: rgba(255, 255, 255, 0.1);
--spectrum-button-background-color-down: rgba(255, 255, 255, 0.15);
--spectrum-button-background-color-key-focus: rgba(255, 255, 255, 0.1);
}
}
}

Expand Down Expand Up @@ -252,18 +268,18 @@ governing permissions and limitations under the License.
--spectrum-button-text-color-down: black;
--spectrum-button-text-color-key-focus: black;
--spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55);
--spectrum-button-background-color-hover: rgba(0, 0, 0, 0.25);
--spectrum-button-background-color-down: rgba(0, 0, 0, 0.4);
--spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.25);
--spectrum-button-background-color-hover: rgba(0, 0, 0, 0.1);
--spectrum-button-background-color-down: rgba(0, 0, 0, 0.15);
--spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.1);
}
}

&[data-variant=secondary] {
&[data-style=fill] {
--spectrum-button-color: rgba(0, 0, 0, 0.1);
--spectrum-button-color-hover: rgba(0, 0, 0, 0.25);
--spectrum-button-color-down: rgba(0, 0, 0, 0.4);
--spectrum-button-color-key-focus: rgba(0, 0, 0, 0.25);
--spectrum-button-color: rgba(0, 0, 0, 0.07);
--spectrum-button-color-hover: rgba(0, 0, 0, 0.1);
--spectrum-button-color-down: rgba(0, 0, 0, 0.15);
--spectrum-button-color-key-focus: rgba(0, 0, 0, 0.1);
--spectrum-button-color-disabled: rgba(0, 0, 0, 0.1);
--spectrum-button-text-color: black;
--spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55);
Expand All @@ -280,9 +296,9 @@ governing permissions and limitations under the License.
--spectrum-button-text-color-down: black;
--spectrum-button-text-color-key-focus: black;
--spectrum-button-text-color-disabled: rgba(0, 0, 0, 0.55);
--spectrum-button-background-color-hover: rgba(0, 0, 0, 0.25);
--spectrum-button-background-color-down: rgba(0, 0, 0, 0.4);
--spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.25);
--spectrum-button-background-color-hover: rgba(0, 0, 0, 0.1);
--spectrum-button-background-color-down: rgba(0, 0, 0, 0.15);
--spectrum-button-background-color-key-focus: rgba(0, 0, 0, 0.1);
}
}
}
Expand Down Expand Up @@ -593,9 +609,9 @@ governing permissions and limitations under the License.
.spectrum-ActionButton--staticWhite {
mix-blend-mode: screen;
--spectrum-actionbutton-static-background-color: var(--spectrum-actionbutton-static-white-background-color);
--spectrum-actionbutton-static-background-color-hover: rgba(255, 255, 255, 0.25);
--spectrum-actionbutton-static-background-color-focus: rgba(255, 255, 255, 0.25);
--spectrum-actionbutton-static-background-color-active: rgba(255, 255, 255, 0.4);
--spectrum-actionbutton-static-background-color-hover: rgba(255, 255, 255, 0.1);
--spectrum-actionbutton-static-background-color-focus: rgba(255, 255, 255, 0.1);
--spectrum-actionbutton-static-background-color-active: rgba(255, 255, 255, 0.15);
--spectrum-actionbutton-static-background-color-disabled: var(--spectrum-actionbutton-static-white-background-color-disabled);
--spectrum-actionbutton-static-background-color-selected: rgba(255, 255, 255, 0.9);
--spectrum-actionbutton-static-background-color-selected-hover: white;
Expand All @@ -622,9 +638,9 @@ governing permissions and limitations under the License.
.spectrum-ActionButton--staticBlack {
mix-blend-mode: multiply;
--spectrum-actionbutton-static-background-color: var(--spectrum-actionbutton-static-black-background-color);
--spectrum-actionbutton-static-background-color-hover: rgba(0, 0, 0, 0.25);
--spectrum-actionbutton-static-background-color-focus: rgba(0, 0, 0, 0.25);
--spectrum-actionbutton-static-background-color-active: rgba(0, 0, 0, 0.4);
--spectrum-actionbutton-static-background-color-hover: rgba(0, 0, 0, 0.1);
--spectrum-actionbutton-static-background-color-focus: rgba(0, 0, 0, 0.1);
--spectrum-actionbutton-static-background-color-active: rgba(0, 0, 0, 0.15);
--spectrum-actionbutton-static-background-color-selected: rgba(0, 0, 0, 0.9);
--spectrum-actionbutton-static-background-color-disabled: var(--spectrum-actionbutton-static-black-background-color-disabled);
--spectrum-actionbutton-static-background-color-selected-hover: black;
Expand Down
14 changes: 5 additions & 9 deletions packages/@adobe/spectrum-css-temp/vars/express.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
--spectrum-alias-toggle-color-selected: var(--spectrum-gray-800);
--spectrum-alias-toggle-color-selected-hover: var(--spectrum-gray-900);
--spectrum-alias-toggle-color-selected-key-focus: var(--spectrum-gray-900);
--spectrum-alias-toggle-color-selected-down: var(--spectrum-gray-900);

--spectrum-actionbutton-icon-color: var(--spectrum-global-color-gray-800);
--spectrum-actionbutton-background-color: var(--spectrum-global-color-gray-200);
Expand All @@ -55,11 +56,6 @@
--spectrum-actionbutton-background-color-disabled: var(--spectrum-global-color-gray-200);
--spectrum-actionbutton-border-color-disabled: var(--spectrum-global-color-gray-200);

--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-default);
--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-hover);
--spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-neutral-background-color-key-focus);
--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-down);

--spectrum-actionbutton-border-color: var(--spectrum-actionbutton-background-color);
--spectrum-actionbutton-border-color-hover: var(--spectrum-actionbutton-background-color-hover);
--spectrum-actionbutton-border-color-key-focus: var(--spectrum-actionbutton-background-color-key-focus);
Expand All @@ -78,17 +74,17 @@
--spectrum-actionbutton-static-black-border-color-down: transparent;
--spectrum-actionbutton-static-black-border-color-disabled: transparent;
--spectrum-actionbutton-static-black-border-color-selected-disabled: transparent;
--spectrum-actionbutton-static-black-background-color: rgba(0, 0, 0, 0.1);
--spectrum-actionbutton-static-black-background-color-disabled: rgba(0, 0, 0, 0.1);
--spectrum-actionbutton-static-black-background-color: rgba(0, 0, 0, 0.07);
--spectrum-actionbutton-static-black-background-color-disabled: rgba(0, 0, 0, 0.07);

--spectrum-actionbutton-static-white-border-color: transparent;
--spectrum-actionbutton-static-white-border-color-hover: transparent;
--spectrum-actionbutton-static-white-border-color-key-focus: transparent;
--spectrum-actionbutton-static-white-border-color-down: transparent;
--spectrum-actionbutton-static-white-border-color-disabled: transparent;
--spectrum-actionbutton-static-white-border-color-selected-disabled: transparent;
--spectrum-actionbutton-static-white-background-color: rgba(255, 255, 255, 0.1);
--spectrum-actionbutton-static-white-background-color-disabled: rgba(255, 255, 255, 0.1);
--spectrum-actionbutton-static-white-background-color: rgba(255, 255, 255, 0.07);
--spectrum-actionbutton-static-white-background-color-disabled: rgba(255, 255, 255, 0.07);

--spectrum-fieldbutton-background-color: var(--spectrum-actionbutton-background-color);
--spectrum-fieldbutton-background-color-hover: var(--spectrum-actionbutton-background-color-hover);
Expand Down
5 changes: 1 addition & 4 deletions packages/@adobe/spectrum-css-temp/vars/spectrum-global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -619,11 +619,8 @@
--spectrum-alias-toggle-color-selected: var(--spectrum-gray-700);
--spectrum-alias-toggle-color-selected-hover: var(--spectrum-gray-800);
--spectrum-alias-toggle-color-selected-key-focus: var(--spectrum-gray-800);
--spectrum-alias-toggle-color-selected-down: var(--spectrum-gray-900);

--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-subdued-background-color-default);
--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
--spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-subdued-background-color-down);
--spectrum-actionbutton-background-color-disabled: transparent;
--spectrum-actionbutton-border-color-disabled: var(--spectrum-gray-300);

Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/actionbar/src/actionbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
}

&.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar {
background: var(--spectrum-informative-background-color-default);
background: var(--spectrum-global-color-static-blue-700);
color: white;
box-shadow: 0 2px 6px var(--spectrum-alias-dropshadow-color);
border: none;
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,15 @@ storiesOf('ActionGroup', module)
.add(
'staticColor=white',
() => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
{render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
</View>
)
)
.add(
'staticColor=white, isQuiet',
() => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
{render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
</View>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/actiongroup/docs/ActionGroup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ with the background.

```tsx example
<Flex wrap gap="size-250">
<View backgroundColor="static-seafoam-700" padding="size-500">
<View backgroundColor="static-blue-700" padding="size-500">
<ActionGroup staticColor="white">
<Item key="edit">
<Draw />
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,15 +163,15 @@ storiesOf('ActionGroup', module)
.add(
'staticColor=white',
() => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
{render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
</View>
)
)
.add(
'staticColor=white, isQuiet',
() => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
{render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
</View>
)
Expand Down
4 changes: 2 additions & 2 deletions packages/@react-spectrum/button/chromatic/ActionButton.chromatic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ storiesOf('Button/ActionButton', module)
.add(
'staticColor: white',
() => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
<Flex direction="column" rowGap="size-150">
<ActionButton staticColor="white">
<Add />
Expand Down Expand Up @@ -116,7 +116,7 @@ storiesOf('Button/ActionButton', module)
.add(
'Japanese, icon + text, staticColor: white',
() => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
<Flex direction="column" rowGap="size-150">
<ActionButton staticColor="white">
<Add />
Expand Down
5 changes: 3 additions & 2 deletions packages/@react-spectrum/button/chromatic/Button.chromatic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import React from 'react';
import {storiesOf} from '@storybook/react';
import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
import {Text} from '@react-spectrum/text';
import {View} from '@react-spectrum/view';

let states = [
{UNSAFE_className: classNames(styles, 'is-hovered'), 'data-hover': true},
Expand Down Expand Up @@ -124,9 +125,9 @@ function render(props: any = {}) {
let button = <Button key={key} {...props} {...c}>{key}</Button>;
if (props.variant === 'overBackground' || c.staticColor === 'white') {
return (
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
<View backgroundColor="static-blue-700" UNSAFE_style={{padding: '15px 20px', display: 'inline-block'}}>
{button}
</div>
</View>
);
}
if (c.staticColor === 'black') {
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/button/chromatic/ToggleButton.chromatic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ storiesOf('Button/ToggleButton', module)
</Grid>
))
.add('staticColor = white', () => (
<View backgroundColor="static-seafoam-600" padding="size-1000">
<View backgroundColor="static-blue-700" padding="size-1000">
<Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
{combinations.map(c => <ToggleButton {...c} staticColor="white">Button</ToggleButton>)}
</Grid>
Expand Down
Loading

1 comment on commit d311731

@adobe-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdaccio builds:
CRA Test App
NextJS Test App
CRA Test App Size
NextJS App Size
Publish stats
Size diff since last release
Docs

Please sign in to comment.