@charcoal-ui/react 3.12.0 → 3.13.0-beta.0

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

@@ -11,7 +11,7 @@ import TextArea from '../TextArea'
 import Button from '../Button'
 
 export default {
-  title: 'DropdownSelector',
+  title: 'react/DropdownSelector',
   component: DropdownSelector,
 } as Meta<typeof DropdownSelector>
 
@@ -237,7 +237,7 @@ export const LongNames: StoryObj<typeof DropdownSelector> = {
 
 export const InModal: StoryObj<typeof DropdownSelector> = {
   render: function Render() {
-    const [open, setOpen] = useState(true)
+    const [open, setOpen] = useState(false)
     const [selected1, setSelected1] = useState('1')
     const [selected2, setSelected2] = useState('2')
     return (

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Icon Default 1`] = `
+exports[`Storybook Tests react/Icon Default 1`] = `
 <div
   data-dark={false}
 >

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

@@ -3,7 +3,7 @@ import { KNOWN_ICON_FILES } from '@charcoal-ui/icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Icon',
+  title: 'react/Icon',
   component: Icon,
   argTypes: {
     name: {

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests IconButton Default 1`] = `
+exports[`Storybook Tests react/IconButton Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -106,13 +106,14 @@ exports[`Storybook Tests IconButton Default 1`] = `
     title="add"
   >
     <pixiv-icon
+      aria-hidden="true"
       name="16/Add"
     />
   </button>
 </div>
 `;
 
-exports[`Storybook Tests IconButton IsActive 1`] = `
+exports[`Storybook Tests react/IconButton IsActive 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -211,13 +212,14 @@ exports[`Storybook Tests IconButton IsActive 1`] = `
     className="c0 c1"
   >
     <pixiv-icon
+      aria-hidden="true"
       name="16/Add"
     />
   </button>
 </div>
 `;
 
-exports[`Storybook Tests IconButton Overlay 1`] = `
+exports[`Storybook Tests react/IconButton Overlay 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -322,6 +324,7 @@ exports[`Storybook Tests IconButton Overlay 1`] = `
     className="c0 c1"
   >
     <pixiv-icon
+      aria-hidden="true"
       name="16/Add"
     />
   </button>

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

@@ -3,7 +3,7 @@ import IconButton from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'IconButton',
+  title: 'react/IconButton',
   component: IconButton,
   parameters: {
     layout: 'centered',

package/src/components/IconButton/index.tsx

@@ -36,7 +36,7 @@ const IconButton = forwardRef<ClickableElement, IconButtonProps>(
         $variant={variant}
         $isActive={isActive}
       >
-        <pixiv-icon name={icon} />
+        <pixiv-icon aria-hidden="true" name={icon} />
       </StyledIconButton>
     )
   }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests LoadingSpinner Default 1`] = `
+exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -46,7 +46,7 @@ exports[`Storybook Tests LoadingSpinner Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests LoadingSpinner Padding 1`] = `
+exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -92,7 +92,7 @@ exports[`Storybook Tests LoadingSpinner Padding 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests LoadingSpinner Size 1`] = `
+exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -138,7 +138,7 @@ exports[`Storybook Tests LoadingSpinner Size 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests LoadingSpinner Transparent 1`] = `
+exports[`Storybook Tests react/LoadingSpinner Transparent 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;

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

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import LoadingSpinner from '.'
 
 export default {
-  title: 'LoadingSpinner',
+  title: 'react/LoadingSpinner',
   component: LoadingSpinner,
   tags: ['skip-test'],
   parameters: {

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Modal BackgroundScroll 1`] = `
+exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -748,7 +748,7 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
           <h3
             className="c5 c6"
           >
-            Title
+            react/Title
           </h3>
         </div>
         <div
@@ -940,10 +940,13 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c27 c28"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -953,7 +956,7 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal BottomSheet 1`] = `
+exports[`Storybook Tests react/Modal BottomSheet 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1392,7 +1395,7 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
           <h3
             className="c5 c6"
           >
-            Title
+            react/Title
           </h3>
         </div>
         <div
@@ -1420,10 +1423,13 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c13 c14"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -1433,7 +1439,7 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal Default 1`] = `
+exports[`Storybook Tests react/Modal Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -2173,7 +2179,7 @@ exports[`Storybook Tests Modal Default 1`] = `
           <h3
             className="c5 c6"
           >
-            Title
+            react/Title
           </h3>
         </div>
         <div
@@ -2365,10 +2371,13 @@ exports[`Storybook Tests Modal Default 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c27 c28"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -2378,7 +2387,7 @@ exports[`Storybook Tests Modal Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal FullBottomSheet 1`] = `
+exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -3047,7 +3056,7 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
           <h3
             className="c5 c6"
           >
-            Title
+            react/Title
           </h3>
         </div>
         <div
@@ -3162,10 +3171,13 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c22 c23"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -3175,7 +3187,7 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal InternalScroll 1`] = `
+exports[`Storybook Tests react/Modal InternalScroll 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -3506,7 +3518,7 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
           <h3
             className="c5 c6"
           >
-            Title
+            react/Title
           </h3>
         </div>
         <div
@@ -3542,7 +3554,7 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
+exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -3886,7 +3898,7 @@ exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
           <h3
             className="c5 c6"
           >
-            Title
+            react/Title
           </h3>
         </div>
         <div

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

@@ -16,10 +16,10 @@ import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Modal',
+  title: 'react/Modal',
   component: Modal,
   args: {
-    title: 'Title',
+    title: 'react/Title',
   },
   argTypes: {
     size: {

package/src/components/Modal/index.tsx

@@ -26,6 +26,7 @@ export type ModalProps = AriaModalOverlayProps &
     isOpen: boolean
     onClose: () => void
     className?: string
+    closeButtonAriaLabel?: string
 
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
@@ -74,6 +75,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
     onClose,
     className,
     isOpen = false,
+    closeButtonAriaLabel = 'Close',
   } = props
 
   const ref = useObjectRef<HTMLDivElement>(external)
@@ -162,9 +164,11 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
                 >
                   {children}
                   {isDismissable === true && (
-                    <ModalCrossButton
+                    <ModalCloseButton
                       size="S"
                       icon="24/Close"
+                      type="button"
+                      aria-label={closeButtonAriaLabel}
                       onClick={onClose}
                     />
                   )}
@@ -224,7 +228,7 @@ const ModalBackground = animated(styled.div<{
   }
 `)
 
-const ModalCrossButton = styled(IconButton)`
+export const ModalCloseButton = styled(IconButton)`
   position: absolute;
   top: 8px;
   right: 8px;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests MultiSelect Basic 1`] = `
+exports[`Storybook Tests react/MultiSelect Basic 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -260,7 +260,7 @@ exports[`Storybook Tests MultiSelect Basic 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests MultiSelect Invalid 1`] = `
+exports[`Storybook Tests react/MultiSelect Invalid 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -525,7 +525,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests MultiSelect Overlay 1`] = `
+exports[`Storybook Tests react/MultiSelect Overlay 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -789,7 +789,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests MultiSelect Playground 1`] = `
+exports[`Storybook Tests react/MultiSelect Playground 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;

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

@@ -11,7 +11,7 @@ const StyledMultiSelectGroup = styled(MultiSelectGroup)`
 `
 
 export default {
-  title: 'MultiSelect',
+  title: 'react/MultiSelect',
   component: MultiSelect,
   argTypes: {
     variant: {

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Radio Default 1`] = `
+exports[`Storybook Tests react/Radio Default 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -236,7 +236,7 @@ exports[`Storybook Tests Radio Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio Disabled 1`] = `
+exports[`Storybook Tests react/Radio Disabled 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -472,7 +472,7 @@ exports[`Storybook Tests Radio Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio Invalid 1`] = `
+exports[`Storybook Tests react/Radio Invalid 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -709,7 +709,7 @@ exports[`Storybook Tests Radio Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio PartialDisabled 1`] = `
+exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -945,7 +945,7 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio Readonly 1`] = `
+exports[`Storybook Tests react/Radio Readonly 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;

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

@@ -5,7 +5,7 @@ import { StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
 export default {
-  title: 'Radio',
+  title: 'react/Radio',
   component: Radio,
   parameters: {
     layout: 'centered',

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
+exports[`Storybook Tests react/SegmentedControl ObjectSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -259,7 +259,7 @@ exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
+exports[`Storybook Tests react/SegmentedControl StringSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

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

@@ -2,7 +2,7 @@ import SegmentedControl from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'SegmentedControl',
+  title: 'react/SegmentedControl',
   component: SegmentedControl,
 } as Meta<typeof SegmentedControl>
 

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Switch Checked 1`] = `
+exports[`Storybook Tests react/Switch Checked 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -144,7 +144,7 @@ exports[`Storybook Tests Switch Checked 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Default 1`] = `
+exports[`Storybook Tests react/Switch Default 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -287,7 +287,7 @@ exports[`Storybook Tests Switch Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Disabled 1`] = `
+exports[`Storybook Tests react/Switch Disabled 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -443,7 +443,7 @@ exports[`Storybook Tests Switch Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Switch Label 1`] = `
+exports[`Storybook Tests react/Switch Label 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;

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

@@ -3,7 +3,7 @@ import Switch from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Switch',
+  title: 'react/Switch',
   component: Switch,
   parameters: {
     layout: 'centered',

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests TagItem Active 1`] = `
+exports[`Storybook Tests react/TagItem Active 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -151,7 +151,7 @@ exports[`Storybook Tests TagItem Active 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem BGColor 1`] = `
+exports[`Storybook Tests react/TagItem BGColor 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -299,7 +299,7 @@ exports[`Storybook Tests TagItem BGColor 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem BGImage 1`] = `
+exports[`Storybook Tests react/TagItem BGImage 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -370,7 +370,7 @@ exports[`Storybook Tests TagItem BGImage 1`] = `
   height: 100%;
   background-position: center;
   background-size: cover;
-  background-image: url(https://charcoal-web.pixiv.design/charcoal-ogp.jpg);
+  background-image: url(data:image/png;base64,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);
   mix-blend-mode: overlay;
 }
 
@@ -461,7 +461,7 @@ exports[`Storybook Tests TagItem BGImage 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem Default 1`] = `
+exports[`Storybook Tests react/TagItem Default 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -609,7 +609,7 @@ exports[`Storybook Tests TagItem Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem Disabled 1`] = `
+exports[`Storybook Tests react/TagItem Disabled 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -757,7 +757,7 @@ exports[`Storybook Tests TagItem Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem InActive 1`] = `
+exports[`Storybook Tests react/TagItem InActive 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -906,7 +906,7 @@ exports[`Storybook Tests TagItem InActive 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem Small 1`] = `
+exports[`Storybook Tests react/TagItem Small 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -1054,7 +1054,7 @@ exports[`Storybook Tests TagItem Small 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests TagItem TranslatedLabel 1`] = `
+exports[`Storybook Tests react/TagItem TranslatedLabel 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;

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

@@ -2,7 +2,7 @@ import TagItem from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'TagItem',
+  title: 'react/TagItem',
   component: TagItem,
   parameters: {
     layout: 'centered',
@@ -35,7 +35,7 @@ export const BGImage: StoryObj<typeof TagItem> = {
     return (
       <TagItem
         label="#女の子"
-        bgImage="https://charcoal-web.pixiv.design/charcoal-ogp.jpg"
+        bgImage="data:image/png;base64,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"
       />
     )
   },

package/src/components/TextArea/TextArea.story.tsx

@@ -4,7 +4,7 @@ import TextArea from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'TextArea',
+  title: 'react/TextArea',
   component: TextArea,
   parameters: {
     layout: 'centered',