scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

Browse Source 
* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-03 10:45:34 +00:00
parent 60f4b8d878
commit 6730575f7a
24 changed files with 1143 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/design-system/lib/components/IconButton/IconButton.stories.tsx
View File

@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect, fn } from 'storybook/test'
import { expect } from 'storybook/test'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { IconButton } from './IconButton'
@@ -15,35 +15,53 @@ const meta: Meta<typeof IconButton> = {
disable: true,
},
},
children: {
table: {
disable: true,
},
},
theme: {
control: 'select',
options: Object.keys(config.variants.theme),
default: 'Primary',
table: {
defaultValue: {
summary: config.defaultVariants.theme,
},
type: {
summary: 'string',
detail: Object.keys(config.variants.theme).join(' | '),
},
},
},
style: {
control: 'select',
options: Object.keys(config.variants.style),
default: 'Normal',
type: 'string',
description: `The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.`,
},
wrapping: {
control: 'select',
options: Object.keys(config.variants.wrapping),
default: undefined,
table: {
defaultValue: {
summary: config.defaultVariants.style,
},
type: {
summary: 'string',
detail: Object.keys(config.variants.style).join(' | '),
},
},
description:
'The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.',
},
},
}
const globalStoryPropsInverted = {
backgrounds: { value: 'scandicPrimaryDark' },
}
export default meta
type Story = StoryObj<typeof IconButton>
export const PrimaryDefault: Story = {
export const Default: Story = {
args: {
onPress: fn(),
onPress: () => alert('Icon button pressed!'),
children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
theme: 'Primary',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(canvas.getByRole('button'))
@@ -51,9 +69,20 @@ export const PrimaryDefault: Story = {
},
}
export const Primary: Story = {
args: {
...Default.args,
theme: 'Primary',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(canvas.getByRole('button'))
expect(args.onPress).toHaveBeenCalledTimes(0)
},
}
export const PrimaryDisabled: Story = {
args: {
...PrimaryDefault.args,
...Primary.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
@@ -62,9 +91,9 @@ export const PrimaryDisabled: Story = {
},
}
export const InvertedDefault: Story = {
export const Inverted: Story = {
args: {
onPress: fn(),
...Default.args,
children: (
<MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
),
@@ -78,7 +107,7 @@ export const InvertedDefault: Story = {
export const InvertedDisabled: Story = {
args: {
...InvertedDefault.args,
...Inverted.args,
isDisabled: true,
},
play: async ({ canvas, userEvent, args }) => {
@@ -89,7 +118,7 @@ export const InvertedDisabled: Story = {
export const InvertedElevated: Story = {
args: {
...InvertedDefault.args,
...Inverted.args,
style: 'Elevated',
},
play: async ({ canvas, userEvent, args }) => {
@@ -110,8 +139,9 @@ export const InvertedElevatedDisabled: Story = {
}
export const InvertedMuted: Story = {
globals: globalStoryPropsInverted,
args: {
...InvertedDefault.args,
...Inverted.args,
children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
style: 'Muted',
},
@@ -123,6 +153,7 @@ export const InvertedMuted: Story = {
}
export const InvertedMutedDisabled: Story = {
globals: globalStoryPropsInverted,
args: {
...InvertedMuted.args,
isDisabled: true,
@@ -136,7 +167,7 @@ export const InvertedMutedDisabled: Story = {
export const InvertedFaded: Story = {
args: {
...InvertedDefault.args,
...Inverted.args,
style: 'Faded',
},
play: async ({ canvas, userEvent, args }) => {
@@ -158,7 +189,7 @@ export const InvertedFadedDisabled: Story = {
export const TertiaryElevated: Story = {
args: {
onPress: fn(),
...Default.args,
children: <MaterialIcon icon="arrow_back" size={24} color="CurrentColor" />,
theme: 'Tertiary',
style: 'Elevated',
@@ -182,7 +213,7 @@ export const TertiaryDisabled: Story = {
export const BlackMuted: Story = {
args: {
onPress: fn(),
...Default.args,
children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
theme: 'Black',
},

75
packages/design-system/lib/components/IconButton/iconButton.module.css
View File

@@ -1,15 +1,21 @@
.iconButton {
position: relative;
border-radius: var(--Corner-radius-rounded);
border-width: 0;
cursor: pointer;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
&:disabled {
&[data-disabled] {
cursor: unset;
}
&:focus-visible {
outline: 2px solid var(--Border-Interactive-Focus);
outline-offset: 2px;
}
}
.theme-primary {
@@ -17,13 +23,30 @@
color: var(--Component-Button-Brand-Primary-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
&:hover:not([data-disabled]) {
background:
linear-gradient(
0deg,
var(--Component-Button-Brand-Primary-Fill-Hover) 0%,
var(--Component-Button-Brand-Primary-Fill-Hover) 100%
),
var(--Component-Button-Brand-Primary-Fill-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
}
&:disabled {
/* This theme is able to be on top of dark background colors,
so we need to create an illusion that it also has an inverted border on focus */
&:focus-visible::after {
content: '';
position: absolute;
inset: -2px;
border: 2px solid var(--Border-Inverted);
border-radius: inherit;
pointer-events: none;
}
&[data-disabled] {
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
@@ -34,27 +57,37 @@
color: var(--Component-Button-Inverted-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Inverted-Fill-Hover);
color: var(--Component-Button-Inverted-On-fill-Hover);
&:hover:not([data-disabled]) {
background:
linear-gradient(
0deg,
var(--Component-Button-Inverted-Fill-Hover) 0%,
var(--Component-Button-Inverted-Fill-Hover) 100%
),
var(--Component-Button-Inverted-Fill-Default);
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Inverted-Fill-Disabled);
color: var(--Component-Button-Inverted-On-fill-Disabled);
}
&.style-muted {
background-color: var(--Component-Button-Muted-Fill-Default);
color: var(--Component-Button-Muted-On-fill-Inverted);
@media (hover: hover) {
&:hover:not(:disabled) {
color: var(--Component-Button-Muted-On-fill-Inverted);
background-color: var(--Component-Button-Muted-Fill-Hover);
}
}
&:disabled {
&:focus-visible {
outline-color: var(--Border-Inverted);
}
&[data-disabled] {
color: var(--Component-Button-Muted-On-fill-Disabled);
}
}
@@ -65,13 +98,19 @@
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
&:hover:not([data-disabled]) {
background:
linear-gradient(
0deg,
var(--Component-Button-Brand-Tertiary-Fill-Hover) 0%,
var(--Component-Button-Brand-Tertiary-Fill-Hover) 100%
),
var(--Component-Button-Brand-Tertiary-Fill-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
@@ -81,12 +120,12 @@
color: var(--Component-Button-Muted-On-fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
&:hover:not([data-disabled]) {
color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
}
}
&:disabled {
&[data-disabled] {
color: var(--Component-Button-Muted-On-fill-Disabled);
}
}
@@ -103,12 +142,12 @@
background-color: var(--Component-Button-Muted-Fill-Default);
@media (hover: hover) {
&:hover:not(:disabled) {
&:hover:not([data-disabled]) {
background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
}
}
&:disabled {
&[data-disabled] {
background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
}
}