fix: Remove propTypes + defaultProps from <Chip>, <Toast>, <FormLabel> and <IconButton> (#3789)

* refactor: remove propTypes and defaultProps Chip

* refactor: remove propTypes and defaultProps Toast

* refactor: remove propTypes and defaultProps FormLabel

* refactor: remove propTypes and defaultProps IconButton

* fix: changing docstring, hardcoding default values

* fix: iconButton forwardedref syntax

* chore: add missing default value for iconButton

* chore: address feedback on docs

* chore: address feedback on docs

* docs: add links to type definition

* docs: add back deprecated comment for icon FA

Author: diana-villalvazo-wgu

src/Chip/index.tsx

@@ -1,40 +1,59 @@
 import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
-// @ts-ignore
-import { requiredWhen } from '../utils/propTypes';
-import { STYLE_VARIANTS } from './constants';
 import ChipIcon from './ChipIcon';
+import { STYLE_VARIANTS } from './constants';
 
 export const CHIP_PGN_CLASS = 'pgn__chip';
 
 export interface IChip {
+  /** Specifies the content of the `Chip`. */
   children: React.ReactNode,
+  /** Click handler for the whole `Chip`, has effect only when Chip does not have any interactive icons. */
   onClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Specifies an additional `className` to add to the base element. */
   className?: string,
+  /** The `Chip` style [variant](https://github.com/openedx/paragon/blob/release-23.x/src/Chip/constants.ts) to use. */
   variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
+  /**
+   * An icon component to render before the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconBefore?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconBeforeAlt?: string,
+  /**
+   * An icon component to render before after the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconAfter?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconAfterAlt?: string,
+  /** A click handler for the `Chip` icon before. */
   onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,
+  /** A click handler for the `Chip` icon after. */
   onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Disables the `Chip`. */
   disabled?: boolean,
+  /** Indicates if `Chip` has been selected. */
   isSelected?: boolean,
 }
 
 const Chip = React.forwardRef(({
   children,
   className,
-  variant,
+  variant = 'light',
   iconBefore,
   iconBeforeAlt,
   iconAfter,
   iconAfterAlt,
   onIconBeforeClick,
   onIconAfterClick,
-  disabled,
-  isSelected,
+  disabled = false,
+  isSelected = false,
   onClick,
   ...props
 }: IChip, ref: ForwardedRef<HTMLDivElement>) => {
@@ -92,56 +111,4 @@ const Chip = React.forwardRef(({
   );
 });
 
-Chip.propTypes = {
-  /** Specifies the content of the `Chip`. */
-  // @ts-ignore
-  children: PropTypes.node.isRequired,
-  /** Specifies an additional `className` to add to the base element. */
-  className: PropTypes.string,
-  /** The `Chip` style variant to use. */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** Disables the `Chip`. */
-  disabled: PropTypes.bool,
-  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */
-  onClick: PropTypes.func,
-  /**
-   * An icon component to render before the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
-  /** A click handler for the `Chip` icon before. */
-  onIconBeforeClick: PropTypes.func,
-  /**
-   * An icon component to render before after the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
-  /** A click handler for the `Chip` icon after. */
-  onIconAfterClick: PropTypes.func,
-  /** Indicates if `Chip` has been selected. */
-  isSelected: PropTypes.bool,
-};
-
-Chip.defaultProps = {
-  className: undefined,
-  variant: STYLE_VARIANTS.LIGHT,
-  disabled: false,
-  onClick: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  onIconBeforeClick: undefined,
-  onIconAfterClick: undefined,
-  isSelected: false,
-  iconAfterAlt: undefined,
-  iconBeforeAlt: undefined,
-};
-
 export default Chip;

src/Form/FormLabel.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useFormGroupContext } from './FormGroupContext';
 import { FORM_CONTROL_SIZES } from './constants';
@@ -9,6 +8,8 @@ interface Props {
   children: React.ReactNode;
   /** Specifies whether the component should be displayed with inline styling. */
   isInline?: boolean;
+  /** Specifies an additional `className` to add to the base element. */
+  className?: string;
 }
 
 function FormLabel({ children, isInline = false, ...props }: Props & React.ComponentPropsWithoutRef<'label'>) {
@@ -27,13 +28,4 @@ function FormLabel({ children, isInline = false, ...props }: Props & React.Compo
   return React.createElement(componentType, labelProps, children);
 }
 
-FormLabel.propTypes = {
-  /** Specifies class name to append to the base element. */
-  className: PropTypes.string,
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-  /** Specifies whether the component should be displayed with inline styling. */
-  isInline: PropTypes.bool,
-};
-
 export default FormLabel;

src/IconButton/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { type Placement } from 'react-bootstrap/Overlay';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 import Icon from '../Icon';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  /** Component that renders the icon, currently defaults to `Icon` */
   iconAs?: React.ComponentType<any>,
   /** Additional CSS class[es] to apply to this button */
   className?: string;
@@ -26,33 +26,33 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   iconClassNames?: string;
   /** Click handler for the button */
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
+  /** Whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive?: boolean;
   /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */
   icon?: { prefix?: string; iconName?: string, icon?: any[] },
-  /** Type of button (uses Bootstrap options) */
+  /** Type of button (uses Bootstrap options). */
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
-  /** size of button to render */
+  /** Size of button to render */
   size?: 'sm' | 'md' | 'inline';
-  /** no children */
+  /** No children */
   children?: never;
 }
 
-const IconButton = React.forwardRef<HTMLButtonElement, Props>(({
+const IconButton = React.forwardRef(({
   className,
   alt,
-  invertColors,
+  invertColors = false,
   icon,
   src,
   iconClassNames,
-  onClick,
-  size,
-  variant,
-  iconAs,
-  isActive,
+  onClick = () => {},
+  size = 'md',
+  variant = 'primary',
+  iconAs = Icon,
+  isActive = false,
   children, // unused, just here because we don't want it to be part of 'attrs'
   ...attrs
-}, ref) => {
+} : Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const invert = invertColors ? 'inverse-' : '';
   const activeStyle = isActive ? `${variant}-` : '';
   const IconComponent = iconAs;
@@ -87,66 +87,18 @@ const IconButton = React.forwardRef<HTMLButtonElement, Props>(({
   );
 });
 
-IconButton.defaultProps = {
-  iconAs: Icon,
-  src: undefined,
-  icon: undefined,
-  iconClassNames: undefined,
-  className: undefined,
-  invertColors: false,
-  variant: 'primary',
-  size: 'md',
-  onClick: () => {},
-  isActive: false,
-  children: undefined,
-};
-
-IconButton.propTypes = {
-  /** A custom class name. */
-  className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `Icon` */
-  iconAs: PropTypes.elementType as any,
-  /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@openedx/paragon/icons';`
-   * */
-  src: PropTypes.elementType as any,
-  /** Alt text for your icon. For best practice, avoid using alt text to describe
-   * the image in the `IconButton`. Instead, we recommend describing the function
-   * of the button. */
-  alt: PropTypes.string.isRequired,
-  /** Changes icon styles for dark background */
-  invertColors: PropTypes.bool,
-  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
-  icon: PropTypes.shape({
-    prefix: PropTypes.string,
-    iconName: PropTypes.string,
-    // eslint-disable-next-line react/forbid-prop-types
-    icon: PropTypes.array,
-  }) as any,
-  /** Extra class names that will be added to the icon */
-  iconClassNames: PropTypes.string,
-  /** Click handler for the button */
-  onClick: PropTypes.func,
-  /** Type of button (uses Bootstrap options) */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),
-  /** size of button to render */
-  size: PropTypes.oneOf(['sm', 'md', 'inline']),
-  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
-  isActive: PropTypes.bool,
-};
-
 interface PropsWithTooltip extends Props {
-  /** choose from https://popper.js.org/docs/v2/constructors/#options */
-  tooltipPlacement: Placement,
-  /** any content to pass to tooltip content area */
+  /** Tooltip placement can be top, left, right etc, choose from https://popper.js.org/docs/v2/constructors/#options */
+  tooltipPlacement?: Placement,
+  /** Any content to pass to tooltip content area */
   tooltipContent: React.ReactNode,
 }
 
 /**
  * An icon button wrapped in overlaytrigger to display a tooltip.
  */
 function IconButtonWithTooltip({
-  tooltipPlacement, tooltipContent, ...props
+  tooltipPlacement = 'top', tooltipContent, ...props
 }: PropsWithTooltip) {
   const invert = props.invertColors ? 'inverse-' : '';
   return (
@@ -166,22 +118,6 @@ function IconButtonWithTooltip({
   );
 }
 
-IconButtonWithTooltip.defaultProps = {
-  ...IconButton.defaultProps,
-  tooltipPlacement: 'top',
-};
-
-IconButtonWithTooltip.propTypes = {
-  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */
-  tooltipPlacement: PropTypes.string,
-  /** any valid JSX or text to be rendered as tooltip contents */
-  tooltipContent: PropTypes.node.isRequired,
-  /** Type of button (uses Bootstrap options) */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),
-  /** Changes icon styles for dark background */
-  invertColors: PropTypes.bool,
-};
-
 (IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;
 
 export default IconButton as typeof IconButton & {