Merge pull request #446 from pixiv/toshusai/fix-dropdown-selector-hov…

…er-style feat: add a hover style to DropdownSelector
pixiv · Jan 24, 2024 · 7fe45ae · 7fe45ae
2 parents b3801e1 + b89d8a1
commit 7fe45ae
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git 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,
@@ -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;
@@ -148,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,
@@ -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;
@@ -271,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,
@@ -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;
@@ -421,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,
@@ -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;
@@ -910,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,
@@ -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;
@@ -1028,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,
@@ -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/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'] {
@@ -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 }) =>

diff --git 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,
@@ -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;