@patternfly/react-core 5.0.0-alpha.64 → 5.0.0-alpha.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.64",
+  "version": "5.0.0-alpha.66",
   "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",
@@ -40,6 +40,7 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
+    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist",
     "generate": "node scripts/copyStyles.js",
     "subpaths": "node scripts/createSubpaths.js"
@@ -70,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "96fff41f82b6547ea995ea64938c38575058518e"
+  "gitHead": "7aa28d2c7a91cb988f401bb398d4cf992659e437"
 }

package/single-packages.config.json

@@ -0,0 +1,14 @@
+{
+    "packageName": "@patternfly/react-core",
+    "modules": [ 
+        {
+            "name": "dist/esm",
+            "type": "esm"
+        },
+        {
+            "name": "dist/js",
+            "type": "cjs"
+        }
+    ],
+    "exclude": []
+}

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

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

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