@patternfly/patternfly 4.179.3 → 4.181.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.
Files changed (45) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -12802,8 +12802,8 @@ label.pf-c-check, .pf-c-check__label,
12802
12802
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
12803
12803
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
12804
12804
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
12805
- --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
12806
- --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
12805
+ --pf-c-dropdown__toggle-image--MarginTop: 0;
12806
+ --pf-c-dropdown__toggle-image--MarginBottom: 0;
12807
12807
  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
12808
12808
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
12809
12809
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -13085,9 +13085,11 @@ label.pf-c-check, .pf-c-check__label,
13085
13085
  .pf-c-dropdown__toggle-image {
13086
13086
  display: inline-flex;
13087
13087
  flex-shrink: 0;
13088
+ align-self: center;
13088
13089
  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
13089
13090
  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
13090
13091
  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
13092
+ line-height: 1;
13091
13093
  }
13092
13094
  .pf-c-dropdown__toggle-image:last-child {
13093
13095
  --pf-c-dropdown__toggle-image--MarginRight: 0;
@@ -14174,6 +14176,18 @@ label.pf-c-check, .pf-c-check__label,
14174
14176
  --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14175
14177
  --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14176
14178
  --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
14179
+ --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#success");
14180
+ --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#warning");
14181
+ --pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#invalid");
14182
+ --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#select");
14183
+ --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#search");
14184
+ --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#calendar");
14185
+ --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("./assets/images/status-icon-sprite.svg#clock");
14186
+ --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
14187
+ --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px);
14188
+ --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
14189
+ --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
14190
+ --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
14177
14191
  color: var(--pf-global--Color--100);
14178
14192
  width: var(--pf-c-form-control--Width);
14179
14193
  padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -14287,6 +14301,20 @@ label.pf-c-check, .pf-c-check__label,
14287
14301
  .pf-c-form-control.pf-m-icon.pf-m-clock {
14288
14302
  --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
14289
14303
  }
14304
+ .pf-c-form-control.pf-m-icon-sprite {
14305
+ --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
14306
+ --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
14307
+ --pf-c-form-control--m-invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-invalid--BackgroundUrl);
14308
+ --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
14309
+ --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
14310
+ --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
14311
+ --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
14312
+ --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
14313
+ --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
14314
+ --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
14315
+ --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
14316
+ --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
14317
+ }
14290
14318
  select.pf-c-form-control {
14291
14319
  --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
14292
14320
  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
@@ -16637,6 +16665,7 @@ ul.pf-c-list {
16637
16665
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
16638
16666
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
16639
16667
  --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
16668
+ --pf-c-menu__item-check--MarginRight: var(--pf-global--spacer--sm);
16640
16669
  --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
16641
16670
  --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
16642
16671
  --pf-c-menu__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
@@ -16999,6 +17028,9 @@ ul.pf-c-list {
16999
17028
  .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
17000
17029
  opacity: 1;
17001
17030
  }
17031
+ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
17032
+ cursor: pointer;
17033
+ }
17002
17034
 
17003
17035
  .pf-c-menu__item-main {
17004
17036
  display: flex;
@@ -17043,6 +17075,12 @@ ul.pf-c-list {
17043
17075
  margin-right: var(--pf-c-menu__item-icon--MarginRight);
17044
17076
  }
17045
17077
 
17078
+ .pf-c-menu__item-check {
17079
+ display: flex;
17080
+ align-items: center;
17081
+ margin-right: var(--pf-c-menu__item-check--MarginRight);
17082
+ }
17083
+
17046
17084
  .pf-c-menu__item-toggle-icon {
17047
17085
  padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
17048
17086
  padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft);
@@ -17176,7 +17214,6 @@ ul.pf-c-list {
17176
17214
  --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
17177
17215
  --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
17178
17216
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
17179
- --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
17180
17217
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
17181
17218
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
17182
17219
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -17268,34 +17305,32 @@ ul.pf-c-list {
17268
17305
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
17269
17306
  }
17270
17307
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
17271
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
17272
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17273
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17274
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17275
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
17276
17308
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
17277
17309
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
17278
17310
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
17279
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
17280
17311
  display: inline-block;
17312
+ color: var(--pf-c-menu-toggle--m-plain--Color);
17281
17313
  }
17282
17314
  .pf-c-menu-toggle:hover {
17283
17315
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
17284
17316
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
17285
17317
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
17286
17318
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
17319
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
17287
17320
  }
17288
17321
  .pf-c-menu-toggle:focus {
17289
17322
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
17290
17323
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
17291
17324
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
17292
17325
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
17326
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
17293
17327
  }
17294
17328
  .pf-c-menu-toggle:active {
17295
17329
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
17296
17330
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
17297
17331
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
17298
17332
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
17333
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
17299
17334
  }
17300
17335
  .pf-c-menu-toggle.pf-m-expanded {
17301
17336
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
@@ -17303,10 +17338,12 @@ ul.pf-c-list {
17303
17338
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
17304
17339
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
17305
17340
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
17341
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
17306
17342
  }
17307
17343
  .pf-c-menu-toggle:disabled {
17308
17344
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
17309
17345
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
17346
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
17310
17347
  pointer-events: none;
17311
17348
  }
17312
17349
  .pf-c-menu-toggle.pf-m-primary::before, .pf-c-menu-toggle.pf-m-primary::after, .pf-c-menu-toggle.pf-m-plain::before, .pf-c-menu-toggle.pf-m-plain::after, .pf-c-menu-toggle:disabled::before, .pf-c-menu-toggle:disabled::after {
@@ -17324,7 +17361,11 @@ ul.pf-c-list {
17324
17361
  }
17325
17362
 
17326
17363
  .pf-c-menu-toggle__icon {
17364
+ display: inline-flex;
17365
+ align-self: center;
17366
+ flex-shrink: 0;
17327
17367
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
17368
+ line-height: 1;
17328
17369
  }
17329
17370
 
17330
17371
  .pf-c-menu-toggle__text {
@@ -21076,6 +21117,7 @@ label.pf-c-radio, .pf-c-radio__label,
21076
21117
  --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
21077
21118
  --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
21078
21119
  position: relative;
21120
+ width: 100%;
21079
21121
  }
21080
21122
 
21081
21123
  .pf-c-search-input__bar {