@patternfly/patternfly 5.0.0-alpha.57 → 5.0.0-alpha.58

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/assets/images/pf_logo.svg +11 -11
  2. package/base/patternfly-variables.css +3 -1
  3. package/base/themes/dark/_variables.scss +2 -0
  4. package/components/Alert/alert.css +7 -7
  5. package/components/Alert/themes/dark/alert.scss +7 -7
  6. package/components/AppLauncher/app-launcher.css +1 -0
  7. package/components/AppLauncher/app-launcher.scss +1 -0
  8. package/components/Badge/badge.css +1 -0
  9. package/components/Badge/themes/dark/badge.scss +1 -0
  10. package/components/Banner/banner.css +6 -8
  11. package/components/Banner/banner.scss +5 -5
  12. package/components/Banner/themes/dark/banner.scss +2 -6
  13. package/components/Button/button.css +4 -0
  14. package/components/Button/button.scss +2 -0
  15. package/components/Button/themes/dark/button.scss +4 -2
  16. package/components/CalendarMonth/calendar-month.css +3 -3
  17. package/components/CalendarMonth/calendar-month.scss +1 -5
  18. package/components/CalendarMonth/themes/dark/calendar-month.scss +2 -0
  19. package/components/DragDrop/drag-drop.css +23 -7
  20. package/components/DragDrop/drag-drop.scss +36 -17
  21. package/components/DragDrop/themes/dark/drag-drop.scss +7 -0
  22. package/components/Dropdown/dropdown.css +2 -0
  23. package/components/Dropdown/themes/dark/dropdown.scss +2 -0
  24. package/components/DualListSelector/dual-list-selector.css +9 -3
  25. package/components/DualListSelector/dual-list-selector.scss +10 -3
  26. package/components/DualListSelector/themes/dark/dual-list-selector.scss +9 -0
  27. package/components/FormControl/form-control.css +1 -1
  28. package/components/FormControl/themes/dark/form-control.scss +1 -1
  29. package/components/InputGroup/input-group.css +1 -1
  30. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  31. package/components/Label/label.css +6 -0
  32. package/components/Label/themes/dark/label.scss +6 -0
  33. package/components/Menu/menu.css +0 -1
  34. package/components/Menu/themes/dark/menu.scss +0 -1
  35. package/components/MenuToggle/menu-toggle.css +7 -5
  36. package/components/MenuToggle/menu-toggle.scss +2 -3
  37. package/components/MenuToggle/themes/dark/menu-toggle.scss +17 -14
  38. package/components/Nav/nav.css +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/NotificationBadge/notification-badge.css +1 -0
  41. package/components/NotificationBadge/themes/dark/notification-badge.scss +1 -0
  42. package/components/Panel/panel.css +6 -0
  43. package/components/Panel/panel.scss +9 -0
  44. package/components/Panel/themes/dark/panel.scss +7 -0
  45. package/components/Popover/popover.css +1 -1
  46. package/components/Popover/themes/dark/popover.scss +1 -1
  47. package/components/ProgressStepper/progress-stepper.css +1 -0
  48. package/components/ProgressStepper/progress-stepper.scss +240 -239
  49. package/components/Tabs/tabs.css +1 -0
  50. package/components/Tabs/themes/dark/tabs.scss +1 -0
  51. package/components/TextInputGroup/text-input-group.css +8 -0
  52. package/components/TextInputGroup/text-input-group.scss +7 -0
  53. package/components/TextInputGroup/themes/dark/text-input-group.scss +11 -0
  54. package/components/ToggleGroup/themes/dark/toggle-group.scss +1 -0
  55. package/components/ToggleGroup/toggle-group.css +3 -0
  56. package/components/ToggleGroup/toggle-group.scss +2 -0
  57. package/components/Wizard/themes/dark/wizard.scss +0 -2
  58. package/components/Wizard/wizard.css +2 -4
  59. package/components/Wizard/wizard.scss +2 -2
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +1 -1
  61. package/docs/components/Slider/examples/Slider.md +15 -13
  62. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  63. package/package.json +2 -2
  64. package/patternfly-base-no-globals.css +3 -1
  65. package/patternfly-base.css +3 -1
  66. package/patternfly-no-globals.css +150 -43
  67. package/patternfly.css +150 -43
  68. package/patternfly.min.css +1 -1
  69. package/patternfly.min.css.map +1 -1
  70. package/sass-utilities/mixins.scss +3 -1
  71. package/sass-utilities/themes/dark/scss-variables.scss +7 -2
