@patternfly/react-core 6.0.0-alpha.64 → 6.0.0-alpha.65

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.64",
+  "version": "6.0.0-alpha.65",
   "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",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8e3a02226113a421ca5340644360999ef4cdf32e"
+  "gitHead": "c78a547d4e50b3766eead9a2814667c778c3c86f"
 }

package/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,6 +17,7 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
+  isDisabled = false,
   className = '',
   children = '',
   screenReaderText,
@@ -22,7 +25,12 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
 }: 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>}

package/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>');

package/src/components/Badge/examples/Badge.md

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

package/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>
+);

package/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>