From ffc4f9a6f3603bb36cf20e2fcbe78bd7f8aeab09 Mon Sep 17 00:00:00 2001 From: itoh4126 Date: Thu, 19 Dec 2024 17:23:42 +0900 Subject: [PATCH 1/4] =?UTF-8?q?constants=E3=81=A8button=E3=81=A8storybook?= =?UTF-8?q?=E3=81=ABactive=E3=82=B9=E3=83=86=E3=83=BC=E3=83=88=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/button/_mixins.scss | 10 ++++++++++ packages/constants/_variables.scss | 1 + packages/stories-web/src/components/button/Button.tsx | 2 +- .../stories-web/src/components/demo/ButtonDemo.tsx | 5 +++++ 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/button/_mixins.scss b/packages/button/_mixins.scss index ad1cc2d..c56e7f8 100644 --- a/packages/button/_mixins.scss +++ b/packages/button/_mixins.scss @@ -335,6 +335,16 @@ ); } + &:active, + &.--active { + @include -appearance-style( + $appearance: $appearance, + $brightness: $brightness, + $color: $color, + $state: active + ); + } + &:focus-visible, &.--focused { @include -appearance-style( diff --git a/packages/constants/_variables.scss b/packages/constants/_variables.scss index 5132894..394ced3 100644 --- a/packages/constants/_variables.scss +++ b/packages/constants/_variables.scss @@ -7,6 +7,7 @@ $priorities: ( $states: ( enabled, hover, + active, focused, selected, activated, diff --git a/packages/stories-web/src/components/button/Button.tsx b/packages/stories-web/src/components/button/Button.tsx index c684199..cbc9340 100644 --- a/packages/stories-web/src/components/button/Button.tsx +++ b/packages/stories-web/src/components/button/Button.tsx @@ -12,7 +12,7 @@ export interface Props extends HTMLProps { leading?: ReactNode shape?: Shape size?: Extract - state?: Extract + state?: Extract trailing?: ReactNode width?: Width } diff --git a/packages/stories-web/src/components/demo/ButtonDemo.tsx b/packages/stories-web/src/components/demo/ButtonDemo.tsx index 5d01cb7..cbdf768 100644 --- a/packages/stories-web/src/components/demo/ButtonDemo.tsx +++ b/packages/stories-web/src/components/demo/ButtonDemo.tsx @@ -15,6 +15,11 @@ const ButtonDemo: FC = (props: Props) => ( body='Button' state='hover' /> +