@patternfly/patternfly 4.212.1 → 4.214.1
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/components/Icon/icon.css +119 -0
- package/components/Icon/icon.scss +149 -0
- package/components/ProgressStepper/progress-stepper.css +7 -4
- package/components/ProgressStepper/progress-stepper.scss +7 -4
- package/components/_all.scss +1 -0
- package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
- package/docs/components/FileUpload/examples/FileUpload.md +1 -1
- package/docs/components/Form/examples/Form.md +52 -50
- package/docs/components/FormControl/examples/FormControl.md +46 -25
- package/docs/components/Icon/examples/Icon.md +255 -0
- package/docs/components/LogViewer/examples/LogViewer.md +28 -28
- package/docs/components/Login/examples/Login.md +5 -5
- package/docs/components/SearchInput/examples/SearchInput.md +2 -2
- package/docs/components/TabContent/examples/TabContent.md +21 -11
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
- package/docs/components/Wizard/examples/Wizard.md +5 -5
- package/docs/demos/Alert/examples/Alert.md +2 -2
- package/docs/demos/Button/examples/Button.md +3 -3
- package/docs/demos/Form/examples/BasicForms.md +5 -5
- package/docs/demos/HelperText/examples/HelperText.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +1 -1
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/Wizard/examples/Wizard.md +1960 -748
- package/package.json +1 -1
- package/patternfly-no-reset.css +134 -4
- package/patternfly.css +134 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -7,7 +7,7 @@ cssPrefix: pf-c-form
|
|
|
7
7
|
### Vertically aligned labels
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<form
|
|
10
|
+
<form class="pf-c-form" novalidate>
|
|
11
11
|
<div class="pf-c-form__group">
|
|
12
12
|
<div class="pf-c-form__group-label">
|
|
13
13
|
<label class="pf-c-form__label" for="form-vertical-name">
|
|
@@ -39,7 +39,7 @@ cssPrefix: pf-c-form
|
|
|
39
39
|
### Horizontally aligned labels
|
|
40
40
|
|
|
41
41
|
```html
|
|
42
|
-
<form
|
|
42
|
+
<form class="pf-c-form pf-m-horizontal" novalidate>
|
|
43
43
|
<div class="pf-c-form__group">
|
|
44
44
|
<div class="pf-c-form__group-label">
|
|
45
45
|
<label class="pf-c-form__label" for="form-horizontal-name">
|
|
@@ -133,7 +133,7 @@ cssPrefix: pf-c-form
|
|
|
133
133
|
### Horizontal layout at a custom breakpoint
|
|
134
134
|
|
|
135
135
|
```html
|
|
136
|
-
<form
|
|
136
|
+
<form class="pf-c-form pf-m-horizontal-on-sm" novalidate>
|
|
137
137
|
<div class="pf-c-form__group">
|
|
138
138
|
<div class="pf-c-form__group-label">
|
|
139
139
|
<label
|
|
@@ -168,7 +168,7 @@ cssPrefix: pf-c-form
|
|
|
168
168
|
### Form sections
|
|
169
169
|
|
|
170
170
|
```html
|
|
171
|
-
<form
|
|
171
|
+
<form class="pf-c-form" novalidate>
|
|
172
172
|
<section class="pf-c-form__section" role="group">
|
|
173
173
|
<div class="pf-c-form__group">
|
|
174
174
|
<div class="pf-c-form__group-label">
|
|
@@ -265,7 +265,7 @@ cssPrefix: pf-c-form
|
|
|
265
265
|
### Help text
|
|
266
266
|
|
|
267
267
|
```html
|
|
268
|
-
<form
|
|
268
|
+
<form class="pf-c-form" novalidate>
|
|
269
269
|
<div class="pf-c-form__group">
|
|
270
270
|
<div class="pf-c-form__group-label">
|
|
271
271
|
<label class="pf-c-form__label" for="form-help-text-name">
|
|
@@ -389,7 +389,7 @@ cssPrefix: pf-c-form
|
|
|
389
389
|
### Label with additional info
|
|
390
390
|
|
|
391
391
|
```html
|
|
392
|
-
<form
|
|
392
|
+
<form class="pf-c-form" novalidate>
|
|
393
393
|
<div class="pf-c-form__group">
|
|
394
394
|
<div class="pf-c-form__group-label pf-m-info">
|
|
395
395
|
<div class="pf-c-form__group-label-main">
|
|
@@ -424,7 +424,7 @@ cssPrefix: pf-c-form
|
|
|
424
424
|
### Action group
|
|
425
425
|
|
|
426
426
|
```html
|
|
427
|
-
<form
|
|
427
|
+
<form class="pf-c-form" novalidate>
|
|
428
428
|
<div class="pf-c-form__group pf-m-action">
|
|
429
429
|
<div class="pf-c-form__actions">
|
|
430
430
|
<button class="pf-c-button pf-m-primary" type="submit">Submit form</button>
|
|
@@ -438,7 +438,7 @@ cssPrefix: pf-c-form
|
|
|
438
438
|
### Field group (non-expandable)
|
|
439
439
|
|
|
440
440
|
```html
|
|
441
|
-
<form
|
|
441
|
+
<form class="pf-c-form" novalidate>
|
|
442
442
|
<div
|
|
443
443
|
class="pf-c-form__field-group"
|
|
444
444
|
role="group"
|
|
@@ -526,7 +526,7 @@ cssPrefix: pf-c-form
|
|
|
526
526
|
### Expandable and nested field groups
|
|
527
527
|
|
|
528
528
|
```html
|
|
529
|
-
<form
|
|
529
|
+
<form class="pf-c-form" novalidate>
|
|
530
530
|
<div
|
|
531
531
|
class="pf-c-form__field-group"
|
|
532
532
|
role="group"
|
|
@@ -763,44 +763,46 @@ cssPrefix: pf-c-form
|
|
|
763
763
|
|
|
764
764
|
### Usage
|
|
765
765
|
|
|
766
|
-
| Class | Applied to | Outcome
|
|
767
|
-
| ------------------------------------------------- | -------------------------------------------------- |
|
|
768
|
-
| `.pf-c-form` | `<form>` | Initiates a standard form. **Required**
|
|
769
|
-
| `.pf-c-form__section` | `<div>, <section>` | Initiates a form section.
|
|
770
|
-
| `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title.
|
|
771
|
-
| `.pf-c-form__group` | `<div>` | Initiates a form group.
|
|
772
|
-
| `.pf-c-form__group-label` | `<div>` | Initiates a form group label.
|
|
773
|
-
| `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required**
|
|
774
|
-
| `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required**
|
|
775
|
-
| `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator.
|
|
776
|
-
| `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container.
|
|
777
|
-
| `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label.
|
|
778
|
-
| `.pf-c-form__group-label-help` | `<button>` | Initiates a field level help button.
|
|
779
|
-
| `.pf-c-form__group-control` | `<div>` | Initiates a form group control section.
|
|
780
|
-
| `.pf-c-form__actions` | `<div>` | Iniates a row of actions.
|
|
781
|
-
| `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block.
|
|
782
|
-
| `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon.
|
|
783
|
-
| `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts.
|
|
784
|
-
| `.pf-c-form__field-group` | `<div>` | Initiates a form field group.
|
|
785
|
-
| `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle.
|
|
786
|
-
| `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button.
|
|
787
|
-
| `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon.
|
|
788
|
-
| `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header.
|
|
789
|
-
| `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section.
|
|
790
|
-
| `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title.
|
|
791
|
-
| `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text.
|
|
792
|
-
| `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description.
|
|
793
|
-
| `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container.
|
|
794
|
-
| `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body.
|
|
795
|
-
| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`.
|
|
796
|
-
| `.pf-m-
|
|
797
|
-
| `.pf-m-
|
|
798
|
-
| `.pf-m-
|
|
799
|
-
| `.pf-m-
|
|
800
|
-
| `.pf-m-
|
|
801
|
-
| `.pf-m-
|
|
802
|
-
| `.pf-m-
|
|
803
|
-
| `.pf-m-
|
|
804
|
-
| `.pf-m-
|
|
805
|
-
| `.pf-m-
|
|
806
|
-
| `.pf-m-
|
|
766
|
+
| Class | Applied to | Outcome |
|
|
767
|
+
| ------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
768
|
+
| `.pf-c-form` | `<form>` | Initiates a standard form. **Required** |
|
|
769
|
+
| `.pf-c-form__section` | `<div>, <section>` | Initiates a form section. |
|
|
770
|
+
| `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title. |
|
|
771
|
+
| `.pf-c-form__group` | `<div>` | Initiates a form group. |
|
|
772
|
+
| `.pf-c-form__group-label` | `<div>` | Initiates a form group label. |
|
|
773
|
+
| `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required** |
|
|
774
|
+
| `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required** |
|
|
775
|
+
| `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
|
|
776
|
+
| `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
|
|
777
|
+
| `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
|
|
778
|
+
| `.pf-c-form__group-label-help` | `<button>` | Initiates a field level help button. |
|
|
779
|
+
| `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
|
|
780
|
+
| `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
|
|
781
|
+
| `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
|
|
782
|
+
| `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
|
|
783
|
+
| `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
|
|
784
|
+
| `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
|
|
785
|
+
| `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
|
|
786
|
+
| `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
|
|
787
|
+
| `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
|
|
788
|
+
| `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
|
|
789
|
+
| `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
|
|
790
|
+
| `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
|
|
791
|
+
| `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
|
|
792
|
+
| `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
|
|
793
|
+
| `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
|
|
794
|
+
| `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
|
|
795
|
+
| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
|
|
796
|
+
| `.pf-m-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
|
|
797
|
+
| `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
|
|
798
|
+
| `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
|
|
799
|
+
| `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
|
|
800
|
+
| `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
|
|
801
|
+
| `.pf-m-error` | `.pf-c-form__helper-text` | Modifies text color of helper text for error state. |
|
|
802
|
+
| `.pf-m-inactive` | `.pf-c-form__helper-text` | Modifies display of helper text to none. |
|
|
803
|
+
| `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
|
|
804
|
+
| `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
|
|
805
|
+
| `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
|
|
806
|
+
| `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
|
|
807
|
+
| `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
|
|
808
|
+
| `--pf-c-form--m-limit-width--MaxWidth` | `.pf-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |
|
|
@@ -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
|
|
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. |
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Icon'
|
|
3
|
+
beta: true
|
|
4
|
+
section: components
|
|
5
|
+
cssPrefix: pf-c-icon
|
|
6
|
+
---## Examples
|
|
7
|
+
|
|
8
|
+
### Basic
|
|
9
|
+
|
|
10
|
+
```html
|
|
11
|
+
<span class="pf-c-icon">
|
|
12
|
+
<span class="pf-c-icon__content">
|
|
13
|
+
<i class="fas fa-long-arrow-alt-down" aria-hidden="true"></i>
|
|
14
|
+
</span>
|
|
15
|
+
</span>
|
|
16
|
+
|
|
17
|
+
<span class="pf-c-icon">
|
|
18
|
+
<span class="pf-c-icon__content">
|
|
19
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
20
|
+
</span>
|
|
21
|
+
</span>
|
|
22
|
+
|
|
23
|
+
<span class="pf-c-icon">
|
|
24
|
+
<span class="pf-c-icon__content">
|
|
25
|
+
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
26
|
+
</span>
|
|
27
|
+
</span>
|
|
28
|
+
|
|
29
|
+
<span class="pf-c-icon">
|
|
30
|
+
<span class="pf-c-icon__content">
|
|
31
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
32
|
+
</span>
|
|
33
|
+
</span>
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Sizes
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<span class="pf-c-icon pf-m-sm">
|
|
41
|
+
<span class="pf-c-icon__content">
|
|
42
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
43
|
+
</span>
|
|
44
|
+
</span>
|
|
45
|
+
<span class="pf-c-icon pf-m-md">
|
|
46
|
+
<span class="pf-c-icon__content">
|
|
47
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
48
|
+
</span>
|
|
49
|
+
</span>
|
|
50
|
+
<span class="pf-c-icon pf-m-lg">
|
|
51
|
+
<span class="pf-c-icon__content">
|
|
52
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
53
|
+
</span>
|
|
54
|
+
</span>
|
|
55
|
+
<span class="pf-c-icon pf-m-xl">
|
|
56
|
+
<span class="pf-c-icon__content">
|
|
57
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
58
|
+
</span>
|
|
59
|
+
</span>
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Status colors
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<span class="pf-c-icon">
|
|
67
|
+
<span class="pf-c-icon__content pf-m-danger">
|
|
68
|
+
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
69
|
+
</span>
|
|
70
|
+
</span>
|
|
71
|
+
<span class="pf-c-icon">
|
|
72
|
+
<span class="pf-c-icon__content pf-m-warning">
|
|
73
|
+
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
|
|
74
|
+
</span>
|
|
75
|
+
</span>
|
|
76
|
+
<span class="pf-c-icon">
|
|
77
|
+
<span class="pf-c-icon__content pf-m-success">
|
|
78
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
79
|
+
</span>
|
|
80
|
+
</span>
|
|
81
|
+
<span class="pf-c-icon">
|
|
82
|
+
<span class="pf-c-icon__content pf-m-info">
|
|
83
|
+
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
84
|
+
</span>
|
|
85
|
+
</span>
|
|
86
|
+
<span class="pf-c-icon">
|
|
87
|
+
<span class="pf-c-icon__content pf-m-default">
|
|
88
|
+
<i class="fas fa-bell" aria-hidden="true"></i>
|
|
89
|
+
</span>
|
|
90
|
+
</span>
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Sizing content within the icon container
|
|
95
|
+
|
|
96
|
+
Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<span class="pf-c-icon pf-m-xl pf-m-inline">
|
|
100
|
+
<span class="pf-c-icon__content pf-m-sm">
|
|
101
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
102
|
+
</span>
|
|
103
|
+
</span>
|
|
104
|
+
<span class="pf-c-icon pf-m-xl pf-m-inline">
|
|
105
|
+
<span class="pf-c-icon__content pf-m-md">
|
|
106
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
107
|
+
</span>
|
|
108
|
+
</span>
|
|
109
|
+
<span class="pf-c-icon pf-m-xl pf-m-inline">
|
|
110
|
+
<span class="pf-c-icon__content pf-m-lg">
|
|
111
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
112
|
+
</span>
|
|
113
|
+
</span>
|
|
114
|
+
<span class="pf-c-icon pf-m-xl pf-m-inline">
|
|
115
|
+
<span class="pf-c-icon__content pf-m-xl">
|
|
116
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
117
|
+
</span>
|
|
118
|
+
</span>
|
|
119
|
+
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Inline
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<div class="pf-c-content">
|
|
126
|
+
<h1>
|
|
127
|
+
Heading
|
|
128
|
+
<span class="pf-c-icon pf-m-inline">
|
|
129
|
+
<span class="pf-c-icon__content">
|
|
130
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
131
|
+
</span>
|
|
132
|
+
</span>
|
|
133
|
+
</h1>
|
|
134
|
+
<p>
|
|
135
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
136
|
+
Sed hendrerit nisi in cursus maximus.
|
|
137
|
+
</p>
|
|
138
|
+
<h2>
|
|
139
|
+
Second level
|
|
140
|
+
<span class="pf-c-icon pf-m-inline">
|
|
141
|
+
<span class="pf-c-icon__content">
|
|
142
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
143
|
+
</span>
|
|
144
|
+
</span>
|
|
145
|
+
</h2>
|
|
146
|
+
<p>
|
|
147
|
+
<span class="pf-c-icon pf-m-inline">
|
|
148
|
+
<span class="pf-c-icon__content">
|
|
149
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
150
|
+
</span>
|
|
151
|
+
</span>
|
|
152
|
+
Curabitur accumsan turpis pharetra
|
|
153
|
+
<strong>
|
|
154
|
+
augue tincidunt
|
|
155
|
+
<span class="pf-c-icon pf-m-inline">
|
|
156
|
+
<span class="pf-c-icon__content">
|
|
157
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
158
|
+
</span>
|
|
159
|
+
</span>
|
|
160
|
+
</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel
|
|
161
|
+
cursus venenatis. Suspendisse potenti.
|
|
162
|
+
</p>
|
|
163
|
+
<small>
|
|
164
|
+
Sometimes you need small text
|
|
165
|
+
<span class="pf-c-icon pf-m-inline">
|
|
166
|
+
<span class="pf-c-icon__content">
|
|
167
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
168
|
+
</span>
|
|
169
|
+
</span>
|
|
170
|
+
</small>
|
|
171
|
+
</div>Inline with size specified:
|
|
172
|
+
<span class="pf-c-icon pf-m-sm pf-m-inline">
|
|
173
|
+
<span class="pf-c-icon__content">
|
|
174
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
175
|
+
</span>
|
|
176
|
+
</span>
|
|
177
|
+
small,
|
|
178
|
+
<span class="pf-c-icon pf-m-md pf-m-inline">
|
|
179
|
+
<span class="pf-c-icon__content">
|
|
180
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
181
|
+
</span>
|
|
182
|
+
</span>
|
|
183
|
+
medium,
|
|
184
|
+
<span class="pf-c-icon pf-m-lg pf-m-inline">
|
|
185
|
+
<span class="pf-c-icon__content">
|
|
186
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
187
|
+
</span>
|
|
188
|
+
</span>
|
|
189
|
+
large,
|
|
190
|
+
<span class="pf-c-icon pf-m-xl pf-m-inline">
|
|
191
|
+
<span class="pf-c-icon__content">
|
|
192
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
193
|
+
</span>
|
|
194
|
+
</span>
|
|
195
|
+
extra large
|
|
196
|
+
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### In progress
|
|
200
|
+
|
|
201
|
+
```html
|
|
202
|
+
<span class="pf-c-icon pf-m-md pf-m-in-progress">
|
|
203
|
+
<span class="pf-c-icon__content">
|
|
204
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
205
|
+
</span>
|
|
206
|
+
<span class="pf-c-icon__progress">
|
|
207
|
+
<svg
|
|
208
|
+
class="pf-c-spinner pf-m-md"
|
|
209
|
+
role="progressbar"
|
|
210
|
+
viewBox="0 0 100 100"
|
|
211
|
+
aria-label="Loading..."
|
|
212
|
+
>
|
|
213
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
214
|
+
</svg>
|
|
215
|
+
</span>
|
|
216
|
+
</span>
|
|
217
|
+
|
|
218
|
+
<span class="pf-c-icon pf-m-md">
|
|
219
|
+
<span class="pf-c-icon__content">
|
|
220
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
221
|
+
</span>
|
|
222
|
+
<span class="pf-c-icon__progress">
|
|
223
|
+
<svg
|
|
224
|
+
class="pf-c-spinner pf-m-md"
|
|
225
|
+
role="progressbar"
|
|
226
|
+
viewBox="0 0 100 100"
|
|
227
|
+
aria-label="Loading..."
|
|
228
|
+
>
|
|
229
|
+
<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
230
|
+
</svg>
|
|
231
|
+
</span>
|
|
232
|
+
</span>
|
|
233
|
+
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
## Documentation
|
|
237
|
+
|
|
238
|
+
### Overview
|
|
239
|
+
|
|
240
|
+
The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
|
|
241
|
+
|
|
242
|
+
Refer to the [icons](/guidelines/icons) page for information about the PatternFly icon set and guidelines for use.
|
|
243
|
+
|
|
244
|
+
### Usage
|
|
245
|
+
|
|
246
|
+
| Class | Applied to | Outcome |
|
|
247
|
+
| ------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
248
|
+
| `.pf-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required** |
|
|
249
|
+
| `.pf-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required** |
|
|
250
|
+
| `.pf-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner. |
|
|
251
|
+
| `.pf-m-inline` | `.pf-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
|
|
252
|
+
| `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
|
|
253
|
+
| `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
|
|
254
|
+
| `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content. |
|
|
255
|
+
| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default` | `.pf-c-icon__content` | Modifies the icon content to use a status color. |
|