@patternfly/patternfly 4.212.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/Card/card.css +1 -0
- package/components/Card/card.scss +1 -0
- 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/_all.scss +1 -0
- package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
- 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/TabContent/examples/TabContent.md +21 -11
- package/docs/components/TreeView/examples/TreeView.md +181 -130
- package/package.json +2 -2
- package/patternfly-no-reset.css +128 -0
- package/patternfly.css +128 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -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. |
|
|
@@ -1120,7 +1120,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1120
1120
|
<div class="pf-c-log-viewer__header">
|
|
1121
1121
|
<div
|
|
1122
1122
|
class="pf-c-toolbar"
|
|
1123
|
-
id="log-viewer-line-number-example-toolbar"
|
|
1123
|
+
id="log-viewer-line-number-chars-example-toolbar"
|
|
1124
1124
|
role="toolbar"
|
|
1125
1125
|
>
|
|
1126
1126
|
<div class="pf-c-toolbar__content">
|
|
@@ -1128,17 +1128,17 @@ cssPrefix: pf-c-log-viewer
|
|
|
1128
1128
|
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
1129
1129
|
<div class="pf-c-select">
|
|
1130
1130
|
<span
|
|
1131
|
-
id="log-viewer-line-number-example-select-menu-label"
|
|
1131
|
+
id="log-viewer-line-number-chars-example-select-menu-label"
|
|
1132
1132
|
hidden
|
|
1133
1133
|
>Choose one</span>
|
|
1134
1134
|
|
|
1135
1135
|
<button
|
|
1136
1136
|
class="pf-c-select__toggle"
|
|
1137
1137
|
type="button"
|
|
1138
|
-
id="log-viewer-line-number-example-select-menu-toggle"
|
|
1138
|
+
id="log-viewer-line-number-chars-example-select-menu-toggle"
|
|
1139
1139
|
aria-haspopup="true"
|
|
1140
1140
|
aria-expanded="false"
|
|
1141
|
-
aria-labelledby="log-viewer-line-number-example-select-menu-label log-viewer-line-number-example-select-menu-toggle"
|
|
1141
|
+
aria-labelledby="log-viewer-line-number-chars-example-select-menu-label log-viewer-line-number-chars-example-select-menu-toggle"
|
|
1142
1142
|
>
|
|
1143
1143
|
<div class="pf-c-select__toggle-wrapper">
|
|
1144
1144
|
<span class="pf-c-select__toggle-text">System log</span>
|
|
@@ -1150,7 +1150,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1150
1150
|
<ul
|
|
1151
1151
|
class="pf-c-select__menu"
|
|
1152
1152
|
role="listbox"
|
|
1153
|
-
aria-labelledby="log-viewer-line-number-example-select-menu-label"
|
|
1153
|
+
aria-labelledby="log-viewer-line-number-chars-example-select-menu-label"
|
|
1154
1154
|
hidden
|
|
1155
1155
|
>
|
|
1156
1156
|
<li role="presentation">
|
|
@@ -1181,7 +1181,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1181
1181
|
type="button"
|
|
1182
1182
|
aria-label="Show filters"
|
|
1183
1183
|
aria-expanded="false"
|
|
1184
|
-
aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
|
|
1184
|
+
aria-controls="log-viewer-line-number-chars-example-toolbar-expandable-content"
|
|
1185
1185
|
>
|
|
1186
1186
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
1187
1187
|
</button>
|
|
@@ -1221,7 +1221,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1221
1221
|
<div class="pf-c-dropdown">
|
|
1222
1222
|
<button
|
|
1223
1223
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1224
|
-
id="log-viewer-line-number-example-dropdown-button"
|
|
1224
|
+
id="log-viewer-line-number-chars-example-dropdown-button"
|
|
1225
1225
|
aria-expanded="false"
|
|
1226
1226
|
type="button"
|
|
1227
1227
|
aria-label="Actions"
|
|
@@ -1258,13 +1258,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1258
1258
|
<input
|
|
1259
1259
|
class="pf-c-check__input"
|
|
1260
1260
|
type="checkbox"
|
|
1261
|
-
id="log-viewer-line-number-example-desktop-check-wrap-lines"
|
|
1262
|
-
name="log-viewer-line-number-example-desktop-check-wrap-lines"
|
|
1261
|
+
id="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
|
|
1262
|
+
name="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
|
|
1263
1263
|
/>
|
|
1264
1264
|
|
|
1265
1265
|
<label
|
|
1266
1266
|
class="pf-c-check__label"
|
|
1267
|
-
for="log-viewer-line-number-example-desktop-check-wrap-lines"
|
|
1267
|
+
for="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
|
|
1268
1268
|
>Wrap lines</label>
|
|
1269
1269
|
</div>
|
|
1270
1270
|
</span>
|
|
@@ -1281,13 +1281,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1281
1281
|
<input
|
|
1282
1282
|
class="pf-c-check__input"
|
|
1283
1283
|
type="checkbox"
|
|
1284
|
-
id="log-viewer-line-number-example-desktop-check-show-timestamps"
|
|
1285
|
-
name="log-viewer-line-number-example-desktop-check-show-timestamps"
|
|
1284
|
+
id="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
|
|
1285
|
+
name="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
|
|
1286
1286
|
/>
|
|
1287
1287
|
|
|
1288
1288
|
<label
|
|
1289
1289
|
class="pf-c-check__label"
|
|
1290
|
-
for="log-viewer-line-number-example-desktop-check-show-timestamps"
|
|
1290
|
+
for="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
|
|
1291
1291
|
>Show timestamps</label>
|
|
1292
1292
|
</div>
|
|
1293
1293
|
</span>
|
|
@@ -1304,13 +1304,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1304
1304
|
<input
|
|
1305
1305
|
class="pf-c-check__input"
|
|
1306
1306
|
type="checkbox"
|
|
1307
|
-
id="log-viewer-line-number-example-desktop-check-line-number"
|
|
1308
|
-
name="log-viewer-line-number-example-desktop-check-line-number"
|
|
1307
|
+
id="log-viewer-line-number-chars-example-desktop-check-line-number"
|
|
1308
|
+
name="log-viewer-line-number-chars-example-desktop-check-line-number"
|
|
1309
1309
|
/>
|
|
1310
1310
|
|
|
1311
1311
|
<label
|
|
1312
1312
|
class="pf-c-check__label"
|
|
1313
|
-
for="log-viewer-line-number-example-desktop-check-line-number"
|
|
1313
|
+
for="log-viewer-line-number-chars-example-desktop-check-line-number"
|
|
1314
1314
|
>Display line number</label>
|
|
1315
1315
|
</div>
|
|
1316
1316
|
</span>
|
|
@@ -1433,7 +1433,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1433
1433
|
<div class="pf-c-dropdown">
|
|
1434
1434
|
<button
|
|
1435
1435
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1436
|
-
id="log-viewer-line-number-example-settings-dropdown-button"
|
|
1436
|
+
id="log-viewer-line-number-chars-example-settings-dropdown-button"
|
|
1437
1437
|
aria-expanded="false"
|
|
1438
1438
|
type="button"
|
|
1439
1439
|
aria-label="Settings"
|
|
@@ -1442,20 +1442,20 @@ cssPrefix: pf-c-log-viewer
|
|
|
1442
1442
|
</button>
|
|
1443
1443
|
<ul
|
|
1444
1444
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1445
|
-
aria-labelledby="log-viewer-line-number-example-settings-dropdown-button"
|
|
1445
|
+
aria-labelledby="log-viewer-line-number-chars-example-settings-dropdown-button"
|
|
1446
1446
|
hidden
|
|
1447
1447
|
>
|
|
1448
1448
|
<li>
|
|
1449
1449
|
<div class="pf-c-dropdown__menu-item">
|
|
1450
1450
|
<label
|
|
1451
1451
|
class="pf-c-check"
|
|
1452
|
-
for="log-viewer-line-number-example-check-wrap-lines"
|
|
1452
|
+
for="log-viewer-line-number-chars-example-check-wrap-lines"
|
|
1453
1453
|
>
|
|
1454
1454
|
<input
|
|
1455
1455
|
class="pf-c-check__input"
|
|
1456
1456
|
type="checkbox"
|
|
1457
|
-
id="log-viewer-line-number-example-check-wrap-lines"
|
|
1458
|
-
name="log-viewer-line-number-example-check-wrap-lines"
|
|
1457
|
+
id="log-viewer-line-number-chars-example-check-wrap-lines"
|
|
1458
|
+
name="log-viewer-line-number-chars-example-check-wrap-lines"
|
|
1459
1459
|
/>
|
|
1460
1460
|
|
|
1461
1461
|
<span class="pf-c-check__label">Wrap lines</span>
|
|
@@ -1466,13 +1466,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1466
1466
|
<div class="pf-c-dropdown__menu-item">
|
|
1467
1467
|
<label
|
|
1468
1468
|
class="pf-c-check"
|
|
1469
|
-
for="log-viewer-line-number-example-check-show-timestamps"
|
|
1469
|
+
for="log-viewer-line-number-chars-example-check-show-timestamps"
|
|
1470
1470
|
>
|
|
1471
1471
|
<input
|
|
1472
1472
|
class="pf-c-check__input"
|
|
1473
1473
|
type="checkbox"
|
|
1474
|
-
id="log-viewer-line-number-example-check-show-timestamps"
|
|
1475
|
-
name="log-viewer-line-number-example-check-show-timestamps"
|
|
1474
|
+
id="log-viewer-line-number-chars-example-check-show-timestamps"
|
|
1475
|
+
name="log-viewer-line-number-chars-example-check-show-timestamps"
|
|
1476
1476
|
/>
|
|
1477
1477
|
|
|
1478
1478
|
<span class="pf-c-check__label">Show timestamps</span>
|
|
@@ -1483,13 +1483,13 @@ cssPrefix: pf-c-log-viewer
|
|
|
1483
1483
|
<div class="pf-c-dropdown__menu-item">
|
|
1484
1484
|
<label
|
|
1485
1485
|
class="pf-c-check"
|
|
1486
|
-
for="log-viewer-line-number-example-check-line-number"
|
|
1486
|
+
for="log-viewer-line-number-chars-example-check-line-number"
|
|
1487
1487
|
>
|
|
1488
1488
|
<input
|
|
1489
1489
|
class="pf-c-check__input"
|
|
1490
1490
|
type="checkbox"
|
|
1491
|
-
id="log-viewer-line-number-example-check-line-number"
|
|
1492
|
-
name="log-viewer-line-number-example-check-line-number"
|
|
1491
|
+
id="log-viewer-line-number-chars-example-check-line-number"
|
|
1492
|
+
name="log-viewer-line-number-chars-example-check-line-number"
|
|
1493
1493
|
/>
|
|
1494
1494
|
|
|
1495
1495
|
<span class="pf-c-check__label">Display line number</span>
|
|
@@ -1530,7 +1530,7 @@ cssPrefix: pf-c-log-viewer
|
|
|
1530
1530
|
</div>
|
|
1531
1531
|
<div
|
|
1532
1532
|
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
1533
|
-
id="log-viewer-line-number-example-toolbar-expandable-content"
|
|
1533
|
+
id="log-viewer-line-number-chars-example-toolbar-expandable-content"
|
|
1534
1534
|
hidden
|
|
1535
1535
|
>
|
|
1536
1536
|
<div
|
|
@@ -7,12 +7,17 @@ cssPrefix: pf-c-tab-content
|
|
|
7
7
|
### Basic
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<section
|
|
10
|
+
<section
|
|
11
|
+
class="pf-c-tab-content"
|
|
12
|
+
id="basic-tab1-panel"
|
|
13
|
+
role="tabpanel"
|
|
14
|
+
tabindex="0"
|
|
15
|
+
>
|
|
11
16
|
<div class="pf-c-tab-content__body">Panel 1</div>
|
|
12
17
|
</section>
|
|
13
18
|
<section
|
|
14
19
|
class="pf-c-tab-content"
|
|
15
|
-
id="tab2-panel"
|
|
20
|
+
id="basic-tab2-panel"
|
|
16
21
|
role="tabpanel"
|
|
17
22
|
tabindex="0"
|
|
18
23
|
hidden
|
|
@@ -21,7 +26,7 @@ cssPrefix: pf-c-tab-content
|
|
|
21
26
|
</section>
|
|
22
27
|
<section
|
|
23
28
|
class="pf-c-tab-content"
|
|
24
|
-
id="tab3-panel"
|
|
29
|
+
id="basic-tab3-panel"
|
|
25
30
|
role="tabpanel"
|
|
26
31
|
tabindex="0"
|
|
27
32
|
hidden
|
|
@@ -30,7 +35,7 @@ cssPrefix: pf-c-tab-content
|
|
|
30
35
|
</section>
|
|
31
36
|
<section
|
|
32
37
|
class="pf-c-tab-content"
|
|
33
|
-
id="tab4-panel"
|
|
38
|
+
id="basic-tab4-panel"
|
|
34
39
|
role="tabpanel"
|
|
35
40
|
tabindex="0"
|
|
36
41
|
hidden
|
|
@@ -43,12 +48,17 @@ cssPrefix: pf-c-tab-content
|
|
|
43
48
|
### Padding
|
|
44
49
|
|
|
45
50
|
```html
|
|
46
|
-
<section
|
|
51
|
+
<section
|
|
52
|
+
class="pf-c-tab-content"
|
|
53
|
+
id="tab1-panel-with-padding"
|
|
54
|
+
role="tabpanel"
|
|
55
|
+
tabindex="0"
|
|
56
|
+
>
|
|
47
57
|
<div class="pf-c-tab-content__body pf-m-padding">Panel 1</div>
|
|
48
58
|
</section>
|
|
49
59
|
<section
|
|
50
60
|
class="pf-c-tab-content"
|
|
51
|
-
id="tab2-panel"
|
|
61
|
+
id="tab2-panel-with-padding"
|
|
52
62
|
role="tabpanel"
|
|
53
63
|
tabindex="0"
|
|
54
64
|
hidden
|
|
@@ -57,7 +67,7 @@ cssPrefix: pf-c-tab-content
|
|
|
57
67
|
</section>
|
|
58
68
|
<section
|
|
59
69
|
class="pf-c-tab-content"
|
|
60
|
-
id="tab3-panel"
|
|
70
|
+
id="tab3-panel-with-padding"
|
|
61
71
|
role="tabpanel"
|
|
62
72
|
tabindex="0"
|
|
63
73
|
hidden
|
|
@@ -66,7 +76,7 @@ cssPrefix: pf-c-tab-content
|
|
|
66
76
|
</section>
|
|
67
77
|
<section
|
|
68
78
|
class="pf-c-tab-content"
|
|
69
|
-
id="tab4-panel"
|
|
79
|
+
id="tab4-panel-with-padding"
|
|
70
80
|
role="tabpanel"
|
|
71
81
|
tabindex="0"
|
|
72
82
|
hidden
|
|
@@ -89,7 +99,7 @@ cssPrefix: pf-c-tab-content
|
|
|
89
99
|
</section>
|
|
90
100
|
<section
|
|
91
101
|
class="pf-c-tab-content pf-m-light-300"
|
|
92
|
-
id="tab2-panel"
|
|
102
|
+
id="light-300-tab2-panel"
|
|
93
103
|
role="tabpanel"
|
|
94
104
|
tabindex="0"
|
|
95
105
|
hidden
|
|
@@ -98,7 +108,7 @@ cssPrefix: pf-c-tab-content
|
|
|
98
108
|
</section>
|
|
99
109
|
<section
|
|
100
110
|
class="pf-c-tab-content pf-m-light-300"
|
|
101
|
-
id="tab3-panel"
|
|
111
|
+
id="light-300-tab3-panel"
|
|
102
112
|
role="tabpanel"
|
|
103
113
|
tabindex="0"
|
|
104
114
|
hidden
|
|
@@ -107,7 +117,7 @@ cssPrefix: pf-c-tab-content
|
|
|
107
117
|
</section>
|
|
108
118
|
<section
|
|
109
119
|
class="pf-c-tab-content pf-m-light-300"
|
|
110
|
-
id="tab4-panel"
|
|
120
|
+
id="light-300-tab4-panel"
|
|
111
121
|
role="tabpanel"
|
|
112
122
|
tabindex="0"
|
|
113
123
|
hidden
|