@patternfly/patternfly 4.192.0 → 4.192.3

package/RELEASE-NOTES.md

@@ -3,6 +3,32 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.05 release notes (2022-04-20)
+Packages released:
+- [@patternfly/patternfly@v4.192.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.192.1)
+
+### Components
+- **Card:** Fixed stacking context issue with selectable raised cards ([#4780](https://github.com/patternfly/patternfly/pull/4780))
+- **Data list:** Updated expandable demo to include expand/collapse all in toolbar ([#4784](https://github.com/patternfly/patternfly/pull/4784))
+- **Divider:** Added horizontal/vertical breakpoint support to divider ([#4765](https://github.com/patternfly/patternfly/pull/4765))
+- **Form control:** Fixed placeholder variation menu item color ([#4773](https://github.com/patternfly/patternfly/pull/4773))
+- **Form:**
+  - Added CSS vars for defining label cursor ([#4779](https://github.com/patternfly/patternfly/pull/4779))
+  - Changed width limited form max width from 500 to 800px ([#4782](https://github.com/patternfly/patternfly/pull/4782))
+- **Login:** Added support for any language selector menu ([#4793](https://github.com/patternfly/patternfly/pull/4793))
+- **Page:** Updated dark theme main section bgcolor ([#4791](https://github.com/patternfly/patternfly/pull/4791))
+- **Search input:** Converted to text-input-group ([#4730](https://github.com/patternfly/patternfly/pull/4730))
+- **Switch:** Updated to switch state colors, added checked + label example ([#4766](https://github.com/patternfly/patternfly/pull/4766))
+- **Tabs:**
+  - Added secondary border-bottom variation, update demos ([#4774](https://github.com/patternfly/patternfly/pull/4774))
+  - Added close button and add new tab ([#4787](https://github.com/patternfly/patternfly/pull/4787))
+- **Wizard:** Added drawer example ([#4778](https://github.com/patternfly/patternfly/pull/4778))
+
+### Other
+- **Global:** Updated code and pre elements to use PF mono font stack ([#4783](https://github.com/patternfly/patternfly/pull/4783))
+- **Theme:** Added stylesheet for prefers-color-scheme dark ([#4761](https://github.com/patternfly/patternfly/pull/4761))
+
+
 ## 2022.04 release notes (2022-03-30)
 Packages released:
 - [@patternfly/patternfly@v4.185.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.185.1)

package/components/DescriptionList/description-list.css

@@ -162,6 +162,9 @@
   color: var(--pf-c-description-list__term-icon--Color);
 }
 
+.pf-c-description-list__text {
+  min-width: 0;
+}
 .pf-c-description-list__text.pf-m-help-text {
   text-decoration: underline;
   cursor: pointer;

package/components/DescriptionList/description-list.scss

@@ -144,6 +144,8 @@ $pf-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md",
 }
 
 .pf-c-description-list__text {
+  min-width: 0; // this allows overflow-wrap to work
+
   &.pf-m-help-text {
     text-decoration: underline;
     cursor: pointer;

package/components/TextInputGroup/text-input-group.css

@@ -29,6 +29,7 @@
   --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   position: relative;
   display: flex;
+  width: 100%;
   color: var(--pf-c-text-input-group--Color, inherit);
   background-color: var(--pf-c-text-input-group--BackgroundColor);
 }
@@ -144,4 +145,8 @@
 .pf-c-text-input-group__utilities .pf-c-button {
   --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
   --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
+}
+
+.pf-c-text-input-group__group {
+  display: flex;
 }

package/components/TextInputGroup/text-input-group.scss

@@ -45,6 +45,7 @@
 
   position: relative;
   display: flex;
+  width: 100%; // when child of flex layout, take up space
   color: var(--pf-c-text-input-group--Color, inherit);
   background-color: var(--pf-c-text-input-group--BackgroundColor);
 
@@ -190,3 +191,8 @@
     --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
   }
 }
+
+
+.pf-c-text-input-group__group {
+  display: flex;
+}

package/components/TreeView/tree-view.css

@@ -59,6 +59,7 @@
   --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
   --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
   --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
+  --pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-tree-view--m-guides__node--before--Width: 1rem;
   --pf-c-tree-view--m-guides__node--before--Height: var(--pf-c-tree-view--m-guides--guide-width--base);
   --pf-c-tree-view--m-guides__node--before--Top: 1.125rem;
@@ -119,6 +120,7 @@
 }
 .pf-c-tree-view.pf-m-compact .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before, .pf-c-tree-view.pf-m-guides .pf-c-tree-view__list-item .pf-c-tree-view__list-item::before {
   top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
+  z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
   width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
   height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
   background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);

package/components/TreeView/tree-view.scss

@@ -98,6 +98,7 @@ $pf-c-tree-view--MaxNesting: 10;
   --pf-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-c-tree-view--m-guides--guide-color--base);
   --pf-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-c-tree-view--m-guides__node--before--Top);
   --pf-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-c-tree-view--m-guides__list-item--last-child--before--Top);
+  --pf-c-tree-view--m-guides__list-item--ZIndex: var(--pf-global--ZIndex--xs);
 
   // Node
   --pf-c-tree-view--m-guides__node--before--Width: #{pf-size-prem(16px)};
@@ -187,6 +188,7 @@ $pf-c-tree-view--MaxNesting: 10;
         // vertical border
         &::before {
           top: var(--pf-c-tree-view--m-guides__list-item--before--Top);
+          z-index: var(--pf-c-tree-view--m-guides__list-item--ZIndex);
           width: var(--pf-c-tree-view--m-guides__list-item--before--Width);
           height: var(--pf-c-tree-view--m-guides__list-item--before--Height);
           background-color: var(--pf-c-tree-view--m-guides__list-item--before--BackgroundColor);

package/docs/components/InputGroup/examples/InputGroup.md

@@ -2,7 +2,11 @@
 id: Input group
 section: components
 cssPrefix: pf-c-input-group
----## Examples
+---### Overview
+
+Use the input group to extend form controls by adding text, buttons, selects, etc. The input group handles border overlap.
+
+## Examples
 
 ### Variations
 
@@ -213,10 +217,6 @@ cssPrefix: pf-c-input-group
 
 ## Documentation
 
-### Overview
-
-Use the input group to extend form controls by adding text, buttons, selects, etc.
-
 ### Accessibility
 
 When using the `.pf-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).

package/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -0,0 +1,23 @@
+#ws-core-c-search-input-advanced-search-expanded,
+#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
+  height: 540px;
+}
+
+#ws-core-c-search-input-autocomplete {
+  height: 250px;
+}
+
+#ws-core-c-search-input-autocomplete-last-option-hint {
+  height: 130px;
+}
+
+.ws-example-wrapper {
+  position: relative;
+}
+
+.ws-example-wrapper .pf-c-menu,
+.ws-example-wrapper .pf-c-panel {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+}