@patternfly/patternfly 4.209.1 → 4.210.0

package/components/Timestamp/timestamp.css

@@ -1,6 +1,7 @@
 .pf-c-timestamp {
   --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--OutlineOffset: 0.1875rem;
   --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);
@@ -10,8 +11,10 @@
   --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);
+  display: inline-block;
   font-size: var(--pf-c-timestamp--FontSize);
   color: var(--pf-c-timestamp--Color);
+  outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
   cursor: pointer;

package/components/Timestamp/timestamp.scss

@@ -1,6 +1,7 @@
 .pf-c-timestamp {
   --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--OutlineOffset: #{pf-size-prem(3px)};
 
   // Help text variables for the timestamp
   --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
@@ -13,8 +14,10 @@
   --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);
 
+  display: inline-block;
   font-size: var(--pf-c-timestamp--FontSize);
   color: var(--pf-c-timestamp--Color);
+  outline-offset: var(--pf-c-timestamp--OutlineOffset);
 
   &.pf-m-help-text {
     cursor: pointer;

package/docs/components/DataList/examples/DataList.md

@@ -478,7 +478,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-content1"
-      aria-label="data-list-expandable Primary content details"
+      aria-label="Expandable primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -570,7 +570,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-content2"
-      aria-label="Secondary content details"
+      aria-label="Expandable secondary content details"
       hidden
     >
       <div
@@ -666,7 +666,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-content3"
-      aria-label="Tertiary content details"
+      aria-label="Expandable tertiary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -774,7 +774,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-compact-content1"
-      aria-label="data-list-expandable-compact Primary content details"
+      aria-label="Expandable compact primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -869,7 +869,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-compact-content2"
-      aria-label="Secondary content details"
+      aria-label="Expandable compact secondary content details"
       hidden
     >
       <div
@@ -965,7 +965,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-compact-content3"
-      aria-label="Tertiary content details"
+      aria-label="Expandable compact tertiary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -1073,7 +1073,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-nested-content1"
-      aria-label="data-list-expandable-nested Primary content details"
+      aria-label="Expandable nested primary content details"
     >
       <div class="pf-c-data-list__expandable-content-body">
         <ul
@@ -1294,7 +1294,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-nested-content2"
-      aria-label="Secondary content details"
+      aria-label="Expandable nested secondary content details"
       hidden
     >
       <div
@@ -1390,7 +1390,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-expandable-nested-content3"
-      aria-label="Tertiary content details"
+      aria-label="Expandable nested tertiary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -1899,7 +1899,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-flex-modifiers-2-content1"
-      aria-label="data-list-flex-modifiers-2 Primary content details"
+      aria-label="Flex modifier expandable primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -2034,7 +2034,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-selectable-expandable-rows-content1"
-      aria-label="data-list-selectable-expandable-rows Primary content details"
+      aria-label="Selectable expandable row primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -2076,7 +2076,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-selectable-expandable-rows-content2"
-      aria-label="Secondary content details"
+      aria-label="Selectable expandable row secondary content details"
       hidden
     >
       <div
@@ -2119,7 +2119,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-selectable-expandable-rows-content3"
-      aria-label="Tertiary content details"
+      aria-label="Selectable expandable row tertiary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -2161,7 +2161,7 @@ When a list item includes more than one block of content, it can be difficult fo
     <section
       class="pf-c-data-list__expandable-content"
       id="data-list-selectable-expandable-rows-content4"
-      aria-label="Quaternary content details"
+      aria-label="Selectable expandable row quaternary content details"
       hidden
     >
       <div

package/package.json

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

package/patternfly-no-reset.css

@@ -30854,6 +30854,7 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-timestamp {
   --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--OutlineOffset: 0.1875rem;
   --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);
@@ -30863,8 +30864,10 @@ svg.pf-c-spinner.pf-m-xl {
   --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);
+  display: inline-block;
   font-size: var(--pf-c-timestamp--FontSize);
   color: var(--pf-c-timestamp--Color);
+  outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
   cursor: pointer;

package/patternfly.css

@@ -30981,6 +30981,7 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-timestamp {
   --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--OutlineOffset: 0.1875rem;
   --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);
@@ -30990,8 +30991,10 @@ svg.pf-c-spinner.pf-m-xl {
   --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);
+  display: inline-block;
   font-size: var(--pf-c-timestamp--FontSize);
   color: var(--pf-c-timestamp--Color);
+  outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
   cursor: pointer;