@patternfly/patternfly 4.204.2 → 4.204.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.
Files changed (10) hide show
  1. package/components/FormControl/form-control.css +3 -2
  2. package/components/FormControl/form-control.scss +4 -3
  3. package/components/Popover/popover.css +1 -1
  4. package/components/Popover/popover.scss +1 -1
  5. package/docs/components/FormControl/examples/FormControl.md +44 -19
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +4 -3
  8. package/patternfly.css +4 -3
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.css CHANGED
@@ -9,6 +9,7 @@
9
9
  }
10
10
 
11
11
  .pf-c-form-control {
12
+ --pf-c-form-control--Color: var(--pf-global--Color--100);
12
13
  --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
13
14
  --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
14
15
  --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -131,7 +132,7 @@
131
132
  --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
132
133
  --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
133
134
  --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
134
- color: var(--pf-global--Color--100);
135
+ color: var(--pf-c-form-control--Color);
135
136
  width: var(--pf-c-form-control--Width);
136
137
  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
137
138
  font-size: var(--pf-c-form-control--FontSize);
@@ -176,8 +177,8 @@
176
177
  border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
177
178
  }
178
179
  .pf-c-form-control:disabled {
179
- --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
180
180
  --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
181
+ color: var(--pf-c-form-control--disabled--Color);
181
182
  cursor: not-allowed;
182
183
  border-color: var(--pf-c-form-control--disabled--BorderColor);
183
184
  }
package/components/FormControl/form-control.scss CHANGED
@@ -27,6 +27,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
27
27
 
28
28
  .pf-c-form-control {
29
29
  // Component
30
+ --pf-c-form-control--Color: var(--pf-global--Color--100);
30
31
  --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
31
32
  --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
32
33
  --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -199,7 +200,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
199
200
  --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
200
201
 
201
202
  // This component always needs to be light
202
- @include pf-t-light;
203
+ @include pf-t-light("--pf-c-form-control--Color");
203
204
 
204
205
  width: var(--pf-c-form-control--Width);
205
206
  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -216,7 +217,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
216
217
  // stylelint-enable
217
218
 
218
219
  &::placeholder {
219
- color: var(--pf-c-form-control--placeholder--Color);
220
+ color: var(--pf-c-form-control--placeholder--Color); // update to set --pf-c-form-control--Color in breaking change - also look for any other place to do that in this component
220
221
  }
221
222
 
222
223
  &:not(textarea) {
@@ -261,9 +262,9 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
261
262
  }
262
263
 
263
264
  &:disabled {
264
- --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
265
265
  --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
266
266
 
267
+ color: var(--pf-c-form-control--disabled--Color);
267
268
  cursor: not-allowed;
268
269
  border-color: var(--pf-c-form-control--disabled--BorderColor);
269
270
  }
package/components/Popover/popover.css CHANGED
@@ -36,7 +36,7 @@
36
36
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
37
37
  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
38
38
  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
39
- --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
39
+ --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
40
40
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
41
41
  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
42
42
  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
package/components/Popover/popover.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  // Close
48
48
  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
49
49
  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
50
- --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
50
+ --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
51
51
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
52
52
 
53
53
  // Header
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"
44
+ disabled
45
+ type="text"
46
+ value="Disabled"
47
+ id="input-disabled"
48
+ aria-label="Disabled input example"
49
+ />
50
+ <br />
51
+ <br />
42
52
  <input
43
53
  class="pf-c-form-control pf-m-success"
44
54
  type="text"
@@ -68,16 +78,6 @@ cssPrefix: pf-c-form-control
68
78
  />
69
79
  <br />
70
80
  <br />
71
- <input
72
- class="pf-c-form-control"
73
- disabled
74
- type="text"
75
- value="Disabled"
76
- id="input-disabled"
77
- aria-label="Disabled input example"
78
- />
79
- <br />
80
- <br />
81
81
  <input
82
82
  class="pf-c-form-control pf-m-expanded"
83
83
  type="text"
@@ -123,11 +123,11 @@ cssPrefix: pf-c-form-control
123
123
  ```html
124
124
  <select
125
125
  class="pf-c-form-control pf-m-placeholder"
126
- id="select-standard"
127
- name="select-standard"
128
- aria-label="Standard select example"
126
+ id="select-selectable-placeholder"
127
+ name="select-selectable-placeholder"
128
+ aria-label="Selectable placeholder select example"
129
129
  >
130
- <option value selected disabled>Please choose</option>
130
+ <option value selected>Selectable placeholder</option>
131
131
  <option value="Mr">Mr</option>
132
132
  <option value="Miss">Miss</option>
133
133
  <option value="Mrs">Mrs</option>
@@ -139,11 +139,11 @@ cssPrefix: pf-c-form-control
139
139
  <br />
140
140
  <select
141
141
  class="pf-c-form-control pf-m-placeholder"
142
- id="select-placeholder-enabled"
143
- name="select-placeholder-enabled"
144
- aria-label="Placeholder enabled select example"
142
+ id="select-non-selectable-placeholder"
143
+ name="select-non-selectable-placeholder"
144
+ aria-label="Non-selectable placeholder select example"
145
145
  >
146
- <option value selected>Please choose</option>
146
+ <option value selected disabled>Non-selectable placeholder</option>
147
147
  <option value="Mr">Mr</option>
148
148
  <option value="Miss">Miss</option>
149
149
  <option value="Mrs">Mrs</option>
@@ -161,7 +161,7 @@ cssPrefix: pf-c-form-control
161
161
  >
162
162
  <optgroup label="Group 1">
163
163
  <option value="Option 1">The first option</option>
164
- <option value="Option 2" selected>The second option is selected by default</option>
164
+ <option value="Option 2" selected>Option groups (second option selected)</option>
165
165
  </optgroup>
166
166
  <optgroup label="Group 2">
167
167
  <option value="Option 3">The third option</option>
@@ -226,6 +226,21 @@ cssPrefix: pf-c-form-control
226
226
  </select>
227
227
  <br />
228
228
  <br />
229
+ <select
230
+ class="pf-c-form-control pf-m-placeholder"
231
+ disabled
232
+ id="select-disabled"
233
+ name="select-disabled"
234
+ aria-label="Disabled select example"
235
+ >
236
+ <option value selected>Disabled</option>
237
+ <option value="Mr">Mr</option>
238
+ <option value="Miss">Miss</option>
239
+ <option value="Mrs">Mrs</option>
240
+ <option value="Ms">Ms</option>
241
+ <option value="Dr">Dr</option>
242
+ <option value="Other">Other</option>
243
+ </select>
229
244
 
230
245
  ```
231
246
 
@@ -251,6 +266,16 @@ cssPrefix: pf-c-form-control
251
266
  </textarea>
252
267
  <br />
253
268
  <br />
269
+ <textarea
270
+ class="pf-c-form-control"
271
+ disabled
272
+ name="textarea-disabled"
273
+ id="textarea-disabled"
274
+ aria-label="Disabled textarea example"
275
+ >Disabled
276
+ </textarea>
277
+ <br />
278
+ <br />
254
279
  <textarea
255
280
  class="pf-c-form-control pf-m-success"
256
281
  name="textarea-success"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.204.2",
4
+ "version": "4.204.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -15196,6 +15196,7 @@ label.pf-c-check, .pf-c-check__label,
15196
15196
  }
