feat(BreadcrumbItem): pass props to li element (react-bootstrap#5055)

* feat(BreadcrumbItem): pass props to li element
Closes react-bootstrap#5054

* fix: linting

* fix: adjustments to property handling

* Update src/BreadcrumbItem.js

Co-Authored-By: Jimmy Jia <[email protected]>

* feat: applied review changes

* fix: prettier

* fix: linting

* fix: Prettier finally after upgrade

Co-authored-by: Jimmy Jia <[email protected]>

Author: mxschmitt

src/BreadcrumbItem.js

@@ -31,12 +31,17 @@ const propTypes = {
    * `target` attribute for the inner `a` element
    */
   target: PropTypes.string,
+  /**
+   * Additional props passed as-is to the underlying link for non-active items.
+   */
+  linkProps: PropTypes.object,
 
   as: PropTypes.elementType,
 };
 
 const defaultProps = {
   active: false,
+  linkProps: {},
 };
 
 const BreadcrumbItem = React.forwardRef(
@@ -49,22 +54,35 @@ const BreadcrumbItem = React.forwardRef(
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'li',
       linkAs: LinkComponent = SafeAnchor,
+      linkProps,
+      href,
+      title,
+      target,
       ...props
     },
     ref,
   ) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'breadcrumb-item');
 
-    const { href, title, target, ...elementProps } = props;
-    const linkProps = { href, title, target };
-
     return (
       <Component
         ref={ref}
+        {...props}
         className={classNames(prefix, className, { active })}
         aria-current={active ? 'page' : undefined}
       >
-        {active ? children : <LinkComponent {...elementProps} {...linkProps} />}
+        {active ? (
+          children
+        ) : (
+          <LinkComponent
+            {...linkProps}
+            href={href}
+            title={title}
+            target={target}
+          >
+            {children}
+          </LinkComponent>
+        )}
       </Component>
     );
   },

test/BreadcrumbItemSpec.js

@@ -58,13 +58,13 @@ describe('<Breadcrumb.Item>', () => {
     expect(handleClick.callCount).to.equal(1);
   });
 