@@ -837,5 +837,6 @@
837
837
  :where(.pf-v5-theme-dark) .pf-v5-c-tabs {
838
838
  --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
839
839
  --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
840
+ --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
840
841
  --pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
841
842
  }
@@ -4,6 +4,7 @@
4
4
  .#{$tabs} {
5
5
  --#{$tabs}__scroll-button--BackgroundColor: transparent;
6
6
  --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
7
+ --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--300);
7
8
  --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
8
9
  }
9
10
  }
@@ -146,4 +146,12 @@
146
146
 
147
147
  .pf-v5-c-text-input-group__group {
148
148
  display: flex;
149
+ }
150
+
151
+ :where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
152
+ --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
153
+ --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
154
+ --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
155
+ --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
156
+ --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
149
157
  }
@@ -188,3 +188,10 @@
188
188
  .#{$text-input-group}__group {
189
189
  display: flex;
190
190
  }
191
+
192
+ // stylelint-disable no-invalid-position-at-import-rule
193
+ @import "themes/dark/text-input-group";
194
+
195
+ @include pf-v5-theme-dark {
196
+ @include pf-v5-theme-dark-text-input-group;
197
+ }
@@ -0,0 +1,11 @@
1
+ @import "../../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin pf-v5-theme-dark-text-input-group() {
4
+ .#{$text-input-group} {
5
+ --#{$text-input-group}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
6
+ --#{$text-input-group}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
7
+ --#{$text-input-group}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
8
+ --#{$text-input-group}__text--before--BorderWidth: 0;
9
+ --#{$text-input-group}__text--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
10
+ }
11
+ }
@@ -7,5 +7,6 @@
7
7
  --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-600);
8
8
  --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--palette--black-100);
9
9
  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--primary-color--300);
10
+ --#{$toggle-group}__button--m-selected--Color: var(--#{$pf-global}--primary-color--400);
10
11
  }
11
12
  }
@@ -25,6 +25,7 @@
25
25
  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
26
26
  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
27
27
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
28
+ --pf-v5-c-toggle-group__button--m-selected--Color: initial;
28
29
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
29
30
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
30
31
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
@@ -88,6 +89,7 @@
88
89
  }
89
90
  .pf-v5-c-toggle-group__button.pf-m-selected {
90
91
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
92
+ --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
91
93
  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--m-selected--ZIndex);
92
94
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--m-selected--before--BorderColor);
93
95
  }
@@ -108,4 +110,5 @@
108
110
  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
109
111
  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
110
112
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
113
+ --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
111
114
  }
@@ -34,6 +34,7 @@
34
34
 
35
35
  // Selected
36
36
  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
37
+ --#{$toggle-group}__button--m-selected--Color: initial;
37
38
  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
38
39
  --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
39
40
 
@@ -119,6 +120,7 @@
119
120
 
120
121
  &.pf-m-selected {
121
122
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
123
+ --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
122
124
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
123
125
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
124
126
  }
@@ -4,8 +4,6 @@
4
4
  .#{$wizard} {
5
5
  --#{$wizard}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
6
6
  --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$pf-global}--palette--black-500);
7
- --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
8
- --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--300);
9
7
  }
10
8
 
11
9
  .#{$wizard}__header {
@@ -39,7 +39,7 @@
39
39
  --pf-v5-c-wizard__nav-link--focus--Color: var(--pf-v5-global--link--Color);
40
40
  --pf-v5-c-wizard__nav-link--m-current--Color: var(--pf-v5-global--link--Color);
41
41
  --pf-v5-c-wizard__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
42
- --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--Color--dark-200);
42
+ --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
43
43
  --pf-v5-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
44
44
  --pf-v5-c-wizard__nav-link-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
45
45
  --pf-v5-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -60,7 +60,7 @@
