@patternfly/react-core 6.0.0-alpha.24 → 6.0.0-alpha.26

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.23","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.25","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.23","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.25","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.23","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.25","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.24",
+  "version": "6.0.0-alpha.26",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8ea069949f2c22f8122ffecab5451f278edfb8f7"
+  "gitHead": "8ffcb64844b3d4ba40c08254bbc8a87b64a88004"
 }

package/src/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

package/src/components/Brand/examples/Brand.md

@@ -5,16 +5,18 @@ cssPrefix: null
 propComponents: ['Brand']
 ---
 
-import pfLogo from '../../assets/pfLogo.svg';
-import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
-import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
-import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
-import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
-import logo from '../../assets/pf-c-brand--logo.svg';
-import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
+import './Brand.css';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
+import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
+import pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';
 
 ## Examples
 
+The brand component does not have any built-in theme support. If a brand should be dynamically styled, you must manually set up the necessary logic on your own.
+
+These examples adjust styling when the PatternFly website is toggled between the light and dark theme.
+
 ### Basic
 
 ```ts file="./BrandBasic.tsx"

package/src/components/Brand/examples/BrandBasic.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import pfLogo from '../../assets/pfLogo.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
 
 export const BrandBasic: React.FunctionComponent = () => (
-  <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+  <>
+    <div className="show-light">
+      <Brand src={pfLogo} alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+    </div>
+    <div className="show-dark">
+      <Brand src={pfLogoDark} alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+    </div>
+  </>
 );

package/src/components/Brand/examples/BrandResponsive.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
 
-import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
-import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
-import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
-import logo from '../../assets/pf-c-brand--logo.svg';
-import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
+import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
+import pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';
 
 export const BrandBasic: React.FunctionComponent = () => (
-  <Brand src={logoBase} alt="Fallback patternfly default logo" widths={{ default: '40px', sm: '60px', md: '220px' }}>
-    <source media="(min-width: 1200px)" srcSet={logoXl} />
-    <source media="(min-width: 992px)" srcSet={logoLg} />
-    <source media="(min-width: 768px)" srcSet={logoMd} />
-    <source media="(min-width: 576px)" srcSet={logoSm} />
-    <source srcSet={logo} />
-  </Brand>
+  <>
+    <div className="show-light">
+      <Brand src={pfLogo} alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
+        <source media="(min-width: 1200px)" srcSet={pfLogo} />
+        <source media="(min-width: 992px)" srcSet={pfLogo} />
+        <source media="(min-width: 768px)" srcSet={pfLogo} />
+        <source media="(min-width: 576px)" srcSet={pfLogoSm} />
+        <source media="(min-width: 320px)" srcSet={pfLogoSm} />
+        <source srcSet={pfLogo} />
+      </Brand>
+    </div>
+    <div className="show-dark">
+      <Brand src={pfLogoDark} alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
+        <source media="(min-width: 1200px)" srcSet={pfLogoDark} />
+        <source media="(min-width: 992px)" srcSet={pfLogoDark} />
+        <source media="(min-width: 768px)" srcSet={pfLogoDark} />
+        <source media="(min-width: 576px)" srcSet={pfLogoSmDark} />
+        <source media="(min-width: 320px)" srcSet={pfLogoSmDark} />
+        <source srcSet={pfLogoDark} />
+      </Brand>
+    </div>
+  </>
 );

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

@@ -55,7 +55,7 @@ test('Renders with class pf-m-block when isBlock = true', () => {
   expect(screen.getByRole('button')).toHaveClass('pf-m-block');
 });
 
-xtest('Renders with class pf-m-clicked when isClicked = true', () => {
+test('Renders with class pf-m-clicked when isClicked = true', () => {
   render(<Button isClicked>Clicked Button</Button>);
   expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
 });

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Renders basic button 1`] = `
     aria-disabled="false"
     aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-27"
+    data-ouia-component-id="OUIA-Generated-Button-primary-28"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Drawer/Drawer.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 
 export enum DrawerColorVariant {
   default = 'default',
+  secondary = 'secondary',
   noBackground = 'no-background'
 }
 

package/src/components/Drawer/DrawerContent.tsx

@@ -12,12 +12,11 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  className = '',
+  className,
   children,
   panelContent,
   colorVariant = DrawerColorVariant.default,
@@ -31,6 +30,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
         className={css(
           styles.drawerContent,
           colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+          colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
           className
         )}
         ref={drawerContentRef}

package/src/components/Drawer/DrawerHead.tsx

@@ -1,28 +1,22 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { DrawerPanelBody } from './DrawerPanelBody';
 
 export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the drawer head. */
   className?: string;
   /** Content to be rendered in the drawer head */
   children?: React.ReactNode;
-  /** Indicates if there should be no padding around the drawer panel body of the head*/
-  hasNoPadding?: boolean;
 }
 
 export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
-  hasNoPadding = false,
   ...props
 }: DrawerHeadProps) => (
-  <DrawerPanelBody hasNoPadding={hasNoPadding}>
-    <div className={css(styles.drawerHead, className)} {...props}>
-      {children}
-    </div>
-  </DrawerPanelBody>
+  <div className={css(styles.drawerHead, className)} {...props}>
+    {children}
+  </div>
 );
 DrawerHead.displayName = 'DrawerHead';

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -55,7 +55,7 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
 }
@@ -63,7 +63,7 @@ let isResizing: boolean = null;
 let newSize: number = 0;
 
 export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps> = ({
-  className = '',
+  className,
   id,
   children,
   hasNoBorder = false,
@@ -367,6 +367,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+              colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
               className
             )}
             onTransitionEnd={(ev) => {

package/src/components/Drawer/DrawerPanelDescription.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+/** Provides a description within the drawer panel. This should typically follow the drawer head. */
+
+export interface DrawerPanelDescriptionProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer description. */
+  className?: string;
+  /** Content to be rendered in the drawer description */
+  children: React.ReactNode;
+}
+
+export const DrawerPanelDescription: React.FunctionComponent<DrawerPanelDescriptionProps> = ({
+  className,
+  children,
+  ...props
+}: DrawerPanelDescriptionProps) => (
+  <div className={css(styles.drawerDescription, className)} {...props}>
+    {children}
+  </div>
+);
+DrawerPanelDescription.displayName = 'DrawerPanelDescription';

package/src/components/Drawer/DrawerSection.tsx

@@ -9,7 +9,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
   /** Color variant of the background of the drawer Section */
-  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -23,6 +23,7 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
     className={css(
       styles.drawerSection,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+      colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
       className
     )}
     {...props}

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

@@ -6,7 +6,8 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelBody,
-  DrawerPanelContent
+  DrawerPanelContent,
+  DrawerColorVariant
 } from '../';
 import React from 'react';
 import { render } from '@testing-library/react';
@@ -70,15 +71,14 @@ test(`Drawer expands from bottom`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-// TODO: Update/renable with issue #9979
-xtest(`Drawer has resizable css and color variants`, () => {
+test(`Drawer has resizable css and color variants`, () => {
   const panelContent = (
     <DrawerPanelContent
       isResizable
       minSize={'200px'}
       defaultSize={'300px'}
       maxSize={'400px'}
-      // colorVariant={DrawerColorVariant.light200}
+      colorVariant={DrawerColorVariant.secondary}
     >
       <DrawerHead>
         <span>drawer-panel</span>

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -2,6 +2,37 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { DrawerPanelContent } from '../DrawerPanelContent';
 import { Drawer } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerPanel} by default`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.drawerPanel, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent colorVariant="no-background">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noBackground);
+});
+
+test(`Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent colorVariant="secondary">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.secondary);
+});
 
 test('Does not render with aria-labelledby by default', () => {
   render(

package/src/components/Drawer/__tests__/DrawerPanelDescription.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DrawerPanelDescription } from '../DrawerPanelDescription';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerDescription} by default`, () => {
+  render(<DrawerPanelDescription>description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveClass(styles.drawerDescription, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<DrawerPanelDescription className="test-class">description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveClass('test-class');
+});
+
+test(`Spreads props`, () => {
+  render(<DrawerPanelDescription id="test-id">description content</DrawerPanelDescription>);
+
+  expect(screen.getByText('description content')).toHaveAttribute('id', 'test-id');
+});
+
+test(`Matches snapshot`, () => {
+  const { asFragment } = render(<DrawerPanelDescription>description content</DrawerPanelDescription>);
+
+  expect(asFragment()).toMatchSnapshot();
+});