@patternfly/react-core 6.5.0-prerelease.65 → 6.5.0-prerelease.67

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.5.0-prerelease.64","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.5.0-prerelease.66","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.5.0-prerelease.64","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.5.0-prerelease.66","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.5.0-prerelease.64","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.5.0-prerelease.66","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.65",
+  "version": "6.5.0-prerelease.67",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "ed21bd64eebc14e1c55ee4c171bdc0a5e56f914c"
+  "gitHead": "87b8d39b54f1159b6f4c08fadff0d513227b0626"
 }

package/src/components/Content/examples/Content.md

@@ -2,7 +2,7 @@
 id: Content
 section: components
 cssPrefix: pf-v6-c-content
-propComponents: ['Content']
+propComponents: ['Content', 'ContentVariants']
 ---
 
 The `<Content>` component allows you to establish a block of HTML content and apply simple, built-in styling. `<Content>` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).

package/src/components/Drawer/Drawer.tsx

@@ -5,6 +5,9 @@ import { css } from '@patternfly/react-styles';
 export enum DrawerColorVariant {
   default = 'default',
   secondary = 'secondary',
+  /**
+   * @deprecated `DrawerColorVariant.noBackground` is deprecated. Use the `isPlain` prop on `DrawerPanelContent` and the `DrawerSection`instead.
+   */
   noBackground = 'no-background'
 }
 

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -37,6 +37,12 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   isResizable?: boolean;
   /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
   hasNoGlass?: boolean;
+  /** @beta Flag indicating that the drawer panel should use glass styles when in glass theme */
+  isGlass?: boolean;
+  /** @beta Flag indicating that the drawer panel should use plain styles. This only applies when the drawer is static or inline. */
+  isPlain?: boolean;
+  /** @beta Flag indicating that plain styles should be disabled when glass styles are used. This only applies when the drawer is static or inline. */
+  isNoPlainOnGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -56,7 +62,10 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
     xl?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
-  /** Color variant of the background of the drawer panel */
+  /**
+   * Color variant of the background of the drawer panel.
+   * The `no-background`is deprecated; use the `isPlain` prop instead.
+   */
   colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
@@ -71,6 +80,9 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   hasNoBorder = false,
   isResizable = false,
   hasNoGlass = false,
+  isGlass = false,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -368,6 +380,9 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
         styles.drawerPanel,
         isResizable && styles.modifiers.resizable,
         hasNoGlass && 'pf-m-no-glass',
+        isGlass && styles.modifiers.glass,
+        isPlain && styles.modifiers.plain,
+        isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
         hasNoBorder && styles.modifiers.noBorder,
         formatBreakpointMods(widths, styles),
         colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,

package/src/components/Drawer/DrawerSection.tsx

@@ -7,19 +7,26 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
-  /** Color variant of the background of the drawer Section */
+  /**
+   * Color variant of the background of the drawer section.
+   * The `no-background` value is deprecated; use the `isPlain` prop instead.
+   */
   colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
+  /** @beta Flag indicating that the drawer section should use plain styles. */
+  isPlain?: boolean;
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   className = '',
   children,
   colorVariant = DrawerColorVariant.default,
+  isPlain = false,
   ...props
 }: DrawerSectionProps) => (
   <div
     className={css(
       styles.drawerSection,
+      isPlain && styles.modifiers.plain,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
       colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
       className

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

@@ -13,7 +13,7 @@ test(`Renders with only class ${styles.drawerPanel} by default`, () => {
   expect(screen.getByText('Drawer panel content')).toHaveClass(styles.drawerPanel, { exact: true });
 });
 
-test(`Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"`, () => {
+test(`Renders with class ${styles.modifiers.noBackground} when deprecated colorVariant="no-background" is used`, () => {
   render(
     <Drawer isExpanded>
       <DrawerPanelContent colorVariant="no-background">Drawer panel content</DrawerPanelContent>
@@ -188,3 +188,33 @@ test(`Renders with class 'pf-m-no-glass' when hasNoGlass is true`, () => {
 
   expect(screen.getByText('Drawer panel content')).toHaveClass('pf-m-no-glass');
 });
+
+test(`Renders with class ${styles.modifiers.glass} when isGlass is true`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent isGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.glass);
+});
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent isPlain>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass is true`, () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent isNoPlainOnGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});

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

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { DrawerColorVariant } from '../Drawer';
+import { DrawerSection } from '../DrawerSection';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+
+test(`Renders with only class ${styles.drawerSection} by default`, () => {
+  render(<DrawerSection>Section content</DrawerSection>);
+
+  expect(screen.getByText('Section content')).toHaveClass(styles.drawerSection, { exact: true });
+});
+
+test(`Applies ${styles.drawerSection} and ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<DrawerSection isPlain>Section content</DrawerSection>);
+
+  const section = screen.getByText('Section content');
+  expect(section).toHaveClass(styles.drawerSection);
+  expect(section).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Does not apply ${styles.modifiers.plain} when isPlain is false`, () => {
+  render(<DrawerSection isPlain={false}>Section content</DrawerSection>);
+
+  expect(screen.getByText('Section content')).not.toHaveClass(styles.modifiers.plain);
+});
+
+test(`Applies plain and secondary modifiers together when isPlain and colorVariant are set`, () => {
+  render(
+    <DrawerSection isPlain colorVariant={DrawerColorVariant.secondary}>
+      Section content
+    </DrawerSection>
+  );
+
+  const section = screen.getByText('Section content');
+  expect(section).toHaveClass(styles.drawerSection);
+  expect(section).toHaveClass(styles.modifiers.plain);
+  expect(section).toHaveClass(styles.modifiers.secondary);
+});

package/src/components/Drawer/examples/Drawer.md

@@ -13,7 +13,7 @@ propComponents:
     DrawerCloseButton,
     DrawerPanelDescription,
     DrawerPanelBody,
-    DrawerPanelFocusTrapObject
+    DrawerPanelFocusTrapObject,
   ]
 section: components
 ---

package/src/components/Label/Label.tsx

@@ -13,13 +13,35 @@ import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-erro
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
+/** Semantic status for labels (default icon and status styling). */
+export enum LabelStatus {
+  success = 'success',
+  warning = 'warning',
+  danger = 'danger',
+  info = 'info',
+  custom = 'custom'
+}
+
+/** Label palette color when not using the `status` prop. */
+export enum LabelColor {
+  blue = 'blue',
+  teal = 'teal',
+  green = 'green',
+  orange = 'orange',
+  purple = 'purple',
+  red = 'red',
+  orangered = 'orangered',
+  grey = 'grey',
+  yellow = 'yellow'
+}
+
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
   children?: React.ReactNode;
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
+  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow' | LabelColor;
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
@@ -82,30 +104,30 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   }) => React.ReactNode;
 }
 
-const colorStyles = {
-  blue: styles.modifiers.blue,
-  teal: styles.modifiers.teal,
-  green: styles.modifiers.green,
-  orange: styles.modifiers.orange,
-  purple: styles.modifiers.purple,
-  red: styles.modifiers.red,
-  orangered: styles.modifiers.orangered,
-  yellow: styles.modifiers.yellow,
-  grey: ''
+const colorStyles: Record<LabelColor, string> = {
+  [LabelColor.blue]: styles.modifiers.blue,
+  [LabelColor.teal]: styles.modifiers.teal,
+  [LabelColor.green]: styles.modifiers.green,
+  [LabelColor.orange]: styles.modifiers.orange,
+  [LabelColor.purple]: styles.modifiers.purple,
+  [LabelColor.red]: styles.modifiers.red,
+  [LabelColor.orangered]: styles.modifiers.orangered,
+  [LabelColor.yellow]: styles.modifiers.yellow,
+  [LabelColor.grey]: ''
 };
 
-const statusIcons = {
-  success: <RhUiCheckCircleFillIcon />,
-  warning: <RhUiWarningFillIcon />,
-  danger: <RhUiErrorFillIcon />,
-  info: <RhUiInformationFillIcon />,
-  custom: <RhUiNotificationFillIcon />
+const statusIcons: Record<LabelStatus, React.ReactNode> = {
+  [LabelStatus.success]: <RhUiCheckCircleFillIcon />,
+  [LabelStatus.warning]: <RhUiWarningFillIcon />,
+  [LabelStatus.danger]: <RhUiErrorFillIcon />,
+  [LabelStatus.info]: <RhUiInformationFillIcon />,
+  [LabelStatus.custom]: <RhUiNotificationFillIcon />
 };
 
 export const Label: React.FunctionComponent<LabelProps> = ({
   children,
   className = '',
-  color = 'grey',
+  color = LabelColor.grey,
   variant = 'filled',
   status,
   isCompact = false,

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

@@ -2,9 +2,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
-import { Label } from '../Label';
+import { Label, LabelColor } from '../Label';
 
-const labelColors = ['blue', 'teal', 'green', 'orange', 'purple', 'red', 'grey', 'yellow'];
+const labelColors = Object.values(LabelColor);
 
 describe('Label', () => {
   test('renders', () => {
@@ -51,17 +51,17 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  labelColors.forEach((color: string) =>
+  labelColors.forEach((color) =>
     test(`label with ${color} color`, () => {
-      const { asFragment } = render(<Label color={color as any}>Something</Label>);
+      const { asFragment } = render(<Label color={color}>Something</Label>);
       expect(asFragment()).toMatchSnapshot();
     })
   );
 
-  labelColors.forEach((color: string) =>
+  labelColors.forEach((color) =>
     test(`label with ${color} color with outline variant`, () => {
       const { asFragment } = render(
-        <Label color={color as any} variant="outline">
+        <Label color={color} variant="outline">
           Something
         </Label>
       );

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

@@ -452,6 +452,42 @@ exports[`Label label with red color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with orangered color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-orangered pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with orangered color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-orangered pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label label with teal color 1`] = `
 <DocumentFragment>
   <span

package/src/components/Label/examples/LabelCompact.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
@@ -42,24 +42,24 @@ export const LabelCompact: React.FunctionComponent = () => (
     >
       Compact clickable removable (disabled)
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />}>
+    <Label variant="outline" color={LabelColor.blue} isCompact icon={<CubeIcon />}>
       Compact icon
     </Label>
-    <Label variant="outline" color="blue" isCompact onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact onClose={() => Function.prototype}>
       Compact removable
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
       Compact icon removable
     </Label>
-    <Label variant="outline" color="blue" isCompact href="#compact">
+    <Label variant="outline" color={LabelColor.blue} isCompact href="#compact">
       Compact link
     </Label>
-    <Label variant="outline" color="blue" isCompact href="#compact" onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
     </Label>
     <Label
       variant="outline"
-      color="blue"
+      color={LabelColor.blue}
       isCompact
       icon={<CubeIcon />}
       onClose={() => Function.prototype}

package/src/components/Label/examples/LabelCustomRender.tsx

@@ -1,9 +1,9 @@
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelCustomRender: React.FunctionComponent = () => (
   <Label
-    color="blue"
+    color={LabelColor.blue}
     icon={<RhUiInformationFillIcon />}
     onClose={() => Function.prototype}
     render={({ className, content, componentRef }) => (

package/src/components/Label/examples/LabelEditable.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 
 export const LabelEditable: React.FunctionComponent = () => {
   const [labelText, setLabelText] = useState('Editable label');
@@ -24,7 +24,7 @@ export const LabelEditable: React.FunctionComponent = () => {
   return (
     <Fragment>
       <Label
-        color="blue"
+        color={LabelColor.blue}
         onClose={() => {}}
         closeBtnAriaLabel="Custom close button for editable label"
         onEditCancel={onEditCancel}
@@ -38,7 +38,7 @@ export const LabelEditable: React.FunctionComponent = () => {
         {labelText}
       </Label>
       <Label
-        color="grey"
+        color={LabelColor.grey}
         isCompact
         onClose={() => {}}
         closeBtnAriaLabel="Custom close button for compact editable label"