@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.11

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 (71) hide show
  1. package/RELEASE-NOTES.md +30 -0
  2. package/base/_common.scss +0 -22
  3. package/base/patternfly-common.css +0 -10
  4. package/components/Card/card.css +9 -12
  5. package/components/Card/card.scss +11 -17
  6. package/components/ChipGroup/chip-group.css +27 -17
  7. package/components/ChipGroup/chip-group.scss +36 -22
  8. package/components/Drawer/drawer.css +0 -1
  9. package/components/Drawer/drawer.scss +0 -1
  10. package/components/Dropdown/dropdown.css +15 -0
  11. package/components/Dropdown/dropdown.scss +20 -0
  12. package/components/EmptyState/empty-state.css +46 -52
  13. package/components/EmptyState/empty-state.scss +58 -57
  14. package/components/FormControl/form-control.css +1 -1
  15. package/components/FormControl/themes/dark/form-control.scss +1 -1
  16. package/components/InputGroup/input-group.css +14 -0
  17. package/components/InputGroup/input-group.scss +9 -0
  18. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  19. package/components/LabelGroup/label-group.css +26 -22
  20. package/components/LabelGroup/label-group.scss +31 -26
  21. package/components/Menu/menu.css +4 -0
  22. package/components/Menu/menu.scss +5 -0
  23. package/components/Pagination/pagination.css +228 -0
  24. package/components/Pagination/pagination.scss +30 -1
  25. package/components/Popover/popover.css +2 -7
  26. package/components/Popover/themes/dark/popover.scss +2 -8
  27. package/components/Slider/slider.css +0 -7
  28. package/components/Slider/slider.scss +0 -9
  29. package/components/Toolbar/toolbar.css +30 -2
  30. package/components/Toolbar/toolbar.scss +37 -3
  31. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  32. package/components/Tooltip/tooltip.css +7 -12
  33. package/components/Tooltip/tooltip.scss +6 -3
  34. package/docs/components/Card/examples/Card.md +61 -44
  35. package/docs/components/Check/examples/Check.md +2 -6
  36. package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
  37. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  38. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  39. package/docs/components/DataList/examples/DataList.md +104 -65
  40. package/docs/components/Dropdown/examples/Dropdown.md +263 -23
  41. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  42. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  43. package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
  44. package/docs/components/Menu/examples/Menu.md +1 -1
  45. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
  46. package/docs/components/Pagination/examples/Pagination.md +129 -30
  47. package/docs/components/Slider/examples/Slider.md +6 -6
  48. package/docs/components/Table/examples/Table.md +1117 -700
  49. package/docs/components/Tabs/examples/Tabs.md +1 -1
  50. package/docs/components/Toolbar/examples/Toolbar.md +67 -46
  51. package/docs/components/Wizard/examples/Wizard.md +4 -7
  52. package/docs/demos/Banner/examples/Banner.md +2 -2
  53. package/docs/demos/Card/examples/Card.md +144 -109
  54. package/docs/demos/CardView/examples/CardView.md +9 -8
  55. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  56. package/docs/demos/DataList/examples/DataList.md +138 -89
  57. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  58. package/docs/demos/Nav/examples/Nav.md +671 -718
  59. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +17 -13
  60. package/docs/demos/Table/examples/Table.md +439 -297
  61. package/docs/demos/Tabs/examples/Tabs.md +90 -569
  62. package/docs/demos/Toolbar/examples/Toolbar.md +1773 -163
  63. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  64. package/package.json +5 -5
  65. package/patternfly-base-no-reset.css +0 -10
  66. package/patternfly-base.css +0 -10
  67. package/patternfly-no-reset.css +409 -143
  68. package/patternfly.css +409 -143
  69. package/patternfly.min.css +1 -1
  70. package/patternfly.min.css.map +1 -1
  71. package/sass-utilities/scss-variables.scss +0 -1
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -9,20 +9,31 @@ cssPrefix: pf-c-empty-state
9
9
  ```html
10
10
  <div class="pf-c-empty-state">
11
11
  <div class="pf-c-empty-state__content">
12
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
12
+ <div class="pf-c-empty-state__header">
13
+ <div class="pf-c-empty-state__icon">
14
+ <i class="fas fa-cubes" aria-hidden="true"></i>
15
+ </div>
16
+ <div class="pf-c-empty-state__title">
17
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
18
+ </div>
19
+ </div>
13
20
 
14
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
15
21
  <div
16
22
  class="pf-c-empty-state__body"
17
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
18
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
19
- <div class="pf-c-empty-state__secondary">
20
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
21
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
22
- <button class="pf-c-button pf-m-link" type="button">Can</button>
23
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
24
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
25
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
23
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
24
+
25
+ <div class="pf-c-empty-state__footer">
26
+ <div class="pf-c-empty-state__actions">
27
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
28
+ </div>
29
+ <div class="pf-c-empty-state__actions">
30
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
31
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
32
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
33
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
34
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
35
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
36
+ </div>
26
37
  </div>
27
38
  </div>
28
39
  </div>
@@ -34,17 +45,31 @@ cssPrefix: pf-c-empty-state
34
45
  ```html
