@patternfly/react-core 5.0.0-alpha.63 → 5.0.0-alpha.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.63",
+  "version": "5.0.0-alpha.65",
   "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": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "729d7446d8c6769feecaa9406667d89cfbf53a9c"
+  "gitHead": "30672fcc0c5cb9f955dcec4249deb8363a739f87"
 }

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -11,10 +11,13 @@ import './MenuToggle.css'
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
 
-### Collapsed
+### Collapsed toggle
+
+A toggle is collapsed until it is selected by a user. 
 
 ```ts
 import React from 'react';
@@ -24,7 +27,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Expanded
+### Expanded toggle
+
+When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . 
 
 ```ts
 import React from 'react';
@@ -34,7 +39,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Disabled
+### Disabled toggle
+
+To disable the selection and expansion of a toggle, use the `isDisabled` property. 
 
 ```ts
 import React from 'react';
@@ -44,7 +51,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Count
+### With a badge
+
+To display a count of selected items in a toggle, use the `badge` property.
 
 ```ts
 import React from 'react';
@@ -54,7 +63,9 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 ```
 
-### Primary
+### With icons
+
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the  toggle.
 
 ```ts
 import React from 'react';
@@ -62,21 +73,33 @@ import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
-  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-  <MenuToggle variant="primary" icon={<CogIcon />}>
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle variant="primary" isExpanded>
-    Expanded
-  </MenuToggle>{' '}
-  <MenuToggle variant="primary" isDisabled>
-    Disabled
-  </MenuToggle>
+  <MenuToggle icon={<CogIcon />} variant="primary">Icon</MenuToggle>{' '}
+  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
+  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
 </React.Fragment>
+```
+
+### With avatar and text
 
+You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`. 
+
+This can be used alongside a text label that provides more context for the image.
+
+```ts
+import React from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+
+<React.Fragment>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+</React.Fragment>
 ```
 
-### Secondary
+### Variant styles
+
+Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts
 import React from 'react';
@@ -84,21 +107,22 @@ import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
-  <MenuToggle variant="secondary">Collapsed</MenuToggle>{' '}
-    <MenuToggle variant="secondary" icon={<CogIcon />}>
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle variant="secondary" isExpanded>
+  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
+  <MenuToggle variant="primary" isExpanded>
     Expanded
   </MenuToggle>{' '}
-  <MenuToggle variant="secondary" isDisabled>
+  <MenuToggle variant="primary" isDisabled>
     Disabled
   </MenuToggle>
 </React.Fragment>
 
 ```
 
-### Plain
+### Plain toggle with icon
+
+To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. 
+
+If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. 
 
 ```ts
 import React from 'react';
@@ -108,16 +132,18 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 <React.Fragment>
   <MenuToggle variant="plain" aria-label="plain kebab">
     <EllipsisVIcon />
-  </MenuToggle>
+  </MenuToggle>{' '}
   <MenuToggle variant="plain" isExpanded aria-label="plain expanded kebab">
     <EllipsisVIcon />
-  </MenuToggle>
+  </MenuToggle>{' '}
   <MenuToggle variant="plain" isDisabled aria-label="disabled kebab">
     <EllipsisVIcon />
   </MenuToggle>
 </React.Fragment>
 ```
-### Plain with text
+### Plain toggle with text label
+
+To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts
 import React from 'react';
@@ -126,80 +152,48 @@ import { MenuToggle } from '@patternfly/react-core';
 <React.Fragment>
   <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
     Disabled
-  </MenuToggle>
-  &nbsp;
+  </MenuToggle>{' '}
   <MenuToggle variant="plainText" aria-label="Plain menu toggle">
     Custom text
-  </MenuToggle>
+  </MenuToggle>{' '}
   <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
     Custom text (expanded)
   </MenuToggle>
 </React.Fragment>
 ```
 
-### Split button (checkbox)
-    
-```ts file='MenuToggleSplitButtonCheckbox.tsx'
-```
+### Split button toggle with checkbox
 
-### Split button (checkbox with toggle text)
-    
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
-```
+To add an action button or other control to a menu toggle, use a split button. A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
 
-### Split button (checkbox, primary)
-    
-```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx'
-```
+The following example shows a split button with a `<MenuToggleCheckbox>`.
 
-### Split button (checkbox, secondary)
-    
-```ts file='MenuToggleSplitButtonCheckboxSecondary.tsx'
-```
+Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.
 
-### Split button (action)
-    
-```ts file='MenuToggleSplitButtonAction.tsx'
+```ts file='MenuToggleSplitButtonCheckbox.tsx'
 ```
 
-### Split button (action, primary)
-    
-```ts file='MenuToggleSplitButtonActionPrimary.tsx'
-```
+### Split button toggle with text label
 
-### Split button (action, secondary)
-    
-```ts file='MenuToggleSplitButtonActionSecondary.tsx'
+To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.  
+
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 ```
 
-### With icon/image and text
+### Split button toggle with action
 
-```ts
-import React from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`. 
 
