@patternfly/patternfly 4.179.3 → 4.180.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 (29) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +4 -1
  5. package/components/MenuToggle/menu-toggle.scss +4 -3
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  9. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  10. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  11. package/docs/components/FormControl/examples/FormControl.md +0 -11
  12. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  13. package/docs/components/Menu/examples/Menu.md +60 -28
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  15. package/docs/components/Select/examples/Select.md +30 -14
  16. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  17. package/docs/components/TreeView/examples/TreeView.md +15 -7
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +164 -113
  19. package/docs/demos/DataList/examples/DataList.md +159 -114
  20. package/docs/demos/Masthead/examples/Masthead.md +284 -167
  21. package/docs/demos/Page/examples/Page.md +252 -105
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  23. package/docs/demos/Table/examples/Table.md +1176 -639
  24. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +9 -3
  27. package/patternfly.css +9 -3
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -29,7 +29,7 @@ section: components
29
29
  <div class="pf-c-toolbar__group pf-m-filter-group">
30
30
  <div class="pf-c-toolbar__item pf-m-search-filter">
31
31
  <div class="pf-c-input-group">
32
- <div class="pf-c-select" style="width: 150px">
32
+ <div class="pf-c-select" style="width: 175px">
33
33
  <span
34
34
  id="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
35
35
  hidden
@@ -59,7 +59,7 @@ section: components
59
59
  role="listbox"
60
60
  aria-labelledby="toolbar-attribute-value-search-filter-desktop-example-select-name-label"
61
61
  hidden
62
- style="width: 150px"
62
+ style="width: 175px"
63
63
  >
64
64
  <li role="presentation">
65
65
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -93,21 +93,21 @@ section: components
93
93
  </li>
94
94
  </ul>
95
95
  </div>
96
- <input
97
- class="pf-c-form-control"
98
- id="toolbar-attribute-value-search-filter-desktop-example-textInput11"
99
- name="textInput11"
100
- type="search"
101
- placeholder="Filter by name..."
102
- aria-label="Search input example"
103
- />
104
- <button
105
- class="pf-c-button pf-m-control"
106
- type="button"
107
- aria-label="Search button for search input"
108
- >
109
- <i class="fas fa-search" aria-hidden="true"></i>
110
- </button>
96
+ <div class="pf-c-search-input">
97
+ <div class="pf-c-search-input__bar">
98
+ <span class="pf-c-search-input__text">
99
+ <span class="pf-c-search-input__icon">
100
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
101
+ </span>
102
+ <input
103
+ class="pf-c-search-input__text-input"
104
+ type="text"
105
+ placeholder="Filter by name"
106
+ aria-label="Filter by name"
107
+ />
108
+ </span>
109
+ </div>
110
+ </div>
111
111
  </div>
112
112
  </div>
113
113
  </div>
@@ -383,7 +383,7 @@ section: components
383
383
  <div class="pf-c-toolbar__group pf-m-filter-group">
384
384
  <div class="pf-c-toolbar__item">
385
385
  <div class="pf-c-input-group">
386
- <div class="pf-c-select" style="width: 150px">
386
+ <div class="pf-c-select" style="width: 175px">
387
387
  <span
388
388
  id="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label"
389
389
  hidden
@@ -413,7 +413,7 @@ section: components
413
413
  role="listbox"
414
414
  aria-labelledby="toolbar-attribute-value-search-filter-mobile-example-select-name-expanded-label"
415
415
  hidden
416
- style="width: 150px"
416
+ style="width: 175px"
417
417
  >
418
418
  <li role="presentation">
419
419
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -444,21 +444,21 @@ section: components
444
444
  </li>
445
445
  </ul>
446
446
  </div>
447
- <input
448
- class="pf-c-form-control"
449
- id="toolbar-attribute-value-search-filter-mobile-example-textInput12"
450
- name="textInput11"
451
- type="search"
452
- placeholder="Filter by name..."
453
- aria-label="Search input example"
454
- />
455
- <button
456
- class="pf-c-button pf-m-control"
457
- type="button"
458
- aria-label="Search button for search input"
459
- >
460
- <i class="fas fa-search" aria-hidden="true"></i>
461
- </button>
447
+ <div class="pf-c-search-input">
448
+ <div class="pf-c-search-input__bar">
449
+ <span class="pf-c-search-input__text">
450
+ <span class="pf-c-search-input__icon">
451
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
452
+ </span>
453
+ <input
454
+ class="pf-c-search-input__text-input"
455
+ type="text"
456
+ placeholder="Filter by name"
457
+ aria-label="Filter by name"
458
+ />
459
+ </span>
460
+ </div>
461
+ </div>
462
462
  </div>
463
463
  </div>
464
464
  </div>
@@ -491,7 +491,7 @@ section: components
491
491
  </div>
492
492
  <div class="pf-c-toolbar__group pf-m-filter-group">
493
493
  <div class="pf-c-toolbar__item">
494
- <div class="pf-c-select" style="width: 150px">
494
+ <div class="pf-c-select" style="width: 175px">
495
495
  <span
496
496
  id="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
497
497
  hidden
@@ -521,7 +521,7 @@ section: components
521
521
  role="listbox"
522
522
  aria-labelledby="toolbar-attribute-value-single-select-filter-desktop-example-select-status-label"
523
523
  hidden
524
- style="width: 150px"
524
+ style="width: 175px"
525
525
  >
526
526
  <li role="presentation">
527
527
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1033,7 +1033,7 @@ section: components
1033
1033
  </div>
1034
1034
  <div class="pf-c-toolbar__group pf-m-filter-group">
