@patternfly/patternfly 4.213.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.
- package/components/FormControl/form-control.css +7 -0
- package/components/FormControl/form-control.scss +11 -0
- package/docs/components/FormControl/examples/FormControl.md +34 -13
- package/package.json +1 -1
- package/patternfly-no-reset.css +7 -0
- package/patternfly.css +7 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -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
|
}
|
|
@@ -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 {
|
|
@@ -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
|
|
@@ -487,16 +507,17 @@ cssPrefix: pf-c-form-control
|
|
|
487
507
|
|
|
488
508
|
### Usage
|
|
489
509
|
|
|
490
|
-
| Class | Applied to
|
|
491
|
-
| ------------------------- |
|
|
492
|
-
| `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>`
|
|
493
|
-
| `.pf-m-resize-vertical` | `textarea.pf-m-form-control`
|
|
494
|
-
| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control`
|
|
495
|
-
| `.pf-m-success` | `.pf-c-form-control`
|
|
496
|
-
| `.pf-m-warning` | `.pf-c-form-control`
|
|
497
|
-
| `.pf-m-icon-sprite` | `.pf-c-form-control`
|
|
498
|
-
| `.pf-m-icon` | `input.pf-c-form-control`
|
|
499
|
-
| `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon`
|
|
500
|
-
| `.pf-m-clock` | `.pf-c-form-control.pf-m-icon`
|
|
501
|
-
| `.pf-m-expanded` | `input.pf-c-form-control`
|
|
502
|
-
| `.pf-m-placeholder` | `select.pf-c-form-control`
|
|
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. |
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -15299,6 +15299,8 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
15299
15299
|
--pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
|
|
15300
15300
|
--pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
15301
15301
|
--pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
|
|
15302
|
+
--pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
|
|
15303
|
+
--pf-c-form-control--readonly--m-plain--inset--base: 0;
|
|
15302
15304
|
--pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
15303
15305
|
--pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
|
|
15304
15306
|
--pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
|
|
@@ -15419,6 +15421,11 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
15419
15421
|
--pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
|
|
15420
15422
|
--pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
|
|
15421
15423
|
}
|
|
15424
|
+
.pf-c-form-control[readonly].pf-m-plain {
|
|
15425
|
+
--pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
|
|
15426
|
+
--pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
|
|
15427
|
+
border-color: transparent;
|
|
15428
|
+
}
|
|
15422
15429
|
.pf-c-form-control:hover {
|
|
15423
15430
|
--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
|
|
15424
15431
|
}
|
package/patternfly.css
CHANGED
|
@@ -15426,6 +15426,8 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
15426
15426
|
--pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
|
|
15427
15427
|
--pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
|
|
15428
15428
|
--pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
|
|
15429
|
+
--pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
|
|
15430
|
+
--pf-c-form-control--readonly--m-plain--inset--base: 0;
|
|
15429
15431
|
--pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
|
|
15430
15432
|
--pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
|
|
15431
15433
|
--pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
|
|
@@ -15546,6 +15548,11 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
15546
15548
|
--pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
|
|
15547
15549
|
--pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
|
|
15548
15550
|
}
|
|
15551
|
+
.pf-c-form-control[readonly].pf-m-plain {
|
|
15552
|
+
--pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
|
|
15553
|
+
--pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
|
|
15554
|
+
border-color: transparent;
|
|
15555
|
+
}
|
|
15549
15556
|
.pf-c-form-control:hover {
|
|
15550
15557
|
--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
|
|
15551
15558
|
}
|