@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
|
@@ -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. |
|