35
46
  <div class="pf-c-empty-state pf-m-xs">
36
47
  <div class="pf-c-empty-state__content">
37
- <h1 class="pf-c-title pf-m-md">Empty state</h1>
48
+ <div class="pf-c-empty-state__header">
49
+ <div class="pf-c-empty-state__title">
50
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
51
+ </div>
52
+ </div>
53
+
38
54
  <div
39
55
  class="pf-c-empty-state__body"
40
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
41
- <div class="pf-c-empty-state__secondary">
42
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
43
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
44
- <button class="pf-c-button pf-m-link" type="button">Can</button>
45
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
46
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
47
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
56
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
57
+
58
+ <div class="pf-c-empty-state__footer">
59
+ <div class="pf-c-empty-state__actions">
60
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Multiple</button>
61
+ <button
62
+ class="pf-c-button pf-m-link pf-m-small"
63
+ type="button"
64
+ >Action buttons</button>
65
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Can</button>
66
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Go here</button>
67
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">In the</button>
68
+ <button
69
+ class="pf-c-button pf-m-link pf-m-small"
70
+ type="button"
71
+ >Action area</button>
72
+ </div>
48
73
  </div>
49
74
  </div>
50
75
  </div>
@@ -56,20 +81,32 @@ cssPrefix: pf-c-empty-state
56
81
  ```html
57
82
  <div class="pf-c-empty-state pf-m-sm">
58
83
  <div class="pf-c-empty-state__content">
59
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
84
+ <div class="pf-c-empty-state__header">
85
+ <div class="pf-c-empty-state__icon">
86
+ <i class="fas fa-cubes" aria-hidden="true"></i>
87
+ </div>
88
+ <div class="pf-c-empty-state__title">
89
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
90
+ </div>
91
+ </div>
60
92
 
61
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
62
93
  <div
63
94
  class="pf-c-empty-state__body"
64
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
65
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
66
- <div class="pf-c-empty-state__secondary">
67
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
68
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
69
- <button class="pf-c-button pf-m-link" type="button">Can</button>
70
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
71
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
72
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
95
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
96
+
97
+ <div class="pf-c-empty-state__footer">
98
+ <div class="pf-c-empty-state__actions">
99
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
100
+ </div>
101
+
102
+ <div class="pf-c-empty-state__actions">
103
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
104
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
105
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
106
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
107
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
108
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
109
+ </div>
73
110
  </div>
74
111
  </div>
75
112
  </div>
@@ -81,20 +118,31 @@ cssPrefix: pf-c-empty-state
81
118
  ```html
82
119
  <div class="pf-c-empty-state pf-m-lg">
83
120
  <div class="pf-c-empty-state__content">
84
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
121
+ <div class="pf-c-empty-state__header">
122
+ <div class="pf-c-empty-state__icon">
123
+ <i class="fas fa-cubes" aria-hidden="true"></i>
124
+ </div>
125
+ <div class="pf-c-empty-state__title">
126
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
127
+ </div>
128
+ </div>
85
129
 
