@charcoal-ui/react 2.7.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -49,10 +49,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.7.0",
-    "@charcoal-ui/styled": "^2.7.0",
-    "@charcoal-ui/theme": "^2.7.0",
-    "@charcoal-ui/utils": "^2.7.0",
+    "@charcoal-ui/icons": "^2.9.0",
+    "@charcoal-ui/styled": "^2.9.0",
+    "@charcoal-ui/theme": "^2.9.0",
+    "@charcoal-ui/utils": "^2.9.0",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -88,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "77e32148d5a981f988e8bbc0c88aec82b0936a1a"
+  "gitHead": "37a14b2a014a752fe20c358eb5d35e0e74063805"
 }

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

@@ -47,6 +47,7 @@ export const Sections: Story<DropdownSelectorProps> = (props) => {
     <div>
       <DropdownSelector
         {...props}
+        label="sections"
         placeholder={'Drop Down menu'}
         onChange={action('change')}
         onOpenChange={action('open')}
@@ -68,6 +69,7 @@ export const Bottom: Story<DropdownSelectorProps> = (props) => {
     <div style={{ marginTop: '1000px' }}>
       <DropdownSelector
         {...props}
+        label="bottom"
         placeholder={'Drop Down menu'}
         onChange={action('change')}
         onOpenChange={action('open')}
@@ -86,6 +88,7 @@ export const Many: Story<DropdownSelectorProps> = (props) => {
     <div style={{ padding: '300px 100px' }}>
       <DropdownSelector
         {...props}
+        label="many"
         placeholder={'Drop Down menu'}
         onChange={(v) => {
           setValue(v.toString())
@@ -181,7 +184,7 @@ type InvalidProps = {
 }
 export const Invalid: Story<InvalidProps> = ({ disabled }) => {
   const props: Omit<DropdownSelectorProps, 'children'> = {
-    label: '',
+    label: 'invalid',
     assertiveText: 'error message',
     invalid: true,
   }

package/src/components/LoadingSpinner/index.tsx

@@ -19,6 +19,7 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   padding: number
   transparent: boolean
 }>`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;

package/src/components/Modal/index.tsx

@@ -18,13 +18,16 @@ import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
 
+type BottomSheet = boolean | 'full'
+type Size = 'S' | 'M' | 'L'
+
 export type ModalProps = AriaModalOverlayProps &
   AriaDialogProps & {
     children: React.ReactNode
     zIndex?: number
     title: string
-    size?: 'S' | 'M' | 'L'
-    bottomSheet?: boolean | 'full'
+    size?: Size
+    bottomSheet?: BottomSheet
     isOpen: boolean
     onClose: () => void
 
@@ -133,28 +136,30 @@ export default function Modal({
             style={transitionEnabled ? { backgroundColor } : {}}
           >
             <FocusScope contain restoreFocus autoFocus>
-              <ModalDialog
-                ref={ref}
-                {...overlayProps}
-                {...modalProps}
-                {...dialogProps}
-                style={transitionEnabled ? { transform } : {}}
-                size={size}
-                bottomSheet={bottomSheet}
-              >
-                <ModalContext.Provider
-                  value={{ titleProps, title, close: onClose, showDismiss }}
+              <DialogContainer bottomSheet={bottomSheet} size={size}>
+                <ModalDialog
+                  ref={ref}
+                  {...overlayProps}
+                  {...modalProps}
+                  {...dialogProps}
+                  style={transitionEnabled ? { transform } : {}}
+                  size={size}
+                  bottomSheet={bottomSheet}
                 >
-                  {children}
-                  {isDismissable === true && (
-                    <ModalCrossButton
-                      size="S"
-                      icon="24/Close"
-                      onClick={onClose}
-                    />
-                  )}
-                </ModalContext.Provider>
-              </ModalDialog>
+                  <ModalContext.Provider
+                    value={{ titleProps, title, close: onClose, showDismiss }}
+                  >
+                    {children}
+                    {isDismissable === true && (
+                      <ModalCrossButton
+                        size="S"
+                        icon="24/Close"
+                        onClick={onClose}
+                      />
+                    )}
+                  </ModalContext.Provider>
+                </ModalDialog>
+              </DialogContainer>
             </FocusScope>
           </ModalBackground>
         </Overlay>
@@ -176,6 +181,8 @@ const ModalContext = React.createContext<{
 
 const ModalBackground = animated(styled.div<{ zIndex: number }>`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -185,50 +192,61 @@ const ModalBackground = animated(styled.div<{ zIndex: number }>`
   ${theme((o) => [o.bg.surface4])}
 `)
 
+const DialogContainer = styled.div<{ bottomSheet: BottomSheet; size: Size }>`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+    switch (p.size) {
+      case 'S': {
+        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'M': {
+        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'L': {
+        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      default: {
+        return unreachable(p.size)
+      }
+    }
+  }}px;
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) =>
+      p.bottomSheet !== false &&
+      css`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === 'full' ? 'height: 100%' : ''};
+      `}
+  }
+`
+
 const ModalDialog = animated(styled.div<{
-  size: 'S' | 'M' | 'L'
-  bottomSheet: boolean | 'full'
+  size: Size
+  bottomSheet: BottomSheet
 }>`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) =>
-    p.size === 'S'
-      ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : p.size === 'M'
-      ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      p.size === 'L'
-      ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
     ${(p) =>
-      p.bottomSheet === 'full'
-        ? css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          `
-        : p.bottomSheet
-        ? css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          `
-        : css`
-            width: calc(100% - 48px);
-          `}
+      p.bottomSheet !== false &&
+      css`
+        border-radius: 0;
+        ${p.bottomSheet === 'full' &&
+        css`
+          height: 100%;
+        `}
+      `}
   }
 `)
 

package/src/components/Radio/index.tsx

@@ -82,6 +82,8 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) =>
       theme((o) => [
         o.borderRadius('oval'),

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

@@ -13,6 +13,7 @@ export const StringSegments: Story<SegmentedControlProps> = (props) => {
 }
 
 StringSegments.args = {
+  name: 'test',
   data: ['option1', 'option2', 'option3'],
   disabled: false,
   readonly: false,
@@ -24,6 +25,7 @@ export const ObjectSegments: Story<SegmentedControlProps> = (props) => {
 }
 
 ObjectSegments.args = {
+  name: 'test',
   data: [
     { label: '選択肢1', value: 'option1' },
     { label: '選択肢2', value: 'option2' },

package/src/components/SegmentedControl/index.tsx

@@ -41,6 +41,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
         isRequired: props.required,
+        'aria-label': props.name,
       }),
       [props]
     )

package/src/components/TextField/index.tsx

@@ -349,6 +349,7 @@ const PrefixContainer = styled.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `
 
 const SuffixContainer = styled.span`

package/src/index.ts

@@ -52,11 +52,12 @@ export {
 } from './components/LoadingSpinner'
 export {
   default as DropdownSelector,
+  type DropdownSelectorProps,
   DropdownSelectorItem,
 } from './components/DropdownSelector'
 export {
   default as SegmentedControl,
   type SegmentedControlProps,
 } from './components/SegmentedControl'
-export { default as Checkbox } from './components/Checkbox'
+export { default as Checkbox, type CheckboxProps } from './components/Checkbox'
 export { default as TagItem, type TagItemProps } from './components/TagItem'