60
60
  --pf-v5-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-v5-global--active-color--100);
61
61
  --pf-v5-c-wizard__nav-link--m-current--before--Color: var(--pf-v5-global--Color--light-100);
62
62
  --pf-v5-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
63
- --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--Color--dark-200);
63
+ --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--100);
64
64
  --pf-v5-c-wizard__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
65
65
  --pf-v5-c-wizard__toggle--ZIndex: var(--pf-v5-global--ZIndex--xs);
66
66
  --pf-v5-c-wizard__toggle--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
@@ -510,8 +510,6 @@
510
510
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
511
511
  --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
512
512
  --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
513
- --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
514
- --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--300);
515
513
  }
516
514
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
517
515
  color: var(--pf-v5-global--Color--100);
@@ -57,7 +57,7 @@
57
57
  --#{$wizard}__nav-link--focus--Color: var(--#{$pf-global}--link--Color);
58
58
  --#{$wizard}__nav-link--m-current--Color: var(--#{$pf-global}--link--Color);
59
59
  --#{$wizard}__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
60
- --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--Color--dark-200);
60
+ --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
61
61
  --#{$wizard}__nav-list__nav-list__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
62
62
 
63
63
  // Nav link toggle icon
@@ -82,7 +82,7 @@
82
82
  --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
83
83
  --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100);
84
84
  --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
85
- --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--Color--dark-200);
85
+ --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--100);
86
86
 
87
87
  // Toggle
88
88
  --#{$wizard}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
@@ -680,7 +680,7 @@ cssPrefix: pf-v5-c-dual-list-selector
680
680
  <span
681
681
  class="pf-v5-c-dual-list-selector__status-text"
682
682
  id="multiple-available-items-selected-available-status-text"
683
- >1 of 5 items selected</span>
683
+ >3 of 5 items selected</span>
684
684
  </div>
685
685
  <div class="pf-v5-c-dual-list-selector__menu">
686
686
  <ul
@@ -290,7 +290,7 @@ cssPrefix: pf-v5-c-slider
290
290
  <input type="number" value="50" aria-label="Slider value input" />
291
291
  </div>
292
292
  </div>
293
- <div class="pf-v5-c-input-group__item">
293
+ <div class="pf-v5-c-input-group__item pf-m-box">
294
294
  <span class="pf-v5-c-input-group__text">%</span>
295
295
  </div>
296
296
  </div>
@@ -321,7 +321,7 @@ cssPrefix: pf-v5-c-slider
321
321
  <input type="number" value="50" aria-label="Slider value input" />
322
322
  </div>
323
323
  </div>
324
- <div class="pf-v5-c-input-group__item">
324
+ <div class="pf-v5-c-input-group__item pf-m-box">
325
325
  <span class="pf-v5-c-input-group__text">%</span>
326
326
  </div>
327
327
  </div>
@@ -348,13 +348,15 @@ cssPrefix: pf-v5-c-slider
348
348
  tabindex="0"
349
349
  ></div>
350
350
  <div class="pf-v5-c-slider__value pf-m-floating">
351
- <div class="pf-v5-c-input-group__item pf-m-fill">
352
- <div class="pf-v5-c-form-control">
353
- <input type="number" value="50" aria-label="Slider value input" />
351
+ <div class="pf-v5-c-input-group">
352
+ <div class="pf-v5-c-input-group__item pf-m-fill">
353
+ <div class="pf-v5-c-form-control">
354
+ <input type="number" value="50" aria-label="Slider value input" />
355
+ </div>
356
+ </div>
357
+ <div class="pf-v5-c-input-group__item pf-m-box">
358
+ <span class="pf-v5-c-input-group__text">%</span>
354
359
  </div>
355
- </div>
356
- <div class="pf-v5-c-input-group__item">
357
- <span class="pf-v5-c-input-group__text">%</span>
358
360
  </div>
359
361
  </div>
360
362
  </div>
@@ -421,8 +423,8 @@ cssPrefix: pf-v5-c-slider
421
423
  />
422
424
  </div>
423
425
  </div>
424
- <div class="pf-v5-c-input-group__item">
425
- <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
426
+ <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
427
+ <span class="pf-v5-c-input-group__text">%</span>
426
428
  </div>
