diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx index ee9a7e3122..2641fd0cad 100644 --- a/packages/design-system/src/components/Button/Button.tsx +++ b/packages/design-system/src/components/Button/Button.tsx @@ -9,7 +9,7 @@ export type ButtonSize = 'small' | 'big'; */ export type ButtonVariation = 'primary' | 'danger' | 'success' | 'transparent'; -type CommonButtonProps = { +type CommonButtonProps = { /** * Label text or HTML */ @@ -23,7 +23,7 @@ type CommonButtonProps = { * When provided, this will render the passed in component. This is useful when * integrating with React Router's `` or using your own custom component. */ - component?: T; + component?: ButtonComponentType; disabled?: boolean; /** * When provided the root component will render as an `` element @@ -60,24 +60,20 @@ type CommonButtonProps = { // Collect all the additional properties that one could supply to a button component // that will be passed down to whatever element or component is being used. This is // generally permissive in order to keep the typing simple at the expense of being -// more accurate. `OtherProps` is generic so that we can extract any props from a -// custom component that is being passed in. I'm trying to keep most of the complexity -// in this section and leave the `ButtonProps` definition simpler. - PW -// -// Extend is a utility type that works like `Object.assign` where properties defined -// on the latter type `N` override properties defined on the former type `M` -type Extend = Omit> & N; -type OtherProps = Omit< - // Get all possible HTML attributes and override with any more specific props from - // the possibly custom component type `T` - Extend, React.ComponentPropsWithRef>, - // And omit any properties that we're defining on our own `CommonButtonProps` - keyof CommonButtonProps +// more accurate. In a previous version of this, `OtherProps` was generic so that we +// could extract any props from a custom component that is being passed in; however, +// we are deprecating that prop because it's not actually needed and creates +// unnecessary complexity that we have to maintain. +type OtherProps = Omit< + // All other props that could be passed to buttons or anchors + React.ComponentPropsWithRef<'button'> & React.ComponentPropsWithRef<'a'>, + // Omit any properties that we're defining on our own `CommonButtonProps` + keyof CommonButtonProps >; -export type ButtonProps = CommonButtonProps & OtherProps; +export type ButtonProps = CommonButtonProps & OtherProps; -export const Button = ({ +export const Button = ({ children, className, component, @@ -91,7 +87,7 @@ export const Button = ({ variation, type = 'button', ...otherProps -}: ButtonProps) => { +}: ButtonProps) => { if (process.env.NODE_ENV !== 'production') { if (inverse) { console.warn( diff --git a/packages/design-system/src/components/Drawer/DrawerToggle.tsx b/packages/design-system/src/components/Drawer/DrawerToggle.tsx index f35e237b23..587395df44 100644 --- a/packages/design-system/src/components/Drawer/DrawerToggle.tsx +++ b/packages/design-system/src/components/Drawer/DrawerToggle.tsx @@ -1,8 +1,8 @@ -import Button, { ButtonProps, ButtonComponentType } from '../Button/Button'; +import Button, { ButtonProps } from '../Button/Button'; import React, { useEffect, useRef } from 'react'; import classNames from 'classnames'; -export type DrawerToggleProps = ButtonProps & { +export type DrawerToggleProps = ButtonProps & { /** * Determines if Drawer is open or closed. * This value is used to re-focus the toggle that opened the drawer when the drawer closes. @@ -30,14 +30,14 @@ export type DrawerToggleProps = ButtonProps & /** * A link that triggers the visibility of a drawer */ -export const DrawerToggle = ({ +export const DrawerToggle = ({ className, children, inline, showDrawer, drawerOpen, ...others -}: DrawerToggleProps): React.ReactElement => { +}: DrawerToggleProps): React.ReactElement => { const buttonRef = useRef(null); useEffect(() => { diff --git a/packages/design-system/src/components/HelpDrawer/HelpDrawerToggle.tsx b/packages/design-system/src/components/HelpDrawer/HelpDrawerToggle.tsx index 0034a0d926..d4b32d6f84 100644 --- a/packages/design-system/src/components/HelpDrawer/HelpDrawerToggle.tsx +++ b/packages/design-system/src/components/HelpDrawer/HelpDrawerToggle.tsx @@ -1,12 +1,8 @@ import React from 'react'; import DrawerToggle, { DrawerToggleProps } from '../Drawer/DrawerToggle'; import classNames from 'classnames'; -import { ButtonComponentType } from '../Button/Button'; -export type HelpDrawerToggleProps = Omit< - DrawerToggleProps, - 'drawerOpen' -> & { +export type HelpDrawerToggleProps = Omit & { /** * Whether or not the Help Drawer controlled by this toggle is open or closed. * This value is used to re-focus the toggle that opened the drawer when the drawer closes. @@ -22,14 +18,14 @@ export type HelpDrawerToggleProps = Omit< * A link that triggers the visibility of a help drawer */ -export const HelpDrawerToggle = ({ +export const HelpDrawerToggle = ({ children, className, showDrawer, helpDrawerOpen, icon, ...others -}: HelpDrawerToggleProps) => ( +}: HelpDrawerToggleProps) => ( = Omit, 'variation'> & { +type ButtonProps = Omit & { variation?: ButtonVariation | 'secondary'; }; -export declare const Button: (props: ButtonProps) => JSX.Element; +export declare const Button: (props: ButtonProps) => JSX.Element;