@charcoal-ui/react 3.1.2-beta.5 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.1.2-beta.5",
+  "version": "3.2.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": "^3.1.2-beta.5",
-    "@charcoal-ui/styled": "^3.1.2-beta.5",
-    "@charcoal-ui/theme": "^3.1.2-beta.5",
-    "@charcoal-ui/utils": "^3.1.2-beta.5",
+    "@charcoal-ui/icons": "^3.2.0",
+    "@charcoal-ui/styled": "^3.2.0",
+    "@charcoal-ui/theme": "^3.2.0",
+    "@charcoal-ui/utils": "^3.2.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": "689c6a990a625fb831e361dfeba358ece7f2b2b7"
+  "gitHead": "495dc492d64a159618461a074b2315547eeda99f"
 }

package/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -118,8 +118,6 @@ exports[`Basic <Button>Hello</Button> 1`] = `
 <button
   className="c0 c1"
   disabled={false}
-  height={40}
-  size="M"
 >
   Hello
 </button>
@@ -224,161 +222,8 @@ exports[`Link <Button to="#">Hello</Button> 1`] = `
 
 <a
   aria-disabled={false}
-  background="surface3"
   className="c0 c1"
-  font="text2"
-  height={40}
   href="#"
-  padding={24}
-  size="M"
-  theme={
-    Object {
-      "border": Object {
-        "default": Object {
-          "color": "rgba(0,0,0,0.08)",
-        },
-      },
-      "borderRadius": Object {
-        "16": 16,
-        "24": 24,
-        "4": 4,
-        "8": 8,
-        "none": 0,
-        "oval": 999999,
-      },
-      "breakpoint": Object {
-        "screen1": 744,
-        "screen2": 952,
-        "screen3": 1160,
-        "screen4": 1368,
-      },
-      "color": Object {
-        "assertive": "#ff2b00",
-        "background1": "#ffffff",
-        "background2": "#f5f5f5",
-        "border": "rgba(0,0,0,0.08)",
-        "brand": "#0096fa",
-        "icon6": "rgba(255,255,255,0.28)",
-        "link1": "#3d7699",
-        "link2": "rgba(255,255,255,0.36)",
-        "success": "#b1cc29",
-        "surface1": "#ffffff",
-        "surface10": "rgba(0,0,0,0.16)",
-        "surface2": "rgba(0,0,0,0.02)",
-        "surface3": "rgba(0,0,0,0.04)",
-        "surface4": "rgba(0,0,0,0.32)",
-        "surface6": "rgba(0,0,0,0.88)",
-        "surface7": "rgba(0,0,0,0.02)",
-        "surface8": "rgba(0,0,0,0.88)",
-        "surface9": "#ffffff",
-        "text1": "#1f1f1f",
-        "text2": "#474747",
-        "text3": "#858585",
-        "text4": "#adadad",
-        "text5": "#ffffff",
-        "transparent": "rgba(0,0,0,0)",
-        "updatedItem": "rgba(0,150,250,0.04)",
-        "warning": "#ffaf0f",
-      },
-      "effect": Object {
-        "hover": Object {
-          "color": "rgba(0,0,0,0.04)",
-          "type": "alpha",
-        },
-        "press": Object {
-          "color": "rgba(0,0,0,0.16)",
-          "type": "alpha",
-        },
-      },
-      "elementEffect": Object {
-        "disabled": Object {
-          "opacity": 0.32,
-          "type": "opacity",
-        },
-      },
-      "gradientColor": Object {
-        "callToAction": Array [
-          Object {
-            "color": "#d1ff1a",
-            "ratio": 0,
-          },
-          Object {
-            "color": "#1ad1ff",
-            "ratio": 100,
-          },
-        ],
-        "surface5": Array [
-          Object {
-            "color": "rgba(0,0,0,0.32)",
-            "ratio": 0,
-          },
-          Object {
-            "color": "rgba(0,0,0,0)",
-            "ratio": 100,
-          },
-        ],
-      },
-      "grid": Object {
-        "unit": Object {
-          "column": 80,
-          "gutter": 24,
-        },
-      },
-      "outline": Object {
-        "assertive": Object {
-          "color": "rgba(255,43,0,0.32)",
-          "weight": 4,
-        },
-        "default": Object {
-          "color": "rgba(0,150,250,0.32)",
-          "weight": 4,
-        },
-      },
-      "spacing": Object {
-        "0": 0,
-        "104": 104,
-        "16": 16,
-        "168": 168,
-        "24": 24,
-        "272": 272,
-        "4": 4,
-        "40": 40,
-        "440": 440,
-        "64": 64,
-        "8": 8,
-      },
-      "transition": Object {
-        "default": Object {
-          "duration": 0.2,
-        },
-      },
-      "typography": Object {
-        "size": Object {
-          "12": Object {
-            "fontSize": 12,
-            "lineHeight": 20,
-          },
-          "14": Object {
-            "fontSize": 14,
-            "lineHeight": 22,
-          },
-          "16": Object {
-            "fontSize": 16,
-            "lineHeight": 24,
-          },
-          "20": Object {
-            "fontSize": 20,
-            "lineHeight": 28,
-          },
-          "32": Object {
-            "fontSize": 32,
-            "lineHeight": 40,
-          },
-        },
-      },
-    }
-  }
-  variant="Default"
 >
   Hello
 </a>

