Add forwardRef support to Button & View

.changeset/dirty-keys-eat.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+Add forwardRef support to Button & View

packages/react/src/primitives/Button/Button.tsx

@@ -1,37 +1,47 @@
 import classNames from 'classnames';
+import * as React from 'react';
+
 import { ComponentClassNames } from '../shared/constants';
-import { ButtonProps, Primitive } from '../types';
+import { ButtonProps, PrimitiveWithForwardRef } from '../types';
 import { View } from '../View';
 
-export const Button: Primitive<ButtonProps, 'button'> = ({
-  className,
-  children,
-  isFullWidth = false,
-  isDisabled,
-  isLoading,
-  loadingText = '',
-  size,
-  type = 'button',
-  variation,
-  ...rest
-}) => (
-  <View
-    as="button"
-    className={classNames(
-      ComponentClassNames.Button,
-      ComponentClassNames.FieldGroupControl,
-      className
-    )}
-    data-fullwidth={isFullWidth}
-    data-loading={isLoading}
-    data-size={size}
-    data-variation={variation}
-    isDisabled={isDisabled || isLoading}
-    type={type}
-    {...rest}
-  >
-    {isLoading && loadingText ? <span>{loadingText}</span> : children}
-  </View>
-);
+const ButtonInner: PrimitiveWithForwardRef<ButtonProps, 'button'> = (
+  {
+    className,
+    children,
+    isFullWidth = false,
+    isDisabled,
+    isLoading,
+    loadingText = '',
+    size,
+    type = 'button',
+    variation,
+    ...rest
+  },
+  ref
+) => {
+  return (
+    <View
+      ref={ref}
+      as="button"
+      className={classNames(
+        ComponentClassNames.Button,
+        ComponentClassNames.FieldGroupControl,
+        className
+      )}
+      data-fullwidth={isFullWidth}
+      data-loading={isLoading}
+      data-size={size}
+      data-variation={variation}
+      isDisabled={isDisabled || isLoading}
+      type={type}
+      {...rest}
+    >
+      {isLoading && loadingText ? <span>{loadingText}</span> : children}
+    </View>
+  );
+};
+
+export const Button = React.forwardRef(ButtonInner);
 
 Button.displayName = 'Button';

packages/react/src/primitives/Button/__tests__/Button.test.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -13,6 +14,17 @@ describe('Button test suite', () => {
     expect(button).toHaveClass(ComponentClassNames.Button, className);
   });
 
+  it('should forward ref to button DOM element', async () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const buttonText = 'Hello there';
+
+    render(<Button ref={ref}>{buttonText}</Button>);
+
+    await screen.findByRole('button');
+    expect(ref.current.nodeName).toBe('BUTTON');
+    expect(ref.current.innerHTML).toBe(buttonText);
+  });
+
   it('should set size and variation props correctly', async () => {
     const size = 'large';
     const variation = 'primary';

packages/react/src/primitives/View/View.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import { useNonStyleProps, usePropStyles } from '../shared/styleUtils';
-import { ElementType, PrimitiveProps, ViewProps } from '../types';
+import { ElementType, PrimitivePropsWithRef, ViewProps } from '../types';
 
-export const View = <Element extends ElementType = 'div'>({
-  as = 'div',
-  className,
-  children,
-  role,
-  id,
-  testId,
-  ariaLabel,
-  isDisabled,
-  style,
-  ...rest
-}: PrimitiveProps<ViewProps, Element>) => {
+const ViewInner = <Element extends ElementType = 'div'>(
+  {
+    as = 'div',
+    className,
+    children,
+    role,
+    id,
+    testId,
+    ariaLabel,
+    isDisabled,
+    style,
+    ...rest
+  }: PrimitivePropsWithRef<ViewProps, Element>,
+  ref?: React.ForwardedRef<HTMLElement>
+) => {
   const propStyles = usePropStyles(rest, style);
   const nonStyleProps = useNonStyleProps(rest);
 
@@ -26,9 +29,14 @@ export const View = <Element extends ElementType = 'div'>({
       disabled: isDisabled,
       id,
       role,
+      ref,
       style: propStyles,
       ...nonStyleProps,
     },
     children
   );
 };
+
+export const View = React.forwardRef(ViewInner);
+
+View.displayName = 'View';

packages/react/src/primitives/View/__tests__/View.test.tsx

@@ -1,7 +1,10 @@
-import { View } from '../View';
+import * as React from 'react';
+
+import { kebabCase } from 'lodash';
 import { render, screen } from '@testing-library/react';
+
 import { ComponentPropsToStylePropsMap } from '../../types';
-import { kebabCase } from 'lodash';
+import { View } from '../View';
 
 describe('View: ', () => {
   const viewText = 'Hello from inside a view';
@@ -22,6 +25,17 @@ describe('View: ', () => {
     expect(view.nodeName).toBe('DIV');
   });
 
+  it('should forward ref to DOM element', async () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const text = 'Hello there';
+
+    render(<View ref={ref}>{text}</View>);
+
+    await screen.findByText(text);
+    expect(ref.current.nodeName).toBe('DIV');
+    expect(ref.current.innerHTML).toBe(text);
+  });
+
   it('can render a <button> HTML element', async () => {
     render(<View as="button">{viewText}</View>);
     const viewButton = await screen.findByRole('button');

packages/react/src/primitives/types/view.ts

@@ -7,6 +7,20 @@ type MergeProps<A, B> = A & Omit<B, keyof A>;
 
 export type ElementType = React.FC<any> | keyof JSX.IntrinsicElements;
 
+/**
+ * Convert string element type to DOMElement Type
+ * e.g. 'button' => HTMLButtonElement
+ */
+export type HTMLElementType<Element extends ElementType> =
+  Element extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[Element] extends React.DetailedHTMLProps<
+        unknown,
+        infer HTMLType
+      >
+      ? HTMLType
+      : never
+    : HTMLDivElement;
+
 export type ElementProps<Element extends ElementType> =
   Element extends keyof JSX.IntrinsicElements
     ? JSX.IntrinsicElements[Element]
@@ -18,15 +32,32 @@ export type PrimitiveProps<
   Props extends ViewProps,
   Element extends ElementType
 > = MergeProps<
-  Omit<Props, 'as'> & { as?: Element | Props['as'] },
-  ElementProps<Element>
+  Omit<Props, 'as'> & {
+    as?: Element | Props['as'];
+  },
+  Omit<ElementProps<Element>, 'ref'> // exclude `ref?: LegacyRef` included in DetailedHTMLProps
 >;
 
+export type PrimitivePropsWithRef<
+  Props extends ViewProps,
+  Element extends ElementType
+> = PrimitiveProps<Props, Element> & {
+  ref?: React.Ref<HTMLElementType<Element>>;
+};
+
 export type Primitive<
   Props extends ViewProps,
   Element extends ElementType
 > = React.FC<PrimitiveProps<Props, Element>>;
 
+export type PrimitiveWithForwardRef<
+  Props extends ViewProps,
+  Element extends ElementType
+> = React.ForwardRefRenderFunction<
+  HTMLElementType<Element>,
+  PrimitivePropsWithRef<Props, Element>
+>;
+
 export interface ViewProps
   extends BaseComponentProps,
     BaseStyleProps,