86
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
87
130
  <div
88
131
  class="pf-c-empty-state__body"
89
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
90
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
91
- <div class="pf-c-empty-state__secondary">
92
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
93
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
94
- <button class="pf-c-button pf-m-link" type="button">Can</button>
95
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
96
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
97
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
132
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
133
+
134
+ <div class="pf-c-empty-state__footer">
135
+ <div class="pf-c-empty-state__actions">
136
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
137
+ </div>
138
+ <div class="pf-c-empty-state__actions">
139
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
140
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
141
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
142
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
143
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
144
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
145
+ </div>
98
146
  </div>
99
147
  </div>
100
148
  </div>
@@ -106,31 +154,30 @@ cssPrefix: pf-c-empty-state
106
154
  ```html
107
155
  <div class="pf-c-empty-state pf-m-xl">
108
156
  <div class="pf-c-empty-state__content">
109
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
110
-
111
- <h1 class="pf-c-title pf-m-4xl">Empty state</h1>
112
- <div
113
- class="pf-c-empty-state__body"
114
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
115
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
116
- </div>
117
- </div>
118
-
119
- ```
120
-
121
- ### With primary element
122
-
123
- ```html
124
- <div class="pf-c-empty-state">
125
- <div class="pf-c-empty-state__content">
126
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
157
+ <div class="pf-c-empty-state__header">
158
+ <div class="pf-c-empty-state__icon">
159
+ <i class="fas fa-cubes" aria-hidden="true"></i>
160
+ </div>
161
+ <div class="pf-c-empty-state__title">
162
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
163
+ </div>
164
+ </div>
127
165
 
128
- <h1 class="pf-c-title pf-m-lg">Empty State</h1>
129
166
  <div
130
167
  class="pf-c-empty-state__body"
131
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
132
- <div class="pf-c-empty-state__primary">
133
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
168
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
169
+ <div class="pf-c-empty-state__footer">
170
+ <div class="pf-c-empty-state__actions">
171
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
172
+ </div>
173
+ <div class="pf-c-empty-state__actions">
174
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
175
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
176
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
177
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
178
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
179
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
180
+ </div>
134
181
  </div>
135
182
  </div>
136
183
  </div>
@@ -147,18 +194,19 @@ cssPrefix: pf-c-empty-state
147
194
 
148
195
  ### Usage
149
196
 
150
- | Class | Applied to | Outcome |
151
- | ------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
152
- | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
153
- | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
154
- | `.pf-c-empty-state__icon` | `<i>`, `<div>` | Creates the empty state icon or icon container when used as a `<div>`. |
155
- | `.pf-c-title` | `<h1>, <h2>, <h3>, <h4>, <h5>, <h6>` | Creates the empty state title. **Required** |
156
- | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. You can have more than one `.pf-c-empty-state__body` elements. |
157
- | `.pf-c-button.pf-m-primary` | `<button>` | Creates the primary action button. |
158
- | `.pf-c-empty-state__primary` | `<div>` | Container for primary actions. Can be used in lieu of using `.pf-c-button.pf-m-primary`. |
159
- | `.pf-c-empty-state__secondary` | `<div>` | Container secondary actions. |
160
- | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for a extra small variation and max-width. |
161
- | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
162
- | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
163
- | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an x-large variation and max-width. |
164
- | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
197
+ | Class | Applied to | Outcome |
198
+ | ------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
199
+ | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
200
+ | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
201
+ | `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
202
+ | `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
203
+ | `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
204
+ | `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
205
+ | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
206
+ | `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
207
+ | `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
208
+ | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
209
+ | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
210
+ | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
211
+ | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
212
+ | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -233,3 +233,4 @@ When using the `.pf-c-input-group` always ensure labels are used outside the inp
233
233
  | `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
234
234
  | `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
235
235
  | `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
