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

Jump to bottom

New button sentiment and appearance #4067

Merged
merged 18 commits into from
Sep 12, 2024
Merged

New button sentiment and appearance #4067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a600b84
New button sentiment and appearance
origami-z Sep 9, 2024
eb986a2
Fix type-checks
origami-z Sep 9, 2024
c651e34
Add back `disabled:focus-visible:active`
origami-z Sep 9, 2024
5be68a1
Fix button props doc
origami-z Sep 9, 2024
32166f2
deprecate actionable tokens
origami-z Sep 9, 2024
0bfbff6
Add missing theme next foundation alpha tokens
origami-z Sep 9, 2024
316433c
Update doc from review
origami-z Sep 10, 2024
b425984
Update disabled examples
origami-z Sep 10, 2024
b2d94c6
Update button description
origami-z Sep 10, 2024
d3e98f2
Add prop added in version
origami-z Sep 10, 2024
20fe682
Adds replacement table to prop jsdoc
origami-z Sep 10, 2024
e188833
Update to use `@since` jsdoc
origami-z Sep 10, 2024
d14bfe5
Update deprecated example
origami-z Sep 11, 2024
b3ef441
Apply suggestions from code review
origami-z Sep 12, 2024
ae5ced0
Update quotation
origami-z Sep 12, 2024
bd6786c
Remove not needed stack layout
origami-z Sep 12, 2024
c5af66a
Remove not needed stack layout in stories
origami-z Sep 12, 2024
db32160
Not ramp also not logical
origami-z Sep 12, 2024
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
125 changes: 125 additions & 0 deletions .changeset/actionable-theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
---
"@salt-ds/theme": minor
---

Updated tokens values mapping for below tokens

```diff
/* light */
- --salt-palette-negative-foreground: var(--salt-color-red-700);
+ --salt-palette-negative-foreground: var(--salt-color-red-600);
- --salt-palette-positive-foreground: var(--salt-color-green-700);
+ --salt-palette-positive-foreground: var(--salt-color-green-600);
/* dark */
- --salt-palette-negative-foreground: var(--salt-color-red-300);
+ --salt-palette-negative-foreground: var(--salt-color-red-200);
- --salt-palette-positive-foreground: var(--salt-color-green-300);
+ --salt-palette-positive-foreground: var(--salt-color-green-200);
```

Deprecated actionable cta/primary/secondary tokens in favor of new tokens. Replacement references below

| Deprecated token | Replacement token |
| -------------------------------------------------- | ------------------------------------------------------ |
| `--salt-actionable-cta-background-active` | `--salt-actionable-accented-bold-background-active` |
| `--salt-actionable-cta-background-disabled` | `--salt-actionable-accented-bold-background-disabled` |
| `--salt-actionable-cta-background-hover` | `--salt-actionable-accented-bold-background-hover` |
| `--salt-actionable-cta-background` | `--salt-actionable-accented-bold-background` |
| `--salt-actionable-cta-borderColor-active` | `--salt-actionable-accented-bold-borderColor-active` |
| `--salt-actionable-cta-borderColor-disabled` | `--salt-actionable-accented-bold-borderColor-disabled` |
| `--salt-actionable-cta-borderColor-hover` | `--salt-actionable-accented-bold-borderColor-hover` |
| `--salt-actionable-cta-borderColor` | `--salt-actionable-accented-bold-borderColor` |
| `--salt-actionable-cta-foreground-active` | `--salt-actionable-accented-bold-foreground-active` |
| `--salt-actionable-cta-foreground-disabled` | `--salt-actionable-accented-bold-foreground-disabled` |
| `--salt-actionable-cta-foreground-hover` | `--salt-actionable-accented-bold-foreground-hover` |
| `--salt-actionable-cta-foreground` | `--salt-actionable-accented-bold-foreground` |
| `--salt-actionable-primary-background-active` | `--salt-actionable-bold-background-active` |
| `--salt-actionable-primary-background-disabled` | `--salt-actionable-bold-background-disabled` |
| `--salt-actionable-primary-background-hover` | `--salt-actionable-bold-background-hover` |
| `--salt-actionable-primary-background` | `--salt-actionable-bold-background` |
| `--salt-actionable-primary-borderColor-active` | `--salt-actionable-bold-borderColor-active` |
| `--salt-actionable-primary-borderColor-disabled` | `--salt-actionable-bold-borderColor-disabled` |
| `--salt-actionable-primary-borderColor-hover` | `--salt-actionable-bold-borderColor-hover` |
| `--salt-actionable-primary-borderColor` | `--salt-actionable-bold-borderColor` |
| `--salt-actionable-primary-foreground-active` | `--salt-actionable-bold-foreground-active` |
| `--salt-actionable-primary-foreground-disabled` | `--salt-actionable-bold-foreground-disabled` |
| `--salt-actionable-primary-foreground-hover` | `--salt-actionable-bold-foreground-hover` |
| `--salt-actionable-primary-foreground` | `--salt-actionable-bold-foreground` |
| `--salt-actionable-secondary-background-active` | `--salt-actionable-subtle-background-active` |
| `--salt-actionable-secondary-background-disabled` | `--salt-actionable-subtle-background-disabled` |
| `--salt-actionable-secondary-background-hover` | `--salt-actionable-subtle-background-hover` |
| `--salt-actionable-secondary-background` | `--salt-actionable-subtle-background` |
| `--salt-actionable-secondary-borderColor-active` | `--salt-actionable-subtle-borderColor-active` |
| `--salt-actionable-secondary-borderColor-disabled` | `--salt-actionable-subtle-borderColor-disabled` |
| `--salt-actionable-secondary-borderColor-hover` | `--salt-actionable-subtle-borderColor-hover` |
| `--salt-actionable-secondary-borderColor` | `--salt-actionable-subtle-borderColor` |
| `--salt-actionable-secondary-foreground-active` | `--salt-actionable-subtle-foreground-active` |
| `--salt-actionable-secondary-foreground-disabled` | `--salt-actionable-subtle-foreground-disabled` |
| `--salt-actionable-secondary-foreground-hover` | `--salt-actionable-subtle-foreground-hover` |
| `--salt-actionable-secondary-foreground` | `--salt-actionable-subtle-foreground` |

