@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.33
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/DatePicker/date-picker.css +0 -8
- package/components/DatePicker/date-picker.scss +0 -9
- package/components/HelperText/helper-text.css +4 -0
- package/components/HelperText/helper-text.scss +5 -0
- package/components/InputGroup/input-group.css +61 -85
- package/components/InputGroup/input-group.scss +55 -61
- package/components/InputGroup/themes/dark/input-group.scss +11 -25
- package/components/OptionsMenu/options-menu.css +0 -5
- package/components/OptionsMenu/options-menu.scss +0 -6
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
- package/docs/components/DatePicker/examples/DatePicker.md +129 -94
- package/docs/components/FileUpload/examples/FileUpload.md +136 -96
- package/docs/components/Form/examples/Form.md +94 -73
- package/docs/components/HelperText/examples/HelperText.md +13 -24
- package/docs/components/InputGroup/examples/InputGroup.md +219 -169
- package/docs/components/Login/examples/Login.md +67 -30
- package/docs/components/NumberInput/examples/NumberInput.md +299 -227
- package/docs/components/Progress/examples/Progress.md +1 -1
- package/docs/components/SearchInput/examples/SearchInput.md +151 -113
- package/docs/components/Slider/examples/Slider.md +60 -38
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
- package/docs/components/Toolbar/examples/Toolbar.md +374 -345
- package/docs/demos/Alert/examples/Alert.md +105 -58
- package/docs/demos/DataList/examples/DataList.md +158 -150
- package/docs/demos/Form/examples/BasicForms.md +191 -191
- package/docs/demos/HelperText/examples/HelperText.md +11 -8
- package/docs/demos/Masthead/examples/Masthead.md +279 -258
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
- package/docs/demos/Table/examples/Table.md +950 -902
- package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
- package/package.json +2 -2
- package/patternfly-no-reset.css +64 -87
- package/patternfly.css +64 -87
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -8,7 +8,7 @@ section: components
|
|
|
8
8
|
```html
|
|
9
9
|
<form class="pf-c-form" novalidate>
|
|
10
10
|
<div class="pf-c-form__group">
|
|
11
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="
|
|
11
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-name">
|
|
12
12
|
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="pf-c-form__group-control">
|
|
@@ -16,37 +16,36 @@ section: components
|
|
|
16
16
|
class="pf-c-form-control"
|
|
17
17
|
required
|
|
18
18
|
type="text"
|
|
19
|
-
id="
|
|
20
|
-
name="
|
|
21
|
-
aria-describedby="
|
|
19
|
+
id="-name"
|
|
20
|
+
name="-name"
|
|
21
|
+
aria-describedby="-name-helper"
|
|
22
22
|
/>
|
|
23
23
|
|
|
24
|
-
<
|
|
25
|
-
class="pf-c-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
25
|
+
<div class="pf-c-helper-text">
|
|
26
|
+
<div class="pf-c-helper-text__item" id="-name-helper">
|
|
27
|
+
<span
|
|
28
|
+
class="pf-c-helper-text__item-text"
|
|
29
|
+
>Include your middle name if you have one.</span>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
29
33
|
</div>
|
|
30
34
|
</div>
|
|
31
35
|
<div class="pf-c-form__group">
|
|
32
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="
|
|
36
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-email">
|
|
33
37
|
<span class="pf-c-form__label-text">Email</span></label>
|
|
34
38
|
</div>
|
|
35
39
|
<div class="pf-c-form__group-control">
|
|
36
|
-
<input
|
|
37
|
-
class="pf-c-form-control"
|
|
38
|
-
type="email"
|
|
39
|
-
id="form-demo-basic-email"
|
|
40
|
-
name="form-demo-basic-email"
|
|
41
|
-
/>
|
|
40
|
+
<input class="pf-c-form-control" type="email" id="-email" name="-email" />
|
|
42
41
|
</div>
|
|
43
42
|
</div>
|
|
44
43
|
<div class="pf-c-form__group">
|
|
45
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="
|
|
44
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-phone">
|
|
46
45
|
<span class="pf-c-form__label-text">Phone number</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
47
46
|
class="pf-c-form__group-label-help"
|
|
48
47
|
aria-label="More information for phone number field"
|
|
49
|
-
aria-describedby="
|
|
48
|
+
aria-describedby="-phone"
|
|
50
49
|
role="button"
|
|
51
50
|
type="button"
|
|
52
51
|
tabindex="0"
|
|
@@ -58,8 +57,8 @@ section: components
|
|
|
58
57
|
required
|
|
59
58
|
type="tel"
|
|
60
59
|
placeholder="555-555-5555"
|
|
61
|
-
id="
|
|
62
|
-
name="
|
|
60
|
+
id="-phone"
|
|
61
|
+
name="-phone"
|
|
63
62
|
/>
|
|
64
63
|
</div>
|
|
65
64
|
</div>
|
|
@@ -76,40 +75,31 @@ section: components
|
|
|
76
75
|
<input
|
|
77
76
|
class="pf-c-check__input"
|
|
78
77
|
type="checkbox"
|
|
79
|
-
id="
|
|
80
|
-
name="
|
|
78
|
+
id="-contact-check-1"
|
|
79
|
+
name="-contact-check-1"
|
|
81
80
|
/>
|
|
82
81
|
|
|
83
|
-
<label
|
|
84
|
-
class="pf-c-check__label"
|
|
85
|
-
for="form-demo-basic-contact-check-1"
|
|
86
|
-
>Email</label>
|
|
82
|
+
<label class="pf-c-check__label" for="-contact-check-1">Email</label>
|
|
87
83
|
</div>
|
|
88
84
|
<div class="pf-c-check">
|
|
89
85
|
<input
|
|
90
86
|
class="pf-c-check__input"
|
|
91
87
|
type="checkbox"
|
|
92
|
-
id="
|
|
93
|
-
name="
|
|
88
|
+
id="-contact-check-2"
|
|
89
|
+
name="-contact-check-2"
|
|
94
90
|
/>
|
|
95
91
|
|
|
96
|
-
<label
|
|
97
|
-
class="pf-c-check__label"
|
|
98
|
-
for="form-demo-basic-contact-check-2"
|
|
99
|
-
>Phone</label>
|
|
92
|
+
<label class="pf-c-check__label" for="-contact-check-2">Phone</label>
|
|
100
93
|
</div>
|
|
101
94
|
<div class="pf-c-check">
|
|
102
95
|
<input
|
|
103
96
|
class="pf-c-check__input"
|
|
104
97
|
type="checkbox"
|
|
105
|
-
id="
|
|
106
|
-
name="
|
|
98
|
+
id="-contact-check-3"
|
|
99
|
+
name="-contact-check-3"
|
|
107
100
|
/>
|
|
108
101
|
|
|
109
|
-
<label
|
|
110
|
-
class="pf-c-check__label"
|
|
111
|
-
for="form-demo-basic-contact-check-3"
|
|
112
|
-
>Mail</label>
|
|
102
|
+
<label class="pf-c-check__label" for="-contact-check-3">Mail</label>
|
|
113
103
|
</div>
|
|
114
104
|
</div>
|
|
115
105
|
</div>
|
|
@@ -126,40 +116,31 @@ section: components
|
|
|
126
116
|
<input
|
|
127
117
|
class="pf-c-radio__input"
|
|
128
118
|
type="radio"
|
|
129
|
-
id="
|
|
130
|
-
name="
|
|
119
|
+
id="-time-zone-radio-1"
|
|
120
|
+
name="-time-zone-radio"
|
|
131
121
|
/>
|
|
132
122
|
|
|
133
|
-
<label
|
|
134
|
-
class="pf-c-radio__label"
|
|
135
|
-
for="form-demo-basic-time-zone-radio-1"
|
|
136
|
-
>Eastern</label>
|
|
123
|
+
<label class="pf-c-radio__label" for="-time-zone-radio-1">Eastern</label>
|
|
137
124
|
</div>
|
|
138
125
|
<div class="pf-c-radio">
|
|
139
126
|
<input
|
|
140
127
|
class="pf-c-radio__input"
|
|
141
128
|
type="radio"
|
|
142
|
-
id="
|
|
143
|
-
name="
|
|
129
|
+
id="-time-zone-radio-2"
|
|
130
|
+
name="-time-zone-radio"
|
|
144
131
|
/>
|
|
145
132
|
|
|
146
|
-
<label
|
|
147
|
-
class="pf-c-radio__label"
|
|
148
|
-
for="form-demo-basic-time-zone-radio-2"
|
|
149
|
-
>Central</label>
|
|
133
|
+
<label class="pf-c-radio__label" for="-time-zone-radio-2">Central</label>
|
|
150
134
|
</div>
|
|
151
135
|
<div class="pf-c-radio">
|
|
152
136
|
<input
|
|
153
137
|
class="pf-c-radio__input"
|
|
154
138
|
type="radio"
|
|
155
|
-
id="
|
|
156
|
-
name="
|
|
139
|
+
id="-time-zone-radio-3"
|
|
140
|
+
name="-time-zone-radio"
|
|
157
141
|
/>
|
|
158
142
|
|
|
159
|
-
<label
|
|
160
|
-
class="pf-c-radio__label"
|
|
161
|
-
for="form-demo-basic-time-zone-radio-3"
|
|
162
|
-
>Pacific</label>
|
|
143
|
+
<label class="pf-c-radio__label" for="-time-zone-radio-3">Pacific</label>
|
|
163
144
|
</div>
|
|
164
145
|
</div>
|
|
165
146
|
</div>
|
|
@@ -180,7 +161,7 @@ section: components
|
|
|
180
161
|
```html
|
|
181
162
|
<form class="pf-c-form pf-m-horizontal" novalidate>
|
|
182
163
|
<div class="pf-c-form__group -name">
|
|
183
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal">
|
|
164
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal-name">
|
|
184
165
|
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
185
166
|
</div>
|
|
186
167
|
<div class="pf-c-form__group-control">
|
|
@@ -188,15 +169,22 @@ section: components
|
|
|
188
169
|
class="pf-c-form-control"
|
|
189
170
|
required
|
|
190
171
|
type="text"
|
|
191
|
-
id="form-demo-horizontal"
|
|
192
|
-
name="form-demo-horizontal"
|
|
193
|
-
aria-describedby="form-demo-horizontal-helper"
|
|
172
|
+
id="form-demo-horizontal-name"
|
|
173
|
+
name="form-demo-horizontal-name"
|
|
174
|
+
aria-describedby="form-demo-horizontal-name-helper"
|
|
194
175
|
/>
|
|
195
|
-
<
|
|
196
|
-
class="pf-c-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
176
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
177
|
+
<div class="pf-c-helper-text">
|
|
178
|
+
<div
|
|
179
|
+
class="pf-c-helper-text__item"
|
|
180
|
+
id="form-demo-horizontal-name-helper"
|
|
181
|
+
>
|
|
182
|
+
<span
|
|
183
|
+
class="pf-c-helper-text__item-text"
|
|
184
|
+
>Include your middle name if you have one.</span>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
200
188
|
</div>
|
|
201
189
|
</div>
|
|
202
190
|
<div class="pf-c-form__group">
|
|
@@ -229,11 +217,11 @@ section: components
|
|
|
229
217
|
<div
|
|
230
218
|
class="pf-c-form__group"
|
|
231
219
|
role="group"
|
|
232
|
-
aria-labelledby="form-demo-horizontal-contact-legend"
|
|
220
|
+
aria-labelledby="form-demo-horizontalform-demo-horizontal-contact-legend"
|
|
233
221
|
>
|
|
234
222
|
<div
|
|
235
223
|
class="pf-c-form__group-label pf-m-no-padding-top"
|
|
236
|
-
id="form-demo-horizontal-contact-legend"
|
|
224
|
+
id="form-demo-horizontalform-demo-horizontal-contact-legend"
|
|
237
225
|
><span class="pf-c-form__label">
|
|
238
226
|
<span class="pf-c-form__label-text">How can we contact you?</span></span> <span
|
|
239
227
|
class="pf-c-form__group-label-help"
|
|
@@ -317,11 +305,15 @@ section: components
|
|
|
317
305
|
aria-describedby="form-demo-grid-name-helper"
|
|
318
306
|
/>
|
|
319
307
|
|
|
320
|
-
<
|
|
321
|
-
class="pf-c-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
308
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
309
|
+
<div class="pf-c-helper-text">
|
|
310
|
+
<div class="pf-c-helper-text__item" id="-helper">
|
|
311
|
+
<span
|
|
312
|
+
class="pf-c-helper-text__item-text"
|
|
313
|
+
>Include your middle name if you have one.</span>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
325
317
|
</div>
|
|
326
318
|
</div>
|
|
327
319
|
<div class="pf-c-form__group">
|
|
@@ -569,12 +561,12 @@ section: components
|
|
|
569
561
|
<div class="pf-c-form__group">
|
|
570
562
|
<div class="pf-c-form__group-label"><label
|
|
571
563
|
class="pf-c-form__label"
|
|
572
|
-
for="form-demo-sections-repeatable-fields-rooturl"
|
|
564
|
+
for="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
573
565
|
>
|
|
574
566
|
<span class="pf-c-form__label-text">Root URL</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
575
567
|
class="pf-c-form__group-label-help"
|
|
576
568
|
aria-label="More information for root URL field"
|
|
577
|
-
aria-describedby="form-demo-sections-repeatable-fields-rooturl"
|
|
569
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
578
570
|
role="button"
|
|
579
571
|
type="button"
|
|
580
572
|
tabindex="0"
|
|
@@ -585,20 +577,20 @@ section: components
|
|
|
585
577
|
class="pf-c-form-control"
|
|
586
578
|
required
|
|
587
579
|
type="text"
|
|
588
|
-
id="form-demo-sections-repeatable-fields-rooturl"
|
|
589
|
-
name="form-demo-sections-repeatable-fields-rooturl"
|
|
580
|
+
id="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
581
|
+
name="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
590
582
|
/>
|
|
591
583
|
</div>
|
|
592
584
|
</div>
|
|
593
585
|
<div class="pf-c-form__group">
|
|
594
586
|
<div class="pf-c-form__group-label"><label
|
|
595
587
|
class="pf-c-form__label"
|
|
596
|
-
id="form-demo-sections-repeatable-fields-uris"
|
|
588
|
+
id="form-demo-sections-repeatable-fields-section2-uris"
|
|
597
589
|
>
|
|
598
590
|
<span class="pf-c-form__label-text">Valid redirect URIs</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
599
591
|
class="pf-c-form__group-label-help"
|
|
600
592
|
aria-label="More information for valid redirect URIs field"
|
|
601
|
-
aria-describedby="form-demo-sections-repeatable-fields-uris"
|
|
593
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
|
|
602
594
|
role="button"
|
|
603
595
|
type="button"
|
|
604
596
|
tabindex="0"
|
|
@@ -606,58 +598,67 @@ section: components
|
|
|
606
598
|
</div>
|
|
607
599
|
<div class="pf-c-form__group-control pf-m-stack">
|
|
608
600
|
<div class="pf-c-input-group">
|
|
609
|
-
<input
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
601
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
602
|
+
<input
|
|
603
|
+
class="pf-c-form-control"
|
|
604
|
+
required
|
|
605
|
+
type="text"
|
|
606
|
+
id="form-demo-sections-repeatable-fields-section2-uris-input-1"
|
|
607
|
+
name="form-demo-sections-repeatable-fields-section2-uris-input-1"
|
|
608
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1"
|
|
609
|
+
/>
|
|
610
|
+
</div>
|
|
611
|
+
<div class="pf-c-input-group__item pf-m-plain">
|
|
612
|
+
<button
|
|
613
|
+
class="pf-c-button pf-m-plain"
|
|
614
|
+
type="button"
|
|
615
|
+
aria-label="Remove"
|
|
616
|
+
>
|
|
617
|
+
<i class="fas fa-minus-circle" aria-hidden="true"></i>
|
|
618
|
+
</button>
|
|
619
|
+
</div>
|
|
625
620
|
</div>
|
|
626
621
|
<div class="pf-c-input-group">
|
|
627
|
-
<input
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
622
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
623
|
+
<input
|
|
624
|
+
class="pf-c-form-control"
|
|
625
|
+
required
|
|
626
|
+
type="text"
|
|
627
|
+
id="form-demo-sections-repeatable-fields-section2-uris-input-2"
|
|
628
|
+
name="form-demo-sections-repeatable-fields-section2-uris-input-2"
|
|
629
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2"
|
|
630
|
+
/>
|
|
631
|
+
</div>
|
|
632
|
+
<div class="pf-c-input-group__item pf-m-plain">
|
|
633
|
+
<button
|
|
634
|
+
class="pf-c-button pf-m-plain"
|
|
635
|
+
type="button"
|
|
636
|
+
aria-label="Remove"
|
|
637
|
+
>
|
|
638
|
+
<i class="fas fa-minus-circle" aria-hidden="true"></i>
|
|
639
|
+
</button>
|
|
640
|
+
</div>
|
|
643
641
|
</div>
|
|
644
642
|
<div class="pf-c-input-group">
|
|
645
|
-
<input
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
643
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
644
|
+
<input
|
|
645
|
+
class="pf-c-form-control"
|
|
646
|
+
required
|
|
647
|
+
type="text"
|
|
648
|
+
id="form-demo-sections-repeatable-fields-section2-uris-input-3"
|
|
649
|
+
name="form-demo-sections-repeatable-fields-section2-uris-input-3"
|
|
650
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3"
|
|
651
|
+
/>
|
|
652
|
+
</div>
|
|
653
|
+
<div class="pf-c-input-group__item pf-m-plain">
|
|
654
|
+
<button
|
|
655
|
+
class="pf-c-button pf-m-plain"
|
|
656
|
+
type="button"
|
|
657
|
+
aria-label="Remove"
|
|
658
|
+
>
|
|
659
|
+
<i class="fas fa-minus-circle" aria-hidden="true"></i>
|
|
660
|
+
</button>
|
|
661
|
+
</div>
|
|
661
662
|
</div>
|
|
662
663
|
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
663
664
|
<span class="pf-c-button__icon pf-m-start">
|
|
@@ -670,12 +671,12 @@ section: components
|
|
|
670
671
|
<div class="pf-c-form__group">
|
|
671
672
|
<div class="pf-c-form__group-label"><label
|
|
672
673
|
class="pf-c-form__label"
|
|
673
|
-
for="form-demo-sections-repeatable-fields-home-url"
|
|
674
|
+
for="form-demo-sections-repeatable-fields-section2-home-url"
|
|
674
675
|
>
|
|
675
676
|
<span class="pf-c-form__label-text">Home URL</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
676
677
|
class="pf-c-form__group-label-help"
|
|
677
678
|
aria-label="More information for home URL field"
|
|
678
|
-
aria-describedby="form-demo-sections-repeatable-fields-home-url"
|
|
679
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
|
|
679
680
|
role="button"
|
|
680
681
|
type="button"
|
|
681
682
|
tabindex="0"
|
|
@@ -686,8 +687,8 @@ section: components
|
|
|
686
687
|
class="pf-c-form-control"
|
|
687
688
|
required
|
|
688
689
|
type="text"
|
|
689
|
-
id="form-demo-sections-repeatable-fields-home-url"
|
|
690
|
-
name="form-demo-sections-repeatable-fields-home-url"
|
|
690
|
+
id="form-demo-sections-repeatable-fields-section2-home-url"
|
|
691
|
+
name="form-demo-sections-repeatable-fields-section2-home-url"
|
|
691
692
|
/>
|
|
692
693
|
</div>
|
|
693
694
|
</div>
|
|
@@ -703,12 +704,12 @@ section: components
|
|
|
703
704
|
<div class="pf-c-form__group">
|
|
704
705
|
<div class="pf-c-form__group-label"><label
|
|
705
706
|
class="pf-c-form__label"
|
|
706
|
-
for="form-demo-sections-complex-
|
|
707
|
+
for="form-demo-sections-complex-form-name"
|
|
707
708
|
>
|
|
708
709
|
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
709
710
|
class="pf-c-form__group-label-help"
|
|
710
711
|
aria-label="More information for name field"
|
|
711
|
-
aria-describedby="form-demo-sections-complex-
|
|
712
|
+
aria-describedby="form-demo-sections-complex-form-name"
|
|
712
713
|
role="button"
|
|
713
714
|
type="button"
|
|
714
715
|
tabindex="0"
|
|
@@ -718,8 +719,8 @@ section: components
|
|
|
718
719
|
<input
|
|
719
720
|
class="pf-c-form-control"
|
|
720
721
|
type="text"
|
|
721
|
-
id="form-demo-sections-complex-
|
|
722
|
-
name="form-demo-sections-complex-
|
|
722
|
+
id="form-demo-sections-complex-form-name"
|
|
723
|
+
name="form-demo-sections-complex-form-name"
|
|
723
724
|
required
|
|
724
725
|
/>
|
|
725
726
|
</div>
|
|
@@ -728,12 +729,12 @@ section: components
|
|
|
728
729
|
<div class="pf-c-form__group">
|
|
729
730
|
<div class="pf-c-form__group-label"><label
|
|
730
731
|
class="pf-c-form__label"
|
|
731
|
-
for="form-demo-sections-complex-
|
|
732
|
+
for="form-demo-sections-complex-form-labels"
|
|
732
733
|
>
|
|
733
734
|
<span class="pf-c-form__label-text">Labels</span></label> <span
|
|
734
735
|
class="pf-c-form__group-label-help"
|
|
735
736
|
aria-label="More information for labels field"
|
|
736
|
-
aria-describedby="form-demo-sections-complex-
|
|
737
|
+
aria-describedby="form-demo-sections-complex-form-labels"
|
|
737
738
|
role="button"
|
|
738
739
|
type="button"
|
|
739
740
|
tabindex="0"
|
|
@@ -742,7 +743,7 @@ section: components
|
|
|
742
743
|
<div class="pf-c-form__group-control">
|
|
743
744
|
<div
|
|
744
745
|
class="pf-c-text-input-group"
|
|
745
|
-
id="form-demo-sections-complex-
|
|
746
|
+
id="form-demo-sections-complex-form-labels"
|
|
746
747
|
>
|
|
747
748
|
<div class="pf-c-text-input-group__main">
|
|
748
749
|
<div class="pf-c-label-group">
|
|
@@ -1038,7 +1039,7 @@ section: components
|
|
|
1038
1039
|
<div class="pf-c-form__group">
|
|
1039
1040
|
<div class="pf-c-form__group-label"><label
|
|
1040
1041
|
class="pf-c-form__label"
|
|
1041
|
-
id="
|
|
1042
|
+
id="-node-selector-terms-title"
|
|
1042
1043
|
>
|
|
1043
1044
|
<span class="pf-c-form__label-text">Node selector terms</span> <span
|
|
1044
1045
|
class="pf-c-form__label-required"
|
|
@@ -1047,22 +1048,25 @@ section: components
|
|
|
1047
1048
|
</div>
|
|
1048
1049
|
<div class="pf-c-form__group-control pf-m-stack">
|
|
1049
1050
|
<div class="pf-c-input-group">
|
|
1050
|
-
<input
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1051
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
1052
|
+
<input
|
|
1053
|
+
class="pf-c-form-control"
|
|
1054
|
+
required
|
|
1055
|
+
type="text"
|
|
1056
|
+
id="-node-selector-terms-input-1"
|
|
1057
|
+
name="-node-selector-terms-input-1"
|
|
1058
|
+
aria-labelledby="-node-selector-terms -node-selector-terms-title"
|
|
1059
|
+
/>
|
|
1060
|
+
</div>
|
|
1061
|
+
<div class="pf-c-input-group__item pf-m-plain">
|
|
1062
|
+
<button
|
|
1063
|
+
class="pf-c-button pf-m-plain"
|
|
1064
|
+
type="button"
|
|
1065
|
+
aria-label="Remove"
|
|
1066
|
+
>
|
|
1067
|
+
<i class="fas fa-minus-circle" aria-hidden="true"></i>
|
|
1068
|
+
</button>
|
|
1069
|
+
</div>
|
|
1066
1070
|
</div>
|
|
1067
1071
|
<button
|
|
1068
1072
|
class="pf-c-button pf-m-link pf-m-inline"
|
|
@@ -1161,22 +1165,21 @@ section: components
|
|
|
1161
1165
|
<input
|
|
1162
1166
|
class="pf-c-check__input"
|
|
1163
1167
|
type="checkbox"
|
|
1164
|
-
id="form-demo-sections-complex-
|
|
1165
|
-
name="form-demo-sections-complex-
|
|
1168
|
+
id="form-demo-sections-complex-form-routing-create-route-create-route"
|
|
1169
|
+
name="form-demo-sections-complex-form-routing-create-route-create-route"
|
|
1166
1170
|
/>
|
|
1167
1171
|
|
|
1168
1172
|
<label
|
|
1169
1173
|
class="pf-c-check__label"
|
|
1170
|
-
for="form-demo-sections-complex-
|
|
1174
|
+
for="form-demo-sections-complex-form-routing-create-route-create-route"
|
|
1171
1175
|
>Create a route to the application</label>
|
|
1172
1176
|
</div>
|
|
1173
|
-
<div
|
|
1174
|
-
class="pf-c-form__helper-text"
|
|
1175
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend"
|
|
1176
|
-
aria-live="polite"
|
|
1177
|
-
>
|
|
1177
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1178
1178
|
<div class="pf-c-helper-text">
|
|
1179
|
-
<div
|
|
1179
|
+
<div
|
|
1180
|
+
class="pf-c-helper-text__item"
|
|
1181
|
+
id="form-demo-sections-complex-form-routing-create-route-helper"
|
|
1182
|
+
>
|
|
1180
1183
|
<span
|
|
1181
1184
|
class="pf-c-helper-text__item-text"
|
|
1182
1185
|
>Exposes your appplication at a public URL.</span>
|
|
@@ -1188,7 +1191,7 @@ section: components
|
|
|
1188
1191
|
<div class="pf-c-form__group">
|
|
1189
1192
|
<div class="pf-c-form__group-label"><label
|
|
1190
1193
|
class="pf-c-form__label"
|
|
1191
|
-
for="form-demo-sections-complex-
|
|
1194
|
+
for="form-demo-sections-complex-form-routing-hostname"
|
|
1192
1195
|
>
|
|
1193
1196
|
<span class="pf-c-form__label-text">Hostname</span></label>
|
|
1194
1197
|
</div>
|
|
@@ -1196,17 +1199,16 @@ section: components
|
|
|
1196
1199
|
<input
|
|
1197
1200
|
class="pf-c-form-control"
|
|
1198
1201
|
type="text"
|
|
1199
|
-
id="form-demo-sections-complex-
|
|
1200
|
-
name="form-demo-sections-complex-
|
|
1202
|
+
id="form-demo-sections-complex-form-routing-hostname"
|
|
1203
|
+
name="form-demo-sections-complex-form-routing-hostname"
|
|
1201
1204
|
/>
|
|
1202
1205
|
|
|
1203
|
-
<div
|
|
1204
|
-
class="pf-c-form__helper-text"
|
|
1205
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname-helper"
|
|
1206
|
-
aria-live="polite"
|
|
1207
|
-
>
|
|
1206
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1208
1207
|
<div class="pf-c-helper-text">
|
|
1209
|
-
<div
|
|
1208
|
+
<div
|
|
1209
|
+
class="pf-c-helper-text__item"
|
|
1210
|
+
id="form-demo-sections-complex-form-routing-hostname-helper"
|
|
1211
|
+
>
|
|
1210
1212
|
<span
|
|
1211
1213
|
class="pf-c-helper-text__item-text"
|
|
1212
1214
|
>Public hostname for the route. If not specified, a hostname is generated.</span>
|
|
@@ -1218,7 +1220,7 @@ section: components
|
|
|
1218
1220
|
<div class="pf-c-form__group">
|
|
1219
1221
|
<div class="pf-c-form__group-label"><label
|
|
1220
1222
|
class="pf-c-form__label"
|
|
1221
|
-
for="form-demo-sections-complex-
|
|
1223
|
+
for="form-demo-sections-complex-form-routing-path"
|
|
1222
1224
|
>
|
|
1223
1225
|
<span class="pf-c-form__label-text">Path</span></label>
|
|
1224
1226
|
</div>
|
|
@@ -1227,18 +1229,17 @@ section: components
|
|
|
1227
1229
|
class="pf-c-form-control"
|
|
1228
1230
|
type="text"
|
|
1229
1231
|
placeholder="/"
|
|
1230
|
-
id="form-demo-sections-complex-
|
|
1231
|
-
name="form-demo-sections-complex-
|
|
1232
|
+
id="form-demo-sections-complex-form-routing-path"
|
|
1233
|
+
name="form-demo-sections-complex-form-routing-path"
|
|
1232
1234
|
required
|
|
1233
1235
|
/>
|
|
1234
1236
|
|
|
1235
|
-
<div
|
|
1236
|
-
class="pf-c-form__helper-text"
|
|
1237
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path-helper"
|
|
1238
|
-
aria-live="polite"
|
|
1239
|
-
>
|
|
1237
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1240
1238
|
<div class="pf-c-helper-text">
|
|
1241
|
-
<div
|
|
1239
|
+
<div
|
|
1240
|
+
class="pf-c-helper-text__item"
|
|
1241
|
+
id="form-demo-sections-complex-form-routing-path-helper"
|
|
1242
|
+
>
|
|
1242
1243
|
<span
|
|
1243
1244
|
class="pf-c-helper-text__item-text"
|
|
1244
1245
|
>Path that the router watches to route traffic to the service.</span>
|
|
@@ -1257,7 +1258,7 @@ section: components
|
|
|
1257
1258
|
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
|
|
1258
1259
|
><span
|
|
1259
1260
|
class="pf-c-form__label"
|
|
1260
|
-
for="form-demo-sections-complex-
|
|
1261
|
+
for="form-demo-sections-complex-form-routing-security"
|
|
1261
1262
|
>
|
|
1262
1263
|
<span class="pf-c-form__label-text">Security</span></span>
|
|
1263
1264
|
</div>
|
|
@@ -1266,22 +1267,21 @@ section: components
|
|
|
1266
1267
|
<input
|
|
1267
1268
|
class="pf-c-check__input"
|
|
1268
1269
|
type="checkbox"
|
|
1269
|
-
id="form-demo-sections-complex-
|
|
1270
|
-
name="form-demo-sections-complex-
|
|
1270
|
+
id="form-demo-sections-complex-form-routing-security-check-1"
|
|
1271
|
+
name="form-demo-sections-complex-form-routing-security-check-1"
|
|
1271
1272
|
/>
|
|
1272
1273
|
|
|
1273
1274
|
<label
|
|
1274
1275
|
class="pf-c-check__label"
|
|
1275
|
-
for="form-demo-sections-complex-
|
|
1276
|
+
for="form-demo-sections-complex-form-routing-security-check-1"
|
|
1276
1277
|
>Secure Route</label>
|
|
1277
1278
|
</div>
|
|
1278
|
-
<div
|
|
1279
|
-
class="pf-c-form__helper-text"
|
|
1280
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-helper"
|
|
1281
|
-
aria-live="polite"
|
|
1282
|
-
>
|
|
1279
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1283
1280
|
<div class="pf-c-helper-text">
|
|
1284
|
-
<div
|
|
1281
|
+
<div
|
|
1282
|
+
class="pf-c-helper-text__item"
|
|
1283
|
+
id="form-demo-sections-complex-form-routing-security-helper"
|
|
1284
|
+
>
|
|
1285
1285
|
<span
|
|
1286
1286
|
class="pf-c-helper-text__item-text"
|
|
1287
1287
|
>Routes can be secured using several TLS termination types for serving certificates.</span>
|