-<React.Fragment>
-  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
-  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
-</React.Fragment>
+Actions may be used with primary and secondary toggle variants.
+    
+```ts file='MenuToggleSplitButtonAction.tsx'
 ```
 
-### With avatar and text
+### Full height toggle
 
-```ts
-import React from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. 
 
-<React.Fragment>
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
-</React.Fragment>
-```
-
-### Full height
+In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
 ```ts
 import React from 'react';
@@ -212,7 +206,11 @@ import { MenuToggle } from '@patternfly/react-core';
 </div>
 ```
 
-### Full width
+### Full width toggle
+
+A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. 
+
+In the following example, the toggle fills the width of its parent as the window size changes.
 
 ```ts
 import React from 'react';
@@ -226,3 +224,12 @@ const fullWidth: React.FunctionComponent = () => {
   );
 }
 ```
+
+### Typeahead toggle
+
+To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>`. Then, pass a `<TextInputGroup>` component as a child of the `<MenuToggle>`.
+
+To create a multiple typeahead toggle, pass a `<TextInputGroup>` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of `<MenuToggle>`.
+
+```ts file='MenuToggleTypeahead.tsx'
+```

package/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx

@@ -4,16 +4,10 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      isDisabled
       splitButtonOptions={{
         variant: 'action',
         items: [
-          <MenuToggleAction
-            id="split-button-action-disabled-example-with-toggle-button"
-            key="split-action-disabled"
-            aria-label="Action"
-            isDisabled
-          >
+          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
             Action
           </MenuToggleAction>
         ]
@@ -21,10 +15,15 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
+      variant="primary"
       splitButtonOptions={{
         variant: 'action',
         items: [
-          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
+          <MenuToggleAction
+            id="split-button-action-primary-example-with-toggle-button"
+            key="split-action-primary"
+            aria-label="Action"
+          >
             Action
           </MenuToggleAction>
         ]
@@ -32,13 +31,13 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
-      isExpanded
+      variant="secondary"
       splitButtonOptions={{
         variant: 'action',
         items: [
           <MenuToggleAction
-            id="split-button-action-expanded-example-with-toggle-button"
-            key="split-action-expanded"
+            id="split-button-action-secondary-example-with-toggle-button"
+            key="split-action-secondary"
             aria-label="Action"
           >
             Action

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx

@@ -4,35 +4,22 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      isDisabled
       splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-disabled-example"
-            key="split-checkbox-disabled"
-            aria-label="Select all"
-            isDisabled
-          />
-        ]
+        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
       }}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
+      variant="primary"
       splitButtonOptions={{
         items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
       }}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
-      isExpanded
+      variant="secondary"
       splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-expanded-example"
-            key="split-checkbox-expanded"
-            aria-label="Select all"
-          />
-        ]
+        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
       }}
       aria-label="Menu toggle with checkbox split button"
     />

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx

@@ -4,14 +4,12 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      isDisabled
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-disabled-example"
-            key="split-checkbox-with-text-disabled"
+            id="split-button-checkbox-with-text-example"
+            key="split-checkbox-with-text"
             aria-label="Select all"
-            isDisabled
           >
             10 selected
           </MenuToggleCheckbox>
@@ -20,33 +18,34 @@ export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = ()
       aria-label="Menu toggle with checkbox split button and text"
     />{' '}
     <MenuToggle
+      variant="primary"
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-example"
-            key="split-checkbox-with-text"
+            id="split-button-checkbox-primary-example"
+            key="split-checkbox-primary"
             aria-label="Select all"
           >
             10 selected
           </MenuToggleCheckbox>
         ]
       }}
-      aria-label="Menu toggle with checkbox split button and text"
+      aria-label="Primary menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
-      isExpanded
+      variant="secondary"
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-expanded-example"
-            key="split-checkbox-with-text-expanded"
+            id="split-button-checkbox-secondary-example"
+            key="split-checkbox-secondary"
             aria-label="Select all"
           >
             10 selected
           </MenuToggleCheckbox>
         ]
       }}
-      aria-label="Menu toggle with checkbox split button and text"
+      aria-label="Secondary menu toggle with checkbox split button"
     />
   </React.Fragment>
 );

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const MenuToggleTypeahead: React.FunctionComponent = () => {
+  const [inputValue, setInputValue] = React.useState<string>('');
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+  };
+
+  return (
+    <MenuToggle
+      variant="typeahead"
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onChange={onTextInputChange}
+          id="typeahead-select-input"
+          autoComplete="off"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button variant="plain" onClick={() => setInputValue('')} aria-label="Clear input value">
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+}

package/src/components/Sidebar/Sidebar.tsx

@@ -12,6 +12,8 @@ export interface SidebarProps extends React.HTMLProps<HTMLDivElement> {
   hasGutter?: boolean;
   /** Removes the background color. */
   hasNoBackground?: boolean;
+  /** Adds a border between the panel and content. */
+  hasBorder?: boolean;
 }
 
 export const Sidebar: React.FunctionComponent<SidebarProps> = ({
@@ -21,6 +23,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
   isPanelRight = false,
   hasGutter,
   hasNoBackground,
+  hasBorder,
   ...props
 }: SidebarProps) => (
   <div
@@ -34,7 +37,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
     )}
     {...props}
   >
-    <div className={styles.sidebarMain}>{children}</div>
+    <div className={css(styles.sidebarMain, hasBorder && styles.modifiers.border)}>{children}</div>
   </div>
 );
 Sidebar.displayName = 'Sidebar';

package/src/components/Sidebar/SidebarContent.tsx

@@ -6,15 +6,26 @@ export interface SidebarContentProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
   /** Removes the background color. */
   hasNoBackground?: boolean;
+  /** Adds padding to the content. */
+  hasPadding?: boolean;
 }
 
 export const SidebarContent: React.FunctionComponent<SidebarContentProps> = ({
   className,
   children,
   hasNoBackground,
+  hasPadding,
   ...props
 }: SidebarContentProps) => (
-  <div className={css(styles.sidebarContent, hasNoBackground && styles.modifiers.noBackground, className)} {...props}>
+  <div
+    className={css(
+      styles.sidebarContent,
+      hasNoBackground && styles.modifiers.noBackground,
+      hasPadding && styles.modifiers.padding,
+      className
+    )}
+    {...props}
+  >
     {children}
   </div>
 );

package/src/components/Sidebar/SidebarPanel.tsx

@@ -19,6 +19,8 @@ export interface SidebarPanelProps extends Omit<React.HTMLProps<HTMLDivElement>,
   variant?: 'default' | 'sticky' | 'static';
   /** Removes the background color. */
   hasNoBackground?: boolean;
+  /** Adds padding to the panel. */
+  hasPadding?: boolean;
   /** Sets the panel width at various breakpoints. Default is 250px when the orientation is split. */
   width?: {
     default?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
@@ -35,6 +37,7 @@ export const SidebarPanel: React.FunctionComponent<SidebarPanelProps> = ({
   children,
   variant = 'default',
   hasNoBackground,
+  hasPadding,
   width,
   ...props
 }: SidebarPanelProps) => (
@@ -43,6 +46,7 @@ export const SidebarPanel: React.FunctionComponent<SidebarPanelProps> = ({
       styles.sidebarPanel,
       variant !== 'default' && styles.modifiers[variant],
       hasNoBackground && styles.modifiers.noBackground,
+      hasPadding && styles.modifiers.padding,
       formatBreakpointMods(width, styles),
       className
     )}

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

@@ -36,6 +36,11 @@ test('Renders with class name pf-m-no-background when hasNoBackground prop is pa
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-no-background');
 });
 
+test('Renders with class name pf-m-border when hasBorder prop is passed', () => {
+  render(<Sidebar hasBorder>Test</Sidebar>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-border');
+});
+
 test('Renders with class name pf-m-stack when "stack" is passed to orientation prop', () => {
   render(<Sidebar orientation="stack">Test</Sidebar>);
   expect(screen.getByText('Test').parentElement).toHaveClass('pf-m-stack');

package/src/components/Sidebar/__tests__/SidebarContent.test.tsx

@@ -27,6 +27,11 @@ test('Renders with class name pf-m-no-background when hasNoBackground prop is pa
   expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
 });
 
+test('Renders with class name pf-m-padding when hasPadding prop is passed', () => {
+  render(<SidebarContent hasPadding>Test</SidebarContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-padding');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<SidebarContent aria-label="Test label">Test</SidebarContent>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');

package/src/components/Sidebar/__tests__/SidebarPanel.test.tsx

@@ -37,7 +37,12 @@ test('Renders with class name pf-m-no-background when hasNoBackground prop is pa
   expect(screen.getByText('Test')).toHaveClass('pf-m-no-background');
 });
 
-['width_25', 'width_33', 'width_50', 'width_66', 'width_75', 'width_100'].forEach(widthType => {
+test('Renders with class name pf-m-padding when hasPadding prop is passed', () => {
+  render(<SidebarPanel hasPadding>Test</SidebarPanel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-padding');
+});
+
+['width_25', 'width_33', 'width_50', 'width_66', 'width_75', 'width_100'].forEach((widthType) => {
   test(`Renders with appropriate class names when ${widthType} is passed to each breakpoint of width prop`, () => {
     render(
       <SidebarPanel

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

@@ -32,3 +32,15 @@ A `tabIndex` should be added to the `Sidebar` when there is scrollable content i
 A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
 ```ts file="./SidebarResponsivePanel.tsx"
 ```
+
+### Border
+```ts file="./SidebarBorder.tsx"
+```
+
+### Padding on panel
+```ts file="./SidebarPaddingPanel.tsx"
+```
+
+### Padding on content
+```ts file="./SidebarPaddingContent.tsx"
+```

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarBorder: React.FunctionComponent = () => (
+  <Sidebar hasBorder hasGutter>
+    <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>
+);