236
+ | `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |
package/docs/components/LabelGroup/examples/LabelGroup.md CHANGED
@@ -740,9 +740,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
740
740
  </span>
741
741
  </li>
742
742
  <li class="pf-c-label-group__list-item">
743
- <span
744
- class="pf-c-label pf-m-blue pf-m-active pf-m-editable pf-m-editable-active"
745
- >
743
+ <span class="pf-c-label pf-m-blue pf-m-editable pf-m-editable-active">
746
744
  <input
747
745
  class="pf-c-label__content"
748
746
  id="editable-labels-label-active-editable-group-example-editable-label-active-editable-content"
@@ -751,16 +749,6 @@ In addition to the JavaScript management of [editable labels](/components/label#
751
749
  "
752
750
  aria-label="Editable text"
753
751
  />
754
-
755
- <button
756
- class="pf-c-button pf-m-plain"
757
- type="button"
758
- id="editable-labels-label-active-editable-group-example-editable-label-active-button"
759
- aria-label="Remove"
760
- aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-active-button editable-labels-label-active-editable-group-example-editable-label-active-text"
761
- >
762
- <i class="fas fa-times" aria-hidden="true"></i>
763
- </button>
764
752
  </span>
765
753
  </li>
766
754
  <li class="pf-c-label-group__list-item pf-m-textarea">
@@ -916,7 +904,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
916
904
  </span>
917
905
  </li>
918
906
  <li class="pf-c-label-group__list-item">
919
- <span class="pf-c-label pf-m-blue pf-m-active pf-m-editable">
907
+ <span class="pf-c-label pf-m-blue pf-m-editable">
920
908
  <button
921
909
  class="pf-c-label__content"
922
910
  id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -178,9 +178,9 @@ cssPrefix: pf-c-menu
178
178
  <input
179
179
  class="pf-c-check__input"
180
180
  type="checkbox"
181
+ disabled
181
182
  id="with-checkbox-example-check-3"
182
183
  name="with-checkbox-example-check-3"
183
- disabled
184
184
  />
185
185
  </span>
186
186
  </span>
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -273,10 +273,10 @@ cssPrefix: pf-c-menu-toggle
273
273
  <input
274
274
  class="pf-c-check__input"
275
275
  type="checkbox"
276
+ disabled
276
277
  id="split-button-checkbox-disabled-example-input"
277
278
  name="split-button-checkbox-disabled-example-input"
278
279
  aria-label="Standalone input"
279
- disabled
280
280
  />
281
281
  </label>
282
282
  <button
@@ -358,9 +358,9 @@ cssPrefix: pf-c-menu-toggle
358
358
  <input
359
359
  class="pf-c-check__input"
360
360
  type="checkbox"
361
+ disabled
361
362
  id="split-button-checkbox-with-toggle-text-disabled-example-input"
362
363
  name="split-button-checkbox-with-toggle-text-disabled-example-input"
363
- disabled
364
364
  />
365
365
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
366
366
  </label>
@@ -449,9 +449,9 @@ cssPrefix: pf-c-menu-toggle
449
449
  <input
450
450
  class="pf-c-check__input"
451
451
  type="checkbox"
452
+ disabled
452
453
  id="split-button-checkbox-primary-disabled-example-input"
453
454
  name="split-button-checkbox-primary-disabled-example-input"
454
- disabled
455
455
  />
456
456
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
457
457
  </label>
@@ -537,9 +537,9 @@ cssPrefix: pf-c-menu-toggle
537
537
  <input
538
538
  class="pf-c-check__input"
539
539
  type="checkbox"
540
+ disabled
540
541
  id="split-button-checkbox-secondary-disabled-example-input"
541
542
  name="split-button-checkbox-secondary-disabled-example-input"
542
- disabled
543
543
  />
544
544
  <span class="pf-c-check__label pf-m-disabled">10 selected</span>
545
545
  </label>
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -1195,42 +1195,141 @@ cssPrefix: pf-c-pagination
1195
1195
 
1196
1196
  ```
1197
1197
 