1035
1035
  <div class="pf-c-toolbar__item">
1036
- <div class="pf-c-select" style="width: 150px">
1036
+ <div class="pf-c-select" style="width: 175px">
1037
1037
  <span
1038
1038
  id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
1039
1039
  hidden
@@ -1063,7 +1063,7 @@ section: components
1063
1063
  role="listbox"
1064
1064
  aria-labelledby="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-status-label"
1065
1065
  hidden
1066
- style="width: 150px"
1066
+ style="width: 175px"
1067
1067
  >
1068
1068
  <li role="presentation">
1069
1069
  <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -2025,7 +2025,7 @@ section: components
2025
2025
  <div class="pf-c-toolbar__group pf-m-filter-group">
2026
2026
  <div class="pf-c-toolbar__item pf-m-search-filter">
2027
2027
  <div class="pf-c-input-group">
2028
- <div class="pf-c-select" style="width: 150px">
2028
+ <div class="pf-c-select" style="width: 175px">
2029
2029
  <span
2030
2030
  id="toolbar-pagination-management-mobile-example-select-name-label"
2031
2031
  hidden
@@ -2055,7 +2055,7 @@ section: components
2055
2055
  role="listbox"
2056
2056
  aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label"
2057
2057
  hidden
2058
- style="width: 150px"
2058
+ style="width: 175px"
2059
2059
  >
2060
2060
  <li role="presentation">
2061
2061
  <button
@@ -2095,21 +2095,21 @@ section: components
2095
2095
  </li>
2096
2096
  </ul>
2097
2097
  </div>
2098
- <input
2099
- class="pf-c-form-control"
2100
- id="toolbar-pagination-management-mobile-example-textInput11"
2101
- name="textInput11"
2102
- type="search"
2103
- placeholder="Filter by name..."
2104
- aria-label="Search input example"
2105
- />
2106
- <button
2107
- class="pf-c-button pf-m-control"
2108
- type="button"
2109
- aria-label="Search button for search input"
2110
- >
2111
- <i class="fas fa-search" aria-hidden="true"></i>
2112
- </button>
2098
+ <div class="pf-c-search-input">
2099
+ <div class="pf-c-search-input__bar">
2100
+ <span class="pf-c-search-input__text">
2101
+ <span class="pf-c-search-input__icon">
2102
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2103
+ </span>
2104
+ <input
2105
+ class="pf-c-search-input__text-input"
2106
+ type="text"
2107
+ placeholder="Filter by name"
2108
+ aria-label="Filter by name"
2109
+ />
2110
+ </span>
2111
+ </div>
2112
+ </div>
2113
2113
  </div>
2114
2114
  </div>
2115
2115
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.179.3",
4
+ "version": "4.180.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -12680,8 +12680,8 @@ label.pf-c-check, .pf-c-check__label,
12680
12680
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
12681
12681
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
12682
12682
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
12683
- --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
12684
- --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
12683
+ --pf-c-dropdown__toggle-image--MarginTop: 0;
12684
+ --pf-c-dropdown__toggle-image--MarginBottom: 0;
12685
12685
  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
12686
12686
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
12687
12687
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -12963,9 +12963,11 @@ label.pf-c-check, .pf-c-check__label,
12963
12963
  .pf-c-dropdown__toggle-image {
12964
12964
  display: inline-flex;
12965
12965
  flex-shrink: 0;
12966
+ align-self: center;
12966
12967
  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
12967
12968
  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
12968
12969
  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
12970
+ line-height: 1;
12969
12971
  }
12970
12972
  .pf-c-dropdown__toggle-image:last-child {
12971
12973
  --pf-c-dropdown__toggle-image--MarginRight: 0;
@@ -17054,7 +17056,6 @@ ul.pf-c-list {
17054
17056
  --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
17055
17057
  --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
17056
17058
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
17057
- --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
17058
17059
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
17059
17060
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
17060
17061
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -17202,7 +17203,11 @@ ul.pf-c-list {
17202
17203
  }
17203
17204
 
17204
17205
  .pf-c-menu-toggle__icon {
17206
+ display: inline-flex;
17207
+ align-self: center;
17208
+ flex-shrink: 0;
17205
17209
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
17210
+ line-height: 1;
17206
17211
  }
17207
17212
 
17208
17213
  .pf-c-menu-toggle__text {
@@ -20954,6 +20959,7 @@ label.pf-c-radio, .pf-c-radio__label,
20954
20959
  --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
20955
20960
  --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
20956
20961
  position: relative;
20962
+ width: 100%;
20957
20963
  }
20958
20964
 
20959
20965
  .pf-c-search-input__bar {
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;
@@ -17176,7 +17178,6 @@ ul.pf-c-list {
17176
17178
  --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
17177
17179
  --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
17178
17180
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
17179
- --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
17180
17181
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
17181
17182
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
17182
17183
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -17324,7 +17325,11 @@ ul.pf-c-list {
17324
17325
  }
17325
17326
 
17326
17327
  .pf-c-menu-toggle__icon {
17328
+ display: inline-flex;
17329
+ align-self: center;
17330
+ flex-shrink: 0;
17327
17331
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
17332
+ line-height: 1;
17328
17333
  }
17329
17334
 
17330
17335
  .pf-c-menu-toggle__text {
@@ -21076,6 +21081,7 @@ label.pf-c-radio, .pf-c-radio__label,
21076
21081
  --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
21077
21082
  --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
21078
21083
  position: relative;
21084
+ width: 100%;
21079
21085
  }
21080
21086
 
21081
21087
  .pf-c-search-input__bar {