@patternfly/react-core 4.250.1 → 4.250.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.250.3 (2022-10-12)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## [4.250.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.250.1...@patternfly/react-core@4.250.2) (2022-10-10)
+
+
+### Bug Fixes
+
+* **Menu:** fixed height issue with drilldown examples ([#8033](https://github.com/patternfly/patternfly-react/issues/8033)) ([c0583b5](https://github.com/patternfly/patternfly-react/commit/c0583b530310b3d89be222e58fe926ecc6dd8d99))
+
+
+
+
+
 ## [4.250.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.250.0...@patternfly/react-core@4.250.1) (2022-10-05)
 
 **Note:** Version bump only for package @patternfly/react-core

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

@@ -22792,6 +22792,52 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tooltip__arrow--Height: 0.9375rem;
 }
 
+.pf-c-number-input .pf-c-form-control {
+  appearance: textfield;
+}
+
+.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.pf-c-number-input {
+  --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
+  --pf-c-number-input--c-form-control--width-icon: 0px;
+  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
+  --pf-c-number-input--c-form-control--width-chars: 4;
+  --pf-c-number-input--c-form-control--Width:
+    calc(
+      calc(
+        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
+      ) + var(--pf-c-number-input--c-form-control--width-icon)
+    );
+  display: inline-flex;
+  align-items: center;
+}
+
+.pf-c-number-input.pf-m-status {
+  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
+}
+
+.pf-c-number-input .pf-c-form-control {
+  display: inline-flex;
+  width: var(--pf-c-number-input--c-form-control--Width);
+  text-align: right;
+}
+
+.pf-c-input-group + .pf-c-number-input__unit,
+.pf-c-number-input__unit + .pf-c-input-group {
+  margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
+}
+
+.pf-c-number-input__icon {
+  display: flex;
+  font-size: var(--pf-c-number-input__icon--FontSize);
+}
+
 .pf-c-tree-view {
   --pf-c-tree-view--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-tree-view--PaddingBottom: var(--pf-global--spacer--sm);
@@ -23882,52 +23928,6 @@ label.pf-c-tree-view__node-text {
   color: var(--pf-global--Color--100);
 }
 
-.pf-c-number-input .pf-c-form-control {
-  appearance: textfield;
-}
-
-.pf-c-number-input .pf-c-form-control::-webkit-inner-spin-button, .pf-c-number-input .pf-c-form-control::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
-.pf-c-number-input {
-  --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
-  --pf-c-number-input--c-form-control--width-icon: 0px;
-  --pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
-  --pf-c-number-input--c-form-control--width-chars: 4;
-  --pf-c-number-input--c-form-control--Width:
-    calc(
-      calc(
-        var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
-      ) + var(--pf-c-number-input--c-form-control--width-icon)
-    );
-  display: inline-flex;
-  align-items: center;
-}
-
-.pf-c-number-input.pf-m-status {
-  --pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
-}
-
-.pf-c-number-input .pf-c-form-control {
-  display: inline-flex;
-  width: var(--pf-c-number-input--c-form-control--Width);
-  text-align: right;
-}
-
-.pf-c-input-group + .pf-c-number-input__unit,
-.pf-c-number-input__unit + .pf-c-input-group {
-  margin-left: var(--pf-c-number-input__unit--c-input-group--MarginLeft);
-}
-
-.pf-c-number-input__icon {
-  display: flex;
-  font-size: var(--pf-c-number-input__icon--FontSize);
-}
-
 .pf-c-draggable {
   --pf-c-draggable--Cursor: auto;
   --pf-c-draggable--m-dragging--Cursor: grabbing;
@@ -27636,6 +27636,18 @@ label.pf-c-tree-view__node-text {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
+.pf-l-level {
+  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pf-l-level.pf-m-gutter > *:not(:last-child) {
+  margin-right: var(--pf-l-level--m-gutter--MarginRight);
+}
+
 .pf-l-split {
   --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;
@@ -27655,18 +27667,6 @@ label.pf-c-tree-view__node-text {
   margin-right: var(--pf-l-split--m-gutter--MarginRight);
 }
 
-.pf-l-level {
-  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.pf-l-level.pf-m-gutter > *:not(:last-child) {
-  margin-right: var(--pf-l-level--m-gutter--MarginRight);
-}
-
 .pf-l-stack {
   --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.250.1",
+  "version": "4.250.3",
   "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": "b44f6c31e0ab822af9626fd16912d4eb6ba01f3e"
+  "gitHead": "5daeed558b92f13887c4ae278c2356abe2d22bae"
 }

package/src/components/Banner/__tests__/Banner.test.tsx

@@ -1,27 +1,92 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Banner } from '../Banner';
-import React from 'react';
-import { render } from '@testing-library/react';
-
-['default', 'info', 'success', 'warning', 'danger'].forEach((variant: string) => {
-  test(`${variant} banner`, () => {
-    const { asFragment } = render(
-      <Banner
-        variant={variant as 'default' | 'info' | 'success' | 'warning' | 'danger'}
-        aria-label={variant}
-        screenReaderText={`${variant} banner`}
-      >
-        {variant} Banner
-      </Banner>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-test(`sticky banner`, () => {
-  const { asFragment } = render(
-    <Banner aria-label="sticky" isSticky>
-      Sticky Banner
-    </Banner>
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="banner">
+      <Banner />
+    </div>
   );
+  expect(screen.getByTestId('banner').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-banner', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-banner');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Banner className="custom-class">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without any modifier class when variant prop is not passed', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
+});
+
+test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
+  render(<Banner variant="success">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+});
+
+test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
+  render(<Banner variant="danger">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+});
+
+test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
+  render(<Banner variant="warning">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+});
+
+test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
+  render(<Banner variant="info">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+});
+
+test('Renders pf-u-screen-reader class by default for screenReaderText', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('default banner')).toHaveClass('pf-u-screen-reader', { exact: true });
+});
+
+test('Renders screenReaderText as "default banner" by default', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('default banner')).toBeInTheDocument();
+});
+
+test('Renders screenReaderText as "success banner" when variant="success"', () => {
+  render(<Banner variant="success">Test</Banner>);
+  expect(screen.getByText('success banner')).toBeInTheDocument();
+});
+
+test('Renders custom screenReaderText passed via prop', () => {
+  render(<Banner screenReaderText="Custom screen reader text">Test</Banner>);
+  expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
+});
+
+test('Renders without pf-m-sticky by default', () => {
+  render(<Banner>Test</Banner>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-sticky');
+});
+
+test('Renders with class name pf-m-sticky when isSticky prop is passed', () => {
+  render(<Banner isSticky>Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-sticky');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Banner aria-label="Test label">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Banner>Test</Banner>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap

@@ -1,60 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`danger banner 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    aria-label="danger"
-    class="pf-c-banner pf-m-danger"
-  >
-    danger Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      danger banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`default banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="default"
     class="pf-c-banner"
   >
-    default Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      default banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`info banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="info"
-    class="pf-c-banner pf-m-info"
-  >
-    info Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      info banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`sticky banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="sticky"
-    class="pf-c-banner pf-m-sticky"
-  >
-    Sticky Banner
+    Test
     <span
       class="pf-u-screen-reader"
     >
@@ -63,35 +14,3 @@ exports[`sticky banner 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`success banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="success"
-    class="pf-c-banner pf-m-success"
-  >
-    success Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      success banner
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`warning banner 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="warning"
-    class="pf-c-banner pf-m-warning"
-  >
-    warning Banner
-    <span
-      class="pf-u-screen-reader"
-    >
-      warning banner
-    </span>
-  </div>
-</DocumentFragment>
-`;

package/src/components/Menu/examples/MenuWithDrilldown.tsx

@@ -26,7 +26,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
   };
 
   const setHeight = (menuId: string, height: number) => {
-    if (menuHeights[menuId] === undefined) {
+    if (menuHeights[menuId] === undefined || (menuId !== 'drilldown-rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({ ...menuHeights, [menuId]: height });
     }
   };

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -55,11 +55,13 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     setDrilldownPath(pathSansLast);
     setActiveMenu(toMenuId);
   };
+
   const setHeight = (menuId: string, height: number) => {
-    if (!menuHeights[menuId]) {
+    if (menuHeights[menuId] === undefined || (menuId !== 'breadcrumbs-rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({ ...menuHeights, [menuId]: height });
     }
   };
+
   const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);

package/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx

@@ -26,7 +26,7 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
   };
 
   const setHeight = (menuId: string, height: number) => {
-    if (menuHeights[menuId] === undefined) {
+    if (menuHeights[menuId] === undefined || (menuId !== 'functions-rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({ ...menuHeights, [menuId]: height });
     }
   };

package/src/components/Sidebar/examples/Sidebar.md

@@ -7,105 +7,28 @@ propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
-
-<Sidebar>
-  <SidebarPanel>
-    Sidebar panel
-  </SidebarPanel>
-  <SidebarContent>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
-    <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
-  </SidebarContent>
-</Sidebar>
+```ts file="./SidebarBasic.tsx"
 ```
 
 ### Stack
-```js
-import React from 'react';
-import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
-
-<Sidebar orientation="stack">
-  <SidebarPanel>
-    Sidebar panel stacked on top
-  </SidebarPanel>
-  <SidebarContent>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
-    <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
-  </SidebarContent>
-</Sidebar>
+```ts file="./SidebarStack.tsx"
 ```
 
 ### Panel right with gutter
-```js
-import React from 'react';
-import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
-
-<Sidebar isPanelRight hasGutter>
-  <SidebarPanel>
-    Sidebar panel on the right
-  </SidebarPanel>
-  <SidebarContent>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
-    <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
-  </SidebarContent>
-</Sidebar>
+```ts file="./SidebarPanelRightGutter.tsx"
 ```
 
 ### Sticky panel
 A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
-```js
-import React from 'react';
-import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
-
-<Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>
-  <SidebarPanel variant="sticky">
-    Sticky sidebar panel
-  </SidebarPanel>
-  <SidebarContent>
-    <p>Scroll me!</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
-    <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
-  </SidebarContent>
-</Sidebar>
+```ts file="./SidebarStickyPanel.tsx"
 ```
 
 ### Static panel
 A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
-```js
-import React from 'react';
-import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
-
-<Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>
-  <SidebarPanel variant="static">
-    Static sidebar panel
-  </SidebarPanel>
-  <SidebarContent>
-    <p>Scroll me!</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
-    <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
-  </SidebarContent>
-</Sidebar>
+```ts file="./SidebarStaticPanel.tsx"
 ```
 
 ### Responsive panel width
 A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
-```js
-import React from 'react';
-import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
-
-<Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>
-  <SidebarPanel width={{ default: 'width_50', lg: 'width_33', xl: 'width_75' }}>
-    Sidebar panel
-  </SidebarPanel>
-  <SidebarContent>
-    <p>Resize me!</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
-    <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
-  </SidebarContent>
-</Sidebar>
+```ts file="./SidebarResponsivePanel.tsx"
 ```
-
-

package/src/components/Sidebar/examples/SidebarBasic.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarBasic: React.FunctionComponent = () => (
+  <Sidebar>
+    <SidebarPanel>Sidebar panel</SidebarPanel>
+    <SidebarContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarPanelRightGutter.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarPanelRightGutter: React.FunctionComponent = () => (
+  <Sidebar isPanelRight hasGutter>
+    <SidebarPanel>Sidebar panel on the right</SidebarPanel>
+    <SidebarContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarResponsivePanel.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarResponsivePanel: React.FunctionComponent = () => (
+  <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>
+    <SidebarPanel width={{ default: 'width_50', lg: 'width_33', xl: 'width_75' }}>Sidebar panel</SidebarPanel>
+    <SidebarContent>
+      <p>Resize me!</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarStack.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarStack: React.FunctionComponent = () => (
+  <Sidebar orientation="stack">
+    <SidebarPanel>Sidebar panel stacked on top</SidebarPanel>
+    <SidebarContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarStaticPanel.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarStaticPanel: React.FunctionComponent = () => (
+  <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>
+    <SidebarPanel variant="static">Static sidebar panel</SidebarPanel>
+    <SidebarContent>
+      <p>Scroll me!</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);

package/src/components/Sidebar/examples/SidebarStickyPanel.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarStickyPanel: React.FunctionComponent = () => (
+  <Sidebar style={{ height: '200px', overflow: 'auto' }} tabIndex={0}>
+    <SidebarPanel variant="sticky">Sticky sidebar panel</SidebarPanel>
+    <SidebarContent>
+      <p>Scroll me!</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo.
+        Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac
+        pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit
+        amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo
+        vulputate.
+      </p>
+      <p>
+        Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis
+        parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus.
+        Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus.
+        Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat
+        vulputate bibendum a ut magna.
+      </p>
+    </SidebarContent>
+  </Sidebar>
+);