@patternfly/patternfly 4.179.0 → 4.179.3
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/RELEASE-NOTES.md +37 -0
- package/components/Select/select.css +3 -2
- package/components/Select/select.scss +4 -2
- 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 +1848 -955
- package/docs/components/Nav/examples/Navigation.md +563 -231
- package/docs/components/Spinner/examples/Spinner.md +50 -55
- package/docs/demos/BackToTop/examples/BackToTop.md +200 -0
- package/docs/demos/ContextSelector/examples/ContextSelector.md +351 -105
- package/docs/demos/Masthead/examples/Masthead.md +198 -70
- package/docs/demos/Page/examples/Page.md +693 -245
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
- package/docs/demos/Table/examples/Table.md +1287 -455
- package/package.json +1 -1
- package/patternfly-no-reset.css +3 -2
- package/patternfly.css +3 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md
CHANGED
|
@@ -3,6 +3,43 @@ id: Release notes
|
|
|
3
3
|
section: developer-resources
|
|
4
4
|
releaseNoteTOC: true
|
|
5
5
|
---
|
|
6
|
+
## 2022.02 release notes (2022-02-17)
|
|
7
|
+
Packages released:
|
|
8
|
+
- [@patternfly/patternfly@v4.179.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.179.1)
|
|
9
|
+
|
|
10
|
+
### Components
|
|
11
|
+
- **Alert:** Added overflow alert button ([#4650](https://github.com/patternfly/patternfly/pull/4650))
|
|
12
|
+
- **Avatar:** Added size variations ([#4648](https://github.com/patternfly/patternfly/pull/4648))
|
|
13
|
+
- **Button:** Fixed primary toggle state styles ([#4662](https://github.com/patternfly/patternfly/pull/4662))
|
|
14
|
+
- **Card:** Updated card demo select to be plain, fixed alignment ([#4667](https://github.com/patternfly/patternfly/pull/4667))
|
|
15
|
+
- **Code editor:** Added header content section ([#4669](https://github.com/patternfly/patternfly/pull/4669))
|
|
16
|
+
- **Label:** Improved click area of editable label ([#4653](https://github.com/patternfly/patternfly/pull/4653))
|
|
17
|
+
- **Nav:**
|
|
18
|
+
- Added variation to fix section spacing ([#4649](https://github.com/patternfly/patternfly/pull/4649))
|
|
19
|
+
- Updated nav menu styling ([#4672](https://github.com/patternfly/patternfly/pull/4672))
|
|
20
|
+
- **Pagination:** Removed number input arrow visibility ([#4641](https://github.com/patternfly/patternfly/pull/4641))
|
|
21
|
+
- **Progress stepper:** Removed extra space below last step ([#4636](https://github.com/patternfly/patternfly/pull/4636))
|
|
22
|
+
- **Table:**
|
|
23
|
+
- Updated tree table checkbox padding ([#4642](https://github.com/patternfly/patternfly/pull/4642))
|
|
24
|
+
- Removed unnecessary class from striped tr example ([#4644](https://github.com/patternfly/patternfly/pull/4644))
|
|
25
|
+
- Added overflow menu examples ([#4651](https://github.com/patternfly/patternfly/pull/4651))
|
|
26
|
+
- Fixed expand all button in compact table ([#4681](https://github.com/patternfly/patternfly/pull/4681))
|
|
27
|
+
- **Text input group:** Added placeholder styling ([#4668](https://github.com/patternfly/patternfly/pull/4668))
|
|
28
|
+
|
|
29
|
+
### Other
|
|
30
|
+
- **Demos:**
|
|
31
|
+
- Removed bulk selector from demo headers ([#4640](https://github.com/patternfly/patternfly/pull/4640))
|
|
32
|
+
- Created common template for full page demos ([#4674](https://github.com/patternfly/patternfly/pull/4674))
|
|
33
|
+
- Added common masthead template ([#4683](https://github.com/patternfly/patternfly/pull/4683))
|
|
34
|
+
- Fixed context selector include paths ([#4689](https://github.com/patternfly/patternfly/pull/4689))
|
|
35
|
+
- **Docs:**
|
|
36
|
+
- Added links to new breakpoint section ([#4675](https://github.com/patternfly/patternfly/pull/4675))
|
|
37
|
+
- Added version details to upgrade guide ([#4678](https://github.com/patternfly/patternfly/pull/4678))
|
|
38
|
+
- **Repo:** Added bug and feature issue templates ([#4671](https://github.com/patternfly/patternfly/pull/4671))
|
|
39
|
+
- **Theme:** Added dark theme ([#4654](https://github.com/patternfly/patternfly/pull/4654))
|
|
40
|
+
- **Note:** This is not production ready and we are not advising products to adopt the dark theme stylesheet at this time. This feature is being released to test in specific use cases to assess the feasibility of adding a dark theme to PatternFly.
|
|
41
|
+
|
|
42
|
+
|
|
6
43
|
## 2022.01 release notes (2022-01-25)
|
|
7
44
|
Packages released:
|
|
8
45
|
- [@patternfly/patternfly@v4.171.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.171.1)
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
|
|
24
24
|
--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
25
25
|
--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
|
26
|
-
--pf-c-select__toggle--before--BorderWidth:
|
|
26
|
+
--pf-c-select__toggle--before--BorderWidth: initial;
|
|
27
27
|
--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
|
|
28
28
|
--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
|
|
29
29
|
--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
|
|
@@ -234,6 +234,7 @@
|
|
|
234
234
|
border: 0;
|
|
235
235
|
}
|
|
236
236
|
.pf-c-select__toggle::before {
|
|
237
|
+
--pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
|
|
237
238
|
position: absolute;
|
|
238
239
|
top: 0;
|
|
239
240
|
right: 0;
|
|
@@ -242,7 +243,7 @@
|
|
|
242
243
|
content: "";
|
|
243
244
|
border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
|
|
244
245
|
border-style: solid;
|
|
245
|
-
border-width: var(--pf-c-select__toggle--before--BorderWidth);
|
|
246
|
+
border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
|
|
246
247
|
}
|
|
247
248
|
.pf-c-select__toggle:hover {
|
|
248
249
|
--pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
|
|
16
16
|
--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
17
17
|
--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
|
|
18
|
-
--pf-c-select__toggle--before--BorderWidth:
|
|
18
|
+
--pf-c-select__toggle--before--BorderWidth: initial; // remove at breaking change
|
|
19
19
|
--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
|
|
20
20
|
--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
|
|
21
21
|
--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
|
|
@@ -292,6 +292,8 @@
|
|
|
292
292
|
}
|
|
293
293
|
|
|
294
294
|
&::before {
|
|
295
|
+
--pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth); // remove at breaking change
|
|
296
|
+
|
|
295
297
|
position: absolute;
|
|
296
298
|
top: 0;
|
|
297
299
|
right: 0;
|
|
@@ -300,7 +302,7 @@
|
|
|
300
302
|
content: "";
|
|
301
303
|
border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
|
|
302
304
|
border-style: solid;
|
|
303
|
-
border-width: var(--pf-c-select__toggle--before--BorderWidth);
|
|
305
|
+
border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
|
|
304
306
|
}
|
|
305
307
|
|
|
306
308
|
&:hover {
|
|
@@ -793,7 +793,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
793
793
|
|
|
794
794
|
```
|
|
795
795
|
|
|
796
|
-
### Mixed labels, dynamic label group
|
|
796
|
+
### Mixed labels (static / editable), dynamic label group
|
|
797
797
|
|
|
798
798
|
```html
|
|
799
799
|
<div class="pf-c-label-group pf-m-editable">
|
|
@@ -904,6 +904,139 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
904
904
|
|
|
905
905
|
```
|
|
906
906
|
|
|
907
|
+
### Compact labels
|
|
908
|
+
|
|
909
|
+
```html
|
|
910
|
+
<div class="pf-c-label-group">
|
|
911
|
+
<div class="pf-c-label-group__main">
|
|
912
|
+
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
913
|
+
<li class="pf-c-label-group__list-item">
|
|
914
|
+
<span class="pf-c-label pf-m-compact">
|
|
915
|
+
<span class="pf-c-label__content">
|
|
916
|
+
<span class="pf-c-label__icon">
|
|
917
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
918
|
+
</span>
|
|
919
|
+
Label
|
|
920
|
+
</span>
|
|
921
|
+
</span>
|
|
922
|
+
</li>
|
|
923
|
+
<li class="pf-c-label-group__list-item">
|
|
924
|
+
<span class="pf-c-label pf-m-compact pf-m-blue">
|
|
925
|
+
<span class="pf-c-label__content">
|
|
926
|
+
<span class="pf-c-label__icon">
|
|
927
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
928
|
+
</span>
|
|
929
|
+
Label 2
|
|
930
|
+
</span>
|
|
931
|
+
</span>
|
|
932
|
+
</li>
|
|
933
|
+
<li class="pf-c-label-group__list-item">
|
|
934
|
+
<span class="pf-c-label pf-m-compact pf-m-green">
|
|
935
|
+
<span class="pf-c-label__content">
|
|
936
|
+
<span class="pf-c-label__icon">
|
|
937
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
938
|
+
</span>
|
|
939
|
+
Label 3
|
|
940
|
+
</span>
|
|
941
|
+
</span>
|
|
942
|
+
</li>
|
|
943
|
+
</ul>
|
|
944
|
+
</div>
|
|
945
|
+
</div>
|
|
946
|
+
|
|
947
|
+
```
|
|
948
|
+
|
|
949
|
+
### Compact labels, overflow
|
|
950
|
+
|
|
951
|
+
```html
|
|
952
|
+
<div class="pf-c-label-group">
|
|
953
|
+
<div class="pf-c-label-group__main">
|
|
954
|
+
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
955
|
+
<li class="pf-c-label-group__list-item">
|
|
956
|
+
<span class="pf-c-label pf-m-compact">
|
|
957
|
+
<span class="pf-c-label__content">
|
|
958
|
+
<span class="pf-c-label__icon">
|
|
959
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
960
|
+
</span>
|
|
961
|
+
Label
|
|
962
|
+
</span>
|
|
963
|
+
</span>
|
|
964
|
+
</li>
|
|
965
|
+
<li class="pf-c-label-group__list-item">
|
|
966
|
+
<span class="pf-c-label pf-m-compact pf-m-blue">
|
|
967
|
+
<span class="pf-c-label__content">
|
|
968
|
+
<span class="pf-c-label__icon">
|
|
969
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
970
|
+
</span>
|
|
971
|
+
Label 2
|
|
972
|
+
</span>
|
|
973
|
+
</span>
|
|
974
|
+
</li>
|
|
975
|
+
<li class="pf-c-label-group__list-item">
|
|
976
|
+
<span class="pf-c-label pf-m-compact pf-m-green">
|
|
977
|
+
<span class="pf-c-label__content">
|
|
978
|
+
<span class="pf-c-label__icon">
|
|
979
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
980
|
+
</span>
|
|
981
|
+
Label 3
|
|
982
|
+
</span>
|
|
983
|
+
</span>
|
|
984
|
+
</li>
|
|
985
|
+
<li class="pf-c-label-group__list-item">
|
|
986
|
+
<button class="pf-c-label pf-m-overflow pf-m-compact">
|
|
987
|
+
<span class="pf-c-label__content">3 more</span>
|
|
988
|
+
</button>
|
|
989
|
+
</li>
|
|
990
|
+
</ul>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
|
|
994
|
+
```
|
|
995
|
+
|
|
996
|
+
### Compact labels, vertical
|
|
997
|
+
|
|
998
|
+
```html
|
|
999
|
+
<div class="pf-c-label-group pf-m-vertical">
|
|
1000
|
+
<div class="pf-c-label-group__main">
|
|
1001
|
+
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
1002
|
+
<li class="pf-c-label-group__list-item">
|
|
1003
|
+
<span class="pf-c-label pf-m-compact">
|
|
1004
|
+
<span class="pf-c-label__content">
|
|
1005
|
+
<span class="pf-c-label__icon">
|
|
1006
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1007
|
+
</span>
|
|
1008
|
+
Label
|
|
1009
|
+
</span>
|
|
1010
|
+
</span>
|
|
1011
|
+
</li>
|
|
1012
|
+
<li class="pf-c-label-group__list-item">
|
|
1013
|
+
<span class="pf-c-label pf-m-compact pf-m-blue">
|
|
1014
|
+
<span class="pf-c-label__content">
|
|
1015
|
+
<span class="pf-c-label__icon">
|
|
1016
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1017
|
+
</span>
|
|
1018
|
+
Label 2
|
|
1019
|
+
</span>
|
|
1020
|
+
</span>
|
|
1021
|
+
</li>
|
|
1022
|
+
<li class="pf-c-label-group__list-item">
|
|
1023
|
+
<span class="pf-c-label pf-m-compact pf-m-green">
|
|
1024
|
+
<span class="pf-c-label__content">
|
|
1025
|
+
<span class="pf-c-label__icon">
|
|
1026
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1027
|
+
</span>
|
|
1028
|
+
Label 3
|
|
1029
|
+
</span>
|
|
1030
|
+
</span>
|
|
1031
|
+
</li>
|
|
1032
|
+
</ul>
|
|
1033
|
+
</div>
|
|
1034
|
+
</div>
|
|
1035
|
+
|
|
1036
|
+
```
|
|
1037
|
+
|
|
1038
|
+
## Documentation
|
|
1039
|
+
|
|
907
1040
|
### Accessibility
|
|
908
1041
|
|
|
909
1042
|
| Attribute | Applied to | Outcome |
|
|
@@ -926,7 +1059,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
926
1059
|
| `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
|
|
927
1060
|
| `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
|
|
928
1061
|
| `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
|
|
929
|
-
| `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
|
|
930
1062
|
| `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
|
|
1063
|
+
| `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
|
|
931
1064
|
| `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
|
|
932
1065
|
| `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |
|