Skip to content

Commit

Permalink
Merge pull request #493 from pixiv/toshusai/feat-add-component-as
Browse files Browse the repository at this point in the history
Feat: Added `componentAs` to the `Button`.
  • Loading branch information
toshusai authored Mar 19, 2024
2 parents 0467314 + dcb0aba commit 9c06099
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 42 deletions.
9 changes: 6 additions & 3 deletions docs/src/pages/@charcoal-ui/react/Button/apiData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ export const apiData: Omit<
keyof Omit<ComponentPropsWithRef<'button'>, 'disabled'>
> = {
as: {
description:
'keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>',
type: 'keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>',
description: 'コンポーネントのルートノードとして描画する要素',
type: "T extends React.ElementType = 'button'",
default: 'button',
},
variant: {
Expand Down Expand Up @@ -40,4 +39,8 @@ export const apiData: Omit<
type: 'boolean',
default: 'false',
},
componentAs: {
description: 'as で指定したコンポーネントの as プロパティ',
type: 'React.ElementType',
},
}
76 changes: 38 additions & 38 deletions docs/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -169,38 +169,38 @@ __metadata:
linkType: hard

"@charcoal-ui/foundation@file:../packages/foundation::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=48a06f&locator=charcoal-web-docs%40workspace%3A."
checksum: 68a25e1e292aba83c048b9a5b66652a8d2b49546e0d05e134e1898433142c99f7e082139ee5cb1b11ee9622a2f11f4143b2b05c5d3046660d4b2ff5d0c4f9003
version: 4.0.0-beta.2
resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=efdd15&locator=charcoal-web-docs%40workspace%3A."
checksum: 3edce562ea2a1f067cd1e8326c78349346f54ad85d80f0baab7e120d03ad312b07cd4d7de464ace0599449e4fce65f1cc47ac0aecef2866f49df7fa26e155cb9
languageName: node
linkType: hard

"@charcoal-ui/icon-files@file:../packages/icon-files::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=ae5ada&locator=charcoal-web-docs%40workspace%3A."
checksum: 37c79894b6a74f5a8dffef3f8716d95c7e611cea5cd941901f2077174dfc2ff1dda0e775a219f419d176bf449b4effc8c069edc8d3500cc18de29ca138ea2076
version: 4.0.0-beta.2
resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=e616bd&locator=charcoal-web-docs%40workspace%3A."
checksum: e80a1eb0904ec30c030c439c2bd7581a553d1a3a01aec9250097d39dbd0c9e91a04e253d677ceb1d29148859b38ca8099c14a656b25fe5bb9861f8fd039812a6
languageName: node
linkType: hard

"@charcoal-ui/icons@file:../packages/icons::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=82d4ab&locator=charcoal-web-docs%40workspace%3A."
version: 4.0.0-beta.2
resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=080c7f&locator=charcoal-web-docs%40workspace%3A."
dependencies:
"@charcoal-ui/icon-files": ^3.10.0
"@charcoal-ui/icon-files": ^4.0.0-beta.2
dompurify: ^2.3.6
warning: ^4.0.3
checksum: 05e3373ea0dd1f36db026621b191327852832b2eaea3e6e48eb1442588739af6999e1892e658269e4fbdb271eeda291919ed37311100517cce989f7c8a6cd8df
checksum: f9c67f5acfd3afeb23e0c10e84e94288a0691adbf83ce33d3d7fb602434b3e4390eac610cdd52ea6455467ec83656ebe1b54846ba6c4838d12df29c9487475ac
languageName: node
linkType: hard

"@charcoal-ui/react@file:../packages/react::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=568759&locator=charcoal-web-docs%40workspace%3A."
version: 4.0.0-beta.2
resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=2fd349&locator=charcoal-web-docs%40workspace%3A."
dependencies:
"@charcoal-ui/icons": ^3.10.0
"@charcoal-ui/styled": ^3.10.0
"@charcoal-ui/theme": ^3.10.0
"@charcoal-ui/utils": ^3.10.0
"@charcoal-ui/icons": ^4.0.0-beta.2
"@charcoal-ui/styled": ^4.0.0-beta.2
"@charcoal-ui/theme": ^4.0.0-beta.2
"@charcoal-ui/utils": ^4.0.0-beta.2
"@react-aria/button": ^3.9.1
"@react-aria/checkbox": ^3.13.0
"@react-aria/dialog": ^3.5.10
Expand All @@ -219,58 +219,58 @@ __metadata:
peerDependencies:
react: ">=17.0.0"
styled-components: ">=5.1.1"
checksum: 56fbfd816462c29d41e8b40a1c389528223a45e3125338359a7f1cae5ba02c2a32bfd0a2255dfab33b11e74b4f6cb36f7fe2f1306ff5dba1c15f055addeca04b
checksum: 149710d043a7735ee7fc3def02232bd7cd5d676a2c0e617b4ed5996c4a6f3d9b5245aa41044ba5610fec9c06c7934fefd2ab39148b22d8b21c1f86214642f815
languageName: node
linkType: hard

"@charcoal-ui/styled@file:../packages/styled::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=679884&locator=charcoal-web-docs%40workspace%3A."
version: 4.0.0-beta.2
resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=7d328a&locator=charcoal-web-docs%40workspace%3A."
dependencies:
"@charcoal-ui/foundation": ^3.10.0
"@charcoal-ui/theme": ^3.10.0
"@charcoal-ui/utils": ^3.10.0
"@charcoal-ui/foundation": ^4.0.0-beta.2
"@charcoal-ui/theme": ^4.0.0-beta.2
"@charcoal-ui/utils": ^4.0.0-beta.2
warning: ^4.0.3
peerDependencies:
react: ">=17.0.0"
styled-components: ">=5.1.1"
checksum: fd4ddd7e117e4fa8aa263a8b4ebae5e9f49727afa8a97ba5d86cf1414794691c88fbef76395fe521a45cc0b6ff21e972f69c713da45ba3db59ac9d0cb597198c
checksum: 2ced3cef7bb424ce4b150c29c66ce5c816fcc8f0d2ef09835964b74a1703f154c4bfc46fabb2fcd8b71084e2103b05d419141dd58e0e24f5e9adb28f2a3f2df9
languageName: node
linkType: hard