Added various tokens for new actionable family tokens.

## Salt theme - `theme.css`
origami-z marked this conversation as resolved.
Show resolved Hide resolved

### Palette

- `--salt-palette-accent-border-disabled`
- `--salt-palette-accent-foreground-informative`
- `--salt-palette-accent-foreground-informative-disabled`
- `--salt-palette-interact-border-none`
- `--salt-palette-negative-foreground-disabled`
- `--salt-palette-negative-background`
- `--salt-palette-negative-background-hover`
- `--salt-palette-negative-background-active`
- `--salt-palette-negative-background-disabled`
- `--salt-palette-negative-border`
- `--salt-palette-negative-border-disabled`
- `--salt-palette-positive-foreground-disabled`
- `--salt-palette-positive-background`
- `--salt-palette-positive-background-hover`
- `--salt-palette-positive-background-active`
- `--salt-palette-positive-background-disabled`
- `--salt-palette-positive-border`
- `--salt-palette-positive-border-disabled`
- `--salt-palette-warning-border-disabled`
- `--salt-palette-warning-foreground-informative-disabled`
- `--salt-palette-warning-action`
- `--salt-palette-warning-action-hover`
- `--salt-palette-warning-action-active`
- `--salt-palette-warning-action-disabled`
- `--salt-palette-warning-action-foreground`
- `--salt-palette-warning-action-foreground-disabled`

#### Foundation

- `--salt-color-blue-200-fade-foreground`
- `--salt-color-green-200-fade-foreground`
- `--salt-color-green-600-fade-foreground`
- `--salt-color-red-200-fade-foreground`
- `--salt-color-red-600-fade-foreground`
- `--salt-color-orange-400-fade-foreground`
- `--salt-color-orange-850-fade-foreground`
- `--salt-color-green-500-fade-background`
- `--salt-color-green-600-fade-background`
- `--salt-color-red-600-fade-background`

## Salt next theme - `theme-next.css`

### Palette

- `--salt-palette-negative-action-hover`
- `--salt-palette-negative-action-active`
- `--salt-palette-negative-disabled`
- `--salt-palette-positive-action-hover`
- `--salt-palette-positive-action-active`
- `--salt-palette-positive-disabled`
- `--salt-palette-warning-disabled`
- `--salt-palette-warning-action-hover`
- `--salt-palette-warning-action-active`

#### Foundation

- `--salt-color-green-500-40a`
- `--salt-color-orange-500-40a`
- `--salt-color-red-500-40a`
13 changes: 13 additions & 0 deletions .changeset/button-changes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
"@salt-ds/core": minor
---

Added `sentiment` (accented, neutral, positive, negative, caution) and `appearance` (solid, bordered, transparent) props for Button.

_Note:_ Button's `variant` prop is now deprecated and will be removed in the next major version.

| `variant` | `appearance` | `sentiment` |
| ----------- | ------------- | ----------- |
| `cta` | `solid` | `accented` |
| `primary` | `solid` | `neutral` |
| `secondary` | `transparent` | `neutral` |
16 changes: 8 additions & 8 deletions packages/core/src/__tests__/__e2e__/button/Button.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import { composeStories } from "@storybook/react";
import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility";

const composedStories = composeStories(buttonStories);
const { FeatureButton, FocusableWhenDisabled } = composedStories;
const { Default, FocusableWhenDisabled } = composedStories;

describe("Given a Button", () => {
checkAccessibility(composedStories);

it("should render text as children", () => {
cy.mount(<FeatureButton />);
cy.findByText(FeatureButton.args?.children as string).should("be.visible");
cy.mount(<Default />);
cy.findByText(Default.args?.children as string).should("be.visible");
});

it("should call onClick when interacted with", () => {
const clickSpy = cy.stub().as("clickSpy");
cy.mount(<FeatureButton onClick={clickSpy} />);
cy.mount(<Default onClick={clickSpy} />);
cy.realPress("Tab");
cy.findByRole("button").should("be.focused");
cy.realPress("Enter");
Expand All @@ -28,8 +28,8 @@ describe("Given a Button", () => {

it("should call onBlur when blurred", () => {
const blurSpy = cy.stub().as("blurSpy");
cy.mount(<FeatureButton onBlur={blurSpy} />);
cy.findByText(FeatureButton.args?.children as string).should("be.visible");
cy.mount(<Default onBlur={blurSpy} />);
cy.findByText(Default.args?.children as string).should("be.visible");
cy.realPress("Tab");
cy.findByRole("button").should("be.focused");
cy.realPress("Tab");
Expand All @@ -52,12 +52,12 @@ describe("Given a Button", () => {
});

it("should apply type prop to button element", () => {
cy.mount(<FeatureButton type="submit" />);
cy.mount(<Default type="submit" />);
cy.findByRole("button").should("have.attr", "type", "submit");
});

it("should apply default type prop to button element", () => {
cy.mount(<FeatureButton />);
cy.mount(<Default />);
cy.findByRole("button").should("have.attr", "type", "button");
});
});
Loading
Loading