Skip to content

Commit 28d653e

Browse files
redallenredallen
authored
fix(app-launcher): less aggressive router linking (#3995)
* fix(app-launcher): less aggressive router linking * support component={<Link />} api * remove default empty href * update snapshots * improve docs * typo
1 parent 69496ba commit 28d653e

File tree

8 files changed

+41
-404
lines changed

8 files changed

+41
-404
lines changed

‎packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,9 @@ export interface ApplicationLauncherItemProps {
1616
tooltip?: React.ReactNode;
1717
/** Additional tooltip props forwarded to the Tooltip component */
1818
tooltipProps?: any;
19-
/** The component that will wrap the item.
20-
* If you need to render a custom component, for example a react router Link component,
21-
* then pass the component here. Example:
22-
* <ApplicationLauncherItem key="router1" component={
23-
* <Link to="/components/alert/">
24-
* <ApplicationLauncherContent>Router link</ApplicationLauncherContent>
25-
* </Link>
26-
* } />
19+
/** A ReactElement to render, or a string to use as the component tag.
20+
* Example: component={<Link to="/components/alert/">Alert</Link>}
21+
* Example: component="button"
2722
*/
2823
component?: React.ReactNode;
2924
/** Flag indicating if the item is favorited */

‎packages/react-core/src/components/ApplicationLauncher/__tests__/__snapshots__/ApplicationLauncher.test.tsx.snap‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -581,7 +581,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
581581
}
582582
}
583583
enterTriggersArrowDown={false}
584-
href=""
585584
index={0}
586585
isDisabled={false}
587586
isHovered={false}
@@ -601,7 +600,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
601600
<a
602601
aria-disabled={false}
603602
className="pf-c-app-launcher__menu-item"
604-
href={null}
605603
tabIndex={-1}
606604
>
607605
Link
@@ -624,7 +622,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
624622
}
625623
}
626624
enterTriggersArrowDown={false}
627-
href=""
628625
index={1}
629626
isDisabled={false}
630627
isHovered={false}
@@ -644,7 +641,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
644641
<button
645642
className="pf-c-app-launcher__menu-item"
646643
disabled={false}
647-
href={null}
648644
tabIndex={-1}
649645
type="button"
650646
>
@@ -668,7 +664,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
668664
}
669665
}
670666
enterTriggersArrowDown={false}
671-
href=""
672667
index={2}
673668
isDisabled={true}
674669
isHovered={false}
@@ -688,7 +683,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
688683
<a
689684
aria-disabled={true}
690685
className="pf-m-disabled pf-c-app-launcher__menu-item"
691-
href={null}
692686
tabIndex={-1}
693687
>
694688
Disabled Link
@@ -712,7 +706,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
712706
}
713707
}
714708
enterTriggersArrowDown={false}
715-
href=""
716709
index={3}
717710
isDisabled={true}
718711
isHovered={false}
@@ -732,7 +725,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
732725
<button
733726
className="pf-m-disabled pf-c-app-launcher__menu-item"
734727
disabled={true}
735-
href={null}
736728
tabIndex={-1}
737729
type="button"
738730
>
@@ -755,7 +747,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
755747
}
756748
}
757749
enterTriggersArrowDown={false}
758-
href=""
759750
index={4}
760751
isDisabled={false}
761752
isHovered={false}
@@ -772,7 +763,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
772763
>
773764
<div
774765
className="pf-c-app-launcher__separator"
775-
href={null}
776766
/>
777767
</li>
778768
</InternalDropdownItem>
@@ -791,7 +781,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
791781
}
792782
}
793783
enterTriggersArrowDown={false}
794-
href=""
795784
index={5}
796785
isDisabled={false}
797786
isHovered={false}
@@ -811,7 +800,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
811800
<a
812801
aria-disabled={false}
813802
className="pf-c-app-launcher__menu-item"
814-
href={null}
815803
tabIndex={-1}
816804
>
817805
Separated Link
@@ -834,7 +822,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
834822
}
835823
}
836824
enterTriggersArrowDown={false}
837-
href=""
838825
index={6}
839826
isDisabled={false}
840827
isHovered={false}
@@ -854,7 +841,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
854841
<button
855842
className="pf-c-app-launcher__menu-item"
856843
disabled={false}
857-
href={null}
858844
tabIndex={-1}
859845
type="button"
860846
>
@@ -2223,7 +2209,6 @@ exports[`ApplicationLauncher expanded 1`] = `
22232209
}
22242210
}
22252211
enterTriggersArrowDown={false}
2226-
href=""
22272212
index={0}
22282213
isDisabled={false}
22292214
isHovered={false}
@@ -2243,7 +2228,6 @@ exports[`ApplicationLauncher expanded 1`] = `
22432228
<a
22442229
aria-disabled={false}
22452230
className="pf-c-app-launcher__menu-item"
2246-
href={null}
22472231
tabIndex={-1}
22482232
>
22492233
Link
@@ -2266,7 +2250,6 @@ exports[`ApplicationLauncher expanded 1`] = `
22662250
}
22672251
}
22682252
enterTriggersArrowDown={false}
2269-
href=""
22702253
index={1}
22712254
isDisabled={false}
22722255
isHovered={false}
@@ -2286,7 +2269,6 @@ exports[`ApplicationLauncher expanded 1`] = `
22862269
<button
22872270
className="pf-c-app-launcher__menu-item"
22882271
disabled={false}
2289-
href={null}
22902272
tabIndex={-1}
22912273
type="button"
22922274
>
@@ -2310,7 +2292,6 @@ exports[`ApplicationLauncher expanded 1`] = `
23102292
}
23112293
}
23122294
enterTriggersArrowDown={false}
2313-
href=""
23142295
index={2}
23152296
isDisabled={true}
23162297
isHovered={false}
@@ -2330,7 +2311,6 @@ exports[`ApplicationLauncher expanded 1`] = `
23302311
<a
23312312
aria-disabled={true}
23322313
className="pf-m-disabled pf-c-app-launcher__menu-item"
2333-
href={null}
23342314
tabIndex={-1}
23352315
>
23362316
Disabled Link
@@ -2354,7 +2334,6 @@ exports[`ApplicationLauncher expanded 1`] = `
23542334
}
23552335
}
23562336
enterTriggersArrowDown={false}
2357-
href=""
23582337
index={3}
23592338
isDisabled={true}
23602339
isHovered={false}
@@ -2374,7 +2353,6 @@ exports[`ApplicationLauncher expanded 1`] = `
23742353
<button
23752354
className="pf-m-disabled pf-c-app-launcher__menu-item"
23762355
disabled={true}
2377-
href={null}
23782356
tabIndex={-1}
23792357
type="button"
23802358
>
@@ -2397,7 +2375,6 @@ exports[`ApplicationLauncher expanded 1`] = `
23972375
}
23982376
}
23992377
enterTriggersArrowDown={false}
2400-
href=""
24012378
index={4}
24022379
isDisabled={false}
24032380
isHovered={false}
@@ -2414,7 +2391,6 @@ exports[`ApplicationLauncher expanded 1`] = `
24142391
>
24152392
<div
24162393
className="pf-c-app-launcher__separator"
2417-
href={null}
24182394
/>
24192395
</li>
24202396
</InternalDropdownItem>
@@ -2433,7 +2409,6 @@ exports[`ApplicationLauncher expanded 1`] = `
24332409
}
24342410
}
24352411
enterTriggersArrowDown={false}
2436-
href=""
24372412
index={5}
24382413
isDisabled={false}
24392414
isHovered={false}
@@ -2453,7 +2428,6 @@ exports[`ApplicationLauncher expanded 1`] = `
24532428
<a
24542429
aria-disabled={false}
24552430
className="pf-c-app-launcher__menu-item"
2456-
href={null}
24572431
tabIndex={-1}
24582432
>
24592433
Separated Link
@@ -2476,7 +2450,6 @@ exports[`ApplicationLauncher expanded 1`] = `
24762450
}
24772451
}
24782452
enterTriggersArrowDown={false}
2479-
href=""
24802453
index={6}
24812454
isDisabled={false}
24822455
isHovered={false}
@@ -2496,7 +2469,6 @@ exports[`ApplicationLauncher expanded 1`] = `
24962469
<button
24972470
className="pf-c-app-launcher__menu-item"
24982471
disabled={false}
2499-
href={null}
25002472
tabIndex={-1}
25012473
type="button"
25022474
>

