@patternfly/patternfly 4.179.1 → 4.180.0
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/components/Dropdown/dropdown.css +4 -2
- package/components/Dropdown/dropdown.scss +4 -2
- package/components/FormControl/form-control.scss +3 -0
- package/components/MenuToggle/menu-toggle.css +4 -1
- package/components/MenuToggle/menu-toggle.scss +4 -3
- package/components/SearchInput/search-input.css +1 -0
- package/components/SearchInput/search-input.scss +1 -0
- package/components/Select/select.css +3 -2
- package/components/Select/select.scss +4 -2
- package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
- package/docs/components/ContextSelector/examples/context-selector.md +84 -102
- package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
- package/docs/components/FormControl/examples/FormControl.md +0 -11
- package/docs/components/InputGroup/examples/InputGroup.md +6 -22
- package/docs/components/LabelGroup/examples/LabelGroup.md +135 -2
- package/docs/components/LogViewer/examples/LogViewer.md +567 -198
- package/docs/components/Menu/examples/Menu.md +1908 -983
- package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
- package/docs/components/Nav/examples/Navigation.md +563 -231
- package/docs/components/Select/examples/Select.md +30 -14
- package/docs/components/Spinner/examples/Spinner.md +50 -55
- package/docs/components/Toolbar/examples/Toolbar.md +300 -180
- package/docs/components/TreeView/examples/TreeView.md +15 -7
- package/docs/demos/ContextSelector/examples/ContextSelector.md +515 -218
- package/docs/demos/DataList/examples/DataList.md +159 -114
- package/docs/demos/Masthead/examples/Masthead.md +482 -237
- package/docs/demos/Page/examples/Page.md +945 -350
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
- package/docs/demos/Table/examples/Table.md +2459 -1090
- package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
- package/package.json +1 -1
- package/patternfly-no-reset.css +12 -5
- package/patternfly.css +12 -5
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1849,13 +1849,21 @@ The multiselect should be used when the user is selecting multiple items from a
|
|
|
1849
1849
|
|
|
1850
1850
|
<div class="pf-c-select__menu">
|
|
1851
1851
|
<div class="pf-c-select__menu-search">
|
|
1852
|
-
<input
|
|
1853
|
-
class="pf-c-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1852
|
+
<div class="pf-c-search-input">
|
|
1853
|
+
<div class="pf-c-search-input__bar">
|
|
1854
|
+
<span class="pf-c-search-input__text">
|
|
1855
|
+
<span class="pf-c-search-input__icon">
|
|
1856
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1857
|
+
</span>
|
|
1858
|
+
<input
|
|
1859
|
+
class="pf-c-search-input__text-input"
|
|
1860
|
+
type="text"
|
|
1861
|
+
placeholder="Search"
|
|
1862
|
+
aria-label="Search"
|
|
1863
|
+
/>
|
|
1864
|
+
</span>
|
|
1865
|
+
</div>
|
|
1866
|
+
</div>
|
|
1859
1867
|
</div>
|
|
1860
1868
|
<hr class="pf-c-divider" />
|
|
1861
1869
|
<div class="pf-c-select__menu-group">
|
|
@@ -2730,13 +2738,21 @@ The plain select variation should be used when you do not want a border applied
|
|
|
2730
2738
|
|
|
2731
2739
|
<div class="pf-c-select__menu" aria-labelledby="select-favorites-label">
|
|
2732
2740
|
<div class="pf-c-select__menu-search">
|
|
2733
|
-
<input
|
|
2734
|
-
class="pf-c-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2741
|
+
<div class="pf-c-search-input">
|
|
2742
|
+
<div class="pf-c-search-input__bar">
|
|
2743
|
+
<span class="pf-c-search-input__text">
|
|
2744
|
+
<span class="pf-c-search-input__icon">
|
|
2745
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
2746
|
+
</span>
|
|
2747
|
+
<input
|
|
2748
|
+
class="pf-c-search-input__text-input"
|
|
2749
|
+
type="text"
|
|
2750
|
+
placeholder="Search"
|
|
2751
|
+
aria-label="Search"
|
|
2752
|
+
/>
|
|
2753
|
+
</span>
|
|
2754
|
+
</div>
|
|
2755
|
+
</div>
|
|
2740
2756
|
</div>
|
|
2741
2757
|
<hr class="pf-c-divider" />
|
|
2742
2758
|
<div class="pf-c-select__menu-group">
|
|
@@ -6,51 +6,6 @@ cssPrefix: pf-c-spinner
|
|
|
6
6
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
|
-
```html
|
|
10
|
-
<span class="pf-c-spinner" role="progressbar" aria-label="Loading...">
|
|
11
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
12
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
13
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
14
|
-
</span>
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
### Multiple sizes
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<span class="pf-c-spinner pf-m-sm" role="progressbar" aria-label="Loading...">
|
|
22
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
23
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
24
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
25
|
-
</span>
|
|
26
|
-
|
|
27
|
-
<span class="pf-c-spinner pf-m-md" role="progressbar" aria-label="Loading...">
|
|
28
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
29
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
30
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
31
|
-
</span>
|
|
32
|
-
|
|
33
|
-
<span class="pf-c-spinner pf-m-lg" role="progressbar" aria-label="Loading...">
|
|
34
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
35
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
36
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
37
|
-
</span>
|
|
38
|
-
|
|
39
|
-
<span class="pf-c-spinner pf-m-xl" role="progressbar" aria-label="Loading...">
|
|
40
|
-
<span class="pf-c-spinner__clipper"></span>
|
|
41
|
-
<span class="pf-c-spinner__lead-ball"></span>
|
|
42
|
-
<span class="pf-c-spinner__tail-ball"></span>
|
|
43
|
-
</span>
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
<br />
|
|
48
|
-
<br />
|
|
49
|
-
<br />
|
|
50
|
-
## SVG spinner
|
|
51
|
-
|
|
52
|
-
### SVG spinner basic
|
|
53
|
-
|
|
54
9
|
```html
|
|
55
10
|
<svg
|
|
56
11
|
class="pf-c-spinner"
|
|
@@ -63,7 +18,7 @@ cssPrefix: pf-c-spinner
|
|
|
63
18
|
|
|
64
19
|
```
|
|
65
20
|
|
|
66
|
-
###
|
|
21
|
+
### Sizes
|
|
67
22
|
|
|
68
23
|
```html
|
|
69
24
|
<svg
|
|
@@ -104,7 +59,7 @@ cssPrefix: pf-c-spinner
|
|
|
104
59
|
|
|
105
60
|
```
|
|
106
61
|
|
|
107
|
-
###
|
|
62
|
+
### Custom size
|
|
108
63
|
|
|
109
64
|
```html
|
|
110
65
|
<svg
|
|
@@ -119,6 +74,46 @@ cssPrefix: pf-c-spinner
|
|
|
119
74
|
|
|
120
75
|
```
|
|
121
76
|
|
|
77
|
+
### Basic (legacy)
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<span class="pf-c-spinner" role="progressbar" aria-label="Loading...">
|
|
81
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
82
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
83
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
84
|
+
</span>
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Sizes (legacy)
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<span class="pf-c-spinner pf-m-sm" role="progressbar" aria-label="Loading...">
|
|
92
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
93
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
94
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
95
|
+
</span>
|
|
96
|
+
|
|
97
|
+
<span class="pf-c-spinner pf-m-md" role="progressbar" aria-label="Loading...">
|
|
98
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
99
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
100
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
101
|
+
</span>
|
|
102
|
+
|
|
103
|
+
<span class="pf-c-spinner pf-m-lg" role="progressbar" aria-label="Loading...">
|
|
104
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
105
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
106
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
107
|
+
</span>
|
|
108
|
+
|
|
109
|
+
<span class="pf-c-spinner pf-m-xl" role="progressbar" aria-label="Loading...">
|
|
110
|
+
<span class="pf-c-spinner__clipper"></span>
|
|
111
|
+
<span class="pf-c-spinner__lead-ball"></span>
|
|
112
|
+
<span class="pf-c-spinner__tail-ball"></span>
|
|
113
|
+
</span>
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
|
|
122
117
|
## Documentation
|
|
123
118
|
|
|
124
119
|
### Accessibility
|
|
@@ -136,6 +131,14 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
|
|
|
136
131
|
|
|
137
132
|
### Usage
|
|
138
133
|
|
|
134
|
+
| Class | Applied to | Outcome |
|
|
135
|
+
| -------------------------- | --------------- | -------------------------------------------------------------------------------- |
|
|
136
|
+
| `.pf-c-spinner` | `<svg>` | Creates a spinner component. The default is an extra large spinner. **Required** |
|
|
137
|
+
| `.pf-c-spinner__path` | `<circle>` | Creates a spinner circle component. **Required** |
|
|
138
|
+
| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration. |
|
|
139
|
+
|
|
140
|
+
### Usage (legacy)
|
|
141
|
+
|
|
139
142
|
| Class | Applied to | Outcome |
|
|
140
143
|
| -------------------------- | ---------- | -------------------------------------------------------------------------------- |
|
|
141
144
|
| `.pf-c-spinner` | `<span>` | Creates a spinner component. The default is an extra large spinner. **Required** |
|
|
@@ -143,14 +146,6 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
|
|
|
143
146
|
| `.pf-c-spinner__lead-ball` | `<span>` | Rounds out the beginning of the spinning line. **Required** |
|
|
144
147
|
| `.pf-c-spinner__tail-ball` | `<span>` | Rounds out the end of the spinning line. **Required** |
|
|
145
148
|
|
|
146
|
-
### SVG variant
|
|
147
|
-
|
|
148
|
-
| Class | Applied to | Outcome |
|
|
149
|
-
| -------------------------- | --------------- | -------------------------------------------------------------------------------- |
|
|
150
|
-
| `.pf-c-spinner` | `<svg>` | Creates a spinner component. The default is an extra large spinner. **Required** |
|
|
151
|
-
| `.pf-c-spinner__path` | `<circle>` | Creates a spinner circle component. **Required** |
|
|
152
|
-
| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration. |
|
|
153
|
-
|
|
154
149
|
### Modifiers
|
|
155
150
|
|
|
156
151
|
| Class | Applied to | Outcome |
|