@charcoal-ui/react 2.7.0 → 3.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.7.0",
+  "version": "3.0.0-beta.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": "^3.0.0-beta.0",
+    "@charcoal-ui/styled": "^3.0.0-beta.0",
+    "@charcoal-ui/theme": "^3.0.0-beta.0",
+    "@charcoal-ui/utils": "^3.0.0-beta.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": "e3522bffb7136b259f31cef88920aebc7637a5b6"
 }

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

@@ -58,7 +58,7 @@ Small.args = {
 
 export const Fixed: Story<ButtonProps> = DefaultStory.bind({})
 Fixed.args = {
-  fixed: true,
+  fullWidth: true,
 }
 
 export const Disabled: Story<ButtonProps> = DefaultStory.bind({})
@@ -121,10 +121,10 @@ const LayoutExampleStory = (args: ButtonProps) => (
         gap: 8px;
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         Submit
       </Button>
-      <Button {...args} variant="Default" fixed>
+      <Button {...args} variant="Default" fullWidth>
         Cancel
       </Button>
     </div>
@@ -156,10 +156,10 @@ const LayoutExampleStory = (args: ButtonProps) => (
         }
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         Submit
       </Button>
-      <Button {...args} variant="Default" fixed>
+      <Button {...args} variant="Default" fullWidth>
         Cancel
       </Button>
     </div>
@@ -174,7 +174,7 @@ const LayoutExampleStory = (args: ButtonProps) => (
         }
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         すべて見る
       </Button>
       <Button {...args} variant="Default">

package/src/components/Button/index.tsx

@@ -19,7 +19,7 @@ interface StyledProps {
   /**
    * 幅を最大まで広げて描画
    */
-  fixed: boolean
+  fullWidth: boolean
 }
 
 export type ButtonProps = Partial<StyledProps> & ClickableProps
@@ -29,7 +29,7 @@ const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
     children,
     variant = 'Default',
     size = 'M',
-    fixed = false,
+    fullWidth: fixed = false,
     disabled = false,
     ...rest
   },
@@ -41,7 +41,7 @@ const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
       disabled={disabled}
       variant={variant}
       size={size}
-      fixed={fixed}
+      fullWidth={fixed}
       ref={ref}
     >
       {children}
@@ -54,11 +54,11 @@ const StyledButton = styled(Clickable)
   .withConfig<StyledProps>({
     shouldForwardProp(prop) {
       // fixed は <button> 要素に渡ってはいけない
-      return prop !== 'fixed'
+      return prop !== 'fullWidth'
     },
   })
   .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`
-  width: ${(p) => (p.fixed ? 'stretch' : 'min-content')};
+  width: ${(p) => (p.fullWidth ? 'stretch' : 'min-content')};
   display: inline-grid;
   align-items: center;
   justify-content: center;

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

@@ -76,10 +76,10 @@ const DefaultStory = (args: ModalProps) => {
             </ModalAlign>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fixed>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
               Apply
             </Button>
-            <Button onClick={() => state.close()} fixed>
+            <Button onClick={() => state.close()} fullWidth>
               Cancel
             </Button>
           </ModalButtons>
@@ -140,10 +140,10 @@ const FullBottomSheetStory = (args: ModalProps) => {
             </ModalAlign>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fixed>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
               Apply
             </Button>
-            <Button onClick={() => state.close()} fixed>
+            <Button onClick={() => state.close()} fullWidth>
               Cancel
             </Button>
           </ModalButtons>
@@ -181,7 +181,7 @@ const BottomSheetStory = (args: ModalProps) => {
             </StyledModalText>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Danger" onClick={() => state.close()} fixed>
+            <Button variant="Danger" onClick={() => state.close()} fullWidth>
               削除する
             </Button>
             <ModalDismissButton>キャンセル</ModalDismissButton>

package/src/components/Modal/index.tsx

@@ -263,7 +263,7 @@ export function ModalDismissButton({ children, ...props }: ButtonProps) {
   }
 
   return (
-    <Button {...props} onClick={close} fixed>
+    <Button {...props} onClick={close} fullWidth>
       {children}
     </Button>
   )