Skip to content

Commit

Permalink
feat(BreadcrumbItem): pass props to li element (#5055)
Browse files Browse the repository at this point in the history 
* feat(BreadcrumbItem): pass props to li element
Closes #5054

* fix: linting

* fix: adjustments to property handling

* Update src/BreadcrumbItem.js

Co-Authored-By: Jimmy Jia <tesrin@gmail.com>

* feat: applied review changes

* fix: prettier

* fix: linting

* fix: Prettier finally after upgrade

Co-authored-by: Jimmy Jia <tesrin@gmail.com>
  • Loading branch information
@mxschmitt @taion
mxschmitt and taion committed Mar 23, 2020
1 parent bee1647 commit eb4877f
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 80 deletions.
26 changes: 22 additions & 4 deletions src/BreadcrumbItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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>
);
},
Expand Down
22 changes: 18 additions & 4 deletions test/BreadcrumbItemSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand Down Expand Up @@ -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');
});
});
2 changes: 1 addition & 1 deletion types/components/Breadcrumb.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { BsPrefixComponent } from './helpers';

export interface BreadcrumbProps {
label?: string;
listProps?: React.OlHTMLAttributes<any>;
listProps?: React.OlHTMLAttributes<HTMLOListElement>;
}

declare class Breadcrumb<
Expand Down
1 change: 1 addition & 0 deletions types/components/BreadcrumbItem.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface BreadcrumbItemProps {
linkAs?: React.ElementType;
target?: string;
title?: React.ReactNode;
linkProps?: React.LinkHTMLAttributes<HTMLLinkElement>;
}

declare class BreadcrumbItem<
Expand Down
1 change: 1 addition & 0 deletions types/simple.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ import {
<Breadcrumb listProps={{ type: 'I' }}>
<Breadcrumb.Item />
<BreadcrumbItem />
<BreadcrumbItem linkProps={{ id: 'foo' }} />
</Breadcrumb>;

<Button size="lg" variant="primary" />;
Expand Down
72 changes: 1 addition & 71 deletions www/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit eb4877f

Please sign in to comment.