‎packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b
1111

1212
import { ApplicationLauncher, ApplicationLauncherContent, ApplicationLauncherIcon, ApplicationLauncherText, ApplicationLauncherItem, ApplicationLauncherGroup, ApplicationLauncherSeparator, Text } from '@patternfly/react-core';
1313
import { HelpIcon, StarIcon } from '@patternfly/react-icons';
14+
import { Link } from '@reach/router';
1415
import pfIcon from './pf-logo-small.svg';
1516

1617
## Examples
@@ -59,6 +60,7 @@ class SimpleApplicationLauncher extends React.Component {
5960

6061
```js title=Router-link
6162
import React from 'react';
63+
import { Link } from '@reach/router';
6264
import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherContent, Text } from '@patternfly/react-core';
6365

6466
class SimpleApplicationLauncher extends React.Component {
@@ -86,24 +88,23 @@ class SimpleApplicationLauncher extends React.Component {
8688
color: 'var(--pf-c-app-launcher__menu-item--Color)',
8789
textDecoration: 'none'
8890
};
89-
// Using Text component below to demonstrate, but in reality you'd use a router Link component
9091
const appLauncherItems = [
9192
<ApplicationLauncherItem
9293
key="router1"
9394
component={
94-
<Text component="a" href="#" style={exampleStyle}>
95-
Router link
96-
</Text>
95+
<Link to="/" style={exampleStyle}>
96+
@reach/router Link
97+
</Link>
9798
}
9899
/>,
99100
<ApplicationLauncherItem
100101
key="router2"
101102
isExternal
102103
icon={icon}
103104
component={
104-
<Text component="a" href="#" style={exampleStyle}>
105-
<ApplicationLauncherContent>Router link with icon</ApplicationLauncherContent>
106-
</Text>
105+
<Link to="/" style={exampleStyle}>
106+
<ApplicationLauncherContent>@reach/router Link with icon</ApplicationLauncherContent>
107+
</Link>
107108
}
108109
/>,
109110
<ApplicationLauncherItem key="application_1a" href="#">

‎packages/react-core/src/components/Dropdown/DropdownItem.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ export interface DropdownItemProps extends InternalDropdownItemProps {
99
className?: string;
1010
/** Class to be applied to list item */
1111
listItemClassName?: string;
12-
/** Indicates which component will be used as dropdown item */
12+
/** A ReactElement to render, or a string to use as the component tag.
13+
* Example: component={<Link to="/components/alert/">Alert</Link>}
14+
* Example: component="button"
15+
*/
1316
component?: React.ReactNode;
1417
/** Variant of the item. The 'icon' variant should use DropdownItemIcon to wrap contained icons or images. */
1518
variant?: 'item' | 'icon';
@@ -36,7 +39,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
3639
variant = 'item',
3740
isDisabled = false,
3841
isHovered = false,
39-
href = '',
42+
href,
4043
tooltip = null,
4144
tooltipProps = {},
4245
listItemClassName,
@@ -53,8 +56,6 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
5356
context={context}
5457
role="menuitem"
5558
tabIndex={-1}
56-
// eslint-disable-next-line react/no-children-prop
57-
children={children}
5859
className={className}
5960
component={component}
6061
variant={variant}
@@ -68,7 +69,9 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
6869
additionalChild={additionalChild}
6970
customChild={customChild}
7071
{...props}
71-
/>
72+
>
73+
{children}
74+
</InternalDropdownItem>
7275
)}
7376
</DropdownArrowContext.Consumer>
7477
);

0 commit comments

Comments
 (0)