@patternfly/patternfly 4.212.1 → 4.213.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 (13) hide show
  1. package/components/Icon/icon.css +119 -0
  2. package/components/Icon/icon.scss +149 -0
  3. package/components/_all.scss +1 -0
  4. package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
  5. package/docs/components/FormControl/examples/FormControl.md +12 -12
  6. package/docs/components/Icon/examples/Icon.md +255 -0
  7. package/docs/components/LogViewer/examples/LogViewer.md +28 -28
  8. package/docs/components/TabContent/examples/TabContent.md +21 -11
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +120 -0
  11. package/patternfly.css +120 -0
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
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
@@ -333,7 +333,7 @@ cssPrefix: pf-c-form-control
333
333
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
334
334
  type="text"
335
335
  value="Success"
336
- id="input-success"
336
+ id="input-success-sprite"
337
337
  aria-label="Success state input example"
338
338
  />
339
339
  <br />
@@ -342,7 +342,7 @@ cssPrefix: pf-c-form-control
342
342
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
343
343
  type="text"
344
344
  value="Warning"
345
- id="input-warning"
345
+ id="input-warning-sprite"
346
346
  aria-label="Warning state input example"
347
347
  />
348
348
  <br />
@@ -352,7 +352,7 @@ cssPrefix: pf-c-form-control
352
352
  required
353
353
  type="text"
354
354
  value="Error"
355
- id="input-error"
355
+ id="input-error-sprite"
356
356
  aria-invalid="true"
357
357
  aria-label="Error state input example"
358
358
  />
@@ -362,7 +362,7 @@ cssPrefix: pf-c-form-control
362
362
  class="pf-c-form-control pf-m-search pf-m-icon-sprite"
363
363
  type="search"
364
364
  value="Search"
365
- id="input-search"
365
+ id="input-search-sprite"
366
366
  name="search-input"
367
367
  aria-label="Search input example"
368
368
  />
@@ -372,7 +372,7 @@ cssPrefix: pf-c-form-control
372
372
  class="pf-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
373
373
  type="text"
374
374
  value="Calendar"
375
- id="input-calendar"
375
+ id="input-calendar-sprite"
376
376
  name="input-calendar"
377
377
  aria-label="Calendar input example"
378
378
  />
@@ -382,7 +382,7 @@ cssPrefix: pf-c-form-control
382
382
  class="pf-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
383
383
  type="text"
384
384
  value="Clock"
385
- id="input-clock"
385
+ id="input-clock-sprite"
386
386
  name="input-clock"
387
387
  aria-label="Clock input example"
388
388
  />
@@ -390,7 +390,7 @@ cssPrefix: pf-c-form-control
390
390
  <br />
391
391
  <select
392
392
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
393
- id="select-group-success"
393
+ id="select-group-success-sprite"
394
394
  name="select-group-success"
395
395
  aria-label="Success state select group example"
396
396
  >
@@ -408,7 +408,7 @@ cssPrefix: pf-c-form-control
408
408
  <br />
409
409
  <select
410
410
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
411
- id="select-group-warning"
411
+ id="select-group-warning-sprite"
412
412
  name="select-group-warning"
413
413
  aria-label="Warning state select group example"
414
414
  >
@@ -428,7 +428,7 @@ cssPrefix: pf-c-form-control
428
428
  class="pf-c-form-control pf-m-icon-sprite"
429
429
  required
430
430
  aria-invalid="true"
431
- id="select-group-error"
431
+ id="select-group-error-sprite"
432
432
  name="select-group-error"
433
433
  aria-label="Error state select group example"
434
434
  >
@@ -447,7 +447,7 @@ cssPrefix: pf-c-form-control
447
447
  <textarea
448
448
  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
449
449
  name="textarea-success"
450
- id="textarea-success"
450
+ id="textarea-success-sprite"
451
451
  aria-label="Success state textarea example"
452
452
  >Success
453
453
  </textarea>
@@ -456,7 +456,7 @@ cssPrefix: pf-c-form-control
456
456
  <textarea
457
457
  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
458
458
  name="textarea-warning"
459
- id="textarea-warning"
459
+ id="textarea-warning-sprite"
460
460
  aria-label="Warning state textarea example"
461
461
  >Warning
462
462
  </textarea>
@@ -466,7 +466,7 @@ cssPrefix: pf-c-form-control
466
466
  class="pf-c-form-control pf-m-icon-sprite"
467
467
  required
468
468
  name="textarea-error"
469
- id="textarea-error"
469
+ id="textarea-error-sprite"
470
470
  aria-label="Error state textarea example"
471
471
  aria-invalid="true"
472
472
  >Error