@patternfly/patternfly 4.212.0 → 4.214.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.
Files changed (18) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/FormControl/form-control.css +7 -0
  4. package/components/FormControl/form-control.scss +11 -0
  5. package/components/Icon/icon.css +119 -0
  6. package/components/Icon/icon.scss +149 -0
  7. package/components/_all.scss +1 -0
  8. package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
  9. package/docs/components/FormControl/examples/FormControl.md +46 -25
  10. package/docs/components/Icon/examples/Icon.md +255 -0
  11. package/docs/components/LogViewer/examples/LogViewer.md +28 -28
  12. package/docs/components/TabContent/examples/TabContent.md +21 -11
  13. package/docs/components/TreeView/examples/TreeView.md +181 -130
  14. package/package.json +2 -2
  15. package/patternfly-no-reset.css +128 -0
  16. package/patternfly.css +128 -0
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
7
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
8
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
9
10
  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
11
  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
12
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
package/components/Card/card.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
7
  --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
8
  --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
9
10
  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
11
  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
12
  --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
package/components/FormControl/form-control.css CHANGED
@@ -43,6 +43,8 @@
43
43
  --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
44
44
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
45
45
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
46
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
47
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
46
48
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
47
49
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
48
50
  --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -163,6 +165,11 @@
163
165
  --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
164
166
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
165
167
  }
168
+ .pf-c-form-control[readonly].pf-m-plain {
169
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
170
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
171
+ border-color: transparent;
172
+ }
166
173
  .pf-c-form-control:hover {
167
174
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
168
175
  }
package/components/FormControl/form-control.scss CHANGED
@@ -77,6 +77,10 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
77
77
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
78
78
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
79
79
 
80
+ // input readonly plain style
81
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
82
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
83
+
80
84
  // Input m-success -- rename vars to m-success in breaking change release
81
85
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
82
86
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
@@ -241,6 +245,13 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
241
245
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
242
246
  }
243
247
  }
248
+
249
+ &.pf-m-plain {
250
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
251
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
252
+
253
+ border-color: transparent;
254
+ }
244
255
  }
245
256
 
