@patternfly/patternfly 4.164.1 → 4.165.0

package/RELEASE-NOTES.md

@@ -4,6 +4,37 @@ section: developer-resources
 releaseNoteTOC: true
 ---
 
+## 2021.16 release notes (2021-12-07)
+Packages released:
+- [@patternfly/patternfly@v4.164.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.164.2)
+
+### Components
+- **Button:** Added demo for progress button completion state ([#4528](https://github.com/patternfly/patternfly/pull/4528))
+- **Card:** Replaced dropdowns with selects in demos ([#4520](https://github.com/patternfly/patternfly/pull/4520))
+- **Description list:** Added columnar layout ([#4544](https://github.com/patternfly/patternfly/pull/4544))
+- **Dropdown:**
+  - Added plain text variant ([#4542](https://github.com/patternfly/patternfly/pull/4542))
+  - Added disabled styles ([#4543](https://github.com/patternfly/patternfly/pull/4543))
+- **Form:** Added support for horizontal layout at various breakpoints ([#4536](https://github.com/patternfly/patternfly/pull/4536))
+- **Multiple file upload:** Added component ([#4548](https://github.com/patternfly/patternfly/pull/4548))
+- **Table:**
+  - Removed cursor pointer on disabled checkboxes ([#4527](https://github.com/patternfly/patternfly/pull/4527))
+  - Removed extra padding from nested table cells ([#4529](https://github.com/patternfly/patternfly/pull/4529))
+  - Reorganized documentation ([#4539](https://github.com/patternfly/patternfly/pull/4539))
+  - Increased target area of checkboxes/radios ([#4546](https://github.com/patternfly/patternfly/pull/4546))
+- **Toolbar:** Set labels to show in collapsed state ([#4451](https://github.com/patternfly/patternfly/pull/4451))
+- **Truncate:**
+  - Added truncate component ([#4502](https://github.com/patternfly/patternfly/pull/4502))
+  - Fixed font size var value ([#4560](https://github.com/patternfly/patternfly/pull/4560))
+
+### Other
+- **Build:**
+  - Added a11y coverage report action ([#4530](https://github.com/patternfly/patternfly/pull/4530))
+  - Updated stylelint, deps ([#4537](https://github.com/patternfly/patternfly/pull/4537))
+- **Demos:** Added a password generator demo ([#4531](https://github.com/patternfly/patternfly/pull/4531))
+- **Fonts:** Added opt-ins for new red hat font ([#4476](https://github.com/patternfly/patternfly/pull/4476))
+- **Global:** Removed custom firefox focus styles ([#4533](https://github.com/patternfly/patternfly/pull/4533))
+
 ## 2021.15 release notes (2021-11-16)
 Packages released:
 - [@patternfly/patternfly@v4.159.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.159.1)

package/components/ExpandableSection/expandable-section.css

@@ -8,6 +8,7 @@
   --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -30,6 +31,7 @@
   --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
   --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
 }
 .pf-c-expandable-section.pf-m-expanded {
   --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -64,6 +66,9 @@
   content: "";
   background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
 }
+.pf-c-expandable-section.pf-m-indented {
+  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;
@@ -82,6 +87,7 @@
 }
 
 .pf-c-expandable-section__toggle-icon {
+  min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-c-expandable-section__toggle-icon--Color);
   transition: var(--pf-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));

package/components/ExpandableSection/expandable-section.scss

@@ -11,6 +11,7 @@
   --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
 
   // Toggle icon
+  --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -42,6 +43,9 @@
   --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
 
+  // Indented
+  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
+
 
   &.pf-m-expanded {
     --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -81,6 +85,10 @@
       background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
     }
   }
+
+  &.pf-m-indented {
+    --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
+  }
 }
 
 .pf-c-expandable-section__toggle {
@@ -104,6 +112,7 @@
 }
 
 .pf-c-expandable-section__toggle-icon {
+  min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-c-expandable-section__toggle-icon--Color);
   transition: var(--pf-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));

package/components/Label/label.css

@@ -93,6 +93,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label__text--MaxWidth: 16ch;
@@ -107,6 +108,18 @@
   --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -125,6 +138,7 @@
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
   --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+  --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
 }
 .pf-c-label.pf-m-blue {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -215,7 +229,23 @@
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
 }
 
+.pf-c-label.pf-m-editable {
+  text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+  cursor: var(--pf-c-label--m-editable--Cursor);
+  text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:hover {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:focus {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+}
 .pf-c-label.pf-m-editable-active {
+  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -223,6 +253,13 @@
 .pf-c-label.pf-m-editable-active .pf-c-button {
   visibility: hidden;
 }
+.pf-c-label .pf-c-label__editable-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-label__editable-text--MaxWidth);
+  border-width: var(--pf-c-label__editable-text--BorderWidth);
+}
 .pf-c-label .pf-c-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/components/Label/label.scss

@@ -118,6 +118,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: #{pf-size-prem(1px)};
 
   // Content
   --pf-c-label__content--Color: var(--pf-global--Color--100);
@@ -142,6 +143,21 @@
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
   // Editable
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: #{pf-size-prem(4px)};
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+
+
+  // Editable active
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -161,6 +177,7 @@
     --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
     --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
     --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+    --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
   }
 
   &.pf-m-blue {
@@ -267,7 +284,26 @@
     }
   }
 
+  &.pf-m-editable {
+    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+    cursor: var(--pf-c-label--m-editable--Cursor);
+    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+
+    &:hover {
+      --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+    }
+
+    &:focus {
+      --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+    }
+  }
+
   &.pf-m-editable-active {
+    --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+    --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
     --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -277,6 +313,13 @@
     }
   }
 
+  .pf-c-label__editable-text {
+    @include pf-text-overflow;
+
+    max-width: var(--pf-c-label__editable-text--MaxWidth);
+    border-width: var(--pf-c-label__editable-text--BorderWidth);
+  }
+
   .pf-c-button {
     --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
     --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -124,6 +124,27 @@ cssPrefix: pf-c-expandable-section
 
 ```
 
+### Indented
+
+```html
+<div class="pf-c-expandable-section pf-m-expanded pf-m-indented">
+  <button
+    type="button"
+    class="pf-c-expandable-section__toggle"
+    aria-expanded="true"
+  >
+    <span class="pf-c-expandable-section__toggle-icon">
+      <i class="fas fa-angle-right" aria-hidden="true"></i>
+    </span>
+    <span class="pf-c-expandable-section__toggle-text">Show less</span>
+  </button>
+  <div
+    class="pf-c-expandable-section__content"
+  >This content is visible only when the component is expanded.</div>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -149,5 +170,6 @@ cssPrefix: pf-c-expandable-section
 | `.pf-m-expanded`                        | `.pf-c-expandable-section`              | Modifies the component for the expanded state.                                                                                                   |
 | `.pf-m-display-lg`                      | `.pf-c-expandable-section`              | Modifies the styling of the component to have large display styling.                                                                             |
 | `.pf-m-detached`                        | `.pf-c-expandable-section`              | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
+| `.pf-m-indented`                        | `.pf-c-expandable-section`              | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy.           |
 | `.pf-m-active`                          | `.pf-c-expandable-section__toggle`      | Forces display of the active state of the toggle.                                                                                                |
 | `.pf-m-expand-top`                      | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded.                                                                                              |