Skip to content

Commit eb4877f

Browse files
mxschmitttaion
andauthored
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]>
1 parent bee1647 commit eb4877f

File tree

6 files changed

+44
-80
lines changed

6 files changed

+44
-80
lines changed

src/BreadcrumbItem.js

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,17 @@ const propTypes = {
3131
* `target` attribute for the inner `a` element
3232
*/
3333
target: PropTypes.string,
34+
/**
35+
* Additional props passed as-is to the underlying link for non-active items.
36+
*/
37+
linkProps: PropTypes.object,
3438

3539
as: PropTypes.elementType,
3640
};
3741

3842
const defaultProps = {
3943
active: false,
44+
linkProps: {},
4045
};
4146

4247
const BreadcrumbItem = React.forwardRef(
@@ -49,22 +54,35 @@ const BreadcrumbItem = React.forwardRef(
4954
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
5055
as: Component = 'li',
5156
linkAs: LinkComponent = SafeAnchor,
57+
linkProps,
58+
href,
59+
title,
60+
target,
5261
...props
5362
},
5463
ref,
5564
) => {
5665
const prefix = useBootstrapPrefix(bsPrefix, 'breadcrumb-item');
5766

58-
const { href, title, target, ...elementProps } = props;
59-
const linkProps = { href, title, target };
60-
6167
return (
6268
<Component
6369
ref={ref}
70+
{...props}
6471
className={classNames(prefix, className, { active })}
6572
aria-current={active ? 'page' : undefined}
6673
>
67-
{active ? children : <LinkComponent {...elementProps} {...linkProps} />}
74+
{active ? (
75+
children
76+
) : (
77+
<LinkComponent
78+
{...linkProps}
79+
href={href}
80+
title={title}
81+
target={target}
82+
>
83+
{children}
84+
</LinkComponent>
85+
)}
6886
</Component>
6987
);
7088
},

test/BreadcrumbItemSpec.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,13 @@ describe('<Breadcrumb.Item>', () => {
5858
expect(handleClick.callCount).to.equal(1);
5959
});
6060

61-
it('Should apply id onto the anchor', () => {
61+
it('Should apply id onto the li element', () => {
6262
mount(
6363
<Breadcrumb.Item href="#" id="test-link-id">
6464
Crumb
6565
</Breadcrumb.Item>,
6666
)
67-
.find('a#test-link-id')
67+
.find('li#test-link-id')
6868
.should.have.length(1);
6969
});
7070

@@ -126,8 +126,22 @@ describe('<Breadcrumb.Item>', () => {
126126
instance.find('button').should.have.length(1);
127127
});
128128

129-
it('Should spread property on customized inner link element', () => {
130-
const instance = mount(<Breadcrumb.Item linkAs={Button} type="submit" />);
129+
it('Should be able to pass props to the customized inner link element', () => {
130+
const instance = mount(
131+
<Breadcrumb.Item linkAs={Button} linkProps={{ type: 'submit' }} />,
132+
);
131133
instance.find('button').prop('type').should.eq('submit');
132134
});
135+
136+
it('Should be able to pass attributes to the link element', () => {
137+
const instance = mount(
138+
<Breadcrumb.Item linkProps={{ foo: 'bar' }}>Crumb</Breadcrumb.Item>,
139+
);
140+
instance.find('a').prop('foo').should.eq('bar');
141+
});
142+
143+
it('Should be able to pass attributes to the li element', () => {
144+
const instance = mount(<Breadcrumb.Item foo="bar">Crumb</Breadcrumb.Item>);
145+
instance.find('li').prop('foo').should.eq('bar');
146+
});
133147
});

types/components/Breadcrumb.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { BsPrefixComponent } from './helpers';
66

77
export interface BreadcrumbProps {
88
label?: string;
9-
listProps?: React.OlHTMLAttributes<any>;
9+
listProps?: React.OlHTMLAttributes<HTMLOListElement>;
1010
}
1111

1212
declare class Breadcrumb<

types/components/BreadcrumbItem.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface BreadcrumbItemProps {
88
linkAs?: React.ElementType;
99
target?: string;
1010
title?: React.ReactNode;
11+
linkProps?: React.LinkHTMLAttributes<HTMLLinkElement>;
1112
}
1213

1314
declare class BreadcrumbItem<

types/simple.test.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ import {
6464
<Breadcrumb listProps={{ type: 'I' }}>
6565
<Breadcrumb.Item />
6666
<BreadcrumbItem />
67+
<BreadcrumbItem linkProps={{ id: 'foo' }} />
6768
</Breadcrumb>;
6869

6970
<Button size="lg" variant="primary" />;

www/yarn.lock

Lines changed: 1 addition & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -751,7 +751,7 @@
751751
"@babel/plugin-transform-react-jsx-self" "^7.7.4"
752752
"@babel/plugin-transform-react-jsx-source" "^7.7.4"
753753

754-
"@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":
754+
"@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":
755755
version "7.8.7"
756756
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
757757
integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
@@ -5137,17 +5137,10 @@ functional-red-black-tree@^1.0.1:
51375137
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
51385138
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
51395139

5140-
<<<<<<< HEAD
51415140
gatsby-cli@^2.10.10:
51425141
version "2.10.10"
51435142
resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.10.10.tgz#57b3a0b2312f6b989373640975ae0e81477cbb26"
51445143
integrity sha512-J7geHpblEho35R47fRTl9QTygfk1FKxfsoNjtXbU1yzSWLAa2Qi46GyeJOxwbGeC1oQ+KhlPDuk6lFXjQ69OPw==
5145-
=======
5146-
gatsby-cli@^2.9.0:
5147-
version "2.9.0"
5148-
resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.9.0.tgz#eba30607ca126384676778851460cf1c4bddc631"
5149-
integrity sha512-aK8yDAt5S8pj/l/+RHMO2UJeBpsUARmAhC5lDh1dhfRfqdlKXwuAIStw8PY+aLpKAd/oyunvqI0D2y4BH3+eNA==
5150-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
51515144
dependencies:
51525145
"@babel/code-frame" "^7.5.5"
51535146
"@babel/runtime" "^7.7.6"
@@ -5236,32 +5229,18 @@ gatsby-plugin-astroturf@^0.2.1:
52365229
resolved "https://registry.yarnpkg.com/gatsby-plugin-astroturf/-/gatsby-plugin-astroturf-0.2.1.tgz#b5ed009f5bb682dc78840a0adf25823c6d539aef"
52375230
integrity sha512-BjlGgfMVQVJjAeIKfCy+b+MyWWGAbAQKn20CGBsWcvGl/Yj+dYNUgptLqdpV1mBKA8JKmL5QDx60vnW9ouR7EA==
52385231

5239-
<<<<<<< HEAD
52405232
gatsby-plugin-catch-links@^2.1.27:
52415233
version "2.1.27"
52425234
resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.1.27.tgz#c89fdaa631a3618520f5b978522c35d1852d23a0"
52435235
integrity sha512-OOujJiiI0F0YtGUq5lDWNqjccBpn+5h253xgqHCaimyy25SUyL/ApL1CBY/mRuPCw+53JYQBpI8hTNAW77wnzA==
5244-
=======
5245-
gatsby-plugin-catch-links@^2.1.26:
5246-
version "2.1.26"
5247-
resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-2.1.26.tgz#d1c030e339ff100f53367babf40ecbcff8c03990"
5248-
integrity sha512-q+ZVVEXV2eku9w5fu0tHjcIHijcgvQIghsPARCS3oGvykezPZHwXI2JgwvLEv+ZdqdK7pejg/fMEyn8uG7kaUw==
5249-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
52505236
dependencies:
52515237
"@babel/runtime" "^7.7.6"
52525238
escape-string-regexp "^1.0.5"
52535239

5254-
<<<<<<< HEAD
52555240
gatsby-plugin-mdx@^1.0.82:
52565241
version "1.0.82"
52575242
resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-1.0.82.tgz#2f4819902c84b8507b71563b0401fee65c8fcb36"
52585243
integrity sha512-4SAmALVSp1E7VsjwjinSDTdWpUVokB4YgqXWBmovVzlt1SH9PElEvY72LZ+nqjoodvcunof9G4MAo/8cDZIZBw==
5259-
=======
5260-
gatsby-plugin-mdx@^1.0.74:
5261-
version "1.0.74"
5262-
resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-1.0.74.tgz#c085082c2070b2f6b60190038caf58e22a199cd3"
5263-
integrity sha512-mN+68a1qmsNEC6zDDUFCbEUJ2a/1E7S7tlidFUy7doOAMVYkpvfJBpBI3IPoGHiIaOIreo0jj7BRDI6NA9nlxQ==
5264-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
52655244
dependencies:
52665245
"@babel/core" "^7.7.5"
52675246
"@babel/generator" "^7.7.4"
@@ -5320,17 +5299,10 @@ gatsby-plugin-sass@^2.1.30:
53205299
"@babel/runtime" "^7.7.6"
53215300
sass-loader "^7.3.1"
53225301

5323-
<<<<<<< HEAD
53245302
gatsby-react-router-scroll@^2.1.23:
53255303
version "2.1.23"
53265304
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.23.tgz#ad58ec7b19f5100432c6d9f197503bd2facbd03e"
53275305
integrity sha512-yUCWzRYUDgvr3xy5GAYd08gToBfE84SX3zvHWgPunVeL4OfwsYh6eei6GtYbLIjq77bvegd2SZkSujQ4Vgm/Gg==
5328-
=======
5329-
gatsby-react-router-scroll@^2.1.22:
5330-
version "2.1.22"
5331-
resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.22.tgz#588b4a23004997481082d89fc4dd746f6a356ab5"
5332-
integrity sha512-VSwDrfiUL//eOVqtzBImxDZSQ7PbS4As8IWOP093tOS+r6ddLiSINGW7CewI/0CdYEKwIVGF5fHMWJWgg3gvEQ==
5333-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
53345306
dependencies:
53355307
"@babel/runtime" "^7.7.6"
53365308
scroll-behavior "^0.9.10"
@@ -5428,17 +5400,10 @@ gatsby-transformer-remark@^2.6.58:
54285400
unist-util-select "^1.5.0"
54295401
unist-util-visit "^1.4.1"
54305402

5431-
<<<<<<< HEAD
54325403
gatsby@^2.19.43:
54335404
version "2.19.43"
54345405
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.19.43.tgz#286d00a6494a86992e6e08b13456fe7501c26952"
54355406
integrity sha512-lrEENBE907oLptB4rrXAx1ahqxNoI4fjgJdK1zQobEKwgkTSjyNX0YRlWQ+4+2VdgaDjw25ZBGglsk0leifmTA==
5436-
=======
5437-
gatsby@^2.19.23:
5438-
version "2.19.23"
5439-
resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.19.23.tgz#cd4abbef59339906b99a55101858d50c8dc91aed"
5440-
integrity sha512-mg9ezE9uy0qzv9jpU9OXsOlO1zl0/rggHxtvhiEuvHu+LQogKFfLpffheclmFaLCYXGIjxzZriYnO1LmhoxeWw==
5441-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
54425407
dependencies:
54435408
"@babel/code-frame" "^7.5.5"
54445409
"@babel/core" "^7.7.5"
@@ -5501,23 +5466,13 @@ gatsby@^2.19.23:
55015466
flat "^4.1.0"
55025467
fs-exists-cached "1.0.0"
55035468
fs-extra "^8.1.0"
5504-
<<<<<<< HEAD
55055469
gatsby-cli "^2.10.10"
55065470
gatsby-core-utils "^1.0.33"
55075471
gatsby-graphiql-explorer "^0.2.35"
55085472
gatsby-link "^2.2.30"
55095473
gatsby-plugin-page-creator "^2.1.45"
55105474
gatsby-react-router-scroll "^2.1.23"
55115475
gatsby-telemetry "^1.1.55"
5512-
=======
5513-
gatsby-cli "^2.9.0"
5514-
gatsby-core-utils "^1.0.28"
5515-
gatsby-graphiql-explorer "^0.2.34"
5516-
gatsby-link "^2.2.29"
5517-
gatsby-plugin-page-creator "^2.1.40"
5518-
gatsby-react-router-scroll "^2.1.22"
5519-
gatsby-telemetry "^1.1.49"
5520-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
55215476
glob "^7.1.6"
55225477
got "8.3.2"
55235478
graphql "^14.5.8"
@@ -10271,7 +10226,6 @@ react-dev-utils@^4.2.3:
1027110226
strip-ansi "3.0.1"
1027210227
text-table "0.2.0"
1027310228

10274-
<<<<<<< HEAD
1027510229
react-dev-utils@^9.1.0:
1027610230
version "9.1.0"
1027710231
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:
1030310257
strip-ansi "5.2.0"
1030410258
text-table "0.2.0"
1030510259

10306-
"react-docgen-displayname-handler@ ^2.1.0":
10307-
version "2.1.3"
10308-
resolved "https://registry.yarnpkg.com/react-docgen-displayname-handler/-/react-docgen-displayname-handler-2.1.3.tgz#7ca8ec759a56600a23b4fa751378fa8e7baf9120"
10309-
integrity sha512-XfQCjDC/8hy0rDZ+VudYplQCdp/fx3z7Ffp22+6s2MSbZ2I/1yw4Tn+ntxkUgI0hrQzB6Nidg/wzLpA5Dbj+xg==
10310-
dependencies:
10311-
ast-types "0.13.2"
10312-
10313-
react-docgen@^4.1.0, react-docgen@^4.1.1:
10314-
version "4.1.1"
10315-
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.1.1.tgz#8fef0212dbf14733e09edecef1de6b224d87219e"
10316-
integrity sha512-o1wdswIxbgJRI4pckskE7qumiFyqkbvCO++TylEDOo2RbMiueIOg8YzKU4X9++r0DjrbXePw/LHnh81GRBTWRw==
10317-
=======
1031810260
react-docgen@^5.0.0-beta.1, react-docgen@^5.3.0:
1031910261
version "5.3.0"
1032010262
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.3.0.tgz#9aabde5e69f1993c8ba839fd9a86696504654589"
1032110263
integrity sha512-hUrv69k6nxazOuOmdGeOpC/ldiKy7Qj/UFpxaQi0eDMrUFUTIPGtY5HJu7BggSmiyAMfREaESbtBL9UzdQ+hyg==
10322-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
1032310264
dependencies:
1032410265
"@babel/core" "^7.7.5"
1032510266
"@babel/runtime" "^7.7.6"
@@ -10413,12 +10354,6 @@ react-simple-code-editor@^0.10.0:
1041310354
resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
1041410355
integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
1041510356

10416-
<<<<<<< HEAD
10417-
react@^16.13.0, react@^16.8.0:
10418-
version "16.13.0"
10419-
resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
10420-
integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
10421-
=======
1042210357
react@^16.13.0:
1042310358
version "16.13.0"
1042410359
resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
@@ -10432,7 +10367,6 @@ react@^16.8.0:
1043210367
version "16.12.0"
1043310368
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
1043410369
integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
10435-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
1043610370
dependencies:
1043710371
loose-envify "^1.1.0"
1043810372
object-assign "^4.1.1"
@@ -11123,11 +11057,7 @@ scheduler@^0.19.0:
1112311057
loose-envify "^1.1.0"
1112411058
object-assign "^4.1.1"
1112511059

11126-
<<<<<<< HEAD
1112711060
schema-utils@^0.4.5:
11128-
=======
11129-
schema-utils@^0.4.0, schema-utils@^0.4.5:
11130-
>>>>>>> docs: update some pacakges, clean up version dropdown a bit
1113111061
version "0.4.7"
1113211062
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
1113311063
integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==

0 commit comments

Comments
 (0)