246
257
  &:hover {
package/components/Icon/icon.css ADDED
@@ -0,0 +1,119 @@
1
+ .pf-c-icon {
2
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
3
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
4
+ --pf-c-icon--m-inline--Width: 1em;
5
+ --pf-c-icon--m-inline--Height: 1em;
6
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
7
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
8
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
9
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
10
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
11
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
12
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
13
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
14
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
15
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
16
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
17
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
18
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
19
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
20
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
21
+ --pf-c-icon--m-inline__content--FontSize: 1em;
22
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
23
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
24
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
25
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
26
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
27
+ position: relative;
28
+ display: inline-flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ width: var(--pf-c-icon--Width);
32
+ height: var(--pf-c-icon--Height);
33
+ }
34
+ .pf-c-icon.pf-m-inline {
35
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
36
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
37
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
38
+ --pf-c-icon__content--Color: currentcolor;
39
+ line-height: 1;
40
+ }
41
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
42
+ --pf-c-spinner--diameter: 1em;
43
+ }
44
+ .pf-c-icon.pf-m-sm {
45
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
46
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
47
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
48
+ }
49
+ .pf-c-icon.pf-m-md {
50
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
51
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
52
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
53
+ }
54
+ .pf-c-icon.pf-m-lg {
55
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
56
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
57
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
58
+ }
59
+ .pf-c-icon.pf-m-xl {
60
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
61
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
62
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
63
+ }
64
+ .pf-c-icon.pf-m-in-progress {
65
+ --pf-c-icon__content--Opacity: 0;
66
+ --pf-c-icon__progress--Opacity: 1;
67
+ }
68
+
69
+ .pf-c-icon__content,
70
+ .pf-c-icon__progress {
71
+ font-size: var(--pf-c-icon__content--FontSize);
72
+ }
73
+ .pf-c-icon__content svg,
74
+ .pf-c-icon__progress svg {
75
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
76
+ }
77
+ .pf-c-icon__content.pf-m-sm,
78
+ .pf-c-icon__progress.pf-m-sm {
79
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
80
+ }
81
+ .pf-c-icon__content.pf-m-md,
82
+ .pf-c-icon__progress.pf-m-md {
83
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
84
+ }
85
+ .pf-c-icon__content.pf-m-lg,
86
+ .pf-c-icon__progress.pf-m-lg {
87
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
88
+ }
89
+ .pf-c-icon__content.pf-m-xl,
90
+ .pf-c-icon__progress.pf-m-xl {
91
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
92
+ }
93
+
94
+ .pf-c-icon__content {
95
+ color: var(--pf-c-icon__content--Color);
96
+ opacity: var(--pf-c-icon__content--Opacity, 1);
97
+ }
98
+ .pf-c-icon__content.pf-m-danger {
99
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
100
+ }
101
+ .pf-c-icon__content.pf-m-warning {
102
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
103
+ }
104
+ .pf-c-icon__content.pf-m-success {
105
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
106
+ }
107
+ .pf-c-icon__content.pf-m-info {
108
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
109
+ }
110
+ .pf-c-icon__content.pf-m-default {
111
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
112
+ }
113
+
114
+ .pf-c-icon__progress {
115
+ position: absolute;
116
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
117
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
118
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
119
+ }
package/components/Icon/icon.scss ADDED
@@ -0,0 +1,149 @@
1
+ .pf-c-icon {
2
+ // Size
3
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
4
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
5
+
6
+ // When inline, use the parent's size
7
+ --pf-c-icon--m-inline--Width: 1em;
8
+ --pf-c-icon--m-inline--Height: 1em;
9
+
10
+ // Size modifiers
11
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
12
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
13
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
14
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
15
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
16
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
17
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
18
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
19
+
20
+ // Content variables
21
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
22
+
23
+ // Content status
24
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
25
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
26
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
27
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
28
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
29
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
30
+ --pf-c-icon--m-inline__content--FontSize: 1em;
31
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
32
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
33
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
34
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
35
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
36
+
37
+ position: relative;
38
+ display: inline-flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ width: var(--pf-c-icon--Width);
42
+ height: var(--pf-c-icon--Height);
43
+
44
+ // Inline modifier
45
+ &.pf-m-inline {
46
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
47
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
48
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
49
+ --pf-c-icon__content--Color: currentcolor;
50
+
51
+ line-height: 1;
52
+
53
+ .pf-c-spinner {
54
+ --pf-c-spinner--diameter: 1em;
55
+ }
56
+ }
57
+
58
+ // Size modifiers
59
+ &.pf-m-sm {
60
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
61
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
62
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
63
+ }
64
+
65
+ &.pf-m-md {
66
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
67
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
68
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
69
+ }
70
+
71
+ &.pf-m-lg {
72
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
73
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
74
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
75
+ }
76
+
77
+ &.pf-m-xl {
78
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
79
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
80
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
81
+ }
82
+
83
+ &.pf-m-in-progress {
84
+ --pf-c-icon__content--Opacity: 0;
85
+ --pf-c-icon__progress--Opacity: 1;
86
+ }
87
+ }
88
+
89
+ // Content and progress both have size modifiers
90
+ .pf-c-icon__content,
91
+ .pf-c-icon__progress {
92
+ font-size: var(--pf-c-icon__content--FontSize);
93
+
94
+ svg {
95
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
96
+ }
97
+
98
+ // Size modifiers
99
+ &.pf-m-sm {
100
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
101
+ }
102
+
103
+ &.pf-m-md {
104
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
105
+ }
106
+
107
+ &.pf-m-lg {
108
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
109
+ }
110
+
111
+ &.pf-m-xl {
112
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
113
+ }
114
+ }
115
+
116
+ // Content element
117
+ .pf-c-icon__content {
118
+ color: var(--pf-c-icon__content--Color);
119
+ opacity: var(--pf-c-icon__content--Opacity, 1);
120
+
121
+ // Status modifiers
122
+ &.pf-m-danger {
123
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
124
+ }
125
+
126
+ &.pf-m-warning {
127
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
128
+ }
129
+
130
+ &.pf-m-success {
131
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
132
+ }
133
+
134
+ &.pf-m-info {
135
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
136
+ }
137
+
138
+ &.pf-m-default {
139
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
140
+ }
141
+ }
142
+
143
+ // Progress element
144
+ .pf-c-icon__progress {
145
+ position: absolute;
146
+ top: calc(50% + calc(.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
147
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
148
+ transform: translateY(calc(-50% - calc(.5 * var(--pf-c-icon__content--svg--VerticalAlign))));
149
+ }
package/components/_all.scss CHANGED
@@ -39,6 +39,7 @@
39
39
  @import "./FormControl/form-control";
40
40
  @import "./Hint/hint";
41
41
  @import "./HelperText/helper-text";
42
+ @import "./Icon/icon";
42
43
  @import "./InlineEdit/inline-edit";
43
44
  @import "./InputGroup/input-group";
44
45
  @import "./JumpLinks/jump-links";
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -2808,18 +2808,7 @@ cssPrefix: pf-c-dual-list-selector
2808
2808
  <li class="pf-c-dual-list-selector__list-item" role="option">
2809
2809
  <div class="pf-c-dual-list-selector__list-item-row">
2810
2810
  <div class="pf-c-dual-list-selector__draggable">
2811
- <button
2812
- class="pf-c-button pf-m-plain"
2813
- type="button"
2814
- disabled
2815
- aria-pressed="false"
2816
- aria-label="Reorder"
2817
- id="draggable-list-item-2-draggable-button"
2818
- aria-labelledby="draggable-list-item-2-draggable-button draggable-list-item-2-item-text"
2819
- aria-describedby="draggable-help"
2820
- >
2821
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2822
- </button>
2811
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2823
2812
  </div>
2824
2813
  <span class="pf-c-dual-list-selector__item">
2825
2814
  <span class="pf-c-dual-list-selector__item-main">
@@ -2837,17 +2826,7 @@ cssPrefix: pf-c-dual-list-selector
2837
2826
  <li class="pf-c-dual-list-selector__list-item" role="option">
2838
2827
  <div class="pf-c-dual-list-selector__list-item-row">
2839
2828
  <div class="pf-c-dual-list-selector__draggable">
2840
- <button
2841
- class="pf-c-button pf-m-plain"
2842
- type="button"
2843
- aria-pressed="false"
2844
- aria-label="Reorder"
2845
- id="draggable-list-item-3-draggable-button"
2846
- aria-labelledby="draggable-list-item-3-draggable-button draggable-list-item-3-item-text"
2847
- aria-describedby="draggable-help"
2848
- >
2849
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2850
- </button>
2829
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2851
2830
  </div>
2852
2831
  <span class="pf-c-dual-list-selector__item">
2853
2832
  <span class="pf-c-dual-list-selector__item-main">
@@ -2865,18 +2844,7 @@ cssPrefix: pf-c-dual-list-selector
2865
2844
  <li class="pf-c-dual-list-selector__list-item" role="option">
2866
2845
  <div class="pf-c-dual-list-selector__list-item-row pf-m-ghost-row">
2867
2846
  <div class="pf-c-dual-list-selector__draggable">
2868
- <button
2869
- class="pf-c-button pf-m-plain"
2870
- type="button"
2871
- disabled
2872
- aria-pressed="false"
2873
- aria-label="Reorder"
2874
- id="draggable-list-item-5-draggable-button"
2875
- aria-labelledby="draggable-list-item-5-draggable-button draggable-list-item-5-item-text"
2876
- aria-describedby="draggable-help"
2877
- >
2878
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2879
- </button>
2847
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2880
2848
  </div>
2881
2849
  <span class="pf-c-dual-list-selector__item">
2882
2850
  <span class="pf-c-dual-list-selector__item-main">
@@ -2894,17 +2862,7 @@ cssPrefix: pf-c-dual-list-selector
2894
2862
  <li class="pf-c-dual-list-selector__list-item" role="option">
2895
2863
  <div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
2896
2864
  <div class="pf-c-dual-list-selector__draggable">
2897
- <button
2898
- class="pf-c-button pf-m-plain"
2899
- type="button"
2900
- aria-pressed="false"
2901
- aria-label="Reorder"
2902
- id="draggable-list-item-7-draggable-button"
2903
- aria-labelledby="draggable-list-item-7-draggable-button draggable-list-item-7-item-text"
2904
- aria-describedby="draggable-help"
2905
- >
2906
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2907
- </button>
2865
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2908
2866
  </div>
2909
2867
  <span class="pf-c-dual-list-selector__item">
2910
2868
  <span class="pf-c-dual-list-selector__item-main">
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -39,6 +39,16 @@ cssPrefix: pf-c-form-control
39
39
  />
40
40
  <br />
41
41
  <br />
42
+ <input
43
+ class="pf-c-form-control pf-m-plain"
44
+ readonly
45
+ type="text"
46
+ value="Readonly plain"
47
+ id="input-readonly-plain"
48
+ aria-label="Readonly plain input example"
49
+ />
50
+ <br />
51
+ <br />
42
52
  <input
43
53
  class="pf-c-form-control"
44
54
  disabled
@@ -266,6 +276,16 @@ cssPrefix: pf-c-form-control
266
276
  </textarea>
267
277
  <br />
268
278
  <br />
279
+ <textarea
280
+ class="pf-c-form-control pf-m-plain"
281
+ readonly
282
+ name="textarea-readonly-plain"
283
+ id="textarea-readonly-plain"
284
+ aria-label="Readonly plain textarea example"
285
+ >Readonly plain
286
+ </textarea>
287
+ <br />
288
+ <br />
269
289
  <textarea
270
290
  class="pf-c-form-control"
271
291
  disabled
@@ -333,7 +353,7 @@ cssPrefix: pf-c-form-control
333
353
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
334
354
  type="text"
335
355
  value="Success"
336
- id="input-success"
356
+ id="input-success-sprite"
337
357
  aria-label="Success state input example"
338
358
  />
339
359
  <br />
@@ -342,7 +362,7 @@ cssPrefix: pf-c-form-control
342
362
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
343
363
  type="text"
344
364
  value="Warning"
345
- id="input-warning"
365
+ id="input-warning-sprite"
346
366
  aria-label="Warning state input example"
347
367
  />
348
368
  <br />
@@ -352,7 +372,7 @@ cssPrefix: pf-c-form-control
352
372
  required
353
373
  type="text"
354
374
  value="Error"
355
- id="input-error"
375
+ id="input-error-sprite"
356
376
  aria-invalid="true"
357
377
  aria-label="Error state input example"
358
378
  />
@@ -362,7 +382,7 @@ cssPrefix: pf-c-form-control
362
382
  class="pf-c-form-control pf-m-search pf-m-icon-sprite"
363
383
  type="search"
364
384
  value="Search"
365
- id="input-search"
385
+ id="input-search-sprite"
366
386
  name="search-input"
367
387
  aria-label="Search input example"
368
388
  />
@@ -372,7 +392,7 @@ cssPrefix: pf-c-form-control
372
392
  class="pf-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
373
393
  type="text"
374
394
  value="Calendar"
375
- id="input-calendar"
395
+ id="input-calendar-sprite"
376
396
  name="input-calendar"
377
397
  aria-label="Calendar input example"
378
398
  />
@@ -382,7 +402,7 @@ cssPrefix: pf-c-form-control
382
402
  class="pf-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
383
403
  type="text"
384
404
  value="Clock"
385
- id="input-clock"
405
+ id="input-clock-sprite"
386
406
  name="input-clock"
387
407
  aria-label="Clock input example"
388
408
  />
@@ -390,7 +410,7 @@ cssPrefix: pf-c-form-control
390
410
  <br />
391
411
  <select
392
412
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
393
- id="select-group-success"
413
+ id="select-group-success-sprite"
394
414
  name="select-group-success"
395
415
  aria-label="Success state select group example"
396
416
  >
@@ -408,7 +428,7 @@ cssPrefix: pf-c-form-control
408
428
  <br />
409
429
  <select
410
430
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
411
- id="select-group-warning"
431
+ id="select-group-warning-sprite"
412
432
  name="select-group-warning"
413
433
  aria-label="Warning state select group example"
414
434
  >
@@ -428,7 +448,7 @@ cssPrefix: pf-c-form-control
428
448
  class="pf-c-form-control pf-m-icon-sprite"
429
449
  required
430
450
  aria-invalid="true"
431
- id="select-group-error"
451
+ id="select-group-error-sprite"
432
452
  name="select-group-error"
433
453
  aria-label="Error state select group example"
434
454
  >
@@ -447,7 +467,7 @@ cssPrefix: pf-c-form-control
447
467
  <textarea
448
468
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
449
469
  name="textarea-success"
450
- id="textarea-success"
470
+ id="textarea-success-sprite"
451
471
  aria-label="Success state textarea example"
452
472
  >Success
453
473
  </textarea>
@@ -456,7 +476,7 @@ cssPrefix: pf-c-form-control
456
476
  <textarea
457
477
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
458
478
  name="textarea-warning"
459
- id="textarea-warning"
479
+ id="textarea-warning-sprite"
460
480
  aria-label="Warning state textarea example"
461
481
  >Warning
462
482
  </textarea>
@@ -466,7 +486,7 @@ cssPrefix: pf-c-form-control
466
486
  class="pf-c-form-control pf-m-icon-sprite"
467
487
  required
468
488
  name="textarea-error"
469
- id="textarea-error"
489
+ id="textarea-error-sprite"
470
490
  aria-label="Error state textarea example"
471
491
  aria-invalid="true"
472
492
  >Error
@@ -487,16 +507,17 @@ cssPrefix: pf-c-form-control
487
507
 
488
508
  ### Usage
489
509
 
490
- | Class | Applied to | Outcome |
491
- | ------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
492
- | `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
493
- | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
494
- | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
495
- | `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
496
- | `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
497
- | `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
498
- | `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
499
- | `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
500
- | `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
501
- | `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
502
- | `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
510
+ | Class | Applied to | Outcome |
511
+ | ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
512
+ | `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
513
+ | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
514
+ | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
515
+ | `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
516
+ | `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
517
+ | `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
518
+ | `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
519
+ | `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
520
+ | `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
521
+ | `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
522
+ | `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
523
+ | `.pf-m-plain` | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |