@patternfly/patternfly 4.204.2 → 4.205.0

package/components/AppLauncher/app-launcher.css

@@ -56,8 +56,8 @@
   --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
   --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
   --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -219,6 +219,4 @@
   --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
   --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
   --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }

package/components/AppLauncher/app-launcher.scss

@@ -72,8 +72,8 @@
   --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
   --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
   --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Divider

package/components/AppLauncher/themes/dark/app-launcher.scss

@@ -9,7 +9,5 @@
     --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
     --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
     --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
-    --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
-    --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   }
 }

package/components/Dropdown/dropdown.css

@@ -121,8 +121,8 @@
   --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
   --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
   --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-dropdown__toggle-image--MarginTop: 0;
   --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -633,8 +633,6 @@
   --pf-c-dropdown__menu--Top: 100%;
   --pf-c-dropdown--m-top__menu--TranslateY: -100%;
   --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }
 :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 {
   color: var(--pf-global--palette--black-100);

package/components/Dropdown/dropdown.scss

@@ -152,8 +152,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
   --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
   --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Image

package/components/Dropdown/themes/dark/dropdown.scss

@@ -13,8 +13,6 @@
     --pf-c-dropdown__menu--Top: 100%;
     --pf-c-dropdown--m-top__menu--TranslateY: -100%;
     --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-    --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
-    --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   }
 
   .pf-c-dropdown__toggle {

package/components/FormControl/form-control.css

@@ -9,6 +9,7 @@
 }
 
 .pf-c-form-control {
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -131,7 +132,7 @@
   --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
   --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);
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
-  color: var(--pf-global--Color--100);
+  color: var(--pf-c-form-control--Color);
   width: var(--pf-c-form-control--Width);
   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);
   font-size: var(--pf-c-form-control--FontSize);
@@ -176,8 +177,8 @@
   border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
 }
 .pf-c-form-control:disabled {
-  --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
   --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
+  color: var(--pf-c-form-control--disabled--Color);
   cursor: not-allowed;
   border-color: var(--pf-c-form-control--disabled--BorderColor);
 }

package/components/FormControl/form-control.scss

@@ -27,6 +27,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
 .pf-c-form-control {
   // Component
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -199,7 +200,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
 
   // This component always needs to be light
-  @include pf-t-light;
+  @include pf-t-light("--pf-c-form-control--Color");
 
   width: var(--pf-c-form-control--Width);
   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);
@@ -216,7 +217,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   // stylelint-enable
 
   &::placeholder {
-    color: var(--pf-c-form-control--placeholder--Color);
+    color: var(--pf-c-form-control--placeholder--Color); // update to set --pf-c-form-control--Color in breaking change - also look for any other place to do that in this component
   }
 
   &:not(textarea) {
@@ -261,9 +262,9 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   }
 
   &:disabled {
-    --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
     --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
 
+    color: var(--pf-c-form-control--disabled--Color);
     cursor: not-allowed;
     border-color: var(--pf-c-form-control--disabled--BorderColor);
   }

package/components/Menu/menu.css

@@ -140,8 +140,8 @@
   --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
   --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
   --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
   --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)) {
   --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
 }

package/components/Menu/menu.scss

@@ -98,8 +98,8 @@
   --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
   --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
 
   // Description

package/components/Menu/themes/dark/menu.scss

@@ -6,7 +6,5 @@
     --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200); // global var?
-    --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
-    --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
   }
 }

package/components/OptionsMenu/options-menu.css

@@ -61,8 +61,8 @@
   --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
   --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
   --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -252,8 +252,6 @@
   --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-options-menu__menu--Top: 100%;
 }
 :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {

package/components/OptionsMenu/options-menu.scss

@@ -74,8 +74,8 @@
   --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
   --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
   --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Divider

package/components/OptionsMenu/themes/dark/options-menu.scss

@@ -10,8 +10,6 @@
     --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
     --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-    --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
-    --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
     --pf-c-options-menu__menu--Top: 100%;
   }
 

package/components/Popover/popover.css

@@ -36,7 +36,7 @@
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
   --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
   --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);

package/components/Popover/popover.scss

@@ -47,7 +47,7 @@
   // Close
   --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
-  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
 
   // Header

package/components/Select/select.css

@@ -145,8 +145,8 @@
   --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
   --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
   --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);

package/components/Select/select.scss

@@ -182,8 +182,8 @@
   --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
   --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
   --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
 
   // Menu item count

package/components/Timestamp/timestamp.css

@@ -0,0 +1,31 @@
+.pf-c-timestamp {
+  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
+  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
+  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
+  font-size: var(--pf-c-timestamp--FontSize);
+  color: var(--pf-c-timestamp--Color);
+}
+.pf-c-timestamp.pf-m-help-text {
+  cursor: pointer;
+  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+}
+.pf-c-timestamp.pf-m-help-text:hover {
+  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
+}
+.pf-c-timestamp.pf-m-help-text:focus {
+  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
+}

package/components/Timestamp/timestamp.scss

@@ -0,0 +1,37 @@
+.pf-c-timestamp {
+  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-timestamp--Color: var(--pf-global--Color--200);
+
+  // Help text variables for the timestamp
+  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
+  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
+  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-timestamp--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
+
+  font-size: var(--pf-c-timestamp--FontSize);
+  color: var(--pf-c-timestamp--Color);
+
+  &.pf-m-help-text {
+    cursor: pointer;
+    text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
+    text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
+    text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
+    text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+    text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+
+    &:hover {
+      --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
+      --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
+    }
+
+    &:focus {
+      --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
+      --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
+    }
+  }
+}

package/components/_all.scss

@@ -81,6 +81,7 @@
 @import "./Tabs/tabs";
 @import "./TextInputGroup/text-input-group";
 @import "./Tile/tile";
+@import "./Timestamp/timestamp";
 @import "./Title/title";
 @import "./ToggleGroup/toggle-group";
 @import "./Tooltip/tooltip";

package/docs/components/FormControl/examples/FormControl.md

@@ -39,6 +39,16 @@ cssPrefix: pf-c-form-control
 />
 <br />
 <br />
+<input
+  class="pf-c-form-control"
+  disabled
+  type="text"
+  value="Disabled"
+  id="input-disabled"
+  aria-label="Disabled input example"
+/>
+<br />
+<br />
 <input
   class="pf-c-form-control pf-m-success"
   type="text"
@@ -68,16 +78,6 @@ cssPrefix: pf-c-form-control
 />
 <br />
 <br />
-<input
-  class="pf-c-form-control"
-  disabled
-  type="text"
-  value="Disabled"
-  id="input-disabled"
-  aria-label="Disabled input example"
-/>
-<br />
-<br />
 <input
   class="pf-c-form-control pf-m-expanded"
   type="text"
@@ -123,11 +123,11 @@ cssPrefix: pf-c-form-control
 ```html
 <select
   class="pf-c-form-control pf-m-placeholder"
-  id="select-standard"
-  name="select-standard"
-  aria-label="Standard select example"
+  id="select-selectable-placeholder"
+  name="select-selectable-placeholder"
+  aria-label="Selectable placeholder select example"
 >
-  <option value selected disabled>Please choose</option>
+  <option value selected>Selectable placeholder</option>
   <option value="Mr">Mr</option>
   <option value="Miss">Miss</option>
   <option value="Mrs">Mrs</option>
@@ -139,11 +139,11 @@ cssPrefix: pf-c-form-control
 <br />
 <select
   class="pf-c-form-control pf-m-placeholder"
-  id="select-placeholder-enabled"
-  name="select-placeholder-enabled"
-  aria-label="Placeholder enabled select example"
+  id="select-non-selectable-placeholder"
+  name="select-non-selectable-placeholder"
+  aria-label="Non-selectable placeholder select example"
 >
-  <option value selected>Please choose</option>
+  <option value selected disabled>Non-selectable placeholder</option>
   <option value="Mr">Mr</option>
   <option value="Miss">Miss</option>
   <option value="Mrs">Mrs</option>
@@ -161,7 +161,7 @@ cssPrefix: pf-c-form-control
 >
   <optgroup label="Group 1">
     <option value="Option 1">The first option</option>
-    <option value="Option 2" selected>The second option is selected by default</option>
+    <option value="Option 2" selected>Option groups (second option selected)</option>
   </optgroup>
   <optgroup label="Group 2">
     <option value="Option 3">The third option</option>
@@ -226,6 +226,21 @@ cssPrefix: pf-c-form-control
 </select>
 <br />
 <br />
+<select
+  class="pf-c-form-control pf-m-placeholder"
+  disabled
+  id="select-disabled"
+  name="select-disabled"
+  aria-label="Disabled select example"
+>
+  <option value selected>Disabled</option>
+  <option value="Mr">Mr</option>
+  <option value="Miss">Miss</option>
+  <option value="Mrs">Mrs</option>
+  <option value="Ms">Ms</option>
+  <option value="Dr">Dr</option>
+  <option value="Other">Other</option>
+</select>
 
 ```
 
@@ -251,6 +266,16 @@ cssPrefix: pf-c-form-control
 </textarea>
 <br />
 <br />
+<textarea
+  class="pf-c-form-control"
+  disabled
+  name="textarea-disabled"
+  id="textarea-disabled"
+  aria-label="Disabled textarea example"
+>Disabled
+</textarea>
+<br />
+<br />
 <textarea
   class="pf-c-form-control pf-m-success"
   name="textarea-success"

package/docs/components/Timestamp/examples/Timestamp.md

@@ -0,0 +1,62 @@
+---
+id: Timestamp
+beta: true
+section: components
+cssPrefix: pf-c-timestamp
+---## Examples
+
+### Basic
+
+```html
+<span class="pf-c-timestamp">
+  <time
+    class="pf-c-timestamp__text"
+    datetime="2019-01-21T21:38"
+  >Thursday, 21 January 2019, 9:38 PM EST</time>
+</span>
+
+<br />
+<br />
+
+<span class="pf-c-timestamp">
+  <time
+    class="pf-c-timestamp__text"
+    datetime="2019-01-21T21:38"
+  >21 January 2019, 9:38 PM EST</time>
+</span>
+
+<br />
+<br />
+
+<span class="pf-c-timestamp">
+  <time
+    class="pf-c-timestamp__text"
+    datetime="2019-01-21T21:38"
+  >21 Jan. 2019, 9:38 PM EST</time>
+</span>
+
+<br />
+<br />
+
+<span class="pf-c-timestamp">
+  <time class="pf-c-timestamp__text" datetime="2022-07-15T10:00">1 hour ago</time>
+</span>
+
+<br />
+<br />
+
+<span class="pf-c-timestamp">
+  <time class="pf-c-timestamp__text" datetime="2022-07-21">Tomorrow</time>
+</span>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class                   | Applied to        | Outcome                                                |
+| ----------------------- | ----------------- | ------------------------------------------------------ |
+| `.pf-c-timestamp`       | `<span>`          | Creates a timestamp. **Required**                      |
+| `.pf-c-timestamp__text` | `<time>`          | Creates the visual text of the timestamp. **Required** |
+| `.pf-m-help-text`       | `.pf-c-timestamp` | Modifies styling for a timestamp that has help text.   |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.204.2",
+  "version": "4.205.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {