@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.4

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 (32) hide show
  1. package/README.md +1 -1
  2. package/RELEASE-NOTES.md +30 -0
  3. package/components/Dropdown/dropdown.css +15 -0
  4. package/components/Dropdown/dropdown.scss +20 -0
  5. package/components/FormControl/form-control.css +1 -1
  6. package/components/FormControl/themes/dark/form-control.scss +1 -1
  7. package/components/InputGroup/input-group.css +14 -0
  8. package/components/InputGroup/input-group.scss +9 -0
  9. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  10. package/components/Menu/menu.css +4 -0
  11. package/components/Menu/menu.scss +5 -0
  12. package/components/Pagination/pagination.css +228 -0
  13. package/components/Pagination/pagination.scss +30 -1
  14. package/components/Slider/slider.css +0 -7
  15. package/components/Slider/slider.scss +0 -9
  16. package/docs/components/Dropdown/examples/Dropdown.md +216 -0
  17. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  18. package/docs/components/Pagination/examples/Pagination.md +129 -30
  19. package/docs/components/Slider/examples/Slider.md +6 -6
  20. package/docs/components/Tabs/examples/Tabs.md +1 -1
  21. package/docs/demos/Banner/examples/Banner.md +2 -2
  22. package/docs/demos/Card/examples/Card.md +3 -3
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  24. package/docs/demos/Nav/examples/Nav.md +671 -718
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -2
  26. package/docs/demos/Tabs/examples/Tabs.md +42 -539
  27. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  28. package/package.json +5 -5
  29. package/patternfly-no-reset.css +262 -8
  30. package/patternfly.css +262 -8
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -982,6 +982,220 @@ cssPrefix: pf-c-dropdown
982
982
 
