feat(RAC): support render props in Breadcrumbs (#6440)

Author: reidbarber

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -12,7 +12,7 @@
 import {AriaBreadcrumbsProps} from 'react-aria';
 import {Collection, Node} from 'react-stately';
 import {CollectionProps, useCollection, useSSRCollectionNode} from './Collection';
-import {ContextValue, forwardRefType, SlotProps, StyleProps, useContextProps} from './utils';
+import {ContextValue, forwardRefType, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {Key} from '@react-types/shared';
 import {LinkContext} from './Link';
@@ -104,14 +104,22 @@ function BreadcrumbItem({node, isCurrent, isDisabled, onAction}: BreadcrumbItemP
     onPress: () => onAction?.(node.key)
   };
 
+  let renderProps = useRenderProps({
+    ...node.props,
+    children: node.rendered,
+    values: {isDisabled: isDisabled || isCurrent, isCurrent},
+    defaultClassName: 'react-aria-Breadcrumb'
+  });
+
   return (
     <li
       {...filterDOMProps(node.props)}
+      {...renderProps}
       ref={node.props.ref}
-      style={node.props.style}
-      className={node.props.className ?? 'react-aria-Breadcrumb'}>
+      data-disabled={isDisabled || isCurrent || undefined}
+      data-current={isCurrent || undefined}>
       <LinkContext.Provider value={linkProps}>
-        {node.rendered}
+        {renderProps.children}
       </LinkContext.Provider>
     </li>
   );

packages/react-aria-components/stories/Breadcrumbs.stories.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Breadcrumb, Breadcrumbs, Link} from 'react-aria-components';
+import React from 'react';
+
+export default {
+  title: 'React Aria Components',
+  component: Breadcrumbs
+};
+
+export const BreadcrumbsExample = (args: any) => (
+  <Breadcrumbs {...args}>
+    <Breadcrumb>
+      <Link href="/">Home</Link>
+    </Breadcrumb>
+    <Breadcrumb>
+      <Link href="/react-aria">React Aria</Link>
+    </Breadcrumb>
+    <Breadcrumb>
+      <Link href="/react-aria">Breadcrumbs</Link>
+    </Breadcrumb>
+  </Breadcrumbs>
+);

packages/react-aria-components/test/Breadcrumbs.test.js

@@ -103,4 +103,20 @@ describe('Breadcrumbs', () => {
     let item = getByRole('listitem');
     expect(breadcrumbRef.current).toBe(item);
   });
+
+  it('should support render props', () => {
+    let items = [
+      {id: 1, name: 'Item 1'},
+      {id: 2, name: 'Item 2'},
+      {id: 3, name: 'Item 3'}
+    ];
+
+    let {getAllByRole} = render(
+      <Breadcrumbs items={items}>
+        {(item) => <Breadcrumb>{({isCurrent}) => isCurrent ? 'Current' : item.name}</Breadcrumb>}
+      </Breadcrumbs>
+    );
+
+    expect(getAllByRole('listitem').map((it) => it.textContent)).toEqual(['Item 1', 'Item 2', 'Current']);
+  });
 });