From 6a7d4fe7495c859c177fc2aefce4ddf6b4848de1 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 11 Aug 2022 13:47:21 +0200 Subject: [PATCH 01/10] =?UTF-8?q?=E2=9C=A8=20added=20OverridableComponent?= =?UTF-8?q?=20to=20utils?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/eds-utils/src/utils/overridableComponent.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 packages/eds-utils/src/utils/overridableComponent.ts diff --git a/packages/eds-utils/src/utils/overridableComponent.ts b/packages/eds-utils/src/utils/overridableComponent.ts new file mode 100644 index 0000000000..cbcf6fe041 --- /dev/null +++ b/packages/eds-utils/src/utils/overridableComponent.ts @@ -0,0 +1,10 @@ +export type OverridableComponent = { + (props: Component & React.RefAttributes): ReturnType + + ( + props: { + as: As + } & Component & + Omit, keyof Component>, + ): ReturnType +} From 6aa2a505aae4e377a1acf46ce07df28df933f4ea Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 11 Aug 2022 14:16:48 +0200 Subject: [PATCH 02/10] export OverridableComponent --- packages/eds-utils/src/utils/index.ts | 1 + packages/eds-utils/src/utils/overridableComponent.ts | 10 ++++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/eds-utils/src/utils/index.ts b/packages/eds-utils/src/utils/index.ts index 911dd9c403..b5eb547f0e 100644 --- a/packages/eds-utils/src/utils/index.ts +++ b/packages/eds-utils/src/utils/index.ts @@ -2,5 +2,6 @@ export * from './templates' export { joinHandlers } from './joinHandlers' export { mergeRefs } from './mergeRefs' export { setReactInputValue } from './setReactInputValue' +export type { OverridableComponent } from './overridableComponent' export const trimSpaces = (text: string): string => text.replace(/ /g, '') diff --git a/packages/eds-utils/src/utils/overridableComponent.ts b/packages/eds-utils/src/utils/overridableComponent.ts index cbcf6fe041..37d87eb7e5 100644 --- a/packages/eds-utils/src/utils/overridableComponent.ts +++ b/packages/eds-utils/src/utils/overridableComponent.ts @@ -1,10 +1,12 @@ +import { RefAttributes, FC, ElementType, ComponentPropsWithRef } from 'react' + export type OverridableComponent = { - (props: Component & React.RefAttributes): ReturnType + (props: Component & RefAttributes): ReturnType - ( + ( props: { as: As } & Component & - Omit, keyof Component>, - ): ReturnType + Omit, keyof Component>, + ): ReturnType } From e36febbf1bcc3e5421a8f2a01b353d123734c671 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 11 Aug 2022 14:36:22 +0200 Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8make=20button=20an=20overridable?= =?UTF-8?q?=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/Button.stories.tsx | 3 --- .../src/components/Button/Button.tsx | 16 +++++++--------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/eds-core-react/src/components/Button/Button.stories.tsx b/packages/eds-core-react/src/components/Button/Button.stories.tsx index 97a96e84d0..15384bc5a2 100644 --- a/packages/eds-core-react/src/components/Button/Button.stories.tsx +++ b/packages/eds-core-react/src/components/Button/Button.stories.tsx @@ -40,9 +40,6 @@ export default { export const Introduction: Story = (args) => { return } -Introduction.args = { - as: undefined, -} Introduction.decorators = [ (Story) => ( diff --git a/packages/eds-core-react/src/components/Button/Button.tsx b/packages/eds-core-react/src/components/Button/Button.tsx index 0aefa87caa..d8942d3e5c 100644 --- a/packages/eds-core-react/src/components/Button/Button.tsx +++ b/packages/eds-core-react/src/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import { forwardRef, ElementType, ButtonHTMLAttributes } from 'react' +import { forwardRef, ButtonHTMLAttributes } from 'react' import styled, { css, ThemeProvider } from 'styled-components' import { token as buttonToken } from './tokens' import { ButtonTokenSet, ButtonToken } from './Button.types' @@ -8,6 +8,7 @@ import { outlineTemplate, spacingsTemplate, useToken, + OverridableComponent, } from '@equinor/eds-utils' import { InnerFullWidth } from './InnerFullWidth' import { useEds } from '../EdsProvider' @@ -156,8 +157,6 @@ export type ButtonProps = { href?: string /** Is the button disabled */ disabled?: boolean - /** Change html element. */ - as?: ElementType /** Type of button * @default 'button' */ @@ -166,8 +165,8 @@ export type ButtonProps = { fullWidth?: boolean } & ButtonHTMLAttributes -export const Button = forwardRef( - function Button( +export const Button: OverridableComponent = + forwardRef(function Button( { color = 'primary', variant = 'contained', @@ -183,8 +182,8 @@ export const Button = forwardRef( const { density } = useEds() const token = useToken({ density }, getToken(variant, color)) - const as: ElementType = - href && !disabled ? 'a' : other.as ? other.as : 'button' + const as = href && !disabled ? 'a' : other.as ? other.as : 'button' + const type = href || other.as ? undefined : 'button' tabIndex = disabled ? -1 : tabIndex @@ -210,5 +209,4 @@ export const Button = forwardRef( ) - }, -) + }) From d3aa7bfdc9a1e9a4c05619444fcb7f0ce8ae6bf8 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 11 Aug 2022 14:37:48 +0200 Subject: [PATCH 04/10] =?UTF-8?q?=F0=9F=90=9B=20fix=20button=20box-sizing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/eds-core-react/src/components/Button/Button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eds-core-react/src/components/Button/Button.tsx b/packages/eds-core-react/src/components/Button/Button.tsx index d8942d3e5c..40718192e4 100644 --- a/packages/eds-core-react/src/components/Button/Button.tsx +++ b/packages/eds-core-react/src/components/Button/Button.tsx @@ -71,6 +71,7 @@ const ButtonBase = styled.button(({ theme }: { theme: ButtonToken }) => { const { focus, hover, disabled } = states return css` + box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; From c8e2f3f2978d81212b1d6d06ae00f0575ba2c4bb Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 11 Aug 2022 14:56:46 +0200 Subject: [PATCH 05/10] =?UTF-8?q?=F0=9F=93=B8=20update=20snapshots?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Button/__snapshots__/Button.test.tsx.snap | 1 + .../components/Pagination/__snapshots__/Pagination.test.tsx.snap | 1 + .../src/components/Search/__snapshots__/Search.test.tsx.snap | 1 + .../Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap | 1 + .../Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap | 1 + .../components/SideSheet/__snapshots__/SideSheet.test.tsx.snap | 1 + 6 files changed, 6 insertions(+) diff --git a/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap index e3af58dbd2..dfd579fb33 100644 --- a/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -23,6 +23,7 @@ exports[`Button Matches snapshot 1`] = ` } .c0 { + box-sizing: border-box; margin: 0; padding: 0; -webkit-text-decoration: none; diff --git a/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap index 29654a8463..bba339ea6d 100644 --- a/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -23,6 +23,7 @@ exports[`Pagination Matches snapshot 1`] = ` } .c3 { + box-sizing: border-box; margin: 0; padding: 0; -webkit-text-decoration: none; diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap index 435f85cf92..698d218968 100644 --- a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap +++ b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap @@ -23,6 +23,7 @@ exports[`Search Matches snapshot 1`] = ` } .c3 { + box-sizing: border-box; margin: 0; padding: 0; -webkit-text-decoration: none; diff --git a/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap index b6cefbd97d..9074839c48 100644 --- a/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap +++ b/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap @@ -63,6 +63,7 @@ exports[`MultiSelect Matches snapshot 2`] = ` } .c0 { + box-sizing: border-box; margin: 0; padding: 0; -webkit-text-decoration: none; diff --git a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap index 897bdf046d..b39446680f 100644 --- a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap +++ b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap @@ -130,6 +130,7 @@ exports[`SingleSelect Matches snapshot 1`] = ` } .c6 { + box-sizing: border-box; margin: 0; padding: 0; -webkit-text-decoration: none; diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap index f2b0b7c686..bfe6100965 100644 --- a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap +++ b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap @@ -33,6 +33,7 @@ exports[`SideSheet Matches snapshot 1`] = ` } .c3 { + box-sizing: border-box; margin: 0; padding: 0; -webkit-text-decoration: none; From 2b36e50e5f132eb65c7cc6b8a7c6b2a80c15d9a0 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Mon, 15 Aug 2022 10:09:34 +0200 Subject: [PATCH 06/10] Added polymorph test --- .../src/components/Button/Button.test.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/eds-core-react/src/components/Button/Button.test.tsx b/packages/eds-core-react/src/components/Button/Button.test.tsx index d95e168859..f2fc2f3c4f 100644 --- a/packages/eds-core-react/src/components/Button/Button.test.tsx +++ b/packages/eds-core-react/src/components/Button/Button.test.tsx @@ -19,6 +19,13 @@ const StyledButton = styled(Button)` const MarginButton = styled(Button)` margin: 12px; ` +const LinkButton = ({ to }: { to: string }) => { + return ( + + click + + ) +} afterEach(cleanup) @@ -135,6 +142,13 @@ describe('Button', () => { expect(button).toBeInTheDocument() }) + it('Can be cast as another component', () => { + render( +``` From e8f833aa0b752d4269950f7f87bb17b5d6d68706 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Tue, 16 Aug 2022 09:10:42 +0200 Subject: [PATCH 08/10] Update packages/eds-core-react/src/components/Button/Button.docs.mdx Co-authored-by: Michael Marszalek --- packages/eds-core-react/src/components/Button/Button.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eds-core-react/src/components/Button/Button.docs.mdx b/packages/eds-core-react/src/components/Button/Button.docs.mdx index eb70bdc978..bc1ed7fafe 100644 --- a/packages/eds-core-react/src/components/Button/Button.docs.mdx +++ b/packages/eds-core-react/src/components/Button/Button.docs.mdx @@ -79,7 +79,7 @@ Compact `Button` using `EdsProvider`. ### Using the 'as' prop to render as another component The `as` prop allows you to render the button as another html element or even react component. -This is useful if you want to use the button as as a navigation component for a third party routing library such as rect-router. +This is useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router. ```tsx import { Link } from "react-router-dom" From 26ca3b6b1d074e9751596e6d9bba1103b32a61fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= Date: Tue, 16 Aug 2022 09:10:54 +0200 Subject: [PATCH 09/10] Update packages/eds-core-react/src/components/Button/Button.docs.mdx Co-authored-by: Michael Marszalek --- packages/eds-core-react/src/components/Button/Button.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eds-core-react/src/components/Button/Button.docs.mdx b/packages/eds-core-react/src/components/Button/Button.docs.mdx index bc1ed7fafe..729e761383 100644 --- a/packages/eds-core-react/src/components/Button/Button.docs.mdx +++ b/packages/eds-core-react/src/components/Button/Button.docs.mdx @@ -78,7 +78,7 @@ Compact `Button` using `EdsProvider`. ### Using the 'as' prop to render as another component -The `as` prop allows you to render the button as another html element or even react component. +The `as` prop allows you to render the `Button` as another html element or even react component. This is useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router. ```tsx From 757c671e2cb1bab7c2aaf5098616a40624f150c1 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Tue, 16 Aug 2022 09:19:27 +0200 Subject: [PATCH 10/10] expanded polymorph story --- .../eds-core-react/src/components/Button/Button.docs.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/eds-core-react/src/components/Button/Button.docs.mdx b/packages/eds-core-react/src/components/Button/Button.docs.mdx index 729e761383..919e5375d6 100644 --- a/packages/eds-core-react/src/components/Button/Button.docs.mdx +++ b/packages/eds-core-react/src/components/Button/Button.docs.mdx @@ -79,7 +79,11 @@ Compact `Button` using `EdsProvider`. ### Using the 'as' prop to render as another component The `as` prop allows you to render the `Button` as another html element or even react component. -This is useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router. + +```tsx + +``` +This is especially useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router. ```tsx import { Link } from "react-router-dom"