15197
15197
 
15198
15198
  .pf-c-form-control {
15199
+ --pf-c-form-control--Color: var(--pf-global--Color--100);
15199
15200
  --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
15200
15201
  --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
15201
15202
  --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -15318,7 +15319,7 @@ label.pf-c-check, .pf-c-check__label,
15318
15319
  --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
15319
15320
  --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
15320
15321
  --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
15321
- color: var(--pf-global--Color--100);
15322
+ color: var(--pf-c-form-control--Color);
15322
15323
  width: var(--pf-c-form-control--Width);
15323
15324
  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
15324
15325
  font-size: var(--pf-c-form-control--FontSize);
@@ -15363,8 +15364,8 @@ label.pf-c-check, .pf-c-check__label,
15363
15364
  border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
15364
15365
  }
15365
15366
  .pf-c-form-control:disabled {
15366
- --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
15367
15367
  --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
15368
+ color: var(--pf-c-form-control--disabled--Color);
15368
15369
  cursor: not-allowed;
15369
15370
  border-color: var(--pf-c-form-control--disabled--BorderColor);
15370
15371
  }
@@ -22785,7 +22786,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22785
22786
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
22786
22787
  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
22787
22788
  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
22788
- --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
22789
+ --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
22789
22790
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
22790
22791
  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
22791
22792
  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
package/patternfly.css CHANGED
@@ -15323,6 +15323,7 @@ label.pf-c-check, .pf-c-check__label,
15323
15323
  }
15324
15324
 
15325
15325
  .pf-c-form-control {
15326
+ --pf-c-form-control--Color: var(--pf-global--Color--100);
15326
15327
  --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
15327
15328
  --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
15328
15329
  --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -15445,7 +15446,7 @@ label.pf-c-check, .pf-c-check__label,
15445
15446
  --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
15446
15447
  --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
15447
15448
  --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
15448
- color: var(--pf-global--Color--100);
15449
+ color: var(--pf-c-form-control--Color);
15449
15450
  width: var(--pf-c-form-control--Width);
15450
15451
  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
15451
15452
  font-size: var(--pf-c-form-control--FontSize);
@@ -15490,8 +15491,8 @@ label.pf-c-check, .pf-c-check__label,
15490
15491
  border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
15491
15492
  }
15492
15493
  .pf-c-form-control:disabled {
15493
- --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
15494
15494
  --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
15495
+ color: var(--pf-c-form-control--disabled--Color);
15495
15496
  cursor: not-allowed;
15496
15497
  border-color: var(--pf-c-form-control--disabled--BorderColor);
15497
15498
  }
@@ -22912,7 +22913,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22912
22913
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
22913
22914
  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
22914
22915
  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
22915
- --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
22916
+ --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
22916
22917
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
22917
22918
  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
22918
22919
  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);