-  it('Should apply id onto the anchor', () => {
+  it('Should apply id onto the li element', () => {
     mount(
       <Breadcrumb.Item href="#" id="test-link-id">
         Crumb
       </Breadcrumb.Item>,
     )
-      .find('a#test-link-id')
+      .find('li#test-link-id')
       .should.have.length(1);
   });
 
@@ -126,8 +126,22 @@ describe('<Breadcrumb.Item>', () => {
     instance.find('button').should.have.length(1);
   });
 
-  it('Should spread property on customized inner link element', () => {
-    const instance = mount(<Breadcrumb.Item linkAs={Button} type="submit" />);
+  it('Should be able to pass props to the customized inner link element', () => {
+    const instance = mount(
+      <Breadcrumb.Item linkAs={Button} linkProps={{ type: 'submit' }} />,
+    );
     instance.find('button').prop('type').should.eq('submit');
   });
+
+  it('Should be able to pass attributes to the link element', () => {
+    const instance = mount(
+      <Breadcrumb.Item linkProps={{ foo: 'bar' }}>Crumb</Breadcrumb.Item>,
+    );
+    instance.find('a').prop('foo').should.eq('bar');
+  });
+
+  it('Should be able to pass attributes to the li element', () => {
+    const instance = mount(<Breadcrumb.Item foo="bar">Crumb</Breadcrumb.Item>);
+    instance.find('li').prop('foo').should.eq('bar');
+  });
 });

types/components/Breadcrumb.d.ts

@@ -6,7 +6,7 @@ import { BsPrefixComponent } from './helpers';
 
 export interface BreadcrumbProps {
   label?: string;
-  listProps?: React.OlHTMLAttributes<any>;
+  listProps?: React.OlHTMLAttributes<HTMLOListElement>;
 }
 
 declare class Breadcrumb<

types/components/BreadcrumbItem.d.ts

@@ -8,6 +8,7 @@ export interface BreadcrumbItemProps {
   linkAs?: React.ElementType;
   target?: string;
   title?: React.ReactNode;
+  linkProps?: React.LinkHTMLAttributes<HTMLLinkElement>;
 }
 
 declare class BreadcrumbItem<

types/simple.test.tsx

@@ -64,6 +64,7 @@ import {
 <Breadcrumb listProps={{ type: 'I' }}>
   <Breadcrumb.Item />
   <BreadcrumbItem />
+  <BreadcrumbItem linkProps={{ id: 'foo' }} />
 </Breadcrumb>;
 
 <Button size="lg" variant="primary" />;

www/yarn.lock

@@ -751,7 +751,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.7.4"
     "@babel/plugin-transform-react-jsx-source" "^7.7.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7":
   version "7.8.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
   integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
@@ -5137,17 +5137,10 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-<<<<<<< HEAD
 gatsby-cli@^2.10.10:
   version "2.10.10"
   resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.10.10.tgz#57b3a0b2312f6b989373640975ae0e81477cbb26"
   integrity sha512-J7geHpblEho35R47fRTl9QTygfk1FKxfsoNjtXbU1yzSWLAa2Qi46GyeJOxwbGeC1oQ+KhlPDuk6lFXjQ69OPw==
-=======
-gatsby-cli@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.9.0.tgz#eba30607ca126384676778851460cf1c4bddc631"
-  integrity sha512-aK8yDAt5S8pj/l/+RHMO2UJeBpsUARmAhC5lDh1dhfRfqdlKXwuAIStw8PY+aLpKAd/oyunvqI0D2y4BH3+eNA==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     "@babel/code-frame" "^7.5.5"
     "@babel/runtime" "^7.7.6"
@@ -5236,32 +5229,18 @@ gatsby-plugin-astroturf@^0.2.1:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-astroturf/-/gatsby-plugin-astroturf-0.2.1.tgz#b5ed009f5bb682dc78840a0adf25823c6d539aef"
   integrity sha512-BjlGgfMVQVJjAeIKfCy+b+MyWWGAbAQKn20CGBsWcvGl/Yj+dYNUgptLqdpV1mBKA8JKmL5QDx60vnW9ouR7EA==
 
-<<<<<<< HEAD
 gatsby-plugin-catch-links@^2.1.27:
   version "2.1.27"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.1.27.tgz#c89fdaa631a3618520f5b978522c35d1852d23a0"
   integrity sha512-OOujJiiI0F0YtGUq5lDWNqjccBpn+5h253xgqHCaimyy25SUyL/ApL1CBY/mRuPCw+53JYQBpI8hTNAW77wnzA==
-=======
-gatsby-plugin-catch-links@^2.1.26:
-  version "2.1.26"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.1.26.tgz#d1c030e339ff100f53367babf40ecbcff8c03990"
-  integrity sha512-q+ZVVEXV2eku9w5fu0tHjcIHijcgvQIghsPARCS3oGvykezPZHwXI2JgwvLEv+ZdqdK7pejg/fMEyn8uG7kaUw==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     "@babel/runtime" "^7.7.6"
     escape-string-regexp "^1.0.5"
 
-<<<<<<< HEAD
 gatsby-plugin-mdx@^1.0.82:
   version "1.0.82"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-1.0.82.tgz#2f4819902c84b8507b71563b0401fee65c8fcb36"
   integrity sha512-4SAmALVSp1E7VsjwjinSDTdWpUVokB4YgqXWBmovVzlt1SH9PElEvY72LZ+nqjoodvcunof9G4MAo/8cDZIZBw==
-=======
-gatsby-plugin-mdx@^1.0.74:
-  version "1.0.74"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-1.0.74.tgz#c085082c2070b2f6b60190038caf58e22a199cd3"
-  integrity sha512-mN+68a1qmsNEC6zDDUFCbEUJ2a/1E7S7tlidFUy7doOAMVYkpvfJBpBI3IPoGHiIaOIreo0jj7BRDI6NA9nlxQ==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     "@babel/core" "^7.7.5"
     "@babel/generator" "^7.7.4"
@@ -5320,17 +5299,10 @@ gatsby-plugin-sass@^2.1.30:
     "@babel/runtime" "^7.7.6"
     sass-loader "^7.3.1"
 
-<<<<<<< HEAD
 gatsby-react-router-scroll@^2.1.23:
   version "2.1.23"
   resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.23.tgz#ad58ec7b19f5100432c6d9f197503bd2facbd03e"
   integrity sha512-yUCWzRYUDgvr3xy5GAYd08gToBfE84SX3zvHWgPunVeL4OfwsYh6eei6GtYbLIjq77bvegd2SZkSujQ4Vgm/Gg==
-=======
-gatsby-react-router-scroll@^2.1.22:
-  version "2.1.22"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.22.tgz#588b4a23004997481082d89fc4dd746f6a356ab5"
-  integrity sha512-VSwDrfiUL//eOVqtzBImxDZSQ7PbS4As8IWOP093tOS+r6ddLiSINGW7CewI/0CdYEKwIVGF5fHMWJWgg3gvEQ==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     "@babel/runtime" "^7.7.6"
     scroll-behavior "^0.9.10"
@@ -5428,17 +5400,10 @@ gatsby-transformer-remark@^2.6.58:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.4.1"
 
-<<<<<<< HEAD
 gatsby@^2.19.43:
   version "2.19.43"
   resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.19.43.tgz#286d00a6494a86992e6e08b13456fe7501c26952"
   integrity sha512-lrEENBE907oLptB4rrXAx1ahqxNoI4fjgJdK1zQobEKwgkTSjyNX0YRlWQ+4+2VdgaDjw25ZBGglsk0leifmTA==
-=======
-gatsby@^2.19.23:
-  version "2.19.23"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.19.23.tgz#cd4abbef59339906b99a55101858d50c8dc91aed"
-  integrity sha512-mg9ezE9uy0qzv9jpU9OXsOlO1zl0/rggHxtvhiEuvHu+LQogKFfLpffheclmFaLCYXGIjxzZriYnO1LmhoxeWw==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     "@babel/code-frame" "^7.5.5"
     "@babel/core" "^7.7.5"
@@ -5501,23 +5466,13 @@ gatsby@^2.19.23:
     flat "^4.1.0"
     fs-exists-cached "1.0.0"
     fs-extra "^8.1.0"
-<<<<<<< HEAD
     gatsby-cli "^2.10.10"
     gatsby-core-utils "^1.0.33"
     gatsby-graphiql-explorer "^0.2.35"
     gatsby-link "^2.2.30"
     gatsby-plugin-page-creator "^2.1.45"
     gatsby-react-router-scroll "^2.1.23"
     gatsby-telemetry "^1.1.55"
-=======
-    gatsby-cli "^2.9.0"
-    gatsby-core-utils "^1.0.28"
-    gatsby-graphiql-explorer "^0.2.34"
-    gatsby-link "^2.2.29"
-    gatsby-plugin-page-creator "^2.1.40"
-    gatsby-react-router-scroll "^2.1.22"
-    gatsby-telemetry "^1.1.49"
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
     glob "^7.1.6"
     got "8.3.2"
     graphql "^14.5.8"
@@ -10271,7 +10226,6 @@ react-dev-utils@^4.2.3:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-<<<<<<< HEAD
 react-dev-utils@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -10303,23 +10257,10 @@ react-dev-utils@^9.1.0:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-"react-docgen-displayname-handler@ ^2.1.0":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/react-docgen-displayname-handler/-/react-docgen-displayname-handler-2.1.3.tgz#7ca8ec759a56600a23b4fa751378fa8e7baf9120"
-  integrity sha512-XfQCjDC/8hy0rDZ+VudYplQCdp/fx3z7Ffp22+6s2MSbZ2I/1yw4Tn+ntxkUgI0hrQzB6Nidg/wzLpA5Dbj+xg==
-  dependencies:
-    ast-types "0.13.2"
-
-react-docgen@^4.1.0, react-docgen@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.1.1.tgz#8fef0212dbf14733e09edecef1de6b224d87219e"
-  integrity sha512-o1wdswIxbgJRI4pckskE7qumiFyqkbvCO++TylEDOo2RbMiueIOg8YzKU4X9++r0DjrbXePw/LHnh81GRBTWRw==
-=======
 react-docgen@^5.0.0-beta.1, react-docgen@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.3.0.tgz#9aabde5e69f1993c8ba839fd9a86696504654589"
   integrity sha512-hUrv69k6nxazOuOmdGeOpC/ldiKy7Qj/UFpxaQi0eDMrUFUTIPGtY5HJu7BggSmiyAMfREaESbtBL9UzdQ+hyg==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     "@babel/core" "^7.7.5"
     "@babel/runtime" "^7.7.6"
@@ -10413,12 +10354,6 @@ react-simple-code-editor@^0.10.0:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
   integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
 
-<<<<<<< HEAD
-react@^16.13.0, react@^16.8.0:
-  version "16.13.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
-  integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
-=======
 react@^16.13.0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
@@ -10432,7 +10367,6 @@ react@^16.8.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
   integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -11123,11 +11057,7 @@ scheduler@^0.19.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-<<<<<<< HEAD
 schema-utils@^0.4.5:
-=======
-schema-utils@^0.4.0, schema-utils@^0.4.5:
->>>>>>> docs: update some pacakges, clean up version dropdown a bit
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
   integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==