Skip to content

Commit

Permalink
Update qa story and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshwooding
joshwooding committed Jul 30, 2024
1 parent 91a232a commit 9875109
Show file tree
Hide file tree
Showing 10 changed files with 772 additions and 398 deletions.
56 changes: 20 additions & 36 deletions packages/core/src/button/Button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,44 +175,28 @@
--button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
}

.saltButton-cta.saltButton-loading {
--button-text-color: var(--salt-content-primary-foreground);
--button-background: var(--salt-container-primary-background);
--button-borderColor: var(--salt-actionable-cta-borderColor);
}

.saltButton-cta.saltButton-loading:hover,
.saltButton-cta.saltButton-loading:active {
color: var(--salt-content-primary-foreground);
background: var(--salt-container-primary-background);
border-color: var(--salt-actionable-cta-borderColor);
cursor: default;
}

.saltButton-primary.saltButton-loading {
--button-text-color: var(--salt-content-primary-foreground);
--button-background: var(--salt-container-primary-background);
--button-borderColor: var(--salt-actionable-primary-borderColor);
}

.saltButton-primary.saltButton-loading:hover,
.saltButton-primary.saltButton-loading:active {
color: var(--salt-content-primary-foreground);
background: var(--salt-container-primary-background);
border-color: var(--salt-actionable-primary-borderColor);
.saltButton-accent.saltButton-loading {
--button-text-color: var(--salt-actionable-accent-foreground);
--button-text-color-hover: var(--salt-actionable-accent-foreground);
--button-text-color-active: var(--salt-actionable-accent-foreground);
--button-background: var(--salt-actionable-accent-background);
--button-background-hover: var(--salt-actionable-accent-background);
--button-background-active: var(--salt-actionable-accent-background);
--button-borderColor: var(--salt-actionable-accent-borderColor);
--button-borderColor-hover: var(--salt-actionable-accent-borderColor);
--button-borderColor-active: var(--salt-actionable-accent-borderColor);
cursor: default;
}

.saltButton-secondary.saltButton-loading {
--button-text-color: var(--salt-content-primary-foreground);
--button-background: var(--salt-container-primary-background);
--button-borderColor: var(--salt-actionable-secondary-borderColor);
}

.saltButton-secondary.saltButton-loading:hover,
.saltButton-secondary.saltButton-loading:active {
color: var(--salt-content-primary-foreground);
background: var(--salt-container-primary-background);
border-color: var(--salt-actionable-secondary-borderColor);
.saltButton-neutral.saltButton-loading {
--button-text-color: var(--salt-actionable-foreground);
--button-text-color-hover: var(--salt-actionable-foreground);
--button-text-color-active: var(--salt-actionable-foreground);
--button-background: var(--salt-actionable-background);
--button-background-hover: var(--salt-actionable-background);
--button-background-active: var(--salt-actionable-background);
--button-borderColor: var(--salt-actionable-borderColor);
--button-borderColor-hover: var(--salt-actionable-borderColor);
--button-borderColor-active: var(--salt-actionable-borderColor);
cursor: default;
}
200 changes: 123 additions & 77 deletions packages/core/stories/button/button.qa.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button } from "@salt-ds/core";
import { Button, StackLayout } from "@salt-ds/core";
import { SearchIcon } from "@salt-ds/icons";
import type { Meta, StoryFn } from "@storybook/react";
import {
Expand All @@ -18,82 +18,128 @@ export default {
} as Meta<typeof Button>;

export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
<QAContainer height={500} width={1000} {...props}>
<Button variant="primary">Button</Button>
<Button variant="primary">
<SearchIcon />
</Button>
<Button variant="primary">
<SearchIcon /> Button
</Button>
<Button variant="secondary">Button</Button>
<Button variant="secondary">
<SearchIcon />
</Button>
<Button variant="secondary">
<SearchIcon /> Button
</Button>
<Button variant="cta">Button</Button>
<Button variant="cta">
<SearchIcon />
</Button>
<Button variant="cta">
<SearchIcon /> Button
</Button>
<Button color="accent" appearance="solid">
Button
</Button>
<Button color="accent" appearance="solid">
<SearchIcon />
</Button>
<Button color="accent" appearance="solid">
<SearchIcon /> Button
</Button>
<Button color="accent" appearance="outline">
Button
</Button>
<Button color="accent" appearance="outline">
<SearchIcon />
</Button>
<Button color="accent" appearance="outline">
<SearchIcon /> Button
</Button>
<Button color="accent" appearance="transparent">
Button
</Button>
<Button color="accent" appearance="transparent">
<SearchIcon />
</Button>
<Button color="accent" appearance="transparent">
<SearchIcon /> Button
</Button>
<Button color="neutral" appearance="solid">
Button
</Button>
<Button color="neutral" appearance="solid">
<SearchIcon />
</Button>
<Button color="neutral" appearance="solid">
<SearchIcon /> Button
</Button>
<Button color="neutral" appearance="outline">
Button
</Button>
<Button color="neutral" appearance="outline">
<SearchIcon />
</Button>
<Button color="neutral" appearance="outline">
<SearchIcon /> Button
</Button>
<Button color="neutral" appearance="transparent">
Button
</Button>
<Button color="neutral" appearance="transparent">
<SearchIcon />
</Button>
<Button color="neutral" appearance="transparent">
<SearchIcon /> Button
</Button>
<QAContainer
height={500}
width={1300}
itemWidthAuto
itemPadding={4}
{...props}
>
<StackLayout direction="row" gap={1}>
<Button variant="primary">Button</Button>
<Button variant="primary">
<SearchIcon />
</Button>
<Button variant="primary">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button variant="secondary">Button</Button>
<Button variant="secondary">
<SearchIcon />
</Button>
<Button variant="secondary">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button variant="cta">Button</Button>
<Button variant="cta">
<SearchIcon />
</Button>
<Button variant="cta">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="accent" appearance="solid">
Button
</Button>
<Button color="accent" appearance="solid">
<SearchIcon />
</Button>
<Button color="accent" appearance="solid">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="accent" appearance="outline">
Button
</Button>
<Button color="accent" appearance="outline">
<SearchIcon />
</Button>
<Button color="accent" appearance="outline">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="accent" appearance="transparent">
Button
</Button>
<Button color="accent" appearance="transparent">
<SearchIcon />
</Button>
<Button color="accent" appearance="transparent">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="neutral" appearance="solid">
Button
</Button>
<Button color="neutral" appearance="solid">
<SearchIcon />
</Button>
<Button color="neutral" appearance="solid">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="neutral" appearance="outline">
Button
</Button>
<Button color="neutral" appearance="outline">
<SearchIcon />
</Button>
<Button color="neutral" appearance="outline">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="neutral" appearance="transparent">
Button
</Button>
<Button color="neutral" appearance="transparent">
<SearchIcon />
</Button>
<Button color="neutral" appearance="transparent">
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="accent" appearance="solid" loading>
Button
</Button>
<Button color="accent" appearance="outline" loading>
<SearchIcon />
</Button>
<Button color="accent" appearance="transparent" loading>
<SearchIcon /> Button
</Button>
</StackLayout>
<StackLayout direction="row" gap={1}>
<Button color="neutral" appearance="solid" loading>
Button
</Button>
<Button color="neutral" appearance="outline" loading>
<SearchIcon />
</Button>
<Button color="neutral" appearance="transparent" loading>
<SearchIcon /> Button
</Button>
</StackLayout>
</QAContainer>
);

Expand Down
Loading

0 comments on commit 9875109

Please sign in to comment.