feat(badge): add disabled badge variant (#10445)

* feat(badge): add disabled badge variant

* rebase && core version bump

* feat(badge): update docs header, add Button changes

* feat(badge): PR feedback

packages/react-core/src/components/Badge/Badge.tsx

@@ -7,6 +7,8 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
+  /** Adds styling to the badge to indicate it is disabled */
+  isDisabled?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -15,14 +17,20 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
+  isDisabled = false,
   className = '',
   children = '',
   screenReaderText,
   ...props
 }: BadgeProps) => (
   <span
     {...props}
-    className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
+    className={css(
+      styles.badge,
+      (isRead ? styles.modifiers.read : styles.modifiers.unread) as any,
+      isDisabled && styles.modifiers.disabled,
+      className
+    )}
   >
     {children}
     {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}

packages/react-core/src/components/Badge/__tests__/Badge.test.tsx

@@ -32,6 +32,11 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
+test(`Renders with class name ${styles.modifiers.disabled} when isDisabled prop is true`, () => {
+  render(<Badge isDisabled>Test</Badge>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.disabled);
+});
+
 test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');

packages/react-core/src/components/Badge/examples/Badge.md

@@ -18,3 +18,8 @@ import './Badge.css';
 
 ```ts file="./BadgeUnread.tsx"
 ```
+
+### Disabled
+
+```ts file="./BadgeDisabled.tsx"
+```

packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+export const BadgeRead: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Badge key={1} isDisabled isRead>
+      7
+    </Badge>
+    <Badge key={2} isDisabled isRead>
+      24
+    </Badge>
+    <Badge key={3} isDisabled>
+      240
+    </Badge>
+    <Badge key={4} isDisabled>
+      999+
+    </Badge>
+  </React.Fragment>
+);

packages/react-core/src/components/Button/Button.tsx

@@ -208,7 +208,9 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       )}
       {countOptions && (
         <span className={css(styles.buttonCount, countOptions.className)}>
-          <Badge isRead={countOptions.isRead}>{countOptions.count}</Badge>
+          <Badge isRead={countOptions.isRead} isDisabled={isDisabled}>
+            {countOptions.count}
+          </Badge>
         </span>
       )}
     </Component>