Merge branch 'main' of https://github.com/pixiv/charcoal into toshusa…

…i/fix-dropdown-selector-text-ellipsis
pixiv · Jan 24, 2024 · 632b102 · 632b102
2 parents 1ccfde9 + 7fe45ae
commit 632b102
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
@@ -35,8 +35,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,
@@ -54,6 +54,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;
@@ -137,8 +142,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,
@@ -156,6 +161,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;
@@ -248,8 +258,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,
@@ -267,6 +277,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;
@@ -386,8 +401,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,
@@ -405,6 +420,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;
@@ -965,8 +985,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,
@@ -984,6 +1004,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;
@@ -1071,8 +1096,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,
@@ -1090,6 +1115,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
@@ -119,7 +119,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'] {
@@ -129,6 +129,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
@@ -855,8 +855,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,
@@ -874,6 +874,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;