From c3e8e55c701c829baf022f89bac5d51c8d353b94 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 4 Apr 2023 10:12:22 -0400
Subject: [PATCH] feat(Sidebar): add border and padding

---
 .../src/components/Sidebar/Sidebar.tsx        |  5 +++-
 .../src/components/Sidebar/SidebarContent.tsx | 13 +++++++++-
 .../src/components/Sidebar/SidebarPanel.tsx   |  4 +++
 .../Sidebar/__tests__/Sidebar.test.tsx        |  5 ++++
 .../Sidebar/__tests__/SidebarContent.test.tsx |  5 ++++
 .../Sidebar/__tests__/SidebarPanel.test.tsx   |  7 +++++-
 .../components/Sidebar/examples/Sidebar.md    | 12 +++++++++
 .../Sidebar/examples/SidebarBorder.tsx        | 24 ++++++++++++++++++
 .../examples/SidebarPaddingContent.tsx        | 25 +++++++++++++++++++
 .../Sidebar/examples/SidebarPaddingPanel.tsx  | 24 ++++++++++++++++++
 10 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-core/src/components/Sidebar/examples/SidebarBorder.tsx
 create mode 100644 packages/react-core/src/components/Sidebar/examples/SidebarPaddingContent.tsx
 create mode 100644 packages/react-core/src/components/Sidebar/examples/SidebarPaddingPanel.tsx

diff --git a/packages/react-core/src/components/Sidebar/Sidebar.tsx b/packages/react-core/src/components/Sidebar/Sidebar.tsx
index 6e1f4b827d1..a8ef46e6e60 100644
--- a/packages/react-core/src/components/Sidebar/Sidebar.tsx
+++ b/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';
diff --git a/packages/react-core/src/components/Sidebar/SidebarContent.tsx b/packages/react-core/src/components/Sidebar/SidebarContent.tsx
index 88ce5c88b13..0965312d0b5 100644
--- a/packages/react-core/src/components/Sidebar/SidebarContent.tsx
+++ b/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>
 );
diff --git a/packages/react-core/src/components/Sidebar/SidebarPanel.tsx b/packages/react-core/src/components/Sidebar/SidebarPanel.tsx
index b63feae3502..32804ba11a0 100644
--- a/packages/react-core/src/components/Sidebar/SidebarPanel.tsx
+++ b/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
     )}
diff --git a/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx b/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx
index 82ac79fd0a1..fe5de18be2c 100644
--- a/packages/react-core/src/components/Sidebar/__tests__/Sidebar.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx b/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx
index 8b30c2359ee..bcc28cbe727 100644
--- a/packages/react-core/src/components/Sidebar/__tests__/SidebarContent.test.tsx
+++ b/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');
diff --git a/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx b/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx
index 83e100c4dac..cc312c9f14d 100644
--- a/packages/react-core/src/components/Sidebar/__tests__/SidebarPanel.test.tsx
+++ b/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
diff --git a/packages/react-core/src/components/Sidebar/examples/Sidebar.md b/packages/react-core/src/components/Sidebar/examples/Sidebar.md
index 29c6e4c8b78..bc88af3ae39 100644
--- a/packages/react-core/src/components/Sidebar/examples/Sidebar.md
+++ b/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"
+```
\ No newline at end of file
diff --git a/packages/react-core/src/components/Sidebar/examples/SidebarBorder.tsx b/packages/react-core/src/components/Sidebar/examples/SidebarBorder.tsx
new file mode 100644
index 00000000000..5a321cd0b3c
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react-core/src/components/Sidebar/examples/SidebarPaddingContent.tsx b/packages/react-core/src/components/Sidebar/examples/SidebarPaddingContent.tsx
new file mode 100644
index 00000000000..404509a458a
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react-core/src/components/Sidebar/examples/SidebarPaddingPanel.tsx b/packages/react-core/src/components/Sidebar/examples/SidebarPaddingPanel.tsx
new file mode 100644
index 00000000000..131ac791fb8
--- /dev/null
+++ b/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>
+);