427
429
  </div>
428
430
  </div>
@@ -458,7 +460,7 @@ cssPrefix: pf-v5-c-slider
458
460
  <input type="number" value="50" aria-label="Slider value input" />
459
461
  </div>
460
462
  </div>
461
- <div class="pf-v5-c-input-group__item">
463
+ <div class="pf-v5-c-input-group__item pf-m-box">
462
464
  <span class="pf-v5-c-input-group__text">%</span>
463
465
  </div>
464
466
  </div>
@@ -622,8 +624,8 @@ cssPrefix: pf-v5-c-slider
622
624
  />
623
625
  </div>
624
626
  </div>
625
- <div class="pf-v5-c-input-group__item">
626
- <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
627
+ <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
628
+ <span class="pf-v5-c-input-group__text">%</span>
627
629
  </div>
628
630
  </div>
629
631
  </div>
@@ -8,3 +8,7 @@
8
8
  top: 40px;
9
9
  width: 100%;
10
10
  }
11
+
12
+ #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
13
+ height: 540px;
14
+ }
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": "5.0.0-alpha.57",
4
+ "version": "5.0.0-alpha.58",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -45,7 +45,7 @@
45
45
  "@patternfly/documentation-framework": "2.0.0-alpha.41",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "5.0.0-alpha.105",
48
- "@patternfly/react-core": "5.0.0-alpha.102",
48
+ "@patternfly/react-core": "5.0.0-alpha.104",
49
49
  "@patternfly/react-table": "5.0.0-alpha.106",
50
50
  "@starptech/prettyhtml": "^0.10.0",
51
51
  "cheerio": "^1.0.0-rc.12",
@@ -284,6 +284,8 @@
284
284
  --pf-v5-global--active-color--100: #1fa7f8;
285
285
  --pf-v5-global--primary-color--100: #1fa7f8;
286
286
  --pf-v5-global--primary-color--300: #06c;
287
+ --pf-v5-global--primary-color--400: #fff;
288
+ --pf-v5-global--custom-color--200: #73c5c5;
287
289
  --pf-v5-global--success-color--100: #5ba352;
288
290
  --pf-v5-global--warning-color--100: #f0ab00;
289
291
  --pf-v5-global--warning-color--200: #f4c145;
@@ -292,7 +294,7 @@
292
294
  --pf-v5-global--link--Color: #1fa7f8;
293
295
  --pf-v5-global--link--Color--hover: #73bcf7;
294
296
  --pf-v5-global--link--Color--visited: #a18fff;
295
- --pf-v5-global--disabled-color--100: #57585a;
297
+ --pf-v5-global--disabled-color--100: #868789;
296
298
  --pf-v5-global--disabled-color--200: #444548;
297
299
  --pf-v5-global--disabled-color--300: #aaabac;
298
300
  --pf-v5-global--icon--Color--light: #aaabac;
@@ -284,6 +284,8 @@
284
284
  --pf-v5-global--active-color--100: #1fa7f8;
285
285
  --pf-v5-global--primary-color--100: #1fa7f8;
286
286
  --pf-v5-global--primary-color--300: #06c;
287
+ --pf-v5-global--primary-color--400: #fff;
288
+ --pf-v5-global--custom-color--200: #73c5c5;
287
289
  --pf-v5-global--success-color--100: #5ba352;
288
290
  --pf-v5-global--warning-color--100: #f0ab00;
289
291
  --pf-v5-global--warning-color--200: #f4c145;
@@ -292,7 +294,7 @@
292
294
  --pf-v5-global--link--Color: #1fa7f8;
293
295
  --pf-v5-global--link--Color--hover: #73bcf7;
294
296
  --pf-v5-global--link--Color--visited: #a18fff;
295
- --pf-v5-global--disabled-color--100: #57585a;
297
+ --pf-v5-global--disabled-color--100: #868789;
296
298
  --pf-v5-global--disabled-color--200: #444548;
297
299
  --pf-v5-global--disabled-color--300: #aaabac;
298
300
  --pf-v5-global--icon--Color--light: #aaabac;