@patternfly/react-core 4.251.1 → 4.251.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.251.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.1...@patternfly/react-core@4.251.2) (2022-10-14)
+
+
+### Bug Fixes
+
+* **JumpLinks:** clean up demo in a drawer ([#8182](https://github.com/patternfly/patternfly-react/issues/8182)) ([d8e5b91](https://github.com/patternfly/patternfly-react/commit/d8e5b91c74957bc0dc4825e519721191f9f0427e))
+
+
+
+
+
 ## [4.251.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.0...@patternfly/react-core@4.251.1) (2022-10-13)
 
 **Note:** Version bump only for package @patternfly/react-core

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

@@ -3628,6 +3628,44 @@ label.pf-c-check, .pf-c-check__label,
   border: 0;
 }
 
+.pf-c-code-block {
+  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
+  background-color: var(--pf-c-code-block--BackgroundColor);
+}
+
+.pf-c-code-block__header {
+  display: flex;
+  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
+}
+
+.pf-c-code-block__actions {
+  display: flex;
+  margin-left: auto;
+}
+
+.pf-c-code-block__content {
+  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
+}
+
+.pf-c-code-block__pre {
+  font-family: var(--pf-c-code-block__pre--FontFamily);
+  font-size: var(--pf-c-code-block__pre--FontSize);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.pf-c-code-block__code {
+  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
+}
+
 .pf-c-context-selector__menu {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3962,44 +4000,6 @@ label.pf-c-check, .pf-c-check__label,
   border-top: 1px solid var(--pf-global--BorderColor--300);
 }
 
-.pf-c-code-block {
-  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
-  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
-  background-color: var(--pf-c-code-block--BackgroundColor);
-}
-
-.pf-c-code-block__header {
-  display: flex;
-  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
-}
-
-.pf-c-code-block__actions {
-  display: flex;
-  margin-left: auto;
-}
-
-.pf-c-code-block__content {
-  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
-}
-
-.pf-c-code-block__pre {
-  font-family: var(--pf-c-code-block__pre--FontFamily);
-  font-size: var(--pf-c-code-block__pre--FontSize);
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.pf-c-code-block__code {
-  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
-}
-
 .pf-c-data-list {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -24160,6 +24160,40 @@ label.pf-c-tree-view__node-text {
   display: flex;
 }
 
+.pf-c-truncate {
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+}
+
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
+}
+
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}
 .pf-c-panel {
   --pf-c-panel--Width: auto;
   --pf-c-panel--MinWidth: auto;
@@ -24243,40 +24277,6 @@ label.pf-c-tree-view__node-text {
   box-shadow: var(--pf-c-panel__footer--BoxShadow);
 }
 
-.pf-c-truncate {
-  --pf-c-truncate--MinWidth: 12ch;
-  --pf-c-truncate__start--MinWidth: 6ch;
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: baseline;
-  min-width: var(--pf-c-truncate--MinWidth);
-}
-
-.pf-c-truncate__start,
-.pf-c-truncate__end {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pf-c-truncate__start {
-  min-width: var(--pf-c-truncate__start--MinWidth);
-}
-
-.pf-c-truncate__end {
-  direction: rtl;
-}
-
-.pf-c-truncate__start + .pf-c-truncate__end {
-  overflow: visible;
-  direction: ltr;
-}
-
-@supports (-webkit-hyphens: none) {
-  .pf-c-truncate__end {
-    direction: ltr;
-  }
-}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.251.1",
+  "version": "4.251.2",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "9eacaae1c7ae678cc139c0ee937c158483826c18"
+  "gitHead": "5a7fd835da70f91dd7e40b97feb2ec4dc2e4ec0d"
 }

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

@@ -12,6 +12,7 @@ import {
   JumpLinksItem,
   JumpLinksList,
   PageSection,
+  PageSectionVariants,
   Sidebar,
   SidebarContent,
   SidebarPanel,
@@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {
 
   React.useEffect(() => {
     const masthead = document.getElementsByClassName('pf-c-masthead')[0];
-    const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
+    const drawerToggleSection = document.getElementById('drawer-toggle');
 
     getResizeObserver(masthead, () => {
       setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
@@ -61,60 +62,65 @@ export const JumpLinksWithDrawer = () => {
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <Drawer isExpanded={isExpanded}>
         <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
-          <DrawerContentBody hasPadding>
+          <DrawerContentBody>
             <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>
+                <PageSection variant={PageSectionVariants.light}>
+                  <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>
+                </PageSection>
               </SidebarPanel>
               <SidebarContent>
-                <PageSection sticky="top" variant="light">
+                <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: '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>
+                <PageSection variant={PageSectionVariants.light}>
+                  <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>
+                </PageSection>
               </SidebarContent>
             </Sidebar>
           </DrawerContentBody>