✨Overrideable component spike

packages/eds-core-react/src/components/Button/Button.stories.tsx

@@ -40,9 +40,6 @@ export default {
 export const Introduction: Story<ButtonProps> = (args) => {
   return <Button {...args}>You can control me</Button>
 }
-Introduction.args = {
-  as: undefined,
-}
 Introduction.decorators = [
   (Story) => (
     <Stack>

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'
@@ -70,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;
@@ -156,8 +158,6 @@ export type ButtonProps = {
   href?: string
   /** Is the button disabled */
   disabled?: boolean
-  /** Change html element. */
-  as?: ElementType
   /** Type of button
    * @default 'button'
    */
@@ -166,8 +166,8 @@ export type ButtonProps = {
   fullWidth?: boolean
 } & ButtonHTMLAttributes<HTMLButtonElement>
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(
+export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
+  forwardRef(function Button(
     {
       color = 'primary',
       variant = 'contained',
@@ -183,8 +183,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     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 +210,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         </ButtonBase>
       </ThemeProvider>
     )
-  },
-)
+  })

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;

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;

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;

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;

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;

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;

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, '')

packages/eds-utils/src/utils/overridableComponent.ts

@@ -0,0 +1,12 @@
+import { RefAttributes, FC, ElementType, ComponentPropsWithRef } from 'react'
+
+export type OverridableComponent<Component, Element extends HTMLElement> = {
+  (props: Component & RefAttributes<Element>): ReturnType<FC>
+
+  <As extends ElementType>(
+    props: {
+      as: As
+    } & Component &
+      Omit<ComponentPropsWithRef<As>, keyof Component>,
+  ): ReturnType<FC>
+}