@patternfly/react-core 4.227.0 → 4.227.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.227.1 (2022-07-26)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 # 4.227.0 (2022-07-26)
 
 

package/dist/umd/react-core.css

@@ -19153,6 +19153,166 @@ svg.pf-c-spinner.pf-m-xl {
     transform: rotate(720deg);
   }
 }
+.pf-c-switch {
+  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
+  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
+  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
+  --pf-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-switch--Height: auto;
+  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
+  --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--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--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);
+  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
+  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
+  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
+  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: auto;
+  grid-auto-columns: 1fr;
+  column-gap: var(--pf-c-switch--ColumnGap);
+  height: var(--pf-c-switch--Height);
+  font-size: var(--pf-c-switch--FontSize);
+  line-height: var(--pf-c-switch--LineHeight);
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.pf-c-switch.pf-m-reverse .pf-c-switch__label,
+.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
+  grid-row: 1;
+}
+
+.pf-c-switch.pf-m-reverse .pf-c-switch__label {
+  grid-column: 1;
+}
+
+.pf-c-switch__input {
+  position: absolute;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
+  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
+  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--checked__label--Color);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
+  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
+  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
+}
+
+.pf-c-switch__input:checked ~ .pf-m-off {
+  display: none;
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--not-checked__label--Color);
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
+  display: none;
+  visibility: hidden;
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-m-on {
+  display: none;
+}
+
+.pf-c-switch__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--disabled__label--Color);
+  cursor: not-allowed;
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
+  cursor: not-allowed;
+  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
+  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
+}
+
+.pf-c-switch__toggle {
+  position: relative;
+  display: inline-block;
+  width: var(--pf-c-switch__toggle--Width);
+  height: var(--pf-c-switch__toggle--Height);
+  background-color: var(--pf-c-switch__toggle--BackgroundColor);
+  border-radius: var(--pf-c-switch__toggle--BorderRadius);
+}
+
+.pf-c-switch__toggle::before {
+  position: absolute;
+  top: var(--pf-c-switch__toggle--before--Top);
+  left: var(--pf-c-switch__toggle--before--Left);
+  display: block;
+  width: var(--pf-c-switch__toggle--before--Width);
+  height: var(--pf-c-switch__toggle--before--Height);
+  content: "";
+  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
+  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
+  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
+  transition: var(--pf-c-switch__toggle--before--Transition);
+}
+
+.pf-c-switch__toggle-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--pf-c-switch__toggle-icon--Left);
+  display: flex;
+  align-items: center;
+  font-size: var(--pf-c-switch__toggle-icon--FontSize);
+  color: var(--pf-c-switch__toggle-icon--Color);
+}
+
+.pf-c-switch__label {
+  display: inline-block;
+  grid-column: 2;
+  color: var(--pf-c-switch__label--Color);
+  vertical-align: top;
+}
+
+:where(.pf-theme-dark) .pf-c-switch {
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+  --pf-c-switch__toggle--before--BoxShadow: none;
+}
+
 .pf-c-tabs {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--Width: auto;
@@ -20157,166 +20317,6 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
 }
 
