@patternfly/patternfly 4.204.3 → 4.205.1

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 (26) hide show
  1. package/components/AppLauncher/app-launcher.css +2 -4
  2. package/components/AppLauncher/app-launcher.scss +2 -2
  3. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -2
  4. package/components/Dropdown/dropdown.css +2 -4
  5. package/components/Dropdown/dropdown.scss +2 -2
  6. package/components/Dropdown/themes/dark/dropdown.scss +0 -2
  7. package/components/Menu/menu.css +2 -4
  8. package/components/Menu/menu.scss +2 -2
  9. package/components/Menu/themes/dark/menu.scss +0 -2
  10. package/components/OptionsMenu/options-menu.css +2 -4
  11. package/components/OptionsMenu/options-menu.scss +2 -2
  12. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -2
  13. package/components/Select/select.css +2 -2
  14. package/components/Select/select.scss +2 -2
  15. package/components/Tabs/tabs.css +4 -0
  16. package/components/Tabs/tabs.scss +8 -1
  17. package/components/Timestamp/timestamp.css +31 -0
  18. package/components/Timestamp/timestamp.scss +37 -0
  19. package/components/_all.scss +1 -0
  20. package/docs/components/Tabs/examples/Tabs.md +3 -3
  21. package/docs/components/Timestamp/examples/Timestamp.md +62 -0
  22. package/package.json +1 -1
  23. package/patternfly-no-reset.css +46 -18
  24. package/patternfly.css +46 -18
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/components/AppLauncher/app-launcher.css CHANGED
@@ -56,8 +56,8 @@
56
56
  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
57
57
  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
58
58
  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
59
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
60
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
59
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
60
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
61
61
  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
62
62
  --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
63
63
  --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -219,6 +219,4 @@
219
219
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
220
220
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
221
221
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
222
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
223
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
224
222
  }
package/components/AppLauncher/app-launcher.scss CHANGED
@@ -72,8 +72,8 @@
72
72
  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
73
73
  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
74
74
  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
75
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
76
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
75
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
76
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
77
77
  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
78
78
 
79
79
  // Divider
package/components/AppLauncher/themes/dark/app-launcher.scss CHANGED
@@ -9,7 +9,5 @@
9
9
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
10
10
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
11
11
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
12
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
13
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
14
12
  }
15
13
  }
package/components/Dropdown/dropdown.css CHANGED
@@ -121,8 +121,8 @@
121
121
  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
122
122
  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
123
123
  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
124
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
125
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
124
+ --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
125
+ --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
126
126
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
127
127
  --pf-c-dropdown__toggle-image--MarginTop: 0;
128
128
  --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -633,8 +633,6 @@
633
633
  --pf-c-dropdown__menu--Top: 100%;
634
634
  --pf-c-dropdown--m-top__menu--TranslateY: -100%;
635
635
  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
636
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
637
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
638
636
  }
639
637
  :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
640
638
  color: var(--pf-global--palette--black-100);
package/components/Dropdown/dropdown.scss CHANGED
@@ -152,8 +152,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
152
152
  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
153
153
  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
154
154
  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
155
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
156
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
155
+ --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
156
+ --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
157
157
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
158
158
 
159
159
  // Image
package/components/Dropdown/themes/dark/dropdown.scss CHANGED
@@ -13,8 +13,6 @@
13
13
  --pf-c-dropdown__menu--Top: 100%;
14
14
  --pf-c-dropdown--m-top__menu--TranslateY: -100%;
15
15
  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
16
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
17
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
18
16
  }
19
17
 
20
18
  .pf-c-dropdown__toggle {
package/components/Menu/menu.css CHANGED
@@ -140,8 +140,8 @@
140
140
  --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
141
141
  --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
142
142
  --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
143
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
144
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
143
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
144
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
145
145
  --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
146
146
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
147
147
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
@@ -635,6 +635,4 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
635
635
  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
636
636
  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
637
637
  --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
638
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
639
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
640
638
  }
package/components/Menu/menu.scss CHANGED
@@ -98,8 +98,8 @@
98
98
  --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
99
99
  --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
100
100
  --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
101
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
102
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
101
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
102
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
103
103
  --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
104
104
 
105
105
  // Description
package/components/Menu/themes/dark/menu.scss CHANGED
@@ -6,7 +6,5 @@
6
6
  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
7
7
  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
8
8
  --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200); // global var?
9
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
10
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
11
9
  }
12
10
  }
package/components/OptionsMenu/options-menu.css CHANGED
@@ -61,8 +61,8 @@
61
61
  --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
62
62
  --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
63
63
  --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
64
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
65
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
64
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
65
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
66
66
  --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
67
67
  --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
68
68
  --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -252,8 +252,6 @@
252
252
  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
253
253
  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
254
254
  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
255
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
256
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
257
255
  --pf-c-options-menu__menu--Top: 100%;
258
256
  }
259
257
  :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
package/components/OptionsMenu/options-menu.scss CHANGED
@@ -74,8 +74,8 @@
74
74
  --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
75
75
  --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
76
76
  --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
77
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
78
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
77
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
78
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
79
79
  --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
80
80
 
81
81
  // Divider
package/components/OptionsMenu/themes/dark/options-menu.scss CHANGED
@@ -10,8 +10,6 @@
10
10
  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
11
11
  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
12
12
  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
13
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
14
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
15
13
  --pf-c-options-menu__menu--Top: 100%;
16
14
  }
17
15
 
package/components/Select/select.css CHANGED
@@ -145,8 +145,8 @@
145
145
  --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
146
146
  --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
147
147
  --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
148
- --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
149
- --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
148
+ --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
149
+ --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
150
150
  --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
151
151
  --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
152
152
  --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);
package/components/Select/select.scss CHANGED
@@ -182,8 +182,8 @@
182
182
  --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
183
183
  --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
184
184
  --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
185
- --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
186
- --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
185
+ --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
186
+ --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
187
187
  --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
188
188
 
189
189
  // Menu item count
package/components/Tabs/tabs.css CHANGED
@@ -410,6 +410,10 @@
410
410
  .pf-c-tabs.pf-m-page-insets {
411
411
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
412
412
  }
413
+ .pf-c-tabs.pf-m-overflow,
414
+ .pf-c-tabs.pf-m-overflow .pf-c-tabs__list {
415
+ overflow: visible;
416
+ }
413
417
 
414
418
  .pf-c-tabs__toggle {
415
419
  display: var(--pf-c-tabs__toggle--Display);
package/components/Tabs/tabs.scss CHANGED
@@ -177,7 +177,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
177
177
  width: var(--pf-c-tabs--Width);
178
178
  padding-right: var(--pf-c-tabs--inset);
179
179
  padding-left: var(--pf-c-tabs--inset);
180
- overflow: hidden; // remove in breaking change release
180
+ overflow: hidden; // needed for scroll button animation. limit to pf-m-scrollable in breaking change. may need new modifier so this is applied to a menu that supports scrolling, regardless of whether the scroll buttons are shown.
181
181
 
182
182
  &::before {
183
183
  position: absolute;
@@ -462,6 +462,13 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
462
462
  &.pf-m-page-insets {
463
463
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
464
464
  }
465
+
466
+ &.pf-m-overflow {
467
+ &,
468
+ .pf-c-tabs__list {
469
+ overflow: visible;
470
+ }
471
+ }
465
472
  }
466
473
 
467
474
  // Expandable toggle
package/components/Timestamp/timestamp.css ADDED
@@ -0,0 +1,31 @@
1
+ .pf-c-timestamp {
2
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
3
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
4
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
5
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
6
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
7
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
8
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
9
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
10
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
11
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
12
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
13
+ font-size: var(--pf-c-timestamp--FontSize);
14
+ color: var(--pf-c-timestamp--Color);
15
+ }
16
+ .pf-c-timestamp.pf-m-help-text {
17
+ cursor: pointer;
18
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
19
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
20
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
21
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
22
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
23
+ }
24
+ .pf-c-timestamp.pf-m-help-text:hover {
25
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
26
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
27
+ }
28
+ .pf-c-timestamp.pf-m-help-text:focus {
29
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
30
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
31
+ }
package/components/Timestamp/timestamp.scss ADDED
@@ -0,0 +1,37 @@
1
+ .pf-c-timestamp {
2
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
3
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
4
+
5
+ // Help text variables for the timestamp
6
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
7
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
8
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
9
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
10
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
11
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
12
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
13
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
14
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
15
+
16
+ font-size: var(--pf-c-timestamp--FontSize);
17
+ color: var(--pf-c-timestamp--Color);
18
+
19
+ &.pf-m-help-text {
20
+ cursor: pointer;
21
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
22
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
23
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
24
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
25
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
26
+
27
+ &:hover {
28
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
29
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
30
+ }
31
+
32
+ &:focus {
33
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
34
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
35
+ }
36
+ }
37
+ }
package/components/_all.scss CHANGED
@@ -81,6 +81,7 @@
81
81
  @import "./Tabs/tabs";
82
82
  @import "./TextInputGroup/text-input-group";
83
83
  @import "./Tile/tile";
84
+ @import "./Timestamp/timestamp";
84
85
  @import "./Title/title";
85
86
  @import "./ToggleGroup/toggle-group";
86
87
  @import "./Tooltip/tooltip";
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -196,7 +196,7 @@ cssPrefix: pf-c-tabs
196
196
  ### Horizontal overflow
197
197
 
198
198
  ```html isBeta
199
- <div class="pf-c-tabs" id="horizontal-overflow-example">
199
+ <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-example">
200
200
  <ul class="pf-c-tabs__list">
201
201
  <li class="pf-c-tabs__item">
202
202
  <button
@@ -266,7 +266,7 @@ cssPrefix: pf-c-tabs
266
266
  ### Horizontal overflow expanded
267
267
 
268
268
  ```html isBeta
269
- <div class="pf-c-tabs" id="horizontal-overflow-expanded-example">
269
+ <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-expanded-example">
270
270
  <ul class="pf-c-tabs__list">
271
271
  <li class="pf-c-tabs__item">
272
272
  <button
@@ -337,7 +337,7 @@ cssPrefix: pf-c-tabs
337
337
  ### Horizontal overflow selected
338
338
 
339
339
  ```html isBeta
340
- <div class="pf-c-tabs" id="horizontal-overflow-selected-example">
340
+ <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-selected-example">
341
341
  <ul class="pf-c-tabs__list">
342
342
  <li class="pf-c-tabs__item">
343
343
  <button
package/docs/components/Timestamp/examples/Timestamp.md ADDED
@@ -0,0 +1,62 @@
1
+ ---
2
+ id: Timestamp
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-c-timestamp
6
+ ---## Examples
7
+
8
+ ### Basic
9
+
10
+ ```html
11
+ <span class="pf-c-timestamp">
12
+ <time
13
+ class="pf-c-timestamp__text"
14
+ datetime="2019-01-21T21:38"
15
+ >Thursday, 21 January 2019, 9:38 PM EST</time>
16
+ </span>
17
+
18
+ <br />
19
+ <br />
20
+
21
+ <span class="pf-c-timestamp">
22
+ <time
23
+ class="pf-c-timestamp__text"
24
+ datetime="2019-01-21T21:38"
25
+ >21 January 2019, 9:38 PM EST</time>
26
+ </span>
27
+
28
+ <br />
29
+ <br />
30
+
31
+ <span class="pf-c-timestamp">
32
+ <time
33
+ class="pf-c-timestamp__text"
34
+ datetime="2019-01-21T21:38"
35
+ >21 Jan. 2019, 9:38 PM EST</time>
36
+ </span>
37
+
38
+ <br />
39
+ <br />
40
+
41
+ <span class="pf-c-timestamp">
42
+ <time class="pf-c-timestamp__text" datetime="2022-07-15T10:00">1 hour ago</time>
43
+ </span>
44
+
45
+ <br />
46
+ <br />
47
+
48
+ <span class="pf-c-timestamp">
49
+ <time class="pf-c-timestamp__text" datetime="2022-07-21">Tomorrow</time>
50
+ </span>
51
+
52
+ ```
53
+
54
+ ## Documentation
55
+
56
+ ### Usage
57
+
58
+ | Class | Applied to | Outcome |
59
+ | ----------------------- | ----------------- | ------------------------------------------------------ |
60
+ | `.pf-c-timestamp` | `<span>` | Creates a timestamp. **Required** |
61
+ | `.pf-c-timestamp__text` | `<time>` | Creates the visual text of the timestamp. **Required** |
62
+ | `.pf-m-help-text` | `.pf-c-timestamp` | Modifies styling for a timestamp that has help text. |
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.204.3",
4
+ "version": "4.205.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -6401,8 +6401,8 @@ html {
6401
6401
  --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
6402
6402
  --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
6403
6403
  --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
6404
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
6405
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
6404
+ --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
6405
+ --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
6406
6406
  --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
6407
6407
  --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
6408
6408
  --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -6600,8 +6600,6 @@ html {
6600
6600
  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
6601
6601
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
6602
6602
  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
6603
- --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
6604
- --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
6605
6603
  }
6606
6604
 
6607
6605
  .pf-c-avatar {
@@ -13786,8 +13784,8 @@ label.pf-c-check, .pf-c-check__label,
13786
13784
  --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
13787
13785
  --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
13788
13786
  --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
13789
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
13790
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
13787
+ --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
13788
+ --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
13791
13789
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
13792
13790
  --pf-c-dropdown__toggle-image--MarginTop: 0;
13793
13791
  --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -14334,8 +14332,6 @@ label.pf-c-check, .pf-c-check__label,
14334
14332
  --pf-c-dropdown__menu--Top: 100%;
14335
14333
  --pf-c-dropdown--m-top__menu--TranslateY: -100%;
14336
14334
  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
14337
- --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
14338
- --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
14339
14335
  }
14340
14336
  :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
14341
14337
  color: var(--pf-global--palette--black-100);
@@ -18225,8 +18221,8 @@ ul.pf-c-list {
18225
18221
  --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
18226
18222
  --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
18227
18223
  --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
18228
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
18229
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
18224
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
18225
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
18230
18226
  --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
18231
18227
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
18232
18228
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
@@ -18756,8 +18752,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
18756
18752
  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
18757
18753
  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
18758
18754
  --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
18759
- --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
18760
- --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
18761
18755
  }
18762
18756
 
18763
18757
  .pf-c-menu-toggle {
@@ -21119,8 +21113,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21119
21113
  --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
21120
21114
  --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
21121
21115
  --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
21122
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
21123
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
21116
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
21117
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
21124
21118
  --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
21125
21119
  --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
21126
21120
  --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -21346,8 +21340,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21346
21340
  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
21347
21341
  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
21348
21342
  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
21349
- --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
21350
- --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
21351
21343
  --pf-c-options-menu__menu--Top: 100%;
21352
21344
  }
21353
21345
  :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
@@ -24198,8 +24190,8 @@ label.pf-c-radio, .pf-c-radio__label,
24198
24190
  --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
24199
24191
  --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
24200
24192
  --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
24201
- --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
24202
- --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
24193
+ --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
24194
+ --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
24203
24195
  --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
24204
24196
  --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
24205
24197
  --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);
@@ -29900,6 +29892,10 @@ svg.pf-c-spinner.pf-m-xl {
29900
29892
  .pf-c-tabs.pf-m-page-insets {
29901
29893
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
29902
29894
  }
29895
+ .pf-c-tabs.pf-m-overflow,
29896
+ .pf-c-tabs.pf-m-overflow .pf-c-tabs__list {
29897
+ overflow: visible;
29898
+ }
29903
29899
 
29904
29900
  .pf-c-tabs__toggle {
29905
29901
  display: var(--pf-c-tabs__toggle--Display);
@@ -30723,6 +30719,38 @@ svg.pf-c-spinner.pf-m-xl {
30723
30719
  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
30724
30720
  }
30725
30721
 
30722
+ .pf-c-timestamp {
30723
+ --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
30724
+ --pf-c-timestamp--Color: var(--pf-global--Color--200);
30725
+ --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
30726
+ --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
30727
+ --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
30728
+ --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
30729
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
30730
+ --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
30731
+ --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
30732
+ --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
30733
+ --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
30734
+ font-size: var(--pf-c-timestamp--FontSize);
30735
+ color: var(--pf-c-timestamp--Color);
30736
+ }
30737
+ .pf-c-timestamp.pf-m-help-text {
30738
+ cursor: pointer;
30739
+ text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
30740
+ text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
30741
+ text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
30742
+ text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
30743
+ text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
30744
+ }
30745
+ .pf-c-timestamp.pf-m-help-text:hover {
30746
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
30747
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
30748
+ }
30749
+ .pf-c-timestamp.pf-m-help-text:focus {
30750
+ --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
30751
+ --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
30752
+ }
30753
+
30726
30754
  .pf-c-title {
30727
30755
  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
30728
30756
  --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);