fix: add styled button test and doc

pixiv · Jan 27, 2025 · 274c039 · 274c039
1 parent a09b476
commit 274c039
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/.storybook/src/v4.0.0.mdx b/.storybook/src/v4.0.0.mdx
@@ -121,6 +121,25 @@ After
 <Button component={NextLink} href="...">Link</Button>
 ```
 
+### ButtonのGeneric propsについて
+
+[Styled Componentの制限](https://github.com/styled-components/styled-components/issues/1803)により`styled(Button)`で拡張する場合propsがうまく推論されない場合があります。
+Charcoal v4.1から過剰なpropsを検出する処理を追加したが、`component` propと合わせて使う時の型を配慮する必要があります。
+
+サンプル
+
+```tsx
+// allow component
+const StyledButton = styled(Button)`` as typeof Button
+<StyledButton component="a" href="#" />
+
+// preserve component type
+const StyledButtonA = styled(Button<'a'>)``
+<StyledButtonA href="#" />
+```
+
+その他のケースは [packages/styled/src/styledButtonType.d.tsx](https://github.com/pixiv/charcoal/blob/main/packages/styled/src/styledButtonType.d.tsx) を参考してください。
+
 ## Checkbox
 
 - `Checkbox`の`input`要素を`children`がない場合に label で囲わないようにしました。

diff --git a/packages/styled/src/styledButtonType.d.tsx b/packages/styled/src/styledButtonType.d.tsx
@@ -0,0 +1,63 @@
+// @charcoal-ui/react is not listed as a dependency so only use the type
+import type { Button as ButtonType } from '@charcoal-ui/react'
+import styled from 'styled-components'
+
+declare const Button: typeof ButtonType
+
+const Custom = ({ custom }: { custom: string }) => <>{custom}</>
+const CustomGeneric = <C extends string>({ custom }: { custom: C }) => (
+  <>{custom}</>
+)
+
+const StyledButton = styled(Button)``
+const StyledButtonAsButton = styled(Button<'button'>)``
+const StyledButtonA = styled(Button<'a'>)``
+const StyledButtonCustom = styled(Button<typeof Custom>)``
+const StyledButtonCustomAsButton = styled(
+  Button<typeof Custom>
+)`` as typeof Button
+const StyledButtonCustomGeneric = styled(Button<typeof CustomGeneric>)``
+const StyledButtonCustomGenericFoo = styled(
+  Button<typeof CustomGeneric<'foo'>>
+)``
+
+// for type test only
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Tests() {
+  return (
+    <>
+      <StyledButton />
+      <StyledButton type="button" disabled />
+      {/* @ts-expect-error Property 'href' does not exist on type  */}
+      <StyledButton href="" />
+
+      <StyledButtonAsButton type="button" disabled />
+      {/* @ts-expect-error Property 'href' does not exist on type  */}
+      <StyledButtonAsButton href="" />
+
+      <StyledButtonA href="#" />
+      {/* @ts-expect-error Property 'disabled' does not exist on type  */}
+      <StyledButtonA disabled />
+      {/* @ts-expect-error Type '"button"' is not assignable to type '"a"'  */}
+      <StyledButtonA component="button" href="" />
+
+      <StyledButtonCustom custom="" />
+      {/* @ts-expect-error Type 'string' is not assignable  */}
+      <StyledButtonCustom component="a" custom="" />
+
+      <StyledButtonCustomAsButton<'a'> href="#" />
+      <StyledButtonCustomAsButton<typeof CustomGeneric<'bar'>> custom="bar" />
+      <StyledButtonCustomAsButton component="a" href="#" />
+      {/* @ts-expect-error Property 'custom' does not exist on type  */}
+      <StyledButtonCustomAsButton custom="" />
+      {/* @ts-expect-error Type 'href' is not assignable  */}
+      <StyledButtonCustomAsButton<'button'> href="#" />
+
+      <StyledButtonCustomGeneric custom="" />
+
+      {/* @ts-expect-error '""' is not assignable to type '"foo"' */}
+      <StyledButtonCustomGenericFoo custom="" />
+      <StyledButtonCustomGenericFoo custom="foo" />
+    </>
+  )
+}