From f6bcacd95871bbd63eaa84f9359f7fa4ca38a100 Mon Sep 17 00:00:00 2001 From: toshusai Date: Wed, 24 Jan 2024 13:14:56 +0900 Subject: [PATCH 1/4] feat: add hover style to dropdown selector --- packages/react/src/components/DropdownSelector/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/src/components/DropdownSelector/index.tsx b/packages/react/src/components/DropdownSelector/index.tsx index 538dbd673..9abe980d9 100644 --- a/packages/react/src/components/DropdownSelector/index.tsx +++ b/packages/react/src/components/DropdownSelector/index.tsx @@ -128,6 +128,9 @@ const DropdownButton = styled.button<{ invalid?: boolean }>` outline: none; box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32); } + &:hover { + background-color: var(--charcoal-surface3-hover); + } } ${({ invalid }) => From bc88443c1640e851830bc0483076f74a31216f3c Mon Sep 17 00:00:00 2001 From: toshusai Date: Wed, 24 Jan 2024 13:15:23 +0900 Subject: [PATCH 2/4] test: update storyshots --- .../__snapshots__/index.story.storyshot | 30 +++++++++++++++++++ .../Modal/__snapshots__/index.story.storyshot | 5 ++++ 2 files changed, 35 insertions(+) diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot index b4000ddc7..1e0594fa3 100644 --- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot @@ -53,6 +53,11 @@ exports[`Storyshots DropdownSelector Basic 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c1:not(:disabled):not([aria-disabled]):hover, +.c1[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c2 { text-align: left; font-size: 14px; @@ -167,6 +172,11 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c1:not(:disabled):not([aria-disabled]):hover, +.c1[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c2 { text-align: left; font-size: 14px; @@ -290,6 +300,11 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c1:not(:disabled):not([aria-disabled]):hover, +.c1[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c2 { text-align: left; font-size: 14px; @@ -440,6 +455,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c8:not(:disabled):not([aria-disabled]):hover, +.c8[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c9 { text-align: left; font-size: 14px; @@ -929,6 +949,11 @@ exports[`Storyshots DropdownSelector Playground 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c3:not(:disabled):not([aria-disabled]):hover, +.c3[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c4 { text-align: left; font-size: 14px; @@ -1047,6 +1072,11 @@ exports[`Storyshots DropdownSelector Section List 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c1:not(:disabled):not([aria-disabled]):hover, +.c1[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c2 { text-align: left; font-size: 14px; diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot index 18b997c87..061097fff 100644 --- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot @@ -873,6 +873,11 @@ exports[`Storyshots Modal Default 1`] = ` box-shadow: 0 0 0 4px rgba(0,150,250,0.32); } +.c21:not(:disabled):not([aria-disabled]):hover, +.c21[aria-disabled='false']:hover { + background-color: var(--charcoal-surface3-hover); +} + .c22 { text-align: left; font-size: 14px; From 6d9be1a13e2e31c53b2bb782087bd6ee1d8b751c Mon Sep 17 00:00:00 2001 From: toshusai Date: Wed, 24 Jan 2024 13:24:28 +0900 Subject: [PATCH 3/4] fix: add background-color transition --- packages/react/src/components/DropdownSelector/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/DropdownSelector/index.tsx b/packages/react/src/components/DropdownSelector/index.tsx index 9abe980d9..7918707e7 100644 --- a/packages/react/src/components/DropdownSelector/index.tsx +++ b/packages/react/src/components/DropdownSelector/index.tsx @@ -118,7 +118,7 @@ const DropdownButton = styled.button<{ invalid?: boolean }>` background-color: var(--charcoal-surface3); border-radius: 4px; - transition: 0.2s box-shadow; + transition: 0.2s box-shadow, 0.2s background-color; &:not(:disabled):not([aria-disabled]), &[aria-disabled='false'] { From b89d8a15d21f3a4747d70c962aec0c440e5e5fb1 Mon Sep 17 00:00:00 2001 From: toshusai Date: Wed, 24 Jan 2024 13:24:36 +0900 Subject: [PATCH 4/4] test: update storyshots --- .../__snapshots__/index.story.storyshot | 24 +++++++++---------- .../Modal/__snapshots__/index.story.storyshot | 4 ++-- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot index 1e0594fa3..ad2a1da86 100644 --- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot @@ -34,8 +34,8 @@ exports[`Storyshots DropdownSelector Basic 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c1:disabled, @@ -153,8 +153,8 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c1:disabled, @@ -281,8 +281,8 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c1:disabled, @@ -436,8 +436,8 @@ exports[`Storyshots DropdownSelector In Modal 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c8:disabled, @@ -930,8 +930,8 @@ exports[`Storyshots DropdownSelector Playground 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c3:disabled, @@ -1053,8 +1053,8 @@ exports[`Storyshots DropdownSelector Section List 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c1:disabled, diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot index 061097fff..84dbf908e 100644 --- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot +++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot @@ -854,8 +854,8 @@ exports[`Storyshots Modal Default 1`] = ` padding-left: 8px; background-color: var(--charcoal-surface3); border-radius: 4px; - -webkit-transition: 0.2s box-shadow; - transition: 0.2s box-shadow; + -webkit-transition: 0.2s box-shadow,0.2s background-color; + transition: 0.2s box-shadow,0.2s background-color; } .c21:disabled,