@charcoal-ui/react 3.6.0 → 3.7.0

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -30,12 +30,13 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,28 +54,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c2::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c2::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c3 {
@@ -144,12 +137,13 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,28 +161,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c2::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c2::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c3 {
@@ -267,12 +253,13 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,28 +277,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c2::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c2::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c3 {
@@ -417,12 +396,13 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,28 +420,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c9::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c9::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c10 {
@@ -685,7 +657,6 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
       <div
         className="c1"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -780,6 +751,113 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 </div>
 `;
 
+exports[`Storyshots DropdownSelector Long Names 1`] = `
+.c0 {
+  display: inline-block;
+  width: 100%;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  gap: 4px;
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  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;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c3 {
+  color: var(--charcoal-text2);
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    style={
+      Object {
+        "width": 288,
+      }
+    }
+  >
+    <div
+      className="c0"
+    >
+      <button
+        className="c1"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="c2"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+        </span>
+        <pixiv-icon
+          class="c3"
+          name="16/Menu"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots DropdownSelector Playground 1`] = `
 .c0 {
   cursor: pointer;
@@ -907,12 +985,13 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,
@@ -930,28 +1009,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c5 {
@@ -1025,12 +1096,13 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,
@@ -1048,28 +1120,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c2::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c2::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c3 {

package/src/components/DropdownSelector/index.story.tsx

@@ -65,6 +65,39 @@ export const Basic: Story<DropdownSelectorProps> = (
 
 Basic.args = { ...baseProps }
 
+export const LongNames: Story<DropdownSelectorProps> = (
+  props: DropdownSelectorProps
+) => {
+  const [selected, setSelected] = useState('10')
+  return (
+    <div
+      style={{
+        width: 288,
+      }}
+    >
+      <DropdownSelector
+        {...props}
+        onChange={(value) => {
+          setSelected(value)
+        }}
+        value={selected}
+        label="label"
+      >
+        <DropdownMenuItem value={'10'}>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+        </DropdownMenuItem>
+        <DropdownMenuItem value={'20'}>
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DropdownMenuItem>
+        <DropdownMenuItem value={'30'}>
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat.
+        </DropdownMenuItem>
+      </DropdownSelector>
+    </div>
+  )
+}
+
 function PlaygroundDropdownSelector(props: Partial<DropdownSelectorProps>) {
   const [selected, setSelected] = useState('10')
   return (

package/src/components/DropdownSelector/index.tsx

@@ -108,6 +108,7 @@ const DropdownButton = styled.button<{ invalid?: boolean }>`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${disabledSelector} {
     cursor: default;
@@ -118,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'] {
@@ -128,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 }) =>
@@ -146,20 +150,9 @@ const DropdownButtonText = styled.span`
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const DropdownButtonIcon = styled(Icon)`

package/src/components/Modal/__snapshots__/index.story.storyshot

@@ -456,7 +456,6 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -851,12 +850,13 @@ exports[`Storyshots Modal Default 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   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,28 +874,20 @@ 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;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c22::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c22::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c23 {
@@ -1220,7 +1212,6 @@ exports[`Storyshots Modal Default 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -1280,7 +1271,9 @@ exports[`Storyshots Modal Default 1`] = `
                     onChange={[Function]}
                     placeholder="Nagisa"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -1318,7 +1311,9 @@ exports[`Storyshots Modal Default 1`] = `
                     onChange={[Function]}
                     placeholder="Tokyo"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2021,7 +2016,6 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -2081,7 +2075,9 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
                     onChange={[Function]}
                     placeholder="Nagisa"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2119,7 +2115,9 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
                     onChange={[Function]}
                     placeholder="Tokyo"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2464,7 +2462,6 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -2832,7 +2829,6 @@ exports[`Storyshots Modal Not Dismmissable Story 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"

package/src/components/SegmentedControl/RadioGroupContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import * as React from 'react'
-import { RadioGroupState } from 'react-stately'
+import type { RadioGroupState } from '@react-stately/radio'
 
 const RadioContext = createContext<RadioGroupState | null>(null)