1198
+ ### Inset
1199
+
1200
+ ```html
1201
+ <div
1202
+ class="pf-c-pagination pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
1203
+ >
1204
+ <div class="pf-c-pagination__total-items">
1205
+ <b>1 - 10</b>&nbsp;of&nbsp;
1206
+ <b>36</b>
1207
+ </div>
1208
+ <div class="pf-c-options-menu">
1209
+ <button
1210
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1211
+ type="button"
1212
+ id="pagination-inset-options-menu-toggle"
1213
+ aria-haspopup="listbox"
1214
+ aria-expanded="false"
1215
+ >
1216
+ <span class="pf-c-options-menu__toggle-text">
1217
+ <b>1 - 10</b>&nbsp;of&nbsp;
1218
+ <b>36</b>
1219
+ </span>
1220
+ <div class="pf-c-options-menu__toggle-icon">
1221
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1222
+ </div>
1223
+ </button>
1224
+ <ul
1225
+ class="pf-c-options-menu__menu"
1226
+ aria-labelledby="pagination-inset-options-menu-toggle"
1227
+ hidden
1228
+ >
1229
+ <li>
1230
+ <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
1231
+ </li>
1232
+ <li>
1233
+ <button class="pf-c-options-menu__menu-item" type="button">
1234
+ 10 per page
1235
+ <div class="pf-c-options-menu__menu-item-icon">
1236
+ <i class="fas fa-check" aria-hidden="true"></i>
1237
+ </div>
1238
+ </button>
1239
+ </li>
1240
+ <li>
1241
+ <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
1242
+ </li>
1243
+ </ul>
1244
+ </div>
1245
+ <nav class="pf-c-pagination__nav" aria-label="Pagination nav - inset example">
1246
+ <div class="pf-c-pagination__nav-control pf-m-first">
1247
+ <button
1248
+ class="pf-c-button pf-m-plain"
1249
+ type="button"
1250
+ disabled
1251
+ aria-label="Go to first page"
1252
+ >
1253
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1254
+ </button>
1255
+ </div>
1256
+ <div class="pf-c-pagination__nav-control pf-m-prev">
1257
+ <button
1258
+ class="pf-c-button pf-m-plain"
1259
+ type="button"
1260
+ disabled
1261
+ aria-label="Go to previous page"
1262
+ >
1263
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1264
+ </button>
1265
+ </div>
1266
+ <div class="pf-c-pagination__nav-page-select">
1267
+ <input
1268
+ class="pf-c-form-control"
1269
+ aria-label="Current page"
1270
+ type="number"
1271
+ min="1"
1272
+ max="4"
1273
+ value="1"
1274
+ />
1275
+ <span aria-hidden="true">of 4</span>
1276
+ </div>
1277
+ <div class="pf-c-pagination__nav-control pf-m-next">
1278
+ <button
1279
+ class="pf-c-button pf-m-plain"
1280
+ type="button"
1281
+ aria-label="Go to next page"
1282
+ >
1283
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1284
+ </button>
1285
+ </div>
1286
+ <div class="pf-c-pagination__nav-control pf-m-last">
1287
+ <button
1288
+ class="pf-c-button pf-m-plain"
1289
+ type="button"
1290
+ aria-label="Go to last page"
1291
+ >
1292
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1293
+ </button>
1294
+ </div>
1295
+ </nav>
1296
+ </div>
1297
+
1298
+ ```
1299
+
1198
1300
  ## Documentation
1199
1301
 
