@patternfly/patternfly 4.159.0 → 4.160.1

package/README.md

@@ -58,7 +58,7 @@ To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
 #### Update screenshots
 When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
 
-- open a terminal and run `yarn build && yarn run serve`
+- open a terminal and run `yarn build && yarn serve`
 - in another terminal, run `yarn screenshots`
 
 ## Guidelines for CSS development
@@ -83,7 +83,7 @@ To run the a11y audit locally:
 
 - install the latest [chromedriver](http://chromedriver.chromium.org/downloads) and ensure its available on your system `$PATH`
   - macOS users can simply `brew cask install chromedriver`
-- open a terminal and run `yarn build && yarn run serve`
+- open a terminal and run `yarn build && yarn serve`
 - in another terminal, run `yarn a11y`
 
 The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.

package/RELEASE-NOTES.md

@@ -4,6 +4,36 @@ section: developer-resources
 releaseNoteTOC: true
 ---
 
+## 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)
+
+### Components
+- **Card:** Added non-selectable card, updated card view demo ([#4500](https://github.com/patternfly/patternfly/pull/4500))
+- **Dropdown:**
+  - Added secondary variant to dropdown ([#4498](https://github.com/patternfly/patternfly/pull/4498))
+  - Applied primary styling to split ([#4508](https://github.com/patternfly/patternfly/pull/4508))
+- **Dual list selector:** Aligned html/a11y with react ([#4499](https://github.com/patternfly/patternfly/pull/4499))
+- **Form select:** Matched padding with select ([#4490](https://github.com/patternfly/patternfly/pull/4490))
+- **Log viewer:**
+  - Added nowrap variation ([#4455](https://github.com/patternfly/patternfly/pull/4455))
+  - Updated the way dark theme is applied ([#4506](https://github.com/patternfly/patternfly/pull/4506))
+- **Menu toggle:**
+  - Added plain w/text variant ([#4491](https://github.com/patternfly/patternfly/pull/4491))
+  - Added rounded corners to primary ([#4494](https://github.com/patternfly/patternfly/pull/4494))
+- **Menu:** Added nav variant ([#4513](https://github.com/patternfly/patternfly/pull/4513))
+- **Nav:**
+  - Added drilldown menu to nav ([#4458](https://github.com/patternfly/patternfly/pull/4458))
+  - Fixed toggle icon rotation ([#4486](https://github.com/patternfly/patternfly/pull/4486))
+- **Options menu:** Moved text into button in plain text variant ([#4492](https://github.com/patternfly/patternfly/pull/4492))
+- **Table:** Fixed pf-m-truncate alignment ([#4489](https://github.com/patternfly/patternfly/pull/4489))
+- **TextInputGroup:** Added disabled styling ([#4484](https://github.com/patternfly/patternfly/pull/4484))
+- **Tooltip:** Added support for diagonal positioning ([#4470](https://github.com/patternfly/patternfly/pull/4470))
+
+### Other
+- **README:** Updated a11y docs, s/npm run/yarn ([#4496](https://github.com/patternfly/patternfly/pull/4496))
+
+
 ## 2021.14 release notes (2021-10-26)
 Packages released:
 - [@patternfly/patternfly@v4.151.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.151.4)

package/base/_globals.scss

@@ -127,22 +127,6 @@
     cursor: pointer;
   }
 
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    // Remove the inner border and padding in Firefox.
-    &::-moz-focus-inner {
-      padding: 0;
-      border-style: none;
-    }
-
-    // Restore the focus styles unset by the previous rule.
-    &:-moz-focusring {
-      outline: 1px dotted ButtonText;
-    }
-  }
-
   @include pf-m-overpass-font {
     a {
       font-weight: var(--pf-global--FontWeight--semi-bold);

package/base/patternfly-globals.css

@@ -116,20 +116,6 @@ a {
   cursor: pointer;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 .pf-m-overpass-font a {
   font-weight: var(--pf-global--FontWeight--semi-bold);
 }

package/components/Table/table.css

@@ -227,8 +227,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
   --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
@@ -716,7 +716,7 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 }
-.pf-c-table__check > input {
+.pf-c-table__check > input:not([disabled]) {
   cursor: pointer;
 }
 

package/components/Table/table.scss

@@ -240,8 +240,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
 
   // Nested table
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 
   // Modifier - expandable row expanded
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
@@ -902,7 +902,7 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 
-  > input {
+  > input:not([disabled]) {
     cursor: pointer;
   }
 }

package/components/Toolbar/toolbar.css

@@ -112,6 +112,8 @@
   --pf-c-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);
   --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
   --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
+  --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
   --pf-c-toolbar--c-divider--m-vertical--spacer: var(--pf-c-toolbar--spacer--base);
   --pf-c-toolbar--m-full-height--PaddingTop: 0;
@@ -379,8 +381,8 @@
   grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
 }
 .pf-c-toolbar__expandable-content .pf-m-label {
-  display: none;
-  visibility: hidden;
+  margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
+  font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
 }
 
 .pf-c-toolbar__content.pf-m-chip-container,

package/components/Toolbar/toolbar.scss

@@ -99,6 +99,10 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
   --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
 
+  // Label in expanded content
+  --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
+  --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
+
   // Toggle
   --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
 
@@ -382,8 +386,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 
   .pf-m-label {
-    display: none;
-    visibility: hidden;
+    margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
+    font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
   }
 }
 

package/docs/components/Select/examples/Select.md

@@ -235,17 +235,18 @@ The single select should be used when the user is selecting an option from a lis
 
 ### Usage
 
-| Class                          | Applied to     | Outcome                                                 |
-| ------------------------------ | -------------- | ------------------------------------------------------- |
-| `.pf-c-select`                 | `<div>`        | Initiates a custom select.                              |
-| `.pf-c-select__toggle`         | `<button>`     | Initiates a custom toggle.                              |
-| `.pf-c-select__toggle-wrapper` | `<div>`        | Initiates a custom select toggle wrapper.               |
-| `.pf-c-select__toggle-arrow`   | `<span>`       | Initiates the caret to toggle the dropdown.             |
-| `.pf-c-select__menu`           | `<ul>`         | Initiates the custom select dropdown menu.              |
-| `.pf-c-select__menu-item`      | `<li>`         | Initiates the items in the custom select dropdown menu. |
-| `.pf-c-select__menu-item-icon` | `<i>`          | Initiates the selected item icon.                       |
-| `.pf-m-top`                    | `.pf-c-select` | Modifies the select menu to display above the toggle.   |
-| `.pf-m-active`                 | `.pf-c-select` | Forces display of the active state of the toggle.       |
+| Class                          | Applied to           | Outcome                                                          |
+| ------------------------------ | -------------------- | ---------------------------------------------------------------- |
+| `.pf-c-select`                 | `<div>`              | Initiates a custom select.                                       |
+| `.pf-c-select__toggle`         | `<button>`           | Initiates a custom toggle.                                       |
+| `.pf-c-select__toggle-wrapper` | `<div>`              | Initiates a custom select toggle wrapper.                        |
+| `.pf-c-select__toggle-arrow`   | `<span>`             | Initiates the caret to toggle the dropdown.                      |
+| `.pf-c-select__menu`           | `<ul>`               | Initiates the custom select dropdown menu.                       |
+| `.pf-c-select__menu-item`      | `<li>`               | Initiates the items in the custom select dropdown menu.          |
+| `.pf-c-select__menu-item-icon` | `<i>`                | Initiates the selected item icon.                                |
+| `.pf-m-top`                    | `.pf-c-select`       | Modifies the select menu to display above the toggle.            |
+| `.pf-m-align-right`            | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
+| `.pf-m-active`                 | `.pf-c-select`       | Forces display of the active state of the toggle.                |
 
 ## States