@patternfly/patternfly 4.185.0 → 4.186.0

package/RELEASE-NOTES.md

@@ -3,6 +3,28 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 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)
+
+### Components
+- **Accordion:** Made links at bottom of bordered item clickable ([#4740](https://github.com/patternfly/patternfly/pull/4740))
+- **Description list:** Fixed var typo in docs ([#4739](https://github.com/patternfly/patternfly/pull/4739))
+- **Form:** Improved accessible label on form elements in examples/demos ([#4714](https://github.com/patternfly/patternfly/pull/4714))
+- **Form control:** Updated invalid sprite css, examples ([#4732](https://github.com/patternfly/patternfly/pull/4732))
+- **Menu toggle:**
+  * Added typeahead variation ([#4673](https://github.com/patternfly/patternfly/pull/4673))
+  * Added example of secondary with icon ([#4743](https://github.com/patternfly/patternfly/pull/4743))
+- **Page/modal/wizard:** Made scrollable regions keyboard focusable ([#4736](https://github.com/patternfly/patternfly/pull/4736))
+- **Pagination:** Updated options menu toggle so whole toggle is clickable ([#4723](https://github.com/patternfly/patternfly/pull/4723))
+
+### Other
+- **Build:** Updated build to include themes directory ([#4728](https://github.com/patternfly/patternfly/pull/4728))
+- **Dark theme:** Fixed dark theme shadow pf-size-prem ([#4752](https://github.com/patternfly/patternfly/pull/4752))
+- **Demos:** Added new page template to demos ([#4741](https://github.com/patternfly/patternfly/pull/4741))
+- **Icons:** Added critical-risk pficon ([#4758](https://github.com/patternfly/patternfly/pull/4758))
+
+
 ## 2022.03 release notes (2022-03-08)
 Packages released:
 - [@patternfly/patternfly@v4.183.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.183.1)

package/base/_globals.scss

@@ -87,6 +87,11 @@
     text-align: left;
   }
 
+  code,
+  pre {
+    font-family: var(--pf-global--FontFamily--monospace);
+  }
+
   // Patternfly base styles
 
   *,

package/base/patternfly-globals.css

@@ -81,6 +81,11 @@ th {
   text-align: left;
 }
 
+code,
+pre {
+  font-family: var(--pf-global--FontFamily--monospace);
+}
+
 *,
 *::before,
 *::after {

package/components/Form/form.css

@@ -12,6 +12,8 @@
   --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-form__label--hover--Cursor: pointer;
+  --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
   --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
@@ -289,13 +291,13 @@
   background-color: none;
 }
 .pf-c-form__label:not(.pf-m-disabled):hover {
-  cursor: pointer;
+  cursor: var(--pf-c-form__label--hover--Cursor);
 }
 .pf-c-form__label.pf-m-disabled {
   color: var(--pf-c-form__label--m-disabled--Color);
 }
 .pf-c-form__label.pf-m-disabled:hover {
-  cursor: not-allowed;
+  cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
 }
 
 .pf-c-form__label-text {

package/components/Form/form.scss

@@ -67,6 +67,8 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
   --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-form__label--hover--Cursor: pointer;
+  --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
 
   // Label text
   --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
@@ -268,7 +270,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
   }
 
   &:not(.pf-m-disabled):hover {
-    cursor: pointer;
+    cursor: var(--pf-c-form__label--hover--Cursor);
   }
 
   &.pf-m-disabled {
@@ -276,7 +278,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
   }
 
   &.pf-m-disabled:hover {
-    cursor: not-allowed;
+    cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
   }
 }
 

package/components/Switch/switch.css

@@ -13,13 +13,13 @@
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);

package/components/Switch/switch.scss

@@ -20,15 +20,15 @@
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
 
   // Switch toggle
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);

package/docs/components/Switch/examples/Switch.md

@@ -13,7 +13,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-label-1"
     aria-labelledby="switch-with-label-1-on"
-    name="switchExample1"
     checked
   />
 
@@ -40,9 +39,7 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-label-2"
     aria-labelledby="switch-with-label-2-on"
-    name="switchExample2"
   />
-
   <span class="pf-c-switch__toggle"></span>
 
   <span
@@ -69,7 +66,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-reverse-1"
     aria-labelledby="switch-reverse-1-on"
-    name="switchExample1"
     checked
   />
 
@@ -96,9 +92,7 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-reverse-2"
     aria-labelledby="switch-reverse-2-on"
-    name="switchExample2"
   />
-
   <span class="pf-c-switch__toggle"></span>
 
   <span
@@ -116,6 +110,66 @@ cssPrefix: pf-c-switch
 
 ```
 
+### Label and check
+
+```html
+<label class="pf-c-switch" for="switch-label-check-1">
+  <input
+    class="pf-c-switch__input"
+    type="checkbox"
+    id="switch-label-check-1"
+    aria-labelledby="switch-label-check-1-on"
+    checked
+  />
+
+  <span class="pf-c-switch__toggle">
+    <span class="pf-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+  <span
+    class="pf-c-switch__label pf-m-on"
+    id="switch-label-check-1-on"
+    aria-hidden="true"
+  >Message when on</span>
+
+  <span
+    class="pf-c-switch__label pf-m-off"
+    id="switch-label-check-1-off"
+    aria-hidden="true"
+  >Message when off</span>
+</label>
+
+<br />
+<br />
+<label class="pf-c-switch" for="switch-label-check-2">
+  <input
+    class="pf-c-switch__input"
+    type="checkbox"
+    id="switch-label-check-2"
+    aria-labelledby="switch-label-check-2-off"
+  />
+
+  <span class="pf-c-switch__toggle">
+    <span class="pf-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+  <span
+    class="pf-c-switch__label pf-m-on"
+    id="switch-label-check-2-on"
+    aria-hidden="true"
+  >Message when on</span>
+
+  <span
+    class="pf-c-switch__label pf-m-off"
+    id="switch-label-check-2-off"
+    aria-hidden="true"
+  >Message when off</span>
+</label>
+
+```
+
 ### Without label
 
 ```html
@@ -125,7 +179,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-icon-1"
     aria-label="switch is off"
-    name="switchExample3"
     checked
   />
 
@@ -144,9 +197,7 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-with-icon-2"
     aria-label="switch is off"
-    name="switchExample4"
   />
-
   <span class="pf-c-switch__toggle">
     <span class="pf-c-switch__toggle-icon">
       <i class="fas fa-check" aria-hidden="true"></i>
@@ -165,7 +216,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-disabled-1"
     aria-labelledby="switch-disabled-1-on"
-    name="switchExample5"
     disabled
     checked
   />
@@ -193,7 +243,6 @@ cssPrefix: pf-c-switch
     type="checkbox"
     id="switch-disabled-2"
     aria-labelledby="switch-disabled-2-on"
-    name="switchExample6"
     disabled
   />
 

package/package.json

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

package/patternfly-base.css

@@ -642,6 +642,11 @@ th {
   text-align: left;
 }
 
+code,
+pre {
+  font-family: var(--pf-global--FontFamily--monospace);
+}
+
 *,
 *::before,
 *::after {

package/patternfly-no-reset.css

@@ -13461,6 +13461,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-form__label--hover--Cursor: pointer;
+  --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
   --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
@@ -13738,13 +13740,13 @@ label.pf-c-check, .pf-c-check__label,
   background-color: none;
 }
 .pf-c-form__label:not(.pf-m-disabled):hover {
-  cursor: pointer;
+  cursor: var(--pf-c-form__label--hover--Cursor);
 }
 .pf-c-form__label.pf-m-disabled {
   color: var(--pf-c-form__label--m-disabled--Color);
 }
 .pf-c-form__label.pf-m-disabled:hover {
-  cursor: not-allowed;
+  cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
 }
 
 .pf-c-form__label-text {
@@ -22842,13 +22844,13 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);

package/patternfly.css

@@ -715,6 +715,11 @@ th {
   text-align: left;
 }
 
+code,
+pre {
+  font-family: var(--pf-global--FontFamily--monospace);
+}
+
 *,
 *::before,
 *::after {
@@ -13583,6 +13588,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-form__label--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-form__label--hover--Cursor: pointer;
+  --pf-c-form__label--m-disabled--hover--Cursor: not-allowed;
   --pf-c-form__label-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
@@ -13860,13 +13867,13 @@ label.pf-c-check, .pf-c-check__label,
   background-color: none;
 }
 .pf-c-form__label:not(.pf-m-disabled):hover {
-  cursor: pointer;
+  cursor: var(--pf-c-form__label--hover--Cursor);
 }
 .pf-c-form__label.pf-m-disabled {
   color: var(--pf-c-form__label--m-disabled--Color);
 }
 .pf-c-form__label.pf-m-disabled:hover {
-  cursor: not-allowed;
+  cursor: var(--pf-c-form__label--m-disabled--hover--Cursor);
 }
 
 .pf-c-form__label-text {
@@ -22964,13 +22971,13 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
   --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
   --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--Color--dark-200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
   --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
   --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
   --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
   --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
   --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);