1200
1302
  Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-select`.
1201
1303
 
1202
1304
  ### Accessibility
1203
1305
 
1204
- | Attribute | Applied to | Outcome |
1205
- | ------------ | ----------------------- | --------------------------------------------------------------------------- |
1206
- | `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |
1207
-
1208
- ## Pagination nav input
1209
-
1210
- | Attribute | Applied to | Outcome |
1211
- | --------------- | ---------------------------------------------------------- | -------------------------------------------- |
1212
- | `type="number"` | `.pf-c-pagination` > `.pf-c-form-control` | Defines a field as a number. **Required** |
1213
- | `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
1214
- | `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
1215
- | `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
1306
+ | Attribute | Applied to | Outcome |
1307
+ | --------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
1308
+ | `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |
1309
+ | `type="number"` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Defines a field as a number. **Required** |
1310
+ | `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
1311
+ | `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
1312
+ | `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
1216
1313
 
1217
1314
  ### Usage
1218
1315
 
1219
- | Class | Applied to | Outcome |
1220
- | ----------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1221
- | `.pf-c-pagination` | `<div>` | Initiates pagination. |
1222
- | `.pf-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
1223
- | `.pf-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
1224
- | `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
1225
- | `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
1226
- | `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
1227
- | `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1228
- | `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1229
- | `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
1230
- | `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
1231
- | `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
1232
- | `.pf-m-sticky` | `.pf-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
1233
- | `.pf-m-first` | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button. |
1234
- | `.pf-m-prev` | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button. |
1235
- | `.pf-m-next` | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button. |
1236
- | `.pf-m-last` | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button. |
1316
+ | Class | Applied to | Outcome |
1317
+ | ----------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1318
+ | `.pf-c-pagination` | `<div>` | Initiates pagination. |
1319
+ | `.pf-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
1320
+ | `.pf-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
1321
+ | `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
1322
+ | `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
1323
+ | `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
1324
+ | `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1325
+ | `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1326
+ | `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
1327
+ | `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
1328
+ | `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
1329
+ | `.pf-m-sticky` | `.pf-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
1330
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1331
+ | `.pf-m-page-insets` | `.pf-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
1332
+ | `.pf-m-first` | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button. |
1333
+ | `.pf-m-prev` | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button. |
1334
+ | `.pf-m-next` | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button. |
1335
+ | `.pf-m-last` | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button. |
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -267,7 +267,7 @@ cssPrefix: pf-c-slider
267
267
  value="50"
268
268
  aria-label="Slider value input"
269
269
  />
270
- <span class="pf-c-input-group__text pf-m-plain">%</span>
270
+ <span class="pf-c-input-group__text">%</span>
271
271
  </div>
272
272
  </div>
273
273
  </div>
@@ -297,7 +297,7 @@ cssPrefix: pf-c-slider
297
297
  value="50"
298
298
  aria-label="Slider value input"
299
299
  />
300
- <span class="pf-c-input-group__text pf-m-plain">%</span>
300
+ <span class="pf-c-input-group__text">%</span>
301
301
  </div>
302
302
  </div>
303
303
  </div>
@@ -329,7 +329,7 @@ cssPrefix: pf-c-slider
329
329
  value="50"
330
330
  aria-label="Slider value input"
331
331
  />
332
- <span class="pf-c-input-group__text pf-m-plain">%</span>
332
+ <span class="pf-c-input-group__text">%</span>
333
333
  </div>
334
334
  </div>
335
335
  </div>
@@ -393,7 +393,7 @@ cssPrefix: pf-c-slider
393
393
  value="50"
394
394
  aria-label="Slider value input"
395
395
  />
396
- <span class="pf-c-input-group__text pf-m-plain">%</span>
396
+ <span class="pf-c-input-group__text pf-m-disabled">%</span>
397
397
  </div>
398
398
  </div>
399
399
  </div>
@@ -429,7 +429,7 @@ cssPrefix: pf-c-slider
429
429
  value="50"
430
430
  aria-label="Slider value input"
431
431
  />
432
- <span class="pf-c-input-group__text pf-m-plain">%</span>
432
+ <span class="pf-c-input-group__text">%</span>
433
433
  </div>
434
434
  </div>
435
435
  </div>
@@ -570,7 +570,7 @@ cssPrefix: pf-c-slider
570
570
  value="50"
571
571
  aria-label="Slider value input"
572
572
  />
573
- <span class="pf-c-input-group__text pf-m-plain">%</span>
573
+ <span class="pf-c-input-group__text pf-m-disabled">%</span>
574
574
  </div>
575
575
  </div>
576
576
  </div>