@patternfly/patternfly 4.211.0 → 4.213.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/Icon/icon.css +119 -0
- package/components/Icon/icon.scss +149 -0
- package/components/LogViewer/log-viewer.css +15 -8
- package/components/LogViewer/log-viewer.scss +16 -8
- package/components/_all.scss +1 -0
- package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
- package/docs/components/FormControl/examples/FormControl.md +12 -12
- package/docs/components/Icon/examples/Icon.md +255 -0
- package/docs/components/LogViewer/examples/LogViewer.md +553 -1
- package/docs/components/TabContent/examples/TabContent.md +21 -11
- package/docs/components/TreeView/examples/TreeView.md +181 -130
- package/package.json +3 -3
- package/patternfly-no-reset.css +136 -8
- package/patternfly.css +136 -8
- 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. |
|