983
983
  ```
984
984
 
985
+ ### Split button (progress checkbox)
986
+
987
+ ```html isBeta
988
+ <div class="pf-c-dropdown">
989
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
990
+ <label
991
+ class="pf-c-dropdown__toggle-check"
992
+ for="dropdown-split-button-progress-toggle-check"
993
+ >
994
+ <input
995
+ type="checkbox"
996
+ id="dropdown-split-button-progress-toggle-check"
997
+ aria-label="Select all"
998
+ />
999
+ <span class="pf-c-dropdown__toggle-progress">
1000
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1001
+ <circle
1002
+ class="pf-c-spinner__path"
1003
+ cx="50"
1004
+ cy="50"
1005
+ r="45"
1006
+ fill="none"
1007
+ />
1008
+ </svg>
1009
+ </span>
1010
+ </label>
1011
+
1012
+ <button
1013
+ class="pf-c-dropdown__toggle-button"
1014
+ type="button"
1015
+ aria-expanded="false"
1016
+ id="dropdown-split-button-progress-toggle-button"
1017
+ aria-label="Dropdown toggle"
1018
+ >
1019
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1020
+ </button>
1021
+ </div>
1022
+ <ul class="pf-c-dropdown__menu" hidden>
1023
+ <li>
1024
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1025
+ </li>
1026
+ <li>
1027
+ <button
1028
+ class="pf-c-dropdown__menu-item"
1029
+ type="button"
1030
+ disabled
1031
+ >Disabled action</button>
1032
+ </li>
1033
+ <li>
1034
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1035
+ </li>
1036
+ </ul>
1037
+ </div>
1038
+ <div class="pf-c-dropdown">
1039
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
1040
+ <label
1041
+ class="pf-c-dropdown__toggle-check pf-m-in-progress"
1042
+ for="dropdown-split-button-in-progress-toggle-check"
1043
+ >
1044
+ <input
1045
+ type="checkbox"
1046
+ id="dropdown-split-button-in-progress-toggle-check"
1047
+ disabled
1048
+ aria-label="Select all"
1049
+ />
1050
+ <span class="pf-c-dropdown__toggle-progress">
1051
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1052
+ <circle
1053
+ class="pf-c-spinner__path"
1054
+ cx="50"
1055
+ cy="50"
1056
+ r="45"
1057
+ fill="none"
1058
+ />
1059
+ </svg>
1060
+ </span>
1061
+ </label>
1062
+
1063
+ <button
1064
+ class="pf-c-dropdown__toggle-button"
1065
+ type="button"
1066
+ aria-expanded="false"
1067
+ id="dropdown-split-button-in-progress-toggle-button"
1068
+ aria-label="Dropdown toggle"
1069
+ >
1070
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1071
+ </button>
1072
+ </div>
1073
+ <ul class="pf-c-dropdown__menu" hidden>
1074
+ <li>
1075
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1076
+ </li>
1077
+ <li>
1078
+ <button
1079
+ class="pf-c-dropdown__menu-item"
1080
+ type="button"
1081
+ disabled
1082
+ >Disabled action</button>
1083
+ </li>
1084
+ <li>
1085
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1086
+ </li>
1087
+ </ul>
1088
+ </div>
1089
+ <div class="pf-c-dropdown">
1090
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
1091
+ <label
1092
+ class="pf-c-dropdown__toggle-check"
1093
+ for="dropdown-split-button-progress-text-toggle-check"
1094
+ >
1095
+ <input
1096
+ type="checkbox"
1097
+ id="dropdown-split-button-progress-text-toggle-check"
1098
+ aria-label="Select all"
1099
+ checked
1100
+ aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
1101
+ />
1102
+ <span class="pf-c-dropdown__toggle-progress">
1103
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1104
+ <circle
1105
+ class="pf-c-spinner__path"
1106
+ cx="50"
1107
+ cy="50"
1108
+ r="45"
1109
+ fill="none"
1110
+ />
1111
+ </svg>
1112
+ </span>
1113
+ <span
1114
+ class="pf-c-dropdown__toggle-text"
1115
+ aria-hidden="true"
1116
+ id="dropdown-split-button-progress-text-toggle-check-text"
1117
+ >10 selected</span>
1118
+ </label>
1119
+
1120
+ <button
1121
+ class="pf-c-dropdown__toggle-button"
1122
+ type="button"
1123
+ aria-expanded="false"
1124
+ id="dropdown-split-button-progress-text-toggle-button"
1125
+ aria-label="Dropdown toggle"
1126
+ >
1127
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1128
+ </button>
1129
+ </div>
1130
+ <ul class="pf-c-dropdown__menu" hidden>
1131
+ <li>
1132
+ <button class="pf-c-dropdown__menu-item" type="button">Select all</button>
1133
+ </li>
1134
+ <li>
1135
+ <button class="pf-c-dropdown__menu-item" type="button">Select none</button>
1136
+ </li>
1137
+ <li>
1138
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1139
+ </li>
1140
+ </ul>
1141
+ </div>
1142
+ <div class="pf-c-dropdown">
1143
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
1144
+ <label
1145
+ class="pf-c-dropdown__toggle-check pf-m-in-progress"
1146
+ for="dropdown-split-button-in-progress-text-toggle-check"
1147
+ >
1148
+ <input
1149
+ type="checkbox"
1150
+ id="dropdown-split-button-in-progress-text-toggle-check"
1151
+ disabled
1152
+ aria-label="Select all"
1153
+ checked
1154
+ aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
1155
+ />
1156
+ <span class="pf-c-dropdown__toggle-progress">
1157
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1158
+ <circle
1159
+ class="pf-c-spinner__path"
1160
+ cx="50"
1161
+ cy="50"
1162
+ r="45"
1163
+ fill="none"
1164
+ />
1165
+ </svg>
1166
+ </span>
1167
+ <span
1168
+ class="pf-c-dropdown__toggle-text"
1169
+ aria-hidden="true"
1170
+ id="dropdown-split-button-in-progress-text-toggle-check-text"
1171
+ >10 selected</span>
1172
+ </label>
1173
+
1174
+ <button
1175
+ class="pf-c-dropdown__toggle-button"
1176
+ type="button"
1177
+ aria-expanded="false"
1178
+ id="dropdown-split-button-in-progress-text-toggle-button"
1179
+ aria-label="Dropdown toggle"
1180
+ >
1181
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1182
+ </button>
1183
+ </div>
1184
+ <ul class="pf-c-dropdown__menu" hidden>
1185
+ <li>
1186
+ <button class="pf-c-dropdown__menu-item" type="button">Select all</button>
1187
+ </li>
1188
+ <li>
1189
+ <button class="pf-c-dropdown__menu-item" type="button">Select none</button>
1190
+ </li>
1191
+ <li>
1192
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1193
+ </li>
1194
+ </ul>
1195
+ </div>
1196
+
1197
+ ```
1198
+
985
1199
  ### Split button (action)
986
1200
 
987
1201
  ```html
