@patternfly/patternfly 6.0.0 → 6.1.0-prerelease.2
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/CodeEditor/code-editor.css +15 -0
- package/components/CodeEditor/code-editor.scss +16 -1
- package/components/Page/page.css +5 -0
- package/components/Page/page.scss +6 -0
- package/components/Table/table-grid.css +12 -12
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table-tree-view.css +4 -4
- package/components/Table/table-tree-view.scss +4 -4
- package/components/_index.css +36 -16
- package/docs/components/CodeEditor/examples/CodeEditor.css +3 -0
- package/docs/components/CodeEditor/examples/CodeEditor.md +158 -7
- package/docs/components/InlineEdit/examples/InlineEdit.md +3 -18
- package/docs/components/MenuToggle/examples/MenuToggle.md +1193 -536
- package/docs/components/Table/examples/Table.md +466 -2524
- package/docs/components/Tile/{examples → deprecated}/Tile.md +1 -0
- package/docs/demos/Card/examples/Card.css +4 -0
- package/docs/demos/Card/examples/Card.md +13 -21
- package/docs/demos/DataList/examples/DataList.md +5 -30
- package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -30
- package/docs/demos/Table/examples/Table.md +161 -924
- package/docs/demos/Tabs/examples/Tabs.md +6 -36
- package/docs/demos/Toolbar/examples/Toolbar.md +12 -72
- package/package.json +6 -6
- package/patternfly-no-globals.css +36 -16
- package/patternfly.css +36 -16
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +6 -0
- /package/docs/components/Tile/{examples → deprecated}/Tile.css +0 -0
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
id: Code editor
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-v6-c-code-editor
|
|
5
|
-
|
|
5
|
+
---import './CodeEditor.css';
|
|
6
|
+
|
|
7
|
+
## Examples
|
|
6
8
|
|
|
7
9
|
### Default
|
|
8
10
|
|
|
@@ -49,11 +51,11 @@ cssPrefix: pf-v6-c-code-editor
|
|
|
49
51
|
</div>
|
|
50
52
|
</div>
|
|
51
53
|
<div class="pf-v6-c-code-editor__main">
|
|
52
|
-
<
|
|
54
|
+
<div dir="ltr" class="pf-v6-c-code-editor__code">
|
|
53
55
|
<pre class="pf-v6-c-code-editor__code-pre">
|
|
54
56
|
code goes here
|
|
55
57
|
</pre>
|
|
56
|
-
</
|
|
58
|
+
</div>
|
|
57
59
|
</div>
|
|
58
60
|
</div>
|
|
59
61
|
|
|
@@ -104,11 +106,11 @@ cssPrefix: pf-v6-c-code-editor
|
|
|
104
106
|
</div>
|
|
105
107
|
</div>
|
|
106
108
|
<div class="pf-v6-c-code-editor__main">
|
|
107
|
-
<
|
|
109
|
+
<div dir="ltr" class="pf-v6-c-code-editor__code">
|
|
108
110
|
<pre class="pf-v6-c-code-editor__code-pre">
|
|
109
111
|
code goes here
|
|
110
112
|
</pre>
|
|
111
|
-
</
|
|
113
|
+
</div>
|
|
112
114
|
</div>
|
|
113
115
|
</div>
|
|
114
116
|
|
|
@@ -267,11 +269,158 @@ cssPrefix: pf-v6-c-code-editor
|
|
|
267
269
|
</div>
|
|
268
270
|
</div>
|
|
269
271
|
<div class="pf-v6-c-code-editor__main">
|
|
270
|
-
<
|
|
272
|
+
<div dir="ltr" class="pf-v6-c-code-editor__code">
|
|
271
273
|
<pre class="pf-v6-c-code-editor__code-pre">
|
|
272
274
|
code goes here
|
|
273
275
|
</pre>
|
|
274
|
-
</
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
### With optional code editor container
|
|
283
|
+
|
|
284
|
+
This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.
|
|
285
|
+
|
|
286
|
+
```html
|
|
287
|
+
<div class="pf-v6-c-code-editor">
|
|
288
|
+
<div role="presentation" tabindex="0" class="pf-v6-c-code-editor__container">
|
|
289
|
+
<div class="pf-v6-c-code-editor__header">
|
|
290
|
+
<div class="pf-v6-c-code-editor__header-content">
|
|
291
|
+
<div class="pf-v6-c-code-editor__controls">
|
|
292
|
+
<button
|
|
293
|
+
class="pf-v6-c-button pf-m-plain"
|
|
294
|
+
type="button"
|
|
295
|
+
aria-label="Copy to clipboard"
|
|
296
|
+
>
|
|
297
|
+
<span class="pf-v6-c-button__icon">
|
|
298
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
299
|
+
</span>
|
|
300
|
+
</button>
|
|
301
|
+
<button
|
|
302
|
+
class="pf-v6-c-button pf-m-plain"
|
|
303
|
+
type="button"
|
|
304
|
+
aria-label="Download code"
|
|
305
|
+
>
|
|
306
|
+
<span class="pf-v6-c-button__icon">
|
|
307
|
+
<i class="fas fa-download" aria-hidden="true"></i>
|
|
308
|
+
</span>
|
|
309
|
+
</button>
|
|
310
|
+
<button
|
|
311
|
+
class="pf-v6-c-button pf-m-plain"
|
|
312
|
+
type="button"
|
|
313
|
+
aria-label="Upload code"
|
|
314
|
+
>
|
|
315
|
+
<span class="pf-v6-c-button__icon">
|
|
316
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
317
|
+
</span>
|
|
318
|
+
</button>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="pf-v6-c-code-editor__tab">
|
|
322
|
+
<span class="pf-v6-c-code-editor__tab-icon">
|
|
323
|
+
<i class="fas fa-code"></i>
|
|
324
|
+
</span>
|
|
325
|
+
<span class="pf-v6-c-code-editor__tab-text">HTML</span>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="pf-v6-c-code-editor__main">
|
|
329
|
+
<div class="pf-v6-c-code-editor__upload">
|
|
330
|
+
<div class="pf-v6-c-empty-state">
|
|
331
|
+
<div class="pf-v6-c-empty-state__content">
|
|
332
|
+
<div class="pf-v6-c-empty-state__header">
|
|
333
|
+
<div class="pf-v6-c-empty-state__icon">
|
|
334
|
+
<i class="fas fa- fa-code" aria-hidden="true"></i>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="pf-v6-c-empty-state__title">
|
|
337
|
+
<h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div
|
|
342
|
+
class="pf-v6-c-empty-state__body"
|
|
343
|
+
>Drag a file here or browse to upload.</div>
|
|
344
|
+
|
|
345
|
+
<div class="pf-v6-c-empty-state__footer">
|
|
346
|
+
<div class="pf-v6-c-empty-state__actions">
|
|
347
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">
|
|
348
|
+
<span class="pf-v6-c-button__text">Browse</span>
|
|
349
|
+
</button>
|
|
350
|
+
</div>
|
|
351
|
+
<div class="pf-v6-c-empty-state__actions">
|
|
352
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
353
|
+
<span class="pf-v6-c-button__text">Start from scratch</span>
|
|
354
|
+
</button>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### With full height modifier
|
|
367
|
+
|
|
368
|
+
```html
|
|
369
|
+
<div class="pf-v6-c-code-editor pf-m-full-height">
|
|
370
|
+
<div class="pf-v6-c-code-editor__header">
|
|
371
|
+
<div class="pf-v6-c-code-editor__header-content">
|
|
372
|
+
<div class="pf-v6-c-code-editor__controls">
|
|
373
|
+
<button
|
|
374
|
+
class="pf-v6-c-button pf-m-plain"
|
|
375
|
+
type="button"
|
|
376
|
+
aria-label="Copy to clipboard"
|
|
377
|
+
>
|
|
378
|
+
<span class="pf-v6-c-button__icon">
|
|
379
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
380
|
+
</span>
|
|
381
|
+
</button>
|
|
382
|
+
<button
|
|
383
|
+
class="pf-v6-c-button pf-m-plain"
|
|
384
|
+
type="button"
|
|
385
|
+
aria-label="Download code"
|
|
386
|
+
>
|
|
387
|
+
<span class="pf-v6-c-button__icon">
|
|
388
|
+
<i class="fas fa-download" aria-hidden="true"></i>
|
|
389
|
+
</span>
|
|
390
|
+
</button>
|
|
391
|
+
<button
|
|
392
|
+
class="pf-v6-c-button pf-m-plain"
|
|
393
|
+
type="button"
|
|
394
|
+
aria-label="Upload code"
|
|
395
|
+
>
|
|
396
|
+
<span class="pf-v6-c-button__icon">
|
|
397
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
398
|
+
</span>
|
|
399
|
+
</button>
|
|
400
|
+
</div>
|
|
401
|
+
<div class="pf-v6-c-code-editor__header-main">Header main content</div>
|
|
402
|
+
<div class="pf-v6-c-code-editor__keyboard-shortcuts">
|
|
403
|
+
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
404
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
405
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
406
|
+
</span>
|
|
407
|
+
<span class="pf-v6-c-button__text">View shortcuts</span>
|
|
408
|
+
</button>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="pf-v6-c-code-editor__tab">
|
|
412
|
+
<span class="pf-v6-c-code-editor__tab-icon">
|
|
413
|
+
<i class="fas fa-code"></i>
|
|
414
|
+
</span>
|
|
415
|
+
<span class="pf-v6-c-code-editor__tab-text">HTML</span>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
<div class="pf-v6-c-code-editor__main">
|
|
419
|
+
<div dir="ltr" class="pf-v6-c-code-editor__code">
|
|
420
|
+
<pre class="pf-v6-c-code-editor__code-pre">
|
|
421
|
+
code goes here
|
|
422
|
+
</pre>
|
|
423
|
+
</div>
|
|
275
424
|
</div>
|
|
276
425
|
</div>
|
|
277
426
|
|
|
@@ -295,3 +444,5 @@ cssPrefix: pf-v6-c-code-editor
|
|
|
295
444
|
| `.pf-v6-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
|
|
296
445
|
| `.pf-v6-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
|
|
297
446
|
| `.pf-v6-c-code-editor__upload` | `<div>` | Initiates the code editor upload border. |
|
|
447
|
+
| `.pf-v6-c-code-editor__container` | `<div>` | Initiates the container used inside `.pf-v6-c-code-editor` in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state. |
|
|
448
|
+
| `.pf-m-full-height` | `.pf-v6-c-code-editor` | Modifies for full-height style. |
|
|
@@ -470,12 +470,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
470
470
|
<caption class="pf-v6-c-table__caption">This is the table caption</caption>
|
|
471
471
|
|
|
472
472
|
<thead class="pf-v6-c-table__thead">
|
|
473
|
-
<tr
|
|
474
|
-
class="pf-v6-c-table__tr"
|
|
475
|
-
role&#x3D;&quot;row&quot;
|
|
476
|
-
[object
|
|
477
|
-
Object]
|
|
478
|
-
>
|
|
473
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
479
474
|
<th class="pf-v6-c-table__th" role="columnheader">Text input</th>
|
|
480
475
|
|
|
481
476
|
<th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
|
|
@@ -505,12 +500,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
505
500
|
</thead>
|
|
506
501
|
|
|
507
502
|
<tbody class="pf-v6-c-table__tbody" role="rowgroup">
|
|
508
|
-
<tr
|
|
509
|
-
class="pf-v6-c-table__tr pf-m-inline-editable"
|
|
510
|
-
role&#x3D;&quot;row&quot;
|
|
511
|
-
[object
|
|
512
|
-
Object]
|
|
513
|
-
>
|
|
503
|
+
<tr class="pf-v6-c-table__tr pf-m-inline-editable" role="row">
|
|
514
504
|
<th
|
|
515
505
|
class="pf-v6-c-table__th"
|
|
516
506
|
role="columnheader"
|
|
@@ -699,12 +689,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
699
689
|
</td>
|
|
700
690
|
</tr>
|
|
701
691
|
|
|
702
|
-
<tr
|
|
703
|
-
class="pf-v6-c-table__tr"
|
|
704
|
-
role&#x3D;&quot;row&quot;
|
|
705
|
-
[object
|
|
706
|
-
Object]
|
|
707
|
-
>
|
|
692
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
708
693
|
<th
|
|
709
694
|
class="pf-v6-c-table__th"
|
|
710
695
|
role="columnheader"
|