@patternfly/patternfly 5.0.0-alpha.21 → 5.0.0-alpha.23

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.
Files changed (31) hide show
  1. package/components/Chip/chip.css +33 -24
  2. package/components/Chip/chip.scss +40 -31
  3. package/components/Label/label.css +35 -24
  4. package/components/Label/label.scss +40 -27
  5. package/components/Popover/popover.css +21 -24
  6. package/components/Popover/popover.scss +25 -32
  7. package/components/Table/table-tree-view.css +10 -0
  8. package/components/Table/table-tree-view.scss +15 -0
  9. package/docs/components/Chip/examples/Chip.md +61 -43
  10. package/docs/components/ChipGroup/examples/ChipGroup.md +437 -329
  11. package/docs/components/InlineEdit/examples/InlineEdit.md +5 -3
  12. package/docs/components/Label/examples/Label.md +1399 -718
  13. package/docs/components/LabelGroup/examples/LabelGroup.md +274 -209
  14. package/docs/components/LogViewer/examples/LogViewer.md +10 -4
  15. package/docs/components/Popover/examples/Popover.md +175 -104
  16. package/docs/components/Select/examples/Select.md +224 -170
  17. package/docs/components/Table/examples/Table.md +565 -41
  18. package/docs/components/TextInputGroup/examples/TextInputGroup.md +343 -261
  19. package/docs/components/Toolbar/examples/Toolbar.md +306 -234
  20. package/docs/demos/Card/examples/Card.md +46 -38
  21. package/docs/demos/Dashboard/examples/Dashboard.md +23 -15
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -9
  23. package/docs/demos/Drawer/examples/Drawer.md +4 -2
  24. package/docs/demos/Form/examples/BasicForms.md +28 -22
  25. package/docs/demos/Tabs/examples/Tabs.md +39 -16
  26. package/docs/demos/Toolbar/examples/Toolbar.md +102 -78
  27. package/package.json +2 -2
  28. package/patternfly-no-reset.css +99 -72
  29. package/patternfly.css +99 -72
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
package/docs/components/Chip/examples/Chip.md CHANGED
@@ -8,66 +8,84 @@ cssPrefix: pf-c-chip
8
8
 
