@patternfly/patternfly 4.179.1 → 4.179.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.
|
@@ -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. |
|
|
@@ -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 |
|