@@ -2080,6 +2294,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
2080
2294
  | `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
2081
2295
  | `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
2082
2296
  | `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
2297
+ | `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
2083
2298
  | `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
2084
2299
  | `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
2085
2300
  | `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
@@ -2107,3 +2322,4 @@ The dropdown menu can contain either links or buttons, depending on the expected
2107
2322
  | `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
2108
2323
  | `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
2109
2324
  | `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
2325
+ | `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |
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/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>
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -7576,7 +7576,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
7576
7576
  | `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
7577
7577
  | `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
7578
7578
  | `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
7579
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
7579
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7580
7580
  | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
7581
7581
  | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
7582
7582
  | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -892,7 +892,7 @@ wrapperTag: div
892
892
  </div>
893
893
  </div>
894
894
  </section>
895
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
895
+ <section class="pf-c-page__main-section pf-m-limit-width">
896
896
  <div class="pf-c-page__main-body">
897
897
  <div class="pf-l-gallery pf-m-gutter">
898
898
  <div class="pf-c-card">
@@ -2009,7 +2009,7 @@ wrapperTag: div
2009
2009
  </div>
2010
2010
  </div>
2011
2011
  </section>
2012
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
2012
+ <section class="pf-c-page__main-section pf-m-limit-width">
2013
2013
  <div class="pf-c-page__main-body">
2014
2014
  <div class="pf-l-gallery pf-m-gutter">
2015
2015
  <div class="pf-c-card">
package/docs/demos/Card/examples/Card.md CHANGED
@@ -990,7 +990,7 @@ wrapperTag: div
990
990
  1
991
991
  </span>
992
992
  </span>
993
- <span class="pf-c-label pf-m-orange pf-m-default">
993
+ <span class="pf-c-label pf-m-orange">
994
994
  <span class="pf-c-label__content">
995
995
  <span class="pf-c-label__icon">
996
996
  <i
@@ -1183,7 +1183,7 @@ wrapperTag: div
1183
1183
  1
1184
1184
  </span>
1185
1185
  </span>
1186
- <span class="pf-c-label pf-m-orange pf-m-default">
1186
+ <span class="pf-c-label pf-m-orange">
1187
1187
  <span class="pf-c-label__content">
1188
1188
  <span class="pf-c-label__icon">
1189
1189
  <i
@@ -1630,7 +1630,7 @@ wrapperTag: div
1630
1630
  1
1631
1631
  </span>
1632
1632
  </span>
1633
- <span class="pf-c-label pf-m-orange pf-m-default">
1633
+ <span class="pf-c-label pf-m-orange">
1634
1634
  <span class="pf-c-label__content">
1635
1635
  <span class="pf-c-label__icon">
1636
1636
  <i
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -869,7 +869,6 @@ cssPrefix: pf-d-dashboard
869
869
  </div>
870
870
  </div>
871
871
  </section>
872
-
873
872
  <section class="pf-c-page__main-section pf-m-limit-width">
874
873
  <div class="pf-c-page__main-body">
875
874
  <div class="pf-l-grid pf-m-gutter">
@@ -1345,9 +1344,7 @@ cssPrefix: pf-d-dashboard
1345
1344
  </span>
1346
1345
  </li>
1347
1346
  <li class="pf-c-label-group__list-item">
1348
- <span
1349
- class="pf-c-label pf-m-orange pf-m-default"
1350
- >
1347
+ <span class="pf-c-label pf-m-orange">
1351
1348
  <span class="pf-c-label__content">
1352
1349
  <span class="pf-c-label__icon">
1353
1350
  <i