feat(Sidebar): add border and padding

packages/react-core/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';

packages/react-core/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>
 );

packages/react-core/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
     )}

packages/react-core/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');

packages/react-core/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');

packages/react-core/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

packages/react-core/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"
+```

packages/react-core/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>
+);

packages/react-core/src/components/Sidebar/examples/SidebarPaddingContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';
+
+export const SidebarPaddingContent: React.FunctionComponent = () => (
+  <Sidebar>
+    <SidebarPanel>Sidebar panel</SidebarPanel>
+    <SidebarContent hasPadding>
+      <p>Sidebar content, with padding.</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>
+);

packages/react-core/src/components/Sidebar/examples/SidebarPaddingPanel.tsx

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