@patternfly/react-core 4.267.6 → 4.267.8
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 +16 -0
- package/package.json +2 -2
- package/src/components/Page/examples/PageMainSectionPadding.tsx +1 -3
- package/src/components/Toolbar/examples/Toolbar.md +10 -1272
- package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx +137 -0
- package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx +147 -0
- package/src/components/Toolbar/examples/ToolbarGroups.tsx +158 -0
- package/src/components/Toolbar/examples/ToolbarInsets.tsx +52 -0
- package/src/components/Toolbar/examples/ToolbarItems.tsx +26 -0
- package/src/components/Toolbar/examples/ToolbarSpacers.tsx +51 -0
- package/src/components/Toolbar/examples/ToolbarStacked.tsx +253 -0
- package/src/components/Toolbar/examples/ToolbarSticky.tsx +37 -0
- package/src/components/Toolbar/examples/ToolbarWidths.tsx +30 -0
- package/src/components/Toolbar/examples/ToolbarWithFilters.tsx +222 -0
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Toolbar,
|
|
4
|
+
ToolbarItem,
|
|
5
|
+
ToolbarContent,
|
|
6
|
+
ToolbarToggleGroup,
|
|
7
|
+
ToolbarGroup,
|
|
8
|
+
SelectOptionObject
|
|
9
|
+
} from '@patternfly/react-core';
|
|
10
|
+
import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
|
|
11
|
+
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
|
|
12
|
+
|
|
13
|
+
export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
|
|
14
|
+
const [inputValue, setInputValue] = React.useState<string>('');
|
|
15
|
+
const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
|
|
16
|
+
const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
|
|
17
|
+
const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
|
|
18
|
+
const [riskSelected, setRiskSelected] = React.useState<string | SelectOptionObject>();
|
|
19
|
+
|
|
20
|
+
const statusOptions = [
|
|
21
|
+
{ value: 'Status', disabled: false, isPlaceholder: true },
|
|
22
|
+
{ value: 'New', disabled: false },
|
|
23
|
+
{ value: 'Pending', disabled: false },
|
|
24
|
+
{ value: 'Running', disabled: false },
|
|
25
|
+
{ value: 'Cancelled', disabled: false }
|
|
26
|
+
];
|
|
27
|
+
|
|
28
|
+
const riskOptions = [
|
|
29
|
+
{ value: 'Risk', disabled: false, isPlaceholder: true },
|
|
30
|
+
{ value: 'Low', disabled: false },
|
|
31
|
+
{ value: 'Medium', disabled: false },
|
|
32
|
+
{ value: 'High', disabled: false }
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
const onInputChange = (newValue: string) => {
|
|
36
|
+
setInputValue(newValue);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const onStatusToggle = (isExpanded: boolean) => {
|
|
40
|
+
setStatusIsExpanded(isExpanded);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const onStatusSelect = (
|
|
44
|
+
_event: React.MouseEvent | React.ChangeEvent,
|
|
45
|
+
selection: string | SelectOptionObject,
|
|
46
|
+
isPlaceholder: boolean | undefined
|
|
47
|
+
) => {
|
|
48
|
+
if (isPlaceholder) {
|
|
49
|
+
clearStatusSelection();
|
|
50
|
+
}
|
|
51
|
+
setStatusSelected(selection);
|
|
52
|
+
setStatusIsExpanded(false);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const clearStatusSelection = () => {
|
|
56
|
+
setStatusSelected(undefined);
|
|
57
|
+
setStatusIsExpanded(false);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const onRiskToggle = (isExpanded: boolean) => {
|
|
61
|
+
setRiskIsExpanded(isExpanded);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const onRiskSelect = (
|
|
65
|
+
_event: React.MouseEvent | React.ChangeEvent,
|
|
66
|
+
selection: string | SelectOptionObject,
|
|
67
|
+
isPlaceholder: boolean | undefined
|
|
68
|
+
) => {
|
|
69
|
+
if (isPlaceholder) {
|
|
70
|
+
clearRiskSelection();
|
|
71
|
+
}
|
|
72
|
+
setRiskSelected(selection);
|
|
73
|
+
setRiskIsExpanded(false);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const clearRiskSelection = () => {
|
|
77
|
+
setRiskSelected(undefined);
|
|
78
|
+
setRiskIsExpanded(false);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const toggleGroupItems = (
|
|
82
|
+
<React.Fragment>
|
|
83
|
+
<ToolbarItem variant="search-filter">
|
|
84
|
+
<SearchInput
|
|
85
|
+
aria-label="Component toggle groups example search input"
|
|
86
|
+
onChange={onInputChange}
|
|
87
|
+
value={inputValue}
|
|
88
|
+
onClear={() => {
|
|
89
|
+
onInputChange('');
|
|
90
|
+
}}
|
|
91
|
+
/>
|
|
92
|
+
</ToolbarItem>
|
|
93
|
+
<ToolbarGroup variant="filter-group">
|
|
94
|
+
<ToolbarItem>
|
|
95
|
+
<Select
|
|
96
|
+
variant={SelectVariant.single}
|
|
97
|
+
aria-label="Select Input"
|
|
98
|
+
onToggle={onStatusToggle}
|
|
99
|
+
onSelect={onStatusSelect}
|
|
100
|
+
selections={statusSelected}
|
|
101
|
+
isOpen={statusIsExpanded}
|
|
102
|
+
>
|
|
103
|
+
{statusOptions.map((option, index) => (
|
|
104
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
105
|
+
))}
|
|
106
|
+
</Select>
|
|
107
|
+
</ToolbarItem>
|
|
108
|
+
<ToolbarItem>
|
|
109
|
+
<Select
|
|
110
|
+
variant={SelectVariant.single}
|
|
111
|
+
aria-label="Select Input"
|
|
112
|
+
onToggle={onRiskToggle}
|
|
113
|
+
onSelect={onRiskSelect}
|
|
114
|
+
selections={riskSelected}
|
|
115
|
+
isOpen={riskIsExpanded}
|
|
116
|
+
>
|
|
117
|
+
{riskOptions.map((option, index) => (
|
|
118
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
119
|
+
))}
|
|
120
|
+
</Select>
|
|
121
|
+
</ToolbarItem>
|
|
122
|
+
</ToolbarGroup>
|
|
123
|
+
</React.Fragment>
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
const items = (
|
|
127
|
+
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
|
|
128
|
+
{toggleGroupItems}
|
|
129
|
+
</ToolbarToggleGroup>
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<Toolbar id="toolbar-component-managed-toggle-groups" className="pf-m-toggle-group-container">
|
|
134
|
+
<ToolbarContent>{items}</ToolbarContent>
|
|
135
|
+
</Toolbar>
|
|
136
|
+
);
|
|
137
|
+
};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Toolbar,
|
|
4
|
+
ToolbarItem,
|
|
5
|
+
ToolbarContent,
|
|
6
|
+
ToolbarToggleGroup,
|
|
7
|
+
ToolbarGroup,
|
|
8
|
+
SelectOptionObject
|
|
9
|
+
} from '@patternfly/react-core';
|
|
10
|
+
import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
|
|
11
|
+
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
|
|
12
|
+
|
|
13
|
+
export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
|
|
14
|
+
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
15
|
+
const [inputValue, setInputValue] = React.useState('');
|
|
16
|
+
const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
|
|
17
|
+
const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
|
|
18
|
+
const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
|
|
19
|
+
const [riskSelected, setRiskSelected] = React.useState<string | SelectOptionObject>();
|
|
20
|
+
|
|
21
|
+
const toggleIsExpanded = () => {
|
|
22
|
+
setIsExpanded(!isExpanded);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const statusOptions = [
|
|
26
|
+
{ value: 'Status', disabled: false, isPlaceholder: true },
|
|
27
|
+
{ value: 'New', disabled: false },
|
|
28
|
+
{ value: 'Pending', disabled: false },
|
|
29
|
+
{ value: 'Running', disabled: false },
|
|
30
|
+
{ value: 'Cancelled', disabled: false }
|
|
31
|
+
];
|
|
32
|
+
|
|
33
|
+
const riskOptions = [
|
|
34
|
+
{ value: 'Risk', disabled: false, isPlaceholder: true },
|
|
35
|
+
{ value: 'Low', disabled: false },
|
|
36
|
+
{ value: 'Medium', disabled: false },
|
|
37
|
+
{ value: 'High', disabled: false }
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
const onInputChange = (newValue: string) => {
|
|
41
|
+
setInputValue(newValue);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const onStatusToggle = (isExpanded: boolean) => {
|
|
45
|
+
setStatusIsExpanded(isExpanded);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const onStatusSelect = (
|
|
49
|
+
_event: React.MouseEvent | React.ChangeEvent,
|
|
50
|
+
selection: string | SelectOptionObject,
|
|
51
|
+
isPlaceholder: boolean | undefined
|
|
52
|
+
) => {
|
|
53
|
+
if (isPlaceholder) {
|
|
54
|
+
clearStatusSelection();
|
|
55
|
+
}
|
|
56
|
+
setStatusSelected(selection);
|
|
57
|
+
setStatusIsExpanded(false);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const clearStatusSelection = () => {
|
|
61
|
+
setStatusSelected(undefined);
|
|
62
|
+
setStatusIsExpanded(false);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const onRiskToggle = (isExpanded: boolean) => {
|
|
66
|
+
setRiskIsExpanded(isExpanded);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const onRiskSelect = (
|
|
70
|
+
_event: React.MouseEvent | React.ChangeEvent,
|
|
71
|
+
selection: string | SelectOptionObject,
|
|
72
|
+
isPlaceholder: boolean | undefined
|
|
73
|
+
) => {
|
|
74
|
+
if (isPlaceholder) {
|
|
75
|
+
clearRiskSelection();
|
|
76
|
+
}
|
|
77
|
+
setRiskSelected(selection);
|
|
78
|
+
setRiskIsExpanded(false);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const clearRiskSelection = () => {
|
|
82
|
+
setRiskSelected(undefined);
|
|
83
|
+
setRiskIsExpanded(false);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const toggleGroupItems = (
|
|
87
|
+
<React.Fragment>
|
|
88
|
+
<ToolbarItem variant="search-filter">
|
|
89
|
+
<SearchInput
|
|
90
|
+
aria-label="Consumer toggle groups example search input"
|
|
91
|
+
onChange={onInputChange}
|
|
92
|
+
value={inputValue}
|
|
93
|
+
onClear={() => {
|
|
94
|
+
onInputChange('');
|
|
95
|
+
}}
|
|
96
|
+
/>
|
|
97
|
+
</ToolbarItem>
|
|
98
|
+
<ToolbarGroup variant="filter-group">
|
|
99
|
+
<ToolbarItem>
|
|
100
|
+
<Select
|
|
101
|
+
variant={SelectVariant.single}
|
|
102
|
+
aria-label="Select Input"
|
|
103
|
+
onToggle={onStatusToggle}
|
|
104
|
+
onSelect={onStatusSelect}
|
|
105
|
+
selections={statusSelected}
|
|
106
|
+
isOpen={statusIsExpanded}
|
|
107
|
+
>
|
|
108
|
+
{statusOptions.map((option, index) => (
|
|
109
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
110
|
+
))}
|
|
111
|
+
</Select>
|
|
112
|
+
</ToolbarItem>
|
|
113
|
+
<ToolbarItem>
|
|
114
|
+
<Select
|
|
115
|
+
variant={SelectVariant.single}
|
|
116
|
+
aria-label="Select Input"
|
|
117
|
+
onToggle={onRiskToggle}
|
|
118
|
+
onSelect={onRiskSelect}
|
|
119
|
+
selections={riskSelected}
|
|
120
|
+
isOpen={riskIsExpanded}
|
|
121
|
+
>
|
|
122
|
+
{riskOptions.map((option, index) => (
|
|
123
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
124
|
+
))}
|
|
125
|
+
</Select>
|
|
126
|
+
</ToolbarItem>
|
|
127
|
+
</ToolbarGroup>
|
|
128
|
+
</React.Fragment>
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
const items = (
|
|
132
|
+
<ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
|
|
133
|
+
{toggleGroupItems}
|
|
134
|
+
</ToolbarToggleGroup>
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
return (
|
|
138
|
+
<Toolbar
|
|
139
|
+
id="toolbar-consumer-managed-toggle-groups"
|
|
140
|
+
isExpanded={isExpanded}
|
|
141
|
+
className="pf-m-toggle-group-container"
|
|
142
|
+
toggleIsExpanded={toggleIsExpanded}
|
|
143
|
+
>
|
|
144
|
+
<ToolbarContent>{items}</ToolbarContent>
|
|
145
|
+
</Toolbar>
|
|
146
|
+
);
|
|
147
|
+
};
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SelectOptionObject, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
|
|
3
|
+
import { Button, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
|
|
4
|
+
import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
|
|
5
|
+
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
|
|
6
|
+
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
|
|
7
|
+
|
|
8
|
+
export const ToolbarGroups: React.FunctionComponent = () => {
|
|
9
|
+
const firstOptions = [
|
|
10
|
+
{ value: 'Filter 1', disabled: false, isPlaceholder: true },
|
|
11
|
+
{ value: 'A', disabled: false },
|
|
12
|
+
{ value: 'B', disabled: false },
|
|
13
|
+
{ value: 'C', disabled: false }
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
const secondOptions = [
|
|
17
|
+
{ value: 'Filter 2', disabled: false, isPlaceholder: true },
|
|
18
|
+
{ value: '1', disabled: false },
|
|
19
|
+
{ value: '2', disabled: false },
|
|
20
|
+
{ value: '3', disabled: false }
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
const thirdOptions = [
|
|
24
|
+
{ value: 'Filter 3', disabled: false, isPlaceholder: true },
|
|
25
|
+
{ value: 'I', disabled: false },
|
|
26
|
+
{ value: 'II', disabled: false },
|
|
27
|
+
{ value: 'III', disabled: false }
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
|
|
31
|
+
const [firstSelected, setFirstSelected] = React.useState<string | SelectOptionObject>();
|
|
32
|
+
const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
|
|
33
|
+
const [secondSelected, setSecondSelected] = React.useState<string | SelectOptionObject>();
|
|
34
|
+
const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
|
|
35
|
+
const [thirdSelected, setThirdSelected] = React.useState<string | SelectOptionObject>();
|
|
36
|
+
|
|
37
|
+
const onFirstToggle = (isExpanded: boolean) => {
|
|
38
|
+
setFirstIsExpanded(isExpanded);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const onFirstSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
|
|
42
|
+
setFirstSelected(selection);
|
|
43
|
+
setFirstIsExpanded(false);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const onSecondToggle = (isExpanded: boolean) => {
|
|
47
|
+
setSecondIsExpanded(isExpanded);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const onSecondSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
|
|
51
|
+
setSecondSelected(selection);
|
|
52
|
+
setSecondIsExpanded(false);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const onThirdToggle = (isExpanded: boolean) => {
|
|
56
|
+
setThirdIsExpanded(isExpanded);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
const onThirdSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
|
|
60
|
+
setThirdSelected(selection);
|
|
61
|
+
setThirdIsExpanded(false);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const filterGroupItems = (
|
|
65
|
+
<React.Fragment>
|
|
66
|
+
<ToolbarItem>
|
|
67
|
+
<Select
|
|
68
|
+
variant={SelectVariant.single}
|
|
69
|
+
aria-label="Select Input"
|
|
70
|
+
onToggle={onFirstToggle}
|
|
71
|
+
onSelect={onFirstSelect}
|
|
72
|
+
selections={firstSelected}
|
|
73
|
+
isOpen={firstIsExpanded}
|
|
74
|
+
>
|
|
75
|
+
{firstOptions.map((option, index) => (
|
|
76
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
77
|
+
))}
|
|
78
|
+
</Select>
|
|
79
|
+
</ToolbarItem>
|
|
80
|
+
<ToolbarItem>
|
|
81
|
+
<Select
|
|
82
|
+
variant={SelectVariant.single}
|
|
83
|
+
aria-label="Select Input"
|
|
84
|
+
onToggle={onSecondToggle}
|
|
85
|
+
onSelect={onSecondSelect}
|
|
86
|
+
selections={secondSelected}
|
|
87
|
+
isOpen={secondIsExpanded}
|
|
88
|
+
>
|
|
89
|
+
{secondOptions.map((option, index) => (
|
|
90
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
91
|
+
))}
|
|
92
|
+
</Select>
|
|
93
|
+
</ToolbarItem>
|
|
94
|
+
<ToolbarItem>
|
|
95
|
+
<Select
|
|
96
|
+
variant={SelectVariant.single}
|
|
97
|
+
aria-label="Select Input"
|
|
98
|
+
onToggle={onThirdToggle}
|
|
99
|
+
onSelect={onThirdSelect}
|
|
100
|
+
selections={thirdSelected}
|
|
101
|
+
isOpen={thirdIsExpanded}
|
|
102
|
+
>
|
|
103
|
+
{thirdOptions.map((option, index) => (
|
|
104
|
+
<SelectOption isDisabled={option.disabled} key={index} value={option.value} />
|
|
105
|
+
))}
|
|
106
|
+
</Select>
|
|
107
|
+
</ToolbarItem>
|
|
108
|
+
</React.Fragment>
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
const iconButtonGroupItems = (
|
|
112
|
+
<React.Fragment>
|
|
113
|
+
<ToolbarItem>
|
|
114
|
+
<Button variant="plain" aria-label="edit">
|
|
115
|
+
<EditIcon />
|
|
116
|
+
</Button>
|
|
117
|
+
</ToolbarItem>
|
|
118
|
+
<ToolbarItem>
|
|
119
|
+
<Button variant="plain" aria-label="clone">
|
|
120
|
+
<CloneIcon />
|
|
121
|
+
</Button>
|
|
122
|
+
</ToolbarItem>
|
|
123
|
+
<ToolbarItem>
|
|
124
|
+
<Button variant="plain" aria-label="sync">
|
|
125
|
+
<SyncIcon />
|
|
126
|
+
</Button>
|
|
127
|
+
</ToolbarItem>
|
|
128
|
+
</React.Fragment>
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
const buttonGroupItems = (
|
|
132
|
+
<React.Fragment>
|
|
133
|
+
<ToolbarItem>
|
|
134
|
+
<Button variant="primary">Action</Button>
|
|
135
|
+
</ToolbarItem>
|
|
136
|
+
<ToolbarItem>
|
|
137
|
+
<Button variant="secondary">Secondary</Button>
|
|
138
|
+
</ToolbarItem>
|
|
139
|
+
<ToolbarItem>
|
|
140
|
+
<Button variant="tertiary">Tertiary</Button>
|
|
141
|
+
</ToolbarItem>
|
|
142
|
+
</React.Fragment>
|
|
143
|
+
);
|
|
144
|
+
|
|
145
|
+
const items = (
|
|
146
|
+
<React.Fragment>
|
|
147
|
+
<ToolbarGroup variant="filter-group">{filterGroupItems}</ToolbarGroup>
|
|
148
|
+
<ToolbarGroup variant="icon-button-group">{iconButtonGroupItems}</ToolbarGroup>
|
|
149
|
+
<ToolbarGroup variant="button-group">{buttonGroupItems}</ToolbarGroup>
|
|
150
|
+
</React.Fragment>
|
|
151
|
+
);
|
|
152
|
+
|
|
153
|
+
return (
|
|
154
|
+
<Toolbar id="toolbar-group-types">
|
|
155
|
+
<ToolbarContent>{items}</ToolbarContent>
|
|
156
|
+
</Toolbar>
|
|
157
|
+
);
|
|
158
|
+
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
|
|
3
|
+
import { Button } from '@patternfly/react-core';
|
|
4
|
+
|
|
5
|
+
export const ToolbarInsets: React.FunctionComponent = () => {
|
|
6
|
+
const items = (
|
|
7
|
+
<React.Fragment>
|
|
8
|
+
<ToolbarItem>
|
|
9
|
+
<Button variant="secondary">Action</Button>
|
|
10
|
+
</ToolbarItem>
|
|
11
|
+
<ToolbarItem>
|
|
12
|
+
<Button variant="secondary">Action</Button>
|
|
13
|
+
</ToolbarItem>
|
|
14
|
+
<ToolbarItem>
|
|
15
|
+
<Button variant="secondary">Action</Button>
|
|
16
|
+
</ToolbarItem>
|
|
17
|
+
<ToolbarItem>
|
|
18
|
+
<Button variant="secondary">Action</Button>
|
|
19
|
+
</ToolbarItem>
|
|
20
|
+
<ToolbarItem variant="separator"></ToolbarItem>
|
|
21
|
+
<ToolbarItem>
|
|
22
|
+
<Button variant="secondary">Action</Button>
|
|
23
|
+
</ToolbarItem>
|
|
24
|
+
<ToolbarItem>
|
|
25
|
+
<Button variant="primary">Action</Button>
|
|
26
|
+
</ToolbarItem>
|
|
27
|
+
<ToolbarItem variant="separator"></ToolbarItem>
|
|
28
|
+
<ToolbarGroup>
|
|
29
|
+
<ToolbarItem>
|
|
30
|
+
<Button variant="secondary">Action</Button>
|
|
31
|
+
</ToolbarItem>
|
|
32
|
+
<ToolbarItem>
|
|
33
|
+
<Button variant="secondary">Action</Button>
|
|
34
|
+
</ToolbarItem>
|
|
35
|
+
</ToolbarGroup>
|
|
36
|
+
</React.Fragment>
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Toolbar
|
|
41
|
+
id="toolbar-insets"
|
|
42
|
+
inset={{
|
|
43
|
+
default: 'insetNone',
|
|
44
|
+
md: 'insetSm',
|
|
45
|
+
xl: 'inset2xl',
|
|
46
|
+
'2xl': 'insetLg'
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<ToolbarContent>{items}</ToolbarContent>
|
|
50
|
+
</Toolbar>
|
|
51
|
+
);
|
|
52
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
|
|
3
|
+
import { Button, SearchInput } from '@patternfly/react-core';
|
|
4
|
+
|
|
5
|
+
export const ToolbarItems: React.FunctionComponent = () => {
|
|
6
|
+
const items = (
|
|
7
|
+
<React.Fragment>
|
|
8
|
+
<ToolbarItem variant="search-filter">
|
|
9
|
+
<SearchInput aria-label="Items example search input" />
|
|
10
|
+
</ToolbarItem>
|
|
11
|
+
<ToolbarItem>
|
|
12
|
+
<Button variant="secondary">Action</Button>
|
|
13
|
+
</ToolbarItem>
|
|
14
|
+
<ToolbarItem variant="separator" />
|
|
15
|
+
<ToolbarItem>
|
|
16
|
+
<Button variant="primary">Action</Button>
|
|
17
|
+
</ToolbarItem>
|
|
18
|
+
</React.Fragment>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<Toolbar id="toolbar-items">
|
|
23
|
+
<ToolbarContent>{items}</ToolbarContent>
|
|
24
|
+
</Toolbar>
|
|
25
|
+
);
|
|
26
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
|
|
3
|
+
import { Button } from '@patternfly/react-core';
|
|
4
|
+
|
|
5
|
+
export const ToolbarSpacers: React.FunctionComponent = () => {
|
|
6
|
+
const items = (
|
|
7
|
+
<React.Fragment>
|
|
8
|
+
<ToolbarItem spacer={{ default: 'spacerNone' }}>
|
|
9
|
+
<Button variant="secondary">Action</Button>
|
|
10
|
+
</ToolbarItem>
|
|
11
|
+
<ToolbarItem spacer={{ default: 'spacerSm' }}>
|
|
12
|
+
<Button variant="secondary">Action</Button>
|
|
13
|
+
</ToolbarItem>
|
|
14
|
+
<ToolbarItem spacer={{ default: 'spacerMd' }}>
|
|
15
|
+
<Button variant="secondary">Action</Button>
|
|
16
|
+
</ToolbarItem>
|
|
17
|
+
<ToolbarItem spacer={{ default: 'spacerLg' }}>
|
|
18
|
+
<Button variant="secondary">Action</Button>
|
|
19
|
+
</ToolbarItem>
|
|
20
|
+
<ToolbarItem variant="separator"></ToolbarItem>
|
|
21
|
+
<ToolbarItem
|
|
22
|
+
spacer={{
|
|
23
|
+
default: 'spacerNone',
|
|
24
|
+
md: 'spacerSm',
|
|
25
|
+
lg: 'spacerMd',
|
|
26
|
+
xl: 'spacerLg'
|
|
27
|
+
}}
|
|
28
|
+
>
|
|
29
|
+
<Button variant="secondary">Action</Button>
|
|
30
|
+
</ToolbarItem>
|
|
31
|
+
<ToolbarItem>
|
|
32
|
+
<Button variant="primary">Action</Button>
|
|
33
|
+
</ToolbarItem>
|
|
34
|
+
<ToolbarItem variant="separator"></ToolbarItem>
|
|
35
|
+
<ToolbarGroup spaceItems={{ lg: 'spaceItemsLg' }}>
|
|
36
|
+
<ToolbarItem>
|
|
37
|
+
<Button variant="secondary">Action</Button>
|
|
38
|
+
</ToolbarItem>
|
|
39
|
+
<ToolbarItem>
|
|
40
|
+
<Button variant="secondary">Action</Button>
|
|
41
|
+
</ToolbarItem>
|
|
42
|
+
</ToolbarGroup>
|
|
43
|
+
</React.Fragment>
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<Toolbar id="toolbar-spacers">
|
|
48
|
+
<ToolbarContent>{items}</ToolbarContent>
|
|
49
|
+
</Toolbar>
|
|
50
|
+
);
|
|
51
|
+
};
|