@patternfly/react-core 4.236.14 → 4.237.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.14",
+  "version": "4.237.0",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.87.14",
-    "@patternfly/react-styles": "^4.86.14",
-    "@patternfly/react-tokens": "^4.88.14",
+    "@patternfly/react-icons": "^4.88.0",
+    "@patternfly/react-styles": "^4.87.0",
+    "@patternfly/react-tokens": "^4.89.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "903be22b53212eaa7d4b2aa290a790ce64a10d52"
+  "gitHead": "cd1d1c0a95c7a848754272964ee52c5575554829"
 }

package/src/components/Button/Button.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers';
+import { Badge } from '../Badge';
 
 export enum ButtonVariant {
   primary = 'primary',
@@ -20,6 +21,16 @@ export enum ButtonType {
   submit = 'submit',
   reset = 'reset'
 }
+
+export interface BadgeCountObject {
+  /**  Adds styling to the badge to indicate it has been read */
+  isRead?: boolean;
+  /** Adds count number right of button */
+  count?: number;
+  /** Additional classes added to the badge count */
+  className?: string;
+}
+
 export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>, OUIAProps {
   /** Content rendered inside the button */
   children?: React.ReactNode;
@@ -67,6 +78,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isDanger?: boolean;
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Adds count number to button */
+  countOptions?: BadgeCountObject;
 }
 
 const ButtonBase: React.FunctionComponent<ButtonProps> = ({
@@ -95,6 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   ouiaSafe = true,
   tabIndex = null,
   innerRef,
+  countOptions,
   ...props
 }: ButtonProps) => {
   const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
@@ -168,6 +182,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
+      {countOptions && (
+        <span className={css(styles.buttonCount, countOptions.className)}>
+          <Badge isRead={countOptions.isRead}>{countOptions.count}</Badge>
+        </span>
+      )}
     </Component>
   );
 };

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

@@ -2,7 +2,7 @@
 id: Button
 section: components
 cssPrefix: pf-c-button
-propComponents: ['Button']
+propComponents: ['Button', 'BadgeCountObject']
 ouia: true
 ---
 
@@ -111,4 +111,11 @@ Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
 Aria-disabled buttons can operate as links, which also support tooltips.
 
 ```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+```
+
+### Button with count
+
+Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
+
+```ts file="./ButtonWithCount.tsx" isBeta
 ```

package/src/components/Button/examples/ButtonWithCount.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { BadgeCountObject, Button } from '@patternfly/react-core';
+
+export const ButtonWithCount: React.FunctionComponent = () => {
+  const badgeCountObjectNotRead: BadgeCountObject = {
+    isRead: false,
+    count: 7,
+    className: 'custom-badge-unread'
+  };
+
+  const badgeCountObjectRead: BadgeCountObject = {
+    isRead: true,
+    count: 10,
+    className: 'custom-badge-read'
+  };
+
+  return (
+    <React.Fragment>
+      <p>Unread:</p>
+      <Button variant="primary" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <br />
+      <p>Unread disabled:</p>
+      <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
+        View issues
+      </Button>{' '}
+      <br />
+      <p>Read:</p>
+      <Button variant="primary" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <br />
+      <p>Read disabled:</p>
+      <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
+        View issues
+      </Button>{' '}
+      <br />
+    </React.Fragment>
+  );
+};