-.pf-c-switch {
-  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
-  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
-  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
-  --pf-c-switch__toggle-icon--Offset: 0.125rem;
-  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-switch--Height: auto;
-  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
-  --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--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--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);
-  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
-  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
-  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
-  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
-  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
-  position: relative;
-  display: inline-grid;
-  grid-template-columns: auto;
-  grid-auto-columns: 1fr;
-  column-gap: var(--pf-c-switch--ColumnGap);
-  height: var(--pf-c-switch--Height);
-  font-size: var(--pf-c-switch--FontSize);
-  line-height: var(--pf-c-switch--LineHeight);
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.pf-c-switch.pf-m-reverse .pf-c-switch__label,
-.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
-  grid-row: 1;
-}
-
-.pf-c-switch.pf-m-reverse .pf-c-switch__label {
-  grid-column: 1;
-}
-
-.pf-c-switch__input {
-  position: absolute;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
-  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
-  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--checked__label--Color);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
-  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
-  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
-}
-
-.pf-c-switch__input:checked ~ .pf-m-off {
-  display: none;
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--not-checked__label--Color);
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
-  display: none;
-  visibility: hidden;
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-m-on {
-  display: none;
-}
-
-.pf-c-switch__input:disabled {
-  cursor: not-allowed;
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--disabled__label--Color);
-  cursor: not-allowed;
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
-  cursor: not-allowed;
-  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
-  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
-}
-
-.pf-c-switch__toggle {
-  position: relative;
-  display: inline-block;
-  width: var(--pf-c-switch__toggle--Width);
-  height: var(--pf-c-switch__toggle--Height);
-  background-color: var(--pf-c-switch__toggle--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--BorderRadius);
-}
-
-.pf-c-switch__toggle::before {
-  position: absolute;
-  top: var(--pf-c-switch__toggle--before--Top);
-  left: var(--pf-c-switch__toggle--before--Left);
-  display: block;
-  width: var(--pf-c-switch__toggle--before--Width);
-  height: var(--pf-c-switch__toggle--before--Height);
-  content: "";
-  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
-  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
-  transition: var(--pf-c-switch__toggle--before--Transition);
-}
-
-.pf-c-switch__toggle-icon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: var(--pf-c-switch__toggle-icon--Left);
-  display: flex;
-  align-items: center;
-  font-size: var(--pf-c-switch__toggle-icon--FontSize);
-  color: var(--pf-c-switch__toggle-icon--Color);
-}
-
-.pf-c-switch__label {
-  display: inline-block;
-  grid-column: 2;
-  color: var(--pf-c-switch__label--Color);
-  vertical-align: top;
-}
-
-:where(.pf-theme-dark) .pf-c-switch {
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
-  --pf-c-switch__toggle--before--BoxShadow: none;
-}
-
 .pf-c-content {
   --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.0",
+  "version": "4.227.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.78.0",
-    "@patternfly/react-styles": "^4.77.0",
-    "@patternfly/react-tokens": "^4.79.0",
+    "@patternfly/react-icons": "^4.78.1",
+    "@patternfly/react-styles": "^4.77.1",
+    "@patternfly/react-tokens": "^4.79.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9ab68189931ffebc2eb1d2dd3a39ad5d8bc88b58"
+  "gitHead": "7bfaee093d3c85392a9d21a34ff661ffe29b0f47"
 }

package/src/components/Page/examples/Page.md

@@ -89,7 +89,7 @@ class VerticalPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -262,7 +262,7 @@ class FillPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -344,7 +344,7 @@ class VerticalPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -410,7 +410,7 @@ class UncontrolledNavPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar" />;
 
     return (
       <Page isManagedSidebar header={Header} sidebar={Sidebar}>
@@ -497,7 +497,7 @@ class GroupPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -505,13 +505,21 @@ class GroupPage extends React.Component {
           <PageNavigation>
             <Nav aria-label="Group section navigation" variant="tertiary">
               <NavList>
-                <NavItem itemId={0} isActive>
+                <NavItem href="#" itemId={0} isActive>
                   System panel
                 </NavItem>
-                <NavItem itemId={1}>Policy</NavItem>
-                <NavItem itemId={2}>Authentication</NavItem>
-                <NavItem itemId={3}>Network services</NavItem>
-                <NavItem itemId={4}>Server</NavItem>
+                <NavItem href="#" itemId={1}>
+                  Policy
+                </NavItem>
+                <NavItem href="#" itemId={2}>
+                  Authentication
+                </NavItem>
+                <NavItem href="#" itemId={3}>
+                  Network services
+                </NavItem>
+                <NavItem href="#" itemId={4}>
+                  Server
+                </NavItem>
               </NavList>
             </Nav>
           </PageNavigation>
@@ -582,7 +590,7 @@ class VerticalPage extends React.Component {
         navToggleId="vertical-pageheader-toggle"
       />
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -630,7 +638,12 @@ CenterAlignedPageSection = () => {
   const Header = (
     <Masthead>
       <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation" onNavToggle={this.onNavToggle} id="centered-nav-toggle">
+        <PageToggleButton
+          variant="plain"
+          aria-label="Global navigation"
+          onNavToggle={this.onNavToggle}
+          id="centered-nav-toggle"
+        >
           <BarsIcon />
         </PageToggleButton>
       </MastheadToggle>