[WNMGDS-1344][WNMGDS-1345] Revert button types (#1545)

* Revert back to the simplest types without support for custom component

* HTMLAttributes didn't actually contain all attributes of anchors like `target`

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<T extends ButtonComponentType> = {
+type CommonButtonProps = {
   /**
    * Label text or HTML
    */
@@ -23,7 +23,7 @@ type CommonButtonProps<T extends ButtonComponentType> = {
    * When provided, this will render the passed in component. This is useful when
    * integrating with React Router's `<Link>` or using your own custom component.
    */
-  component?: T;
+  component?: ButtonComponentType;
   disabled?: boolean;
   /**
    * When provided the root component will render as an `<a>` element
@@ -60,24 +60,20 @@ type CommonButtonProps<T extends ButtonComponentType> = {
 // 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<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
-type OtherProps<T extends ButtonComponentType> = Omit<
-  // Get all possible HTML attributes and override with any more specific props from
-  // the possibly custom component type `T`
-  Extend<React.HTMLAttributes<HTMLElement>, React.ComponentPropsWithRef<T>>,
-  // And omit any properties that we're defining on our own `CommonButtonProps`
-  keyof CommonButtonProps<T>
+// 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<T extends ButtonComponentType> = CommonButtonProps<T> & OtherProps<T>;
+export type ButtonProps = CommonButtonProps & OtherProps;
 
-export const Button = <T extends ButtonComponentType>({
+export const Button = ({
   children,
   className,
   component,
@@ -91,7 +87,7 @@ export const Button = <T extends ButtonComponentType>({
   variation,
   type = 'button',
   ...otherProps
-}: ButtonProps<T>) => {
+}: ButtonProps) => {
   if (process.env.NODE_ENV !== 'production') {
     if (inverse) {
       console.warn(

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<T extends ButtonComponentType> = ButtonProps<T> & {
+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<T extends ButtonComponentType> = ButtonProps<T> &
 /**
  * A link that triggers the visibility of a drawer
  */
-export const DrawerToggle = <T extends ButtonComponentType>({
+export const DrawerToggle = ({
   className,
   children,
   inline,
   showDrawer,
   drawerOpen,
   ...others
-}: DrawerToggleProps<T>): React.ReactElement => {
+}: DrawerToggleProps): React.ReactElement => {
   const buttonRef = useRef(null);
 
   useEffect(() => {

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<T extends ButtonComponentType> = Omit<
-  DrawerToggleProps<T>,
-  'drawerOpen'
-> & {
+export type HelpDrawerToggleProps = Omit<DrawerToggleProps, 'drawerOpen'> & {
   /**
    * 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<T extends ButtonComponentType> = Omit<
  * A link that triggers the visibility of a help drawer
  */
 
-export const HelpDrawerToggle = <T extends ButtonComponentType>({
+export const HelpDrawerToggle = ({
   children,
   className,
   showDrawer,
   helpDrawerOpen,
   icon,
   ...others
-}: HelpDrawerToggleProps<T>) => (
+}: HelpDrawerToggleProps) => (
   <DrawerToggle
     className={classNames(className, 'ds-c-help-drawer__toggle')}
     drawerOpen={helpDrawerOpen}

packages/ds-healthcare-gov/src/types/Button/index.d.ts

@@ -1,12 +1,8 @@
 import React from 'react';
-import {
-  ButtonVariation,
-  ButtonProps as CoreButtonProps,
-  ButtonComponentType,
-} from '@cmsgov/design-system';
+import { ButtonVariation, ButtonProps as CoreButtonProps } from '@cmsgov/design-system';
 
-type ButtonProps<T extends ButtonComponentType> = Omit<CoreButtonProps<T>, 'variation'> & {
+type ButtonProps = Omit<CoreButtonProps, 'variation'> & {
   variation?: ButtonVariation | 'secondary';
 };
 
-export declare const Button: <T extends ButtonComponentType>(props: ButtonProps<T>) => JSX.Element;
+export declare const Button: (props: ButtonProps) => JSX.Element;