"@charcoal-ui/tailwind-config@file:../packages/tailwind-config::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/tailwind-config@file:../packages/tailwind-config#../packages/tailwind-config::hash=e85991&locator=charcoal-web-docs%40workspace%3A."
version: 4.0.0-beta.2
resolution: "@charcoal-ui/tailwind-config@file:../packages/tailwind-config#../packages/tailwind-config::hash=5b964b&locator=charcoal-web-docs%40workspace%3A."
dependencies:
"@charcoal-ui/foundation": ^3.10.0
"@charcoal-ui/theme": ^3.10.0
"@charcoal-ui/utils": ^3.10.0
"@charcoal-ui/foundation": ^4.0.0-beta.2
"@charcoal-ui/theme": ^4.0.0-beta.2
"@charcoal-ui/utils": ^4.0.0-beta.2
peerDependencies:
csstype: ">=3.0.0"
postcss: ">=7.0.32"
tailwindcss: ">=1.4.6"
checksum: d60e1b63bc085559e1abf366e5fc920ea44d71aacabb141d5f0d927962c3d09d6312b38361628dd019e414a1f359b077ef1489a73b2b13963c38e95987a51197
checksum: 733a89126430fbfbefc99d7de8240be81d01df02370b228fc924569fc15b132abdb60b1b7a2973602cbfbea425a7570ab160841906d79b189a571f8c987bc08d
languageName: node
linkType: hard

"@charcoal-ui/theme@file:../packages/theme::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=a527c1&locator=charcoal-web-docs%40workspace%3A."
version: 4.0.0-beta.2
resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=bbd92c&locator=charcoal-web-docs%40workspace%3A."
dependencies:
"@charcoal-ui/foundation": ^3.10.0
"@charcoal-ui/utils": ^3.10.0
"@charcoal-ui/foundation": ^4.0.0-beta.2
"@charcoal-ui/utils": ^4.0.0-beta.2
polished: ^4.1.4
checksum: 00a322820138bcfcd713d15726c9fd91dc7335d5aa6c0edceae86639b81534ecb7a4ce61854603335c2fd855c834f21bf1be585f0e12758dd9df630a093f64de
checksum: 587faa8db128375c73badf5ac13a957902c89df0f8314a7f73688127f58317cb70a5a95b3ac085f3afc2c9f693197556cec34199e9dad66713dd9b7cf4bd1d78
languageName: node
linkType: hard

"@charcoal-ui/utils@file:../packages/utils::locator=charcoal-web-docs%40workspace%3A.":
version: 3.10.0
resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=1ad539&locator=charcoal-web-docs%40workspace%3A."
version: 4.0.0-beta.2
resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=bb8fb0&locator=charcoal-web-docs%40workspace%3A."
dependencies:
"@charcoal-ui/foundation": ^3.10.0
"@charcoal-ui/foundation": ^4.0.0-beta.2
polished: ^4.1.4
checksum: 86687dcc8df47c3b8337689a761574a50f87c25ef57a5d60e593ac80594b80f865497d679a6379121b558901af2122bb307c1e73cdf16ea7cd734deb4332bcce
checksum: e8f5eca0ecc7765dcc2a34ccb0dab4de418a2dbc738c52867f7c40bd5ed63c2fd517f443ee4acfb89e25bffaa4de05cc1c9c51eba29305db96096e38baa2f0e2
languageName: node
linkType: hard

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Button /> componentAs props are passed to the data-as attribute 1`] = `
<a
className="charcoal-button"
data-as="componentAs"
data-full-width={true}
href="/"
target="_blank"
/>
`;
32 changes: 32 additions & 0 deletions packages/react/src/components/Button/index.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import 'jest-styled-components'

import renderer from 'react-test-renderer'
import Button from '.'

function Link({
as,
children,
...props
}: { as: string; children: React.ReactNode } & React.ComponentProps<'a'>) {
return (
<a {...props} data-as={as}>
{children}
</a>
)
}

describe('<Button />', () => {
test('componentAs props are passed to the data-as attribute', () => {
expect(
renderer.create(
<Button
href="/"
target="_blank"
fullWidth
as={Link}
componentAs="componentAs"
/>
)
).toMatchSnapshot()
})
})
12 changes: 11 additions & 1 deletion packages/react/src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,16 @@ export type ButtonProps<T extends React.ElementType = 'button'> = {
size?: Size
fullWidth?: boolean
isActive?: boolean
/**
* The component used for root element.
* @type T extends React.ElementType = 'button'
*/
as?: T
} & Omit<React.ComponentPropsWithRef<T>, 'children'>
/**
* The as property of the component specified by the Button component's as attribute.
*/
componentAs?: React.ComponentPropsWithRef<T>['as']
} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>

const Button = forwardRef(function Button<T extends React.ElementType>(
{
Expand All @@ -25,6 +33,7 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
className,
as,
isActive,
componentAs,
...props
}: ButtonProps<T>,
ref: ForwardedRef<HTMLButtonElement>
Expand All @@ -34,6 +43,7 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
return (
<Component
{...props}
as={componentAs}
className={classNames}
data-variant={variant}
data-size={size}
Expand Down

0 comments on commit 9c06099

Please sign in to comment.