@patternfly/react-core 4.236.14 → 4.237.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/dist/esm/components/Button/Button.d.ts +10 -0
- package/dist/esm/components/Button/Button.d.ts.map +1 -1
- package/dist/esm/components/Button/Button.js +5 -2
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/js/components/Button/Button.d.ts +10 -0
- package/dist/js/components/Button/Button.d.ts.map +1 -1
- package/dist/js/components/Button/Button.js +5 -2
- package/dist/js/components/Button/Button.js.map +1 -1
- package/dist/umd/react-core.min.css +98 -98
- package/dist/umd/react-core.min.js +3 -3
- package/package.json +5 -5
- package/src/components/Button/Button.tsx +19 -0
- package/src/components/Button/examples/Button.md +8 -1
- package/src/components/Button/examples/ButtonWithCount.tsx +89 -0
- package/src/components/Menu/examples/Menu.md +1 -1
- package/src/demos/BackToTop.md +1 -1
- package/src/demos/Banner.md +3 -3
- package/src/demos/Card/Card.md +2 -2
- package/src/demos/JumpLinks.md +3 -3
- package/src/demos/Nav.md +15 -15
- package/src/demos/PrimaryDetail.md +7 -7
- package/src/demos/Tabs.md +3 -3
- package/src/demos/Toolbar.md +2 -2
- package/src/demos/Wizard/WizardDemo.md +3 -3
- package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx +1 -1
- package/src/demos/examples/DashboardWrapper.js +1 -1
- package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js +1 -1
- package/src/demos/examples/Nav/NavDrilldown.tsx +1 -1
- package/src/demos/examples/Tabs/GrayTabs.tsx +1 -1
- package/src/demos/examples/Tabs/ModalTabs.tsx +1 -1
- package/src/demos/examples/Tabs/NestedTabs.tsx +1 -1
- package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx +1 -1
- package/src/demos/examples/Tabs/TabsAndTable.tsx +1 -1
- package/src/demos/examples/Tabs/TabsAndTablesAutoWidthTabs.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.237.2",
|
|
4
4
|
"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"generate": "node scripts/copyStyles.js"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@patternfly/react-icons": "^4.
|
|
48
|
-
"@patternfly/react-styles": "^4.
|
|
49
|
-
"@patternfly/react-tokens": "^4.
|
|
47
|
+
"@patternfly/react-icons": "^4.88.2",
|
|
48
|
+
"@patternfly/react-styles": "^4.87.2",
|
|
49
|
+
"@patternfly/react-tokens": "^4.89.2",
|
|
50
50
|
"focus-trap": "6.9.2",
|
|
51
51
|
"react-dropzone": "9.0.0",
|
|
52
52
|
"tippy.js": "5.1.2",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"react": "^16.8.0 || ^17.0.0",
|
|
71
71
|
"react-dom": "^16.8.0 || ^17.0.0"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "50944c27ad60c116d2ddbeab4b43b7e26f5d7c15"
|
|
74
74
|
}
|
|
@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Button/button';
|
|
|
3
3
|
import { css } from '@patternfly/react-styles';
|
|
4
4
|
import { Spinner, spinnerSize } from '../Spinner';
|
|
5
5
|
import { useOUIAProps, OUIAProps } from '../../helpers';
|
|
6
|
+
import { Badge } from '../Badge';
|
|
6
7
|
|
|
7
8
|
export enum ButtonVariant {
|
|
8
9
|
primary = 'primary',
|
|
@@ -20,6 +21,16 @@ export enum ButtonType {
|
|
|
20
21
|
submit = 'submit',
|
|
21
22
|
reset = 'reset'
|
|
22
23
|
}
|
|
24
|
+
|
|
25
|
+
export interface BadgeCountObject {
|
|
26
|
+
/** Adds styling to the badge to indicate it has been read */
|
|
27
|
+
isRead?: boolean;
|
|
28
|
+
/** Adds count number right of button */
|
|
29
|
+
count?: number;
|
|
30
|
+
/** Additional classes added to the badge count */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
23
34
|
export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>, OUIAProps {
|
|
24
35
|
/** Content rendered inside the button */
|
|
25
36
|
children?: React.ReactNode;
|
|
@@ -67,6 +78,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
|
|
|
67
78
|
isDanger?: boolean;
|
|
68
79
|
/** Forwarded ref */
|
|
69
80
|
innerRef?: React.Ref<any>;
|
|
81
|
+
/** Adds count number to button */
|
|
82
|
+
countOptions?: BadgeCountObject;
|
|
70
83
|
}
|
|
71
84
|
|
|
72
85
|
const ButtonBase: React.FunctionComponent<ButtonProps> = ({
|
|
@@ -95,6 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
|
|
|
95
108
|
ouiaSafe = true,
|
|
96
109
|
tabIndex = null,
|
|
97
110
|
innerRef,
|
|
111
|
+
countOptions,
|
|
98
112
|
...props
|
|
99
113
|
}: ButtonProps) => {
|
|
100
114
|
const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
|
|
@@ -168,6 +182,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
|
|
|
168
182
|
{variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
|
|
169
183
|
<span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
|
|
170
184
|
)}
|
|
185
|
+
{countOptions && (
|
|
186
|
+
<span className={css(styles.buttonCount, countOptions.className)}>
|
|
187
|
+
<Badge isRead={countOptions.isRead}>{countOptions.count}</Badge>
|
|
188
|
+
</span>
|
|
189
|
+
)}
|
|
171
190
|
</Component>
|
|
172
191
|
);
|
|
173
192
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
id: Button
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-c-button
|
|
5
|
-
propComponents: ['Button']
|
|
5
|
+
propComponents: ['Button', 'BadgeCountObject']
|
|
6
6
|
ouia: true
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -111,4 +111,11 @@ Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
|
|
|
111
111
|
Aria-disabled buttons can operate as links, which also support tooltips.
|
|
112
112
|
|
|
113
113
|
```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Button with count
|
|
117
|
+
|
|
118
|
+
Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
|
|
119
|
+
|
|
120
|
+
```ts file="./ButtonWithCount.tsx" isBeta
|
|
114
121
|
```
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BadgeCountObject, Button } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const ButtonWithCount: React.FunctionComponent = () => {
|
|
5
|
+
const badgeCountObjectNotRead: BadgeCountObject = {
|
|
6
|
+
isRead: false,
|
|
7
|
+
count: 7,
|
|
8
|
+
className: 'custom-badge-unread'
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const badgeCountObjectRead: BadgeCountObject = {
|
|
12
|
+
isRead: true,
|
|
13
|
+
count: 10,
|
|
14
|
+
className: 'custom-badge-read'
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<React.Fragment>
|
|
19
|
+
<p>Unread:</p>
|
|
20
|
+
<Button variant="primary" countOptions={badgeCountObjectNotRead}>
|
|
21
|
+
View issues
|
|
22
|
+
</Button>{' '}
|
|
23
|
+
<Button variant="secondary" countOptions={badgeCountObjectNotRead}>
|
|
24
|
+
View issues
|
|
25
|
+
</Button>{' '}
|
|
26
|
+
<Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
|
|
27
|
+
View issues
|
|
28
|
+
</Button>{' '}
|
|
29
|
+
<Button variant="control" countOptions={badgeCountObjectNotRead}>
|
|
30
|
+
View issues
|
|
31
|
+
</Button>{' '}
|
|
32
|
+
<Button variant="link" countOptions={badgeCountObjectNotRead}>
|
|
33
|
+
View issues
|
|
34
|
+
</Button>{' '}
|
|
35
|
+
<br />
|
|
36
|
+
<p>Unread disabled:</p>
|
|
37
|
+
<Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
|
|
38
|
+
View issues
|
|
39
|
+
</Button>{' '}
|
|
40
|
+
<Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
|
|
41
|
+
View issues
|
|
42
|
+
</Button>{' '}
|
|
43
|
+
<Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
|
|
44
|
+
View issues
|
|
45
|
+
</Button>{' '}
|
|
46
|
+
<Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
|
|
47
|
+
View issues
|
|
48
|
+
</Button>{' '}
|
|
49
|
+
<Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
|
|
50
|
+
View issues
|
|
51
|
+
</Button>{' '}
|
|
52
|
+
<br />
|
|
53
|
+
<p>Read:</p>
|
|
54
|
+
<Button variant="primary" countOptions={badgeCountObjectRead}>
|
|
55
|
+
View issues
|
|
56
|
+
</Button>{' '}
|
|
57
|
+
<Button variant="secondary" countOptions={badgeCountObjectRead}>
|
|
58
|
+
View issues
|
|
59
|
+
</Button>{' '}
|
|
60
|
+
<Button variant="tertiary" countOptions={badgeCountObjectRead}>
|
|
61
|
+
View issues
|
|
62
|
+
</Button>{' '}
|
|
63
|
+
<Button variant="control" countOptions={badgeCountObjectRead}>
|
|
64
|
+
View issues
|
|
65
|
+
</Button>{' '}
|
|
66
|
+
<Button variant="link" countOptions={badgeCountObjectRead}>
|
|
67
|
+
View issues
|
|
68
|
+
</Button>{' '}
|
|
69
|
+
<br />
|
|
70
|
+
<p>Read disabled:</p>
|
|
71
|
+
<Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
|
|
72
|
+
View issues
|
|
73
|
+
</Button>{' '}
|
|
74
|
+
<Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
|
|
75
|
+
View issues
|
|
76
|
+
</Button>{' '}
|
|
77
|
+
<Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
|
|
78
|
+
View issues
|
|
79
|
+
</Button>{' '}
|
|
80
|
+
<Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
|
|
81
|
+
View issues
|
|
82
|
+
</Button>{' '}
|
|
83
|
+
<Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
|
|
84
|
+
View issues
|
|
85
|
+
</Button>{' '}
|
|
86
|
+
<br />
|
|
87
|
+
</React.Fragment>
|
|
88
|
+
);
|
|
89
|
+
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
id: Menu
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-c-menu
|
|
5
|
-
propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuInput']
|
|
5
|
+
propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuInput', 'MenuGroup']
|
|
6
6
|
ouia: true
|
|
7
7
|
---
|
|
8
8
|
|
package/src/demos/BackToTop.md
CHANGED
package/src/demos/Banner.md
CHANGED
|
@@ -3,7 +3,7 @@ id: Banner
|
|
|
3
3
|
section: components
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import DashboardWrapper from '
|
|
6
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
7
|
|
|
8
8
|
## Demos
|
|
9
9
|
|
|
@@ -23,7 +23,7 @@ import {
|
|
|
23
23
|
TextContent,
|
|
24
24
|
Text
|
|
25
25
|
} from '@patternfly/react-core';
|
|
26
|
-
import DashboardWrapper from '
|
|
26
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
27
27
|
|
|
28
28
|
class BannerDemo extends React.Component {
|
|
29
29
|
render() {
|
|
@@ -87,7 +87,7 @@ import {
|
|
|
87
87
|
TextContent,
|
|
88
88
|
Text
|
|
89
89
|
} from '@patternfly/react-core';
|
|
90
|
-
import DashboardWrapper from '
|
|
90
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
91
91
|
|
|
92
92
|
class BannerDemo extends React.Component {
|
|
93
93
|
render() {
|
package/src/demos/Card/Card.md
CHANGED
|
@@ -3,7 +3,7 @@ id: Card view
|
|
|
3
3
|
section: demos
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import DashboardWrapper from '
|
|
6
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
7
|
|
|
8
8
|
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
|
|
9
9
|
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
|
|
@@ -66,7 +66,7 @@ import {
|
|
|
66
66
|
ToolbarFilter,
|
|
67
67
|
ToolbarContent
|
|
68
68
|
} from '@patternfly/react-core';
|
|
69
|
-
import DashboardWrapper from '
|
|
69
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
70
70
|
|
|
71
71
|
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
|
|
72
72
|
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
|
package/src/demos/JumpLinks.md
CHANGED
|
@@ -3,7 +3,7 @@ id: Jump links
|
|
|
3
3
|
section: components
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import DashboardWrapper from '
|
|
6
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
7
|
|
|
8
8
|
## Demos
|
|
9
9
|
|
|
@@ -33,7 +33,7 @@ import {
|
|
|
33
33
|
TextContent,
|
|
34
34
|
getResizeObserver
|
|
35
35
|
} from '@patternfly/react-core';
|
|
36
|
-
import DashboardWrapper from '
|
|
36
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
37
37
|
|
|
38
38
|
ScrollspyH2 = () => {
|
|
39
39
|
const headings = [1, 2, 3, 4, 5];
|
|
@@ -140,4 +140,4 @@ This demo shows how jump links can be used in combination with a drawer.
|
|
|
140
140
|
The `scrollableSelector` prop passed to the jump links component is an `id` that was placed on the `DrawerContent` component.
|
|
141
141
|
|
|
142
142
|
```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
|
|
143
|
-
```
|
|
143
|
+
```
|
package/src/demos/Nav.md
CHANGED
|
@@ -3,8 +3,8 @@ id: Navigation
|
|
|
3
3
|
section: components
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import { DashboardBreadcrumb } from '
|
|
7
|
-
import DashboardHeader from '
|
|
6
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
8
8
|
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
9
9
|
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
|
|
10
10
|
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
|
|
@@ -34,8 +34,8 @@ import {
|
|
|
34
34
|
TextContent,
|
|
35
35
|
Text
|
|
36
36
|
} from '@patternfly/react-core';
|
|
37
|
-
import { DashboardBreadcrumb } from '
|
|
38
|
-
import DashboardHeader from '
|
|
37
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
38
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
39
39
|
|
|
40
40
|
class PageLayoutDefaultNav extends React.Component {
|
|
41
41
|
constructor(props) {
|
|
@@ -133,7 +133,7 @@ import {
|
|
|
133
133
|
TextContent,
|
|
134
134
|
Text
|
|
135
135
|
} from '@patternfly/react-core';
|
|
136
|
-
import DashboardHeader from '
|
|
136
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
137
137
|
|
|
138
138
|
class PageLayoutGroupsNav extends React.Component {
|
|
139
139
|
constructor(props) {
|
|
@@ -242,8 +242,8 @@ import {
|
|
|
242
242
|
TextContent,
|
|
243
243
|
Text
|
|
244
244
|
} from '@patternfly/react-core';
|
|
245
|
-
import { DashboardBreadcrumb } from '
|
|
246
|
-
import DashboardHeader from '
|
|
245
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
246
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
247
247
|
|
|
248
248
|
class PageLayoutExpandableNav extends React.Component {
|
|
249
249
|
constructor(props) {
|
|
@@ -380,7 +380,7 @@ import {
|
|
|
380
380
|
PageHeaderToolsGroup,
|
|
381
381
|
PageHeaderToolsItem
|
|
382
382
|
} from '@patternfly/react-core';
|
|
383
|
-
import { DashboardBreadcrumb } from '
|
|
383
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
384
384
|
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
385
385
|
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
|
|
386
386
|
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
|
|
@@ -581,8 +581,8 @@ import {
|
|
|
581
581
|
TextContent,
|
|
582
582
|
Text
|
|
583
583
|
} from '@patternfly/react-core';
|
|
584
|
-
import { DashboardBreadcrumb } from '
|
|
585
|
-
import DashboardHeader from '
|
|
584
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
585
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
586
586
|
|
|
587
587
|
class VerticalNavWithSubnav extends React.Component {
|
|
588
588
|
constructor(props) {
|
|
@@ -737,7 +737,7 @@ import {
|
|
|
737
737
|
PageHeaderToolsGroup,
|
|
738
738
|
PageHeaderToolsItem
|
|
739
739
|
} from '@patternfly/react-core';
|
|
740
|
-
import { DashboardBreadcrumb } from '
|
|
740
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
741
741
|
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
742
742
|
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
|
|
743
743
|
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
|
|
@@ -984,8 +984,8 @@ import {
|
|
|
984
984
|
TextContent,
|
|
985
985
|
Text
|
|
986
986
|
} from '@patternfly/react-core';
|
|
987
|
-
import { DashboardBreadcrumb } from '
|
|
988
|
-
import DashboardHeader from '
|
|
987
|
+
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
988
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
989
989
|
|
|
990
990
|
class PageLayoutTertiaryNav extends React.Component {
|
|
991
991
|
constructor(props) {
|
|
@@ -1087,7 +1087,7 @@ import {
|
|
|
1087
1087
|
TextContent,
|
|
1088
1088
|
Text
|
|
1089
1089
|
} from '@patternfly/react-core';
|
|
1090
|
-
import DashboardHeader from '
|
|
1090
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
1091
1091
|
|
|
1092
1092
|
class PageLayoutLightNav extends React.Component {
|
|
1093
1093
|
constructor(props) {
|
|
@@ -1436,7 +1436,7 @@ import {
|
|
|
1436
1436
|
MenuList,
|
|
1437
1437
|
MenuItem
|
|
1438
1438
|
} from '@patternfly/react-core';
|
|
1439
|
-
import DashboardHeader from '
|
|
1439
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
1440
1440
|
|
|
1441
1441
|
class VerticalPage extends React.Component {
|
|
1442
1442
|
constructor(props) {
|
|
@@ -3,7 +3,7 @@ id: Primary-detail
|
|
|
3
3
|
section: demos
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import DashboardWrapper from '
|
|
6
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
7
|
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
8
8
|
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
|
|
9
9
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
@@ -70,7 +70,7 @@ import {
|
|
|
70
70
|
TextInput,
|
|
71
71
|
Title
|
|
72
72
|
} from '@patternfly/react-core';
|
|
73
|
-
import DashboardWrapper from '
|
|
73
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
74
74
|
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
75
75
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
76
76
|
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|
|
@@ -530,7 +530,7 @@ import {
|
|
|
530
530
|
TextInput,
|
|
531
531
|
Title
|
|
532
532
|
} from '@patternfly/react-core';
|
|
533
|
-
import DashboardWrapper from '
|
|
533
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
534
534
|
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
535
535
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
536
536
|
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|
|
@@ -994,7 +994,7 @@ import {
|
|
|
994
994
|
ToolbarContent,
|
|
995
995
|
ToolbarFilter
|
|
996
996
|
} from '@patternfly/react-core';
|
|
997
|
-
import DashboardWrapper from '
|
|
997
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
998
998
|
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
|
|
999
999
|
import pfIcon from './pf-logo-small.svg';
|
|
1000
1000
|
import activeMQIcon from './activemq-core_200x150.png';
|
|
@@ -1603,7 +1603,7 @@ import {
|
|
|
1603
1603
|
TextInput,
|
|
1604
1604
|
Title
|
|
1605
1605
|
} from '@patternfly/react-core';
|
|
1606
|
-
import DashboardWrapper from '
|
|
1606
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
1607
1607
|
|
|
1608
1608
|
class PrimaryDetailSimpleListInCard extends React.Component {
|
|
1609
1609
|
constructor(props) {
|
|
@@ -1764,7 +1764,7 @@ import {
|
|
|
1764
1764
|
TextContent,
|
|
1765
1765
|
Title
|
|
1766
1766
|
} from '@patternfly/react-core';
|
|
1767
|
-
import DashboardWrapper from '
|
|
1767
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
1768
1768
|
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
|
|
1769
1769
|
|
|
1770
1770
|
class PrimaryDetailDataListInCard extends React.Component {
|
|
@@ -2016,7 +2016,7 @@ import {
|
|
|
2016
2016
|
TextInput,
|
|
2017
2017
|
Title
|
|
2018
2018
|
} from '@patternfly/react-core';
|
|
2019
|
-
import DashboardWrapper from '
|
|
2019
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
2020
2020
|
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
2021
2021
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
2022
2022
|
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|
package/src/demos/Tabs.md
CHANGED
|
@@ -3,7 +3,7 @@ id: Tabs
|
|
|
3
3
|
section: components
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import DashboardWrapper from '
|
|
6
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
7
|
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
|
|
8
8
|
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
|
|
9
9
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
@@ -39,7 +39,7 @@ import {
|
|
|
39
39
|
Flex,
|
|
40
40
|
FlexItem
|
|
41
41
|
} from '@patternfly/react-core';
|
|
42
|
-
import DashboardWrapper from '
|
|
42
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
43
43
|
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
|
|
44
44
|
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
|
|
45
45
|
|
|
@@ -229,7 +229,7 @@ import {
|
|
|
229
229
|
Flex,
|
|
230
230
|
FlexItem
|
|
231
231
|
} from '@patternfly/react-core';
|
|
232
|
-
import DashboardWrapper from '
|
|
232
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
233
233
|
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
|
|
234
234
|
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
|
|
235
235
|
|
package/src/demos/Toolbar.md
CHANGED
|
@@ -3,7 +3,7 @@ id: Toolbar
|
|
|
3
3
|
section: components
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
import DashboardWrapper from '
|
|
6
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
7
7
|
|
|
8
8
|
import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
|
|
9
9
|
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
|
|
@@ -40,7 +40,7 @@ import {
|
|
|
40
40
|
PageSectionVariants,
|
|
41
41
|
Tooltip
|
|
42
42
|
} from '@patternfly/react-core';
|
|
43
|
-
import DashboardWrapper from '
|
|
43
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
44
44
|
|
|
45
45
|
import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
|
|
46
46
|
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
|
|
@@ -5,7 +5,7 @@ section: components
|
|
|
5
5
|
|
|
6
6
|
import imgBrand from './imgBrand.svg';
|
|
7
7
|
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
|
|
8
|
-
import DashboardWrapper from '
|
|
8
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
9
9
|
|
|
10
10
|
## Demos
|
|
11
11
|
|
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
Modal,
|
|
27
27
|
ModalVariant
|
|
28
28
|
} from '@patternfly/react-core';
|
|
29
|
-
import DashboardWrapper from '
|
|
29
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
30
30
|
|
|
31
31
|
class BasicWizardDemo extends React.Component {
|
|
32
32
|
constructor(props) {
|
|
@@ -568,7 +568,7 @@ import {
|
|
|
568
568
|
} from '@patternfly/react-core';
|
|
569
569
|
import imgBrand from './imgBrand.svg';
|
|
570
570
|
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
|
|
571
|
-
import DashboardWrapper from '
|
|
571
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
572
572
|
|
|
573
573
|
class FullPageWizard extends React.Component {
|
|
574
574
|
constructor(props) {
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
Page,
|
|
13
13
|
Switch
|
|
14
14
|
} from '@patternfly/react-core';
|
|
15
|
-
import DashboardWrapper from '
|
|
15
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
16
16
|
|
|
17
17
|
export const Name = () => {
|
|
18
18
|
const [isAlwaysVisible, setIsAlwaysVisible] = React.useState(false);
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
Text,
|
|
13
13
|
TextContent
|
|
14
14
|
} from '@patternfly/react-core';
|
|
15
|
-
import DashboardHeader from '
|
|
15
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
16
16
|
|
|
17
17
|
export const DashboardBreadcrumb = (
|
|
18
18
|
<Breadcrumb>
|
|
@@ -18,7 +18,7 @@ import {
|
|
|
18
18
|
TextContent,
|
|
19
19
|
getResizeObserver
|
|
20
20
|
} from '@patternfly/react-core';
|
|
21
|
-
import DashboardWrapper from '
|
|
21
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
22
22
|
|
|
23
23
|
export const JumpLinksWithDrawer = () => {
|
|
24
24
|
const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
PageSection
|
|
13
13
|
} from '@patternfly/react-core';
|
|
14
14
|
|
|
15
|
-
import DashboardHeader from '
|
|
15
|
+
import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
|
|
16
16
|
|
|
17
17
|
interface MenuHeights {
|
|
18
18
|
[menuId: string]: number;
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
CardBody,
|
|
16
16
|
CardHeader
|
|
17
17
|
} from '@patternfly/react-core';
|
|
18
|
-
import DashboardWrapper from '
|
|
18
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
19
19
|
|
|
20
20
|
export const GrayTabsDemo: React.FunctionComponent = () => {
|
|
21
21
|
const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
Flex,
|
|
16
16
|
FlexItem
|
|
17
17
|
} from '@patternfly/react-core';
|
|
18
|
-
import DashboardWrapper from '
|
|
18
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
19
19
|
|
|
20
20
|
export const NestedTabs: React.FunctionComponent = () => {
|
|
21
21
|
const [activeTabKey, setActiveTabKey] = React.useState(0);
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
TextContent,
|
|
17
17
|
TitleSizes
|
|
18
18
|
} from '@patternfly/react-core';
|
|
19
|
-
import DashboardWrapper from '
|
|
19
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
20
20
|
|
|
21
21
|
export const NestedUnindentedTabs: React.FunctionComponent = () => {
|
|
22
22
|
const [activeTabKey, setActiveTabKey] = React.useState(1);
|
|
@@ -54,7 +54,7 @@ import {
|
|
|
54
54
|
ActionsColumn,
|
|
55
55
|
CustomActionsToggleProps
|
|
56
56
|
} from '@patternfly/react-table';
|
|
57
|
-
import DashboardWrapper from '
|
|
57
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
58
58
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
59
59
|
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
60
60
|
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|
|
@@ -54,7 +54,7 @@ import {
|
|
|
54
54
|
ActionsColumn,
|
|
55
55
|
CustomActionsToggleProps
|
|
56
56
|
} from '@patternfly/react-table';
|
|
57
|
-
import DashboardWrapper from '
|
|
57
|
+
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
|
|
58
58
|
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
|
|
59
59
|
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
|
|
60
60
|
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
|