sync: release-23.x to next

src/Breadcrumb/Breadcrumb.test.jsx → src/Breadcrumb/Breadcrumb.test.tsx

@@ -95,4 +95,29 @@ describe('<Breadcrumb />', () => {
     expect(links.getAttribute('target')).toBe('_blank');
     expect(links.getAttribute('href')).toBe('/link-1');
   });
+
+  it('renders with a custom CSS class', () => {
+    render(<Breadcrumb {...baseProps} ariaLabel="Breadcrumbs" className="foobar" />);
+    const nav = screen.getByLabelText('Breadcrumbs');
+    expect(nav.classList).toContain('foobar');
+    expect(nav.classList).toContain('pgn__breadcrumb');
+    expect(nav.classList).toContain('pgn__breadcrumb-light');
+  });
+
+  it('can access data-xxxxx attributes on the links in clickHandler', async () => {
+    const user = userEvent.setup();
+    const clickHandler = jest.fn();
+    render(
+      <Breadcrumb
+        ariaLabel="Location"
+        links={[
+          { label: 'Link1', href: '/link1', 'data-parent-index': 17 },
+        ]}
+        clickHandler={({ currentTarget }) => clickHandler(currentTarget.dataset.parentIndex)}
+      />,
+    );
+    const link = screen.getByRole('link', { name: 'Link1' });
+    await user.click(link);
+    expect(clickHandler).toHaveBeenCalledWith('17');
+  });
 });

src/Breadcrumb/index.tsx

@@ -19,7 +19,7 @@ interface BreadcrumbProps {
   spacer?: React.ReactElement;
   /** allows to add a custom function to be called `onClick` of a breadcrumb link.
    * The use case for this is for adding custom analytics to the component. */
-  clickHandler?: (event: React.MouseEvent, link: any) => void;
+  clickHandler?: (event: React.MouseEvent<HTMLAnchorElement>, link: any) => void;
   /** The `Breadcrumbs` style variant to use. */
   variant?: 'light' | 'dark';
   /** The `Breadcrumbs` mobile variant view. */
@@ -28,20 +28,21 @@ interface BreadcrumbProps {
    * [react-router's Link](https://reactrouter.com/en/main/components/link).
    */
   linkAs?: React.ElementType;
+  /** Optional class name(s) to append to the base `<nav>` element. */
+  className?: string;
 }
 
 function Breadcrumb({
-  links, activeLabel, spacer, clickHandler,
-  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a', ...props
+  links, activeLabel, spacer, clickHandler, className,
+  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a',
 }: BreadcrumbProps) {
   const linkCount = links.length;
   const displayLinks = isMobile ? [links[linkCount - 1]] : links;
 
   return (
     <nav
       aria-label={ariaLabel}
-      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}
-      {...props}
+      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`, className)}
     >
       <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
         {displayLinks.map((link, i) => (