@patternfly/react-core 4.222.6 → 4.222.9

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.222.9 (2022-06-16)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.222.8 (2022-06-16)
+
+
+### Bug Fixes
+
+* **Table:** filterable table demo icon text spacing fix ([#7477](https://github.com/patternfly/patternfly-react/issues/7477)) ([e35387f](https://github.com/patternfly/patternfly-react/commit/e35387f42b355000ff66a79e1031eb6e9a7bb8c3))
+
+
+
+
+
+## 4.222.7 (2022-06-16)
+
+
+### Bug Fixes
+
+* **console:** add SUSE instruction for virt-viewer ([#7445](https://github.com/patternfly/patternfly-react/issues/7445)) ([2ac5adb](https://github.com/patternfly/patternfly-react/commit/2ac5adb581d673e0687f438baeb7859125bd30d4)), closes [#7519](https://github.com/patternfly/patternfly-react/issues/7519)
+
+
+
+
+
 ## 4.222.6 (2022-06-16)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.min.css

@@ -23460,6 +23460,75 @@ svg.pf-c-spinner.pf-m-xl {
     direction: ltr;
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -25536,75 +25605,6 @@ svg.pf-c-spinner.pf-m-xl {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.6",
+  "version": "4.222.9",
   "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.73.6",
-    "@patternfly/react-styles": "^4.72.6",
-    "@patternfly/react-tokens": "^4.74.6",
+    "@patternfly/react-icons": "^4.73.9",
+    "@patternfly/react-styles": "^4.72.9",
+    "@patternfly/react-tokens": "^4.74.9",
     "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": "0868d0b8861099a69df12165a69587cb0a8f5762"
+  "gitHead": "eb7f33527ae23ff0ca586a0b98efe7a2cbb925c2"
 }

package/src/demos/Card/Card.md

@@ -106,6 +106,13 @@ class CardViewBasic extends React.Component {
       totalItemCount: 10
     };
 
+    this.checkAllSelected = (selected, total) => {
+      if (selected && selected < total) {
+        return null;
+      }
+      return selected === total;
+    };
+
     this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
       this.setState(prevState => ({
         isLowerToolbarDropdownOpen
@@ -209,11 +216,11 @@ class CardViewBasic extends React.Component {
           return prevState.selectedItems.includes(productId * 1)
             ? {
                 selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-                areAllSelected: false
+                areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
               }
             : {
                 selectedItems: [...prevState.selectedItems, productId * 1],
-                areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+                areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
               };
         });
       }
@@ -224,11 +231,11 @@ class CardViewBasic extends React.Component {
         return prevState.selectedItems.includes(productId * 1)
           ? {
               selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-              areAllSelected: false
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
             }
           : {
               selectedItems: [...prevState.selectedItems, productId * 1],
-              areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
             };
       });
     };
@@ -562,7 +569,7 @@ class CardViewBasic extends React.Component {
           </PageSection>
           <PageSection isFilled>
             <Gallery hasGutter aria-label="Selectable card container">
-              <Card isSelectableRaised isCompact>
+              <Card isCompact>
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
                     <EmptyStateIcon icon={PlusCircleIcon} />
@@ -577,7 +584,6 @@ class CardViewBasic extends React.Component {
               </Card>
               {filtered.map((product, key) => (
                 <Card
-                  isSelectableRaised
                   hasSelectableInput
                   isCompact
                   key={product.name}

package/src/demos/JumpLinks.md

@@ -130,3 +130,13 @@ ScrollspyH2 = () => {
   );
 };
 ```
+
+
+### With drawer
+
+This demo shows how jump links can be used in combination with a drawer.
+
+The `scrollableSelector` prop passed to the jump links component is an `id` that was placed on the `DrawerContent` component.
+
+```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
+```

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  Button,
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  JumpLinks,
+  JumpLinksItem,
+  JumpLinksList,
+  PageSection,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+  TextContent,
+  getResizeObserver
+} from '@patternfly/react-core';
+import DashboardWrapper from '../DashboardWrapper';
+
+export const JumpLinksWithDrawer = () => {
+  const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
+
+  const [offsetHeight, setOffsetHeight] = React.useState(0);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef();
+
+  React.useEffect(() => {
+    const masthead = document.getElementsByClassName('pf-c-masthead')[0];
+    const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
+
+    getResizeObserver(masthead, () => {
+      setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
+    });
+  }, []);
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const onToggleClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
+      <Drawer isExpanded={isExpanded}>
+        <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
+          <DrawerContentBody hasPadding>
+            <Sidebar>
+              <SidebarPanel variant="sticky">
+                <JumpLinks
+                  isVertical={true}
+                  label="Jump to section"
+                  scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
+                  offset={offsetHeight}
+                  expandable={{ default: 'expandable', md: 'nonExpandable' }}
+                >
+                  {headings.map(heading => (
+                    <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
+                      {`${heading} section`}
+                      <JumpLinksList></JumpLinksList>
+                    </JumpLinksItem>
+                  ))}
+                </JumpLinks>
+              </SidebarPanel>
+              <SidebarContent>
+                <PageSection sticky="top" variant="light">
+                  <Button onClick={onToggleClick}>Toggle drawer</Button>
+                </PageSection>
+                <TextContent>
+                  {headings.map(heading => (
+                    <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
+                      <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
+                        {`${heading} section`}
+                      </h2>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim
+                        purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel.
+                        Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc
+                        viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit,
+                        tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus,
+                        vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper.
+                        Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla.
+                        Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros
+                        pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a
+                        accumsan. Nam pretium vitae leo vitae rhoncus.
+                      </p>
+                      <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                        provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et
+                        dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
+                        soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
+                        possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+                        aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+                        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                      </p>
+                    </div>
+                  ))}
+                </TextContent>
+              </SidebarContent>
+            </Sidebar>
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </DashboardWrapper>
+  );
+};