@patternfly/react-core 4.250.2 → 4.250.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.250.2",
+  "version": "4.250.4",
   "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": "44af73002bdeb1048be9b326abf7ffd4fcd474be"
+  "gitHead": "2f37a674bf64e0a0b40879834d1fb8b9da9f9944"
 }

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/Select/Select.tsx

@@ -69,6 +69,8 @@ export interface SelectProps
   isDisabled?: boolean;
   /** Flag to indicate if the typeahead select allows new items */
   isCreatable?: boolean;
+  /** Flag to indicate if create option should be at top of typeahead */
+  isCreateOptionOnTop?: boolean;
   /** Flag indicating if placeholder styles should be applied */
   hasPlaceholderStyle?: boolean;
   /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
@@ -226,6 +228,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isDisabled: false,
     hasPlaceholderStyle: false,
     isCreatable: false,
+    isCreateOptionOnTop: false,
     validated: 'default',
     'aria-label': '',
     'aria-labelledby': '',
@@ -433,6 +436,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const {
       onFilter,
       isCreatable,
+      isCreateOptionOnTop,
       onCreateOption,
       createText,
       noResultsFoundText,
@@ -542,7 +546,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             } as SelectOptionObject)
           : newValue;
 
-        typeaheadFilteredChildren.push(
+        const createSelectOption = (
           <SelectOption
             key={`create ${newValue}`}
             value={newOptionValue}
@@ -551,6 +555,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             {createText} "{newValue}"
           </SelectOption>
         );
+
+        if (isCreateOptionOnTop) {
+          typeaheadFilteredChildren.unshift(createSelectOption);
+        } else {
+          typeaheadFilteredChildren.push(createSelectOption);
+        }
       }
     }
 
@@ -1020,6 +1030,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       footer,
       loadingVariant,
       isCreateSelectOptionObject,
+      isCreateOptionOnTop,
       shouldResetOnSelect,
       isFlipEnabled,
       removeFindDomNode,

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

@@ -560,3 +560,35 @@ test('applies focus styling to the create option when reached via keyboard navig
 
   expect(createOption.parentElement).toHaveClass('pf-m-focus');
 });
+
+test('appends create option to list of options', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Select variant={SelectVariant.typeahead} onToggle={() => {}} isOpen isCreatable>
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  await user.type(input, `m`);
+
+  const createOption = screen.getAllByRole('option')[3];
+  expect(createOption).toHaveTextContent('Create "m"');
+});
+
+test('prepends create option to list of options if isCreateOptionOnTop flag is set', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Select variant={SelectVariant.typeahead} onToggle={() => {}} isOpen isCreateOptionOnTop isCreatable>
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  await user.type(input, `m`);
+
+  const createOption = screen.getAllByRole('option')[0];
+  expect(createOption).toHaveTextContent('Create "m"');
+});

package/src/components/Select/examples/Select.md

@@ -1209,6 +1209,7 @@ class TypeaheadSelectInput extends React.Component {
       selected: null,
       isDisabled: false,
       isCreatable: false,
+      isCreateOptionOnTop: false,
       isInputValuePersisted: false,
       isInputFilterPersisted: false,
       hasOnCreateOption: false,
@@ -1258,6 +1259,12 @@ class TypeaheadSelectInput extends React.Component {
       });
     };
 
+    this.toggleCreateOptionOnTop = checked => {
+      this.setState({
+        isCreateOptionOnTop: checked
+      });
+    };
+
     this.toggleCreateNew = checked => {
       this.setState({
         hasOnCreateOption: checked
@@ -1289,6 +1296,7 @@ class TypeaheadSelectInput extends React.Component {
       selected,
       isDisabled,
       isCreatable,
+      isCreateOptionOnTop,
       hasOnCreateOption,
       isInputValuePersisted,
       isInputFilterPersisted,
@@ -1315,6 +1323,7 @@ class TypeaheadSelectInput extends React.Component {
           placeholderText="Select a state"
           isDisabled={isDisabled}
           isCreatable={isCreatable}
+          isCreateOptionOnTop={isCreateOptionOnTop}
           onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined}
           shouldResetOnSelect={resetOnSelect}
         >
@@ -1343,6 +1352,14 @@ class TypeaheadSelectInput extends React.Component {
           id="toggle-creatable-typeahead"
           name="toggle-creatable-typeahead"
         />
+        <Checkbox
+          label="isCreateOptionOnTop"
+          isChecked={this.state.isCreateOptionOnTop}
+          onChange={this.toggleCreateOptionOnTop}
+          aria-label="toggle createOptionOnTop checkbox"
+          id="toggle-create-option-on-top-typeahead"
+          name="toggle-create-option-on-top-typeahead"
+        />
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}

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>
+);