package/src/components/Button/index.tsx

@@ -8,21 +8,17 @@ type Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'
 type Size = 'S' | 'M'
 
 interface StyledProps {
-  /**
-   * ボタンのスタイル
-   */
+  $variant: Variant
+  $fullWidth: boolean
+  $size: Size
+}
+
+export type ButtonProps = Partial<{
   variant: Variant
-  /**
-   * ボタンのサイズ
-   */
   size: Size
-  /**
-   * 幅を最大まで広げて描画
-   */
   fullWidth: boolean
-}
-
-export type ButtonProps = Partial<StyledProps> & ClickableProps
+}> &
+  ClickableProps
 
 const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
   {
@@ -39,9 +35,9 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     <StyledButton
       {...rest}
       disabled={disabled}
-      variant={variant}
-      size={size}
-      fullWidth={fixed}
+      $variant={variant}
+      $size={size}
+      $fullWidth={fixed}
       ref={ref}
     >
       {children}
@@ -50,15 +46,8 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
 })
 export default Button
 
-const StyledButton = styled(Clickable)
-  .withConfig<StyledProps>({
-    shouldForwardProp(prop) {
-      // fixed は <button> 要素に渡ってはいけない
-      return prop !== 'fullWidth'
-    },
-  })
-  .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`
-  width: ${(p) => (p.fullWidth ? 'stretch' : 'min-content')};
+const StyledButton = styled(Clickable)<StyledProps>`
+  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
   display: inline-grid;
   align-items: center;
   justify-content: center;
@@ -68,55 +57,49 @@ const StyledButton = styled(Clickable)
 
   ${(p) =>
     theme((o) => [
-      o.font[p.font].hover.press,
-      o.bg[p.background].hover.press,
+      o.font[variantToFont(p.$variant)].hover.press,
+      o.bg[variantToBackgraund(p.$variant)].hover.press,
       o.typography(14).bold.preserveHalfLeading,
-      o.padding.horizontal(p.padding),
+      o.padding.horizontal(p.$size === 'M' ? 24 : 16),
       o.disabled,
       o.borderRadius('oval'),
       o.outline.default.focus,
     ])}
 
   /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => p.height}px;
+  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
 `
 
-function styledProps(props: StyledProps) {
-  return {
-    ...props,
-    ...variantToProps(props.variant),
-    ...sizeToProps(props.size),
-  }
-}
-
-function variantToProps(variant: Variant) {
+function variantToBackgraund(variant: Variant) {
   switch (variant) {
     case 'Overlay':
-      return { font: 'text5', background: 'surface4' } as const
+      return 'surface4'
     case 'Default':
-      return { font: 'text2', background: 'surface3' } as const
+      return 'surface3'
     case 'Primary':
-      return { font: 'text5', background: 'brand' } as const
+      return 'brand'
     case 'Navigation':
-      return { font: 'text5', background: 'surface6' } as const
+      return 'surface6'
     case 'Danger':
-      return { font: 'text5', background: 'assertive' } as const
+      return 'assertive'
     default:
       return unreachable(variant)
   }
 }
 
-function sizeToProps(size: Size) {
-  switch (size) {
-    case 'S':
-      return {
-        height: 32,
-        padding: 16,
-      } as const
-    case 'M':
-      return {
-        height: 40,
-        padding: 24,
-      } as const
+function variantToFont(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'text5'
+    case 'Default':
+      return 'text2'
+    case 'Primary':
+      return 'text5'
+    case 'Navigation':
+      return 'text5'
+    case 'Danger':
+      return 'text5'
+    default:
+      return unreachable(variant)
   }
 }