@patternfly/patternfly 4.209.1 → 4.210.2

package/RELEASE-NOTES.md

@@ -3,6 +3,33 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.11 release notes (2022-08-25)
+Packages released:
+- [@patternfly/patternfly@v4.210.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.210.2)
+
+### Components
+- **Avatar:** Updated examples to use correct avatar image, simplified hbs ([#5026](https://github.com/patternfly/patternfly/pull/5026))
+- **Button:** Added a badge count to the link button ([#5029](https://github.com/patternfly/patternfly/pull/5029))
+- **Card:** Updated body fill example to show fill behavior ([#5022](https://github.com/patternfly/patternfly/pull/5022))
+- **Checkbox:** Added support for required indicator ([#5025](https://github.com/patternfly/patternfly/pull/5025))
+- **Dropdown, select, context selector:** Added static variation for menu ([#4986](https://github.com/patternfly/patternfly/pull/4986))
+- **Expandable section:**
+  * Added truncate variant ([#5001](https://github.com/patternfly/patternfly/pull/5001))
+  * Fixed top margin on detached truncate toggle ([#5045](https://github.com/patternfly/patternfly/pull/5045))
+- **Menu:** Removed footer bottom border when scrollable ([#5002](https://github.com/patternfly/patternfly/pull/5002))
+- **Page:** Added full-height modifier ([#5018](https://github.com/patternfly/patternfly/pull/5018))
+- **Search input:** Added collapsible variant ([#4827](https://github.com/patternfly/patternfly/pull/4827))
+- **Table:** Added max-height support to outerscroll container ([#5039](https://github.com/patternfly/patternfly/pull/5039))
+- **Timestamp:** Added outline-offset and fixed trailing whitespace ([#5047](https://github.com/patternfly/patternfly/pull/5047))
+
+### Other
+- **Global:** Added custom property to allow override of root font-size ([#5032](https://github.com/patternfly/patternfly/pull/5032))
+- **Theme:**
+  * Adjusted dark theme colors ([#5020](https://github.com/patternfly/patternfly/pull/5020))
+  * Improved contrast of dark theme red-8888, warning button text ([#5041](https://github.com/patternfly/patternfly/pull/5041))
+- **Workspace:** Fixed a11y violations in data-list and toolbar ([#5015](https://github.com/patternfly/patternfly/pull/5015))
+
+
 ## 2022.10 release notes (2022-08-04)
 Packages released:
 - [@patternfly/patternfly@v4.206.3](https://www.npmjs.com/package/@patternfly/patternfly/v/4.206.3)

package/components/ExpandableSection/expandable-section.css

@@ -85,6 +85,9 @@
   -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
+.pf-c-expandable-section.pf-m-detached {
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;

package/components/ExpandableSection/expandable-section.scss

@@ -112,6 +112,10 @@
       overflow: hidden;
     }
   }
+
+  &.pf-m-detached {
+    --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+  }
 }
 
 .pf-c-expandable-section__toggle {

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.2",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -14602,6 +14602,9 @@ label.pf-c-check, .pf-c-check__label,
   -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
+.pf-c-expandable-section.pf-m-detached {
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;
@@ -30854,6 +30857,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 +30867,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

@@ -14729,6 +14729,9 @@ label.pf-c-check, .pf-c-check__label,
   -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
+.pf-c-expandable-section.pf-m-detached {
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;
@@ -30981,6 +30984,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 +30994,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;