@patternfly/react-core 6.5.0-prerelease.66 → 6.5.0-prerelease.68

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx

@@ -7,7 +7,7 @@ import {
   DescriptionListDescription,
   Checkbox
 } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState<boolean>(false);
@@ -48,7 +48,7 @@ export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () =
         <DescriptionListGroup>
           <DescriptionListTerm>Pod selector</DescriptionListTerm>
           <DescriptionListDescription>
-            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+            <Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
               app=MyApp
             </Button>
           </DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx

@@ -7,7 +7,7 @@ import {
   Card,
   Checkbox
 } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState<boolean>(false);
@@ -52,7 +52,7 @@ export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent
         <Card component="div">
           <DescriptionListTerm>Pod selector</DescriptionListTerm>
           <DescriptionListDescription>
-            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+            <Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
               app=MyApp
             </Button>
           </DescriptionListDescription>

package/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx

@@ -7,7 +7,7 @@ import {
   DescriptionListTermHelpTextButton,
   Popover
 } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const DescriptionListWithTermHelpText: React.FunctionComponent = () => (
   <DescriptionList aria-label="Term help text">
@@ -44,7 +44,7 @@ export const DescriptionListWithTermHelpText: React.FunctionComponent = () => (
         </Popover>
       </DescriptionListTermHelpText>
       <DescriptionListDescription>
-        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+        <Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
           app=MyApp
         </Button>
       </DescriptionListDescription>

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/Icon/examples/BodyIconSizes.tsx

@@ -1,17 +1,17 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const BodyIconSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="bodySm">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="bodyDefault">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="bodyLg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -1,26 +1,26 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const HeadingIconSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="headingSm">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="headingMd">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="headingLg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="headingXl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="heading_2xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="heading_3xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/Icon.md

@@ -10,7 +10,7 @@ import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-ar
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -1,20 +1,20 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const IconContentSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="3xl" iconSize="lg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl" iconSize="xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl" iconSize="2xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/IconInline.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { Icon, Content } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const IconInline: React.FunctionComponent = () => (
   <Fragment>
@@ -8,25 +8,25 @@ export const IconInline: React.FunctionComponent = () => (
       <h1>
         Heading
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
       </h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.</p>
       <h2>
         Second level
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
       </h2>
       <p>
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
         Curabitur accumsan turpis pharetra
         <strong>
           augue tincidunt
           <Icon isInline>
-            <PlusCircleIcon />
+            <RhUiAddCircleFillIcon />
           </Icon>
         </strong>
         blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
@@ -35,24 +35,24 @@ export const IconInline: React.FunctionComponent = () => (
       <small>
         Sometimes you need small text
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
       </small>
       Inline with size specified:
       <Icon size="sm" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       small,
       <Icon size="md" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       medium,
       <Icon size="lg" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       large,
       <Icon size="xl" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       extra large
     </Content>

package/src/components/Icon/examples/StandaloneIconSizes.tsx

@@ -1,26 +1,26 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const StandaloneIconSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="sm">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="md">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="lg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="2xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/demos/CardView/CardView.md

@@ -5,7 +5,7 @@ section: patterns
 
 import { Fragment, useState } from 'react';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import pfIcon from '../assets/pf-logo-small.svg';
 import activeMQIcon from '../assets/activemq-core_200x150.png';
 import avroIcon from '../assets/camel-avro_200x150.png';

package/src/demos/CardView/examples/CardView.tsx

@@ -35,7 +35,7 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import pfIcon from './assets/pf-logo-small.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
 import avroIcon from './assets/camel-avro_200x150.png';
@@ -481,7 +481,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                 <EmptyState
                   headingLevel="h2"
                   titleText="Add a new card to your page"
-                  icon={PlusCircleIcon}
+                  icon={RhUiAddCircleFillIcon}
                   variant={EmptyStateVariant.xs}
                 >
                   <EmptyStateFooter>

package/src/demos/DescriptionList/DescriptionList.md

@@ -5,7 +5,7 @@ section: components
 
 import { useRef, useState } from 'react';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos

package/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -18,7 +18,7 @@ import {
   Title
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const DescriptionListInDrawer: React.FunctionComponent = () => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -89,7 +89,7 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
           <DescriptionListGroup>
             <DescriptionListTerm>Pod selector</DescriptionListTerm>
             <DescriptionListDescription>
-              <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              <Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
                 app=MyApp
               </Button>
             </DescriptionListDescription>

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -178,7 +178,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
   );
 
   const panelContent = (
-    <DrawerPanelContent>
+    <DrawerPanelContent isPlain>
       <DrawerHead>
         <Title headingLevel="h2" size="xl">
           node-{drawerPanelBodyContent}
@@ -429,7 +429,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }} aria-label="Drawer content section">
         <Drawer isExpanded={isDrawerExpanded}>
-          <DrawerContent panelContent={panelContent} colorVariant="no-background">
+          <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
         </Drawer>