@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.40

package/src/components/Banner/examples/BannerBasic.tsx

@@ -5,12 +5,20 @@ export const BannerBasic: React.FunctionComponent = () => (
   <>
     <Banner>Default banner</Banner>
     <br />
-    <Banner variant="blue">Blue banner</Banner>
+    <Banner color="red">Red banner</Banner>
     <br />
-    <Banner variant="red">Red banner</Banner>
+    <Banner color="orangered">Orangered banner</Banner>
     <br />
-    <Banner variant="green">Green banner</Banner>
+    <Banner color="orange">Orange banner</Banner>
     <br />
-    <Banner variant="gold">Gold banner</Banner>
+    <Banner color="gold">Gold banner</Banner>
+    <br />
+    <Banner color="green">Green banner</Banner>
+    <br />
+    <Banner color="cyan">Cyan banner</Banner>
+    <br />
+    <Banner color="blue">Blue banner</Banner>
+    <br />
+    <Banner color="purple">Purple banner</Banner>
   </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -8,25 +8,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const BannerStatus: React.FunctionComponent = () => (
   <>
-    <Banner screenReaderText="Default banner">
+    <Banner screenReaderText="Success banner" status="success">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <BellIcon />
+          <CheckCircleIcon />
         </FlexItem>
-        <FlexItem>Default banner</FlexItem>
+        <FlexItem>Success banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Info banner" variant="blue">
+    <Banner screenReaderText="Warning banner" status="warning">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <InfoCircleIcon />
+          <ExclamationTriangleIcon />
         </FlexItem>
-        <FlexItem>Info banner</FlexItem>
+        <FlexItem>Warning banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Danger banner" variant="red">
+    <Banner screenReaderText="Danger banner" status="danger">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationCircleIcon />
@@ -35,21 +35,21 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Success banner" variant="green">
+    <Banner screenReaderText="Info banner" status="info">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <CheckCircleIcon />
+          <InfoCircleIcon />
         </FlexItem>
-        <FlexItem>Success banner</FlexItem>
+        <FlexItem>Info banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Warning banner" variant="gold">
+    <Banner screenReaderText="Custom banner" status="custom">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationTriangleIcon />
+          <BellIcon />
         </FlexItem>
-        <FlexItem>Warning banner</FlexItem>
+        <FlexItem>Custom banner</FlexItem>
       </Flex>
     </Banner>
   </>

package/src/components/Brand/Brand.tsx

@@ -60,7 +60,7 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   }
 
   return (
-    /** the brand component currently contains no styling the 'pf-v5-c-brand' string will be used for the className */
+    /** the brand component currently contains no styling the 'pf-v6-c-brand' string will be used for the className */
     children !== undefined ? (
       <picture
         className={css(styles.brand, styles.modifiers.picture, className)}

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

@@ -106,6 +106,6 @@ test('width styles are present when passed', () => {
   );
   expect(screen.getByAltText('brand with widths')).toHaveAttribute(
     'style',
-    '--pf-v5-c-brand--Width: 100px; --pf-v5-c-brand--Width-on-sm: 25px; --pf-v5-c-brand--Width-on-md: 50px; --pf-v5-c-brand--Width-on-lg: 100px; --pf-v5-c-brand--Width-on-xl: 125px; --pf-v5-c-brand--Width-on-2xl: 150px;'
+    '--pf-v6-c-brand--Width: 100px; --pf-v6-c-brand--Width-on-sm: 25px; --pf-v6-c-brand--Width-on-md: 50px; --pf-v6-c-brand--Width-on-lg: 100px; --pf-v6-c-brand--Width-on-xl: 125px; --pf-v6-c-brand--Width-on-2xl: 150px;'
   );
 });

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

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v6-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v6-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v6-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/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -4,13 +4,13 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
 <DocumentFragment>
   <nav
     aria-label="custom label"
-    class="pf-v5-c-breadcrumb"
+    class="pf-v6-c-breadcrumb"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
     data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
-      class="pf-v5-c-breadcrumb__list"
+      class="pf-v6-c-breadcrumb__list"
       role="list"
     />
   </nav>
@@ -21,20 +21,20 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Breadcrumb"
-    class="pf-v5-c-breadcrumb"
+    class="pf-v6-c-breadcrumb"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
     data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
-      class="pf-v5-c-breadcrumb__list"
+      class="pf-v6-c-breadcrumb__list"
       role="list"
     >
       <li
-        class="pf-v5-c-breadcrumb__item"
+        class="pf-v6-c-breadcrumb__item"
       >
         <a
-          class="pf-v5-c-breadcrumb__link"
+          class="pf-v6-c-breadcrumb__link"
           href="#"
         >
           Item 1
@@ -42,14 +42,14 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
       </li>
        
       <li
-        class="pf-v5-c-breadcrumb__item"
+        class="pf-v6-c-breadcrumb__item"
       >
         <span
-          class="pf-v5-c-breadcrumb__item-divider"
+          class="pf-v6-c-breadcrumb__item-divider"
         >
           <svg
             aria-hidden="true"
-            class="pf-v5-svg"
+            class="pf-v6-svg"
             fill="currentColor"
             height="1em"
             role="img"
@@ -62,7 +62,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
           </svg>
         </span>
         <a
-          class="pf-v5-c-breadcrumb__link"
+          class="pf-v6-c-breadcrumb__link"
           href="#"
         >
           Item 1
@@ -77,13 +77,13 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Breadcrumb"
-    class="pf-v5-c-breadcrumb className"
+    class="pf-v6-c-breadcrumb className"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
     data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
-      class="pf-v5-c-breadcrumb__list"
+      class="pf-v6-c-breadcrumb__list"
       role="list"
     />
   </nav>
@@ -94,13 +94,13 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Breadcrumb"
-    class="pf-v5-c-breadcrumb"
+    class="pf-v6-c-breadcrumb"
     data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
     data-ouia-component-type="PF5/Breadcrumb"
     data-ouia-safe="true"
   >
     <ol
-      class="pf-v5-c-breadcrumb__list"
+      class="pf-v6-c-breadcrumb__list"
       role="list"
     />
   </nav>

package/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbHeading.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`BreadcrumbHeading component should pass classname 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item Class"
+    class="pf-v6-c-breadcrumb__item Class"
   >
     <h1
-      class="pf-v5-c-breadcrumb__heading"
+      class="pf-v6-c-breadcrumb__heading"
     >
       Item
     </h1>
@@ -17,11 +17,11 @@ exports[`BreadcrumbHeading component should pass classname 1`] = `
 exports[`BreadcrumbHeading component should pass custom id 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
     id="Id"
   >
     <h1
-      class="pf-v5-c-breadcrumb__heading"
+      class="pf-v6-c-breadcrumb__heading"
     >
       Item
     </h1>
@@ -32,14 +32,14 @@ exports[`BreadcrumbHeading component should pass custom id 1`] = `
 exports[`BreadcrumbHeading component should render breadcrumbHeading with target 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     <h1
-      class="pf-v5-c-breadcrumb__heading"
+      class="pf-v6-c-breadcrumb__heading"
     >
       <a
         aria-current="page"
-        class="pf-v5-c-breadcrumb__link pf-m-current"
+        class="pf-v6-c-breadcrumb__link pf-m-current"
         href="#here"
         target="_blank"
       >
@@ -53,10 +53,10 @@ exports[`BreadcrumbHeading component should render breadcrumbHeading with target
 exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     <h1
-      class="pf-v5-c-breadcrumb__heading"
+      class="pf-v6-c-breadcrumb__heading"
     >
       Item
     </h1>
@@ -67,14 +67,14 @@ exports[`BreadcrumbHeading component should render default breadcrumbHeading 1`]
 exports[`BreadcrumbHeading component should render link breadcrumbTitle 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     <h1
-      class="pf-v5-c-breadcrumb__heading"
+      class="pf-v6-c-breadcrumb__heading"
     >
       <a
         aria-current="page"
-        class="pf-v5-c-breadcrumb__link pf-m-current"
+        class="pf-v6-c-breadcrumb__link pf-m-current"
         href="/somewhere"
       >
         Item

package/src/components/Breadcrumb/__tests__/__snapshots__/BreadcrumbItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`BreadcrumbItem component should render active breadcrumbItem 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     Item
   </li>
@@ -13,7 +13,7 @@ exports[`BreadcrumbItem component should render active breadcrumbItem 1`] = `
 exports[`BreadcrumbItem component should render breadcrumbItem with className 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item Class"
+    class="pf-v6-c-breadcrumb__item Class"
   >
     Item
   </li>
@@ -23,7 +23,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with className 1`
 exports[`BreadcrumbItem component should render breadcrumbItem with component 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     Stuff
   </li>
@@ -33,7 +33,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with component 1`
 exports[`BreadcrumbItem component should render breadcrumbItem with custom element 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     <h1>
       Header
@@ -45,7 +45,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with custom eleme
 exports[`BreadcrumbItem component should render breadcrumbItem with id 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
     id="Item 1"
   >
     Item
@@ -56,7 +56,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with id 1`] = `
 exports[`BreadcrumbItem component should render breadcrumbItem with target 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     Item
   </li>
@@ -66,7 +66,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with target 1`] =
 exports[`BreadcrumbItem component should render default breadcrumbItem 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     Item
   </li>
@@ -76,10 +76,10 @@ exports[`BreadcrumbItem component should render default breadcrumbItem 1`] = `
 exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-breadcrumb__item"
+    class="pf-v6-c-breadcrumb__item"
   >
     <a
-      class="pf-v5-c-breadcrumb__link"
+      class="pf-v6-c-breadcrumb__link"
       href="/somewhere"
     >
       Item

package/src/components/Button/Button.tsx

@@ -13,7 +13,8 @@ export enum ButtonVariant {
   warning = 'warning',
   link = 'link',
   plain = 'plain',
-  control = 'control'
+  control = 'control',
+  stateful = 'stateful'
 }
 
 export enum ButtonType {
@@ -28,6 +29,12 @@ export enum ButtonSize {
   lg = 'lg'
 }
 
+export enum ButtonState {
+  read = 'read',
+  unread = 'unread',
+  attention = 'attention'
+}
+
 export interface BadgeCountObject {
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
@@ -44,8 +51,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   className?: string;
   /** Sets the base component to render. defaults to button */
   component?: React.ElementType<any> | React.ComponentType<any>;
-  /** Adds active styling to button. */
-  isActive?: boolean;
+  /** Adds clicked styling to button. */
+  isClicked?: boolean;
   /** Adds block styling to button */
   isBlock?: boolean;
   /** Adds disabled styling and disables the button using the disabled html attribute */
@@ -69,7 +76,11 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   /** Sets button type */
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful';
+  /** Sets state of the stateful button variant. Default is "unread" */
+  state?: 'read' | 'unread' | 'attention';
+  /** Applies no padding on a plain button variant. Use when plain button is placed inline with text */
+  hasNoPadding?: boolean;
   /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
   iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
@@ -94,7 +105,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   children = null,
   className = '',
   component = 'button',
-  isActive = false,
+  isClicked = false,
   isBlock = false,
   isDisabled = false,
   isAriaDisabled = false,
@@ -108,9 +119,12 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isInline = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
+  state = ButtonState.unread,
+  hasNoPadding = false,
   iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
+  role,
   ouiaId,
   ouiaSafe = true,
   tabIndex = null,
@@ -155,11 +169,13 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isBlock && styles.modifiers.block,
         isDisabled && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled,
-        isActive && styles.modifiers.active,
+        isClicked && styles.modifiers.clicked,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
+        hasNoPadding && variant === ButtonVariant.plain && styles.modifiers.noPadding,
+        variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
         className
@@ -167,7 +183,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       disabled={isButtonElement ? isDisabled : null}
       tabIndex={tabIndex !== null ? tabIndex : getDefaultTabIdx()}
       type={isButtonElement || isInlineSpan ? type : null}
-      role={isInlineSpan ? 'button' : null}
+      role={isInlineSpan ? 'button' : role}
       ref={innerRef}
       {...ouiaProps}
     >

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonState, ButtonVariant } from '../Button';
 
 Object.values(ButtonVariant).forEach((variant) => {
   if (variant !== 'primary') {
@@ -28,9 +28,9 @@ test('Renders without children', () => {
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with class pf-v5-c-button by default', () => {
+test('Renders with class pf-v6-c-button by default', () => {
   render(<Button>Button</Button>);
-  expect(screen.getByRole('button')).toHaveClass('pf-v5-c-button');
+  expect(screen.getByRole('button')).toHaveClass('pf-v6-c-button');
 });
 
 test('Renders with class pf-m-primary by default', () => {
@@ -55,9 +55,9 @@ test('Renders with class pf-m-block when isBlock = true', () => {
   expect(screen.getByRole('button')).toHaveClass('pf-m-block');
 });
 
-test('Renders with class pf-m-active when isActive = true', () => {
-  render(<Button isActive>Active Button</Button>);
-  expect(screen.getByRole('button')).toHaveClass('pf-m-active');
+test('Renders with class pf-m-clicked when isClicked = true', () => {
+  render(<Button isClicked>Clicked Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
 });
 
 test('Renders with class pf-m-disabled when isDisabled = true', () => {
@@ -79,6 +79,22 @@ test('Does not disable button when isDisabled = true and component = a', () => {
   expect(screen.getByText('Disabled yet focusable button')).not.toHaveProperty('disabled');
 });
 
+test('Renders with class pf-m-unread by default when variant = stateful', () => {
+  render(<Button variant="stateful">Stateful Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-stateful', 'pf-m-unread');
+});
+
+Object.values(ButtonState).forEach((state) => {
+  test(`Renders with class pf-m-${state} when state = ${state} and variant = stateful`, () => {
+    render(
+      <Button variant="stateful" state={state}>
+        Stateful Button - {state}
+      </Button>
+    );
+    expect(screen.getByRole('button')).toHaveClass('pf-m-stateful', `pf-m-${state}`);
+  });
+});
+
 test('Renders with class pf-m-danger when isDanger = true and variant = secondary', () => {
   render(
     <Button variant="secondary" isDanger>

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

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

package/src/components/Button/examples/Button.md

@@ -12,6 +12,8 @@ import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/ex
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { Link } from '@reach/router';
 
 ## Examples
@@ -33,6 +35,7 @@ PatternFly supports several button styling variants to be used in different scen
 | Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
 | Plain | Plain buttons have no styling and are intended to be labeled with icons. |
 | Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
+| Stateful | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.
 
 ### Disabled buttons
 
@@ -107,3 +110,17 @@ Buttons can display a `count` in the form of a badge to indicate some value or n
 
 ```ts file="./ButtonWithCount.tsx" isBeta
 ```
+
+### Plain with no padding
+
+To display a plain/icon button inline with text, use `noPadding` prop in addition to `variant="plain"`.
+
+```ts file="./ButtonPlainHasNoPadding.tsx"
+```
+
+### Stateful
+
+Stateful buttons are ideal for displaying the state of notifications. Use `variant="stateful"` alongside with the `state` property, which can have these 3 values: `read`, `unread` (used as default) and `attention` (which means unread and requires attention).
+
+```ts file="./ButtonStateful.tsx"
+```