9
9
  ```html
10
10
  <div class="pf-c-chip">
11
- <span class="pf-c-chip__text" id="chip_one">Chip</span>
12
- <button
13
- class="pf-c-button pf-m-plain"
14
- type="button"
15
- aria-labelledby="remove_chip_one chip_one"
16
- aria-label="Remove"
17
- id="remove_chip_one"
18
- >
19
- <i class="fas fa-times" aria-hidden="true"></i>
20
- </button>
11
+ <span class="pf-c-chip__content">
12
+ <span class="pf-c-chip__text" id="chip_one">Chip</span>
13
+ </span>
14
+ <span class="pf-c-chip__actions">
15
+ <button
16
+ class="pf-c-button pf-m-plain"
17
+ type="button"
18
+ aria-labelledby="remove_chip_one chip_one"
19
+ aria-label="Remove"
20
+ id="remove_chip_one"
21
+ >
22
+ <i class="fas fa-times" aria-hidden="true"></i>
23
+ </button>
24
+ </span>
21
25
  </div>
22
26
  <br />
23
27
  <br />
24
28
  <div class="pf-c-chip">
25
- <span
26
- class="pf-c-chip__text"
27
- id="chip_two"
28
- >Really long chip that goes on and on</span>
29
- <button
30
- class="pf-c-button pf-m-plain"
31
- type="button"
32
- aria-labelledby="remove_chip_two chip_two"
33
- aria-label="Remove"
34
- id="remove_chip_two"
35
- >
36
- <i class="fas fa-times" aria-hidden="true"></i>
37
- </button>
29
+ <span class="pf-c-chip__content">
30
+ <span
31
+ class="pf-c-chip__text"
32
+ id="chip_two"
33
+ >Really long chip that goes on and on</span>
34
+ </span>
35
+ <span class="pf-c-chip__actions">
36
+ <button
37
+ class="pf-c-button pf-m-plain"
38
+ type="button"
39
+ aria-labelledby="remove_chip_two chip_two"
40
+ aria-label="Remove"
41
+ id="remove_chip_two"
42
+ >
43
+ <i class="fas fa-times" aria-hidden="true"></i>
44
+ </button>
45
+ </span>
38
46
  </div>
39
47
  <br />
40
48
  <br />
41
49
  <div class="pf-c-chip">
42
- <span class="pf-c-chip__text" id="chip_three">Chip</span>
43
- <span class="pf-c-badge pf-m-read">00</span>
44
- <button
45
- class="pf-c-button pf-m-plain"
46
- type="button"
47
- aria-labelledby="remove_chip_three chip_three"
48
- aria-label="Remove"
49
- id="remove_chip_three"
50
- >
51
- <i class="fas fa-times" aria-hidden="true"></i>
52
- </button>
50
+ <span class="pf-c-chip__content">
51
+ <span class="pf-c-chip__text" id="chip_three">Chip</span>
52
+ <span class="pf-c-badge pf-m-read">00</span>
53
+ </span>
54
+ <span class="pf-c-chip__actions">
55
+ <button
56
+ class="pf-c-button pf-m-plain"
57
+ type="button"
58
+ aria-labelledby="remove_chip_three chip_three"
59
+ aria-label="Remove"
60
+ id="remove_chip_three"
61
+ >
62
+ <i class="fas fa-times" aria-hidden="true"></i>
63
+ </button>
64
+ </span>
53
65
  </div>
54
66
  <br />
55
67
  <br />
56
68
  <div class="pf-c-chip">
57
- <span class="pf-c-chip__text">Read-only chip</span>
69
+ <span class="pf-c-chip__content">
70
+ <span class="pf-c-chip__text">Read-only chip</span>
71
+ </span>
58
72
  </div>
59
73
  <br />
60
74
  <br />
61
75
  <button class="pf-c-chip pf-m-overflow">
62
- <span class="pf-c-chip__text">Overflow chip</span>
76
+ <span class="pf-c-chip__content">
77
+ <span class="pf-c-chip__text">Overflow chip</span>
78
+ </span>
63
79
  </button>
64
80
  <br />
65
81
  <br />
66
82
  <div class="pf-c-chip pf-m-draggable">
67
- <span class="pf-c-chip__icon">
68
- <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
83
+ <span class="pf-c-chip__content">
84
+ <span class="pf-c-chip__icon">
85
+ <i class="fas fa-grip-vertical" role="img" aria-label="Drag"></i>
86
+ </span>
87
+ <span class="pf-c-chip__text">Draggable chip</span>
69
88
  </span>
70
- <span class="pf-c-chip__text">Draggable chip</span>
71
89
  </div>
72
90
 
73
91
  ```
@@ -91,9 +109,9 @@ A Chip is used to display items that have been filtered or selected from a large
91
109
  | Class | Applied to | Outcome |
92
110
  | -- | -- | -- |
93
111
  | `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
94
- | `.pf-c-chip__text` | `<span>` | Initiates the text inside of the chip. **Required** |
95
- | `.pf-c-chip__icon` | `<span>` | Initiates the icon inside of the chip. |
96
- | `.pf-c-button` | `.pf-c-chip <button>` | Initiates the button used to remove the chip. |
97
- | `.pf-c-badge` | `<span>` | Initiates the badge inside the chip. |
112
+ | `.pf-c-chip__content` | `<span>` | Creates a content wrapper for the chip. **Required** |
113
+ | `.pf-c-chip__text` | `<span>` | Initiates the text inside the chip. **Required** |
114
+ | `.pf-c-chip__icon` | `<span>` | Initiates the icon inside the chip. |
115
+ | `.pf-c-chip__actions` | `<span>` | Creates a wrapper for chip actions. **Required for removable chips** |
98
116
  | `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
99
117
  | `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |