From 865aa019c129fe4672d90ba210c797cfc675d6a0 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 10 Mar 2025 09:17:21 +0000 Subject: [PATCH 1/2] Improve CSS on Button and Checkbox Signed-off-by: Charles de Dreuille --- packages/canon/.storybook/main.ts | 1 - packages/canon/package.json | 21 +- .../canon/src/components/Box/Box.stories.tsx | 2 +- .../canon/src/components/Button/styles.css | 15 +- .../components/Checkbox/Checkbox.stories.tsx | 3 - .../canon/src/components/Checkbox/styles.css | 11 +- .../Container/Container.stories.tsx | 2 +- .../src/components/Flex/Flex.stories.tsx | 2 +- .../src/components/Grid/Grid.stories.tsx | 2 +- packages/canon/src/css/core.css | 3 + yarn.lock | 209 +++++++----------- 11 files changed, 113 insertions(+), 158 deletions(-) diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts index 8bf24a7e23..bb00568cb0 100644 --- a/packages/canon/.storybook/main.ts +++ b/packages/canon/.storybook/main.ts @@ -14,7 +14,6 @@ const config: StorybookConfig = { addons: [ getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('@chromatic-com/storybook'), getAbsolutePath('@storybook/addon-interactions'), getAbsolutePath('@storybook/addon-themes'), ], diff --git a/packages/canon/package.json b/packages/canon/package.json index d5282359e0..2d598682e1 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -45,21 +45,20 @@ }, "devDependencies": { "@backstage/cli": "workspace:^", - "@chromatic-com/storybook": "^3.2.2", - "@storybook/addon-essentials": "^8.5.0", - "@storybook/addon-interactions": "^8.5.0", + "@storybook/addon-essentials": "^8.6.4", + "@storybook/addon-interactions": "^8.6.4", "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-themes": "^8.5.0", - "@storybook/addon-webpack5-compiler-swc": "^2.0.0", - "@storybook/blocks": "^8.5.0", - "@storybook/react": "^8.5.0", - "@storybook/react-webpack5": "^8.5.0", - "@storybook/test": "^8.5.0", + "@storybook/addon-themes": "^8.6.4", + "@storybook/addon-webpack5-compiler-swc": "^2.1.0", + "@storybook/blocks": "^8.6.4", + "@storybook/react": "^8.6.4", + "@storybook/react-webpack5": "^8.6.4", + "@storybook/test": "^8.6.4", "@testing-library/jest-dom": "^6.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "chalk": "^5.4.1", - "eslint-plugin-storybook": "^0.11.1", + "eslint-plugin-storybook": "^0.11.4", "glob": "^11.0.1", "globals": "^15.11.0", "lightningcss": "^1.29.1", @@ -67,7 +66,7 @@ "react": "^18.0.2", "react-dom": "^18.0.2", "react-router-dom": "^6.3.0", - "storybook": "^8.5.0" + "storybook": "^8.6.4" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx index aec2909743..e46dadb60a 100644 --- a/packages/canon/src/components/Box/Box.stories.tsx +++ b/packages/canon/src/components/Box/Box.stories.tsx @@ -20,7 +20,7 @@ import { Box } from './Box'; import { Flex } from '../Flex'; const meta = { - title: 'Components/Box', + title: 'Layout/Box', component: Box, argTypes: { as: { diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index 11a57a2571..0572028e96 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -15,7 +15,7 @@ */ .canon-Button { - all: unset; + border: none; display: inline-flex; align-items: center; justify-content: center; @@ -35,7 +35,7 @@ .canon-Button--variant-primary { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); - transition: background-color 150ms ease; + transition: background-color 150ms ease, box-shadow 150ms ease; &:hover { background-color: var(--canon-bg-solid-hover); @@ -45,6 +45,11 @@ background-color: var(--canon-bg-solid-pressed); } + &:focus-visible { + outline: 2px solid var(--canon-ring); + outline-offset: 2px; + } + &:disabled { background-color: var(--canon-bg-solid-disabled); color: var(--canon-fg-solid-disabled); @@ -65,6 +70,12 @@ box-shadow: inset 0 0 0 1px var(--canon-border-pressed); } + &:focus-visible { + outline: none; + transition: none; + box-shadow: inset 0 0 0 2px var(--canon-ring); + } + &:disabled { box-shadow: inset 0 0 0 1px var(--canon-border-disabled); color: var(--canon-fg-disabled); diff --git a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx index db320cb3ce..4b500afd30 100644 --- a/packages/canon/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/canon/src/components/Checkbox/Checkbox.stories.tsx @@ -23,9 +23,6 @@ import { Text } from '../Text'; const meta = { title: 'Components/Checkbox', component: Checkbox, - parameters: { - layout: 'centered', - }, } satisfies Meta; export default meta; diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css index f026740698..467e9c57b7 100644 --- a/packages/canon/src/components/Checkbox/styles.css +++ b/packages/canon/src/components/Checkbox/styles.css @@ -1,5 +1,5 @@ .canon-CheckboxRoot { - all: unset; + border: none; display: flex; align-items: center; justify-content: center; @@ -10,6 +10,12 @@ border-radius: 2px; transition: all 0.2s ease-in-out; + &:focus-visible { + transition: none; + outline: 2px solid var(--canon-ring); + outline-offset: 2px; + } + &[data-checked] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); @@ -20,9 +26,8 @@ display: flex; flex-direction: row; align-items: center; - justify-content: center; gap: var(--canon-space-2); - font-size: var(--canon-font-size-xs); + font-size: var(--canon-font-size-3); font-family: var(--canon-font-regular); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx index f6b0fab8ba..c1b886f530 100644 --- a/packages/canon/src/components/Container/Container.stories.tsx +++ b/packages/canon/src/components/Container/Container.stories.tsx @@ -20,7 +20,7 @@ import { Box } from '../Box/Box'; import { Container } from './Container'; const meta = { - title: 'Components/Container', + title: 'Layout/Container', component: Container, argTypes: { children: { diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx index 86693274db..3b7a7a07c5 100644 --- a/packages/canon/src/components/Flex/Flex.stories.tsx +++ b/packages/canon/src/components/Flex/Flex.stories.tsx @@ -19,7 +19,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Flex } from './Flex'; const meta = { - title: 'Components/Flex', + title: 'Layout/Flex', component: Flex, argTypes: { align: { diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx index c4ac7f1849..b767c687b7 100644 --- a/packages/canon/src/components/Grid/Grid.stories.tsx +++ b/packages/canon/src/components/Grid/Grid.stories.tsx @@ -22,7 +22,7 @@ import { Box } from '../Box/Box'; import { Flex } from '../Flex'; const meta = { - title: 'Components/Grid', + title: 'Layout/Grid', component: Grid, argTypes: { children: { diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index ded8fcaa6e..e1b3baf0ca 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -107,6 +107,9 @@ --canon-border-danger: #f87a7a; --canon-border-warning: #e36d05; --canon-border-success: #53db83; + + /* Ring Colors */ + --canon-ring: #1f5493; } /* Dark theme tokens */ diff --git a/yarn.lock b/yarn.lock index 1c3d22547d..a513ff1260 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3839,23 +3839,22 @@ __metadata: dependencies: "@backstage/cli": "workspace:^" "@base-ui-components/react": ^1.0.0-alpha.5 - "@chromatic-com/storybook": ^3.2.2 "@remixicon/react": ^4.5.0 - "@storybook/addon-essentials": ^8.5.0 - "@storybook/addon-interactions": ^8.5.0 + "@storybook/addon-essentials": ^8.6.4 + "@storybook/addon-interactions": ^8.6.4 "@storybook/addon-styling-webpack": ^1.0.1 - "@storybook/addon-themes": ^8.5.0 - "@storybook/addon-webpack5-compiler-swc": ^2.0.0 - "@storybook/blocks": ^8.5.0 - "@storybook/react": ^8.5.0 - "@storybook/react-webpack5": ^8.5.0 - "@storybook/test": ^8.5.0 + "@storybook/addon-themes": ^8.6.4 + "@storybook/addon-webpack5-compiler-swc": ^2.1.0 + "@storybook/blocks": ^8.6.4 + "@storybook/react": ^8.6.4 + "@storybook/react-webpack5": ^8.6.4 + "@storybook/test": ^8.6.4 "@testing-library/jest-dom": ^6.0.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 chalk: ^5.4.1 clsx: ^2.1.1 - eslint-plugin-storybook: ^0.11.1 + eslint-plugin-storybook: ^0.11.4 glob: ^11.0.1 globals: ^15.11.0 lightningcss: ^1.29.1 @@ -3863,7 +3862,7 @@ __metadata: react: ^18.0.2 react-dom: ^18.0.2 react-router-dom: ^6.3.0 - storybook: ^8.5.0 + storybook: ^8.6.4 peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 @@ -9147,21 +9146,6 @@ __metadata: languageName: node linkType: hard -"@chromatic-com/storybook@npm:^3.2.2": - version: 3.2.5 - resolution: "@chromatic-com/storybook@npm:3.2.5" - dependencies: - chromatic: ^11.15.0 - filesize: ^10.0.12 - jsonfile: ^6.1.0 - react-confetti: ^6.1.0 - strip-ansi: ^7.1.0 - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: ee1e89783132fc922be2f67188a75328ec4263bfd7109635eddaec998d679ba820b883ea26812682543bbfdd02547987bddd06be3a9f869175330ffc587383b9 - languageName: node - linkType: hard - "@codemirror/autocomplete@npm:^6.0.0": version: 6.3.0 resolution: "@codemirror/autocomplete@npm:6.3.0" @@ -17628,7 +17612,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-essentials@npm:^8.5.0": +"@storybook/addon-essentials@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/addon-essentials@npm:8.6.4" dependencies: @@ -17659,7 +17643,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-interactions@npm:^8.5.0": +"@storybook/addon-interactions@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/addon-interactions@npm:8.6.4" dependencies: @@ -17709,7 +17693,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-themes@npm:^8.5.0": +"@storybook/addon-themes@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/addon-themes@npm:8.6.4" dependencies: @@ -17740,17 +17724,17 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-webpack5-compiler-swc@npm:^2.0.0": - version: 2.0.0 - resolution: "@storybook/addon-webpack5-compiler-swc@npm:2.0.0" +"@storybook/addon-webpack5-compiler-swc@npm:^2.1.0": + version: 2.1.0 + resolution: "@storybook/addon-webpack5-compiler-swc@npm:2.1.0" dependencies: - "@swc/core": ^1.7.3 - swc-loader: ^0.2.3 - checksum: abc904d79fc0ddf1e9207d6012ebc4c9288f966a3821edd6c20732ee6c3c3a4cad44010090bd0d354386089fd59ff0f668e4305e2493ab582a1200b75a67baab + "@swc/core": ^1.10.8 + swc-loader: ^0.2.6 + checksum: 1a5ebc6842f29b342d4bb0a8efab183e521c07b96aee9071dbddb2d4c8ab3525dd79cd1b3be914d0f45dbb97a2cb5b78392e352ed5f406f891f9f10857e1315d languageName: node linkType: hard -"@storybook/blocks@npm:8.6.4, @storybook/blocks@npm:^8.5.0": +"@storybook/blocks@npm:8.6.4, @storybook/blocks@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/blocks@npm:8.6.4" dependencies: @@ -17981,7 +17965,7 @@ __metadata: languageName: node linkType: hard -"@storybook/react-webpack5@npm:^8.5.0": +"@storybook/react-webpack5@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/react-webpack5@npm:8.6.4" dependencies: @@ -18000,7 +17984,7 @@ __metadata: languageName: node linkType: hard -"@storybook/react@npm:8.6.4, @storybook/react@npm:^8.5.0": +"@storybook/react@npm:8.6.4, @storybook/react@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/react@npm:8.6.4" dependencies: @@ -18025,7 +18009,7 @@ __metadata: languageName: node linkType: hard -"@storybook/test@npm:8.6.4, @storybook/test@npm:^8.5.0": +"@storybook/test@npm:8.6.4, @storybook/test@npm:^8.6.4": version: 8.6.4 resolution: "@storybook/test@npm:8.6.4" dependencies: @@ -18771,90 +18755,90 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-darwin-arm64@npm:1.11.7" +"@swc/core-darwin-arm64@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-darwin-arm64@npm:1.11.8" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-darwin-x64@npm:1.11.7" +"@swc/core-darwin-x64@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-darwin-x64@npm:1.11.8" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.7" +"@swc/core-linux-arm-gnueabihf@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.8" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-linux-arm64-gnu@npm:1.11.7" +"@swc/core-linux-arm64-gnu@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-linux-arm64-gnu@npm:1.11.8" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-linux-arm64-musl@npm:1.11.7" +"@swc/core-linux-arm64-musl@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-linux-arm64-musl@npm:1.11.8" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-linux-x64-gnu@npm:1.11.7" +"@swc/core-linux-x64-gnu@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-linux-x64-gnu@npm:1.11.8" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-linux-x64-musl@npm:1.11.7" +"@swc/core-linux-x64-musl@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-linux-x64-musl@npm:1.11.8" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-win32-arm64-msvc@npm:1.11.7" +"@swc/core-win32-arm64-msvc@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-win32-arm64-msvc@npm:1.11.8" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-win32-ia32-msvc@npm:1.11.7" +"@swc/core-win32-ia32-msvc@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-win32-ia32-msvc@npm:1.11.8" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.11.7": - version: 1.11.7 - resolution: "@swc/core-win32-x64-msvc@npm:1.11.7" +"@swc/core-win32-x64-msvc@npm:1.11.8": + version: 1.11.8 + resolution: "@swc/core-win32-x64-msvc@npm:1.11.8" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@swc/core@npm:^1.3.46, @swc/core@npm:^1.7.3": - version: 1.11.7 - resolution: "@swc/core@npm:1.11.7" +"@swc/core@npm:^1.10.8, @swc/core@npm:^1.3.46": + version: 1.11.8 + resolution: "@swc/core@npm:1.11.8" dependencies: - "@swc/core-darwin-arm64": 1.11.7 - "@swc/core-darwin-x64": 1.11.7 - "@swc/core-linux-arm-gnueabihf": 1.11.7 - "@swc/core-linux-arm64-gnu": 1.11.7 - "@swc/core-linux-arm64-musl": 1.11.7 - "@swc/core-linux-x64-gnu": 1.11.7 - "@swc/core-linux-x64-musl": 1.11.7 - "@swc/core-win32-arm64-msvc": 1.11.7 - "@swc/core-win32-ia32-msvc": 1.11.7 - "@swc/core-win32-x64-msvc": 1.11.7 + "@swc/core-darwin-arm64": 1.11.8 + "@swc/core-darwin-x64": 1.11.8 + "@swc/core-linux-arm-gnueabihf": 1.11.8 + "@swc/core-linux-arm64-gnu": 1.11.8 + "@swc/core-linux-arm64-musl": 1.11.8 + "@swc/core-linux-x64-gnu": 1.11.8 + "@swc/core-linux-x64-musl": 1.11.8 + "@swc/core-win32-arm64-msvc": 1.11.8 + "@swc/core-win32-ia32-msvc": 1.11.8 + "@swc/core-win32-x64-msvc": 1.11.8 "@swc/counter": ^0.1.3 "@swc/types": ^0.1.19 peerDependencies: @@ -18883,7 +18867,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 8c44fd46db23d468643a7bde65c3308f128fd1e460fa0307301e28cc75ab66760cbc81ff3548ac19e4c901d2194db5cee15b106db4cb70a1b44c592b8b5c0030 + checksum: 53aac457ec10ad931e4a15d14be87d4cb53432d2fc2433244835ceb1396e5560f52155e24eadc67bb964bd675b74eea0d99a7570062cd915b02d0336152bf36c languageName: node linkType: hard @@ -24855,25 +24839,6 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.15.0": - version: 11.19.0 - resolution: "chromatic@npm:11.19.0" - peerDependencies: - "@chromatic-com/cypress": ^0.*.* || ^1.0.0 - "@chromatic-com/playwright": ^0.*.* || ^1.0.0 - peerDependenciesMeta: - "@chromatic-com/cypress": - optional: true - "@chromatic-com/playwright": - optional: true - bin: - chroma: dist/bin.js - chromatic: dist/bin.js - chromatic-cli: dist/bin.js - checksum: 6ce615e73fd713bb41e813c311dcbfd0c4427a3f48aa11e4108854a9de8157ef191a23dd4179ec5568ec612ea8dc60b026ed74f993a76e163cbb765980e9c075 - languageName: node - linkType: hard - "chrome-trace-event@npm:^1.0.2": version: 1.0.2 resolution: "chrome-trace-event@npm:1.0.2" @@ -28487,16 +28452,17 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.11.1": - version: 0.11.2 - resolution: "eslint-plugin-storybook@npm:0.11.2" +"eslint-plugin-storybook@npm:^0.11.4": + version: 0.11.4 + resolution: "eslint-plugin-storybook@npm:0.11.4" dependencies: "@storybook/csf": ^0.1.11 "@typescript-eslint/utils": ^8.8.1 ts-dedent: ^2.2.0 peerDependencies: eslint: ">=8" - checksum: 04dab47b676db57aa6c2325d4ab66283f5970133a2615cc68a97e42cb4ae1c79317e6db73bcfc24468e146bdff4c9ffe90a368bf2bcb67593954485f058b33ca + typescript: ">=4.8.4 <5.8.0" + checksum: c3909478f32862a4d2687af240f91df9190e6c23e7618fee366dd8e7c1fa7f31c1c8bf9d49c8b4c01bd0f7857f5f85ccdfd6897d56bde353da3192652a2e9ded languageName: node linkType: hard @@ -29603,13 +29569,6 @@ __metadata: languageName: node linkType: hard -"filesize@npm:^10.0.12": - version: 10.1.6 - resolution: "filesize@npm:10.1.6" - checksum: a797a9d41c8f27a9ae334d23f99fc5d903eac5d03c82190dc163901205435b56626fe1260c779ba3e87a2a34d426f19ff264c3f7d956e00f2d3ac69760b52e33 - languageName: node - linkType: hard - "filesize@npm:^8.0.6": version: 8.0.6 resolution: "filesize@npm:8.0.6" @@ -34224,7 +34183,7 @@ __metadata: languageName: node linkType: hard -"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0": +"jsonfile@npm:^6.0.1": version: 6.1.0 resolution: "jsonfile@npm:6.1.0" dependencies: @@ -40971,17 +40930,6 @@ __metadata: languageName: node linkType: hard -"react-confetti@npm:^6.1.0": - version: 6.1.0 - resolution: "react-confetti@npm:6.1.0" - dependencies: - tween-functions: ^1.2.0 - peerDependencies: - react: ^16.3.0 || ^17.0.1 || ^18.0.0 - checksum: 24b6975df144d2bf09d8e1c95ddc49e547775f911efaa8d96b49e522659d931539e9d9e48cc0db3a01f3a671be7e3824e6e728db85096f5527db5d1c69ebb153 - languageName: node - linkType: hard - "react-copy-to-clipboard@npm:5.1.0, react-copy-to-clipboard@npm:^5.0.4": version: 5.1.0 resolution: "react-copy-to-clipboard@npm:5.1.0" @@ -44133,7 +44081,7 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^8.5.0": +"storybook@npm:^8.6.4": version: 8.6.4 resolution: "storybook@npm:8.6.4" dependencies: @@ -44869,7 +44817,7 @@ __metadata: languageName: node linkType: hard -"swc-loader@npm:^0.2.3": +"swc-loader@npm:^0.2.3, swc-loader@npm:^0.2.6": version: 0.2.6 resolution: "swc-loader@npm:0.2.6" dependencies: @@ -45802,13 +45750,6 @@ __metadata: languageName: node linkType: hard -"tween-functions@npm:^1.2.0": - version: 1.2.0 - resolution: "tween-functions@npm:1.2.0" - checksum: 880708d680eff5c347ddcb9f922ad121703a91c78ce308ed309073e73a794b633eb0b80589a839365803f150515ad34c9646809ae8a0e90f09e62686eefb1ab6 - languageName: node - linkType: hard - "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0": version: 0.14.5 resolution: "tweetnacl@npm:0.14.5" From ef9d4b5514f504d22c21b3e87efb8fdd0706b68a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 10 Mar 2025 09:34:05 +0000 Subject: [PATCH 2/2] Add secondary disabled story Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Button/Button.stories.tsx | 6 ++++++ packages/canon/src/components/Icon/Icon.stories.tsx | 3 --- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx index 8ba060ad8e..7a01fa6014 100644 --- a/packages/canon/src/components/Button/Button.stories.tsx +++ b/packages/canon/src/components/Button/Button.stories.tsx @@ -109,6 +109,12 @@ export const Disabled: Story = { children: 'Button', disabled: true, }, + render: args => ( + +