@patternfly/react-core 6.0.0-alpha.26 → 6.0.0-alpha.28

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.25","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.27","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.25","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.27","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.25","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.27","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.26",
+  "version": "6.0.0-alpha.28",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8ffcb64844b3d4ba40c08254bbc8a87b64a88004"
+  "gitHead": "2708044bb386d967e494bdb9fa0dfc632d90dcc3"
 }

package/src/components/Badge/Badge.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   /** Text announced by screen readers to indicate the current content/status of the badge. */
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
+  /**  Adds styling to the badge to indicate it has a toggle. A badge with a toggle must be passed to a MenuToggle component. */
+  isToggle?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -15,6 +18,7 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
+  isToggle = false,
   className = '',
   children = '',
   screenReaderText,
@@ -26,6 +30,11 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   >
     {children}
     {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+    {isToggle && (
+      <span className={css(styles.badgeToggleIcon)}>
+        <CaretDownIcon />
+      </span>
+    )}
   </span>
 );
 Badge.displayName = 'Badge';

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

@@ -32,6 +32,15 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
+test('Renders with toggle styles and icon when isToggle prop is true', () => {
+  render(
+    <Badge isRead={true} isToggle={true}>
+      Test
+    </Badge>
+  );
+  expect(screen.getByText('Test').lastChild).toHaveClass(styles.badgeToggleIcon);
+});
+
 test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');

package/src/components/Badge/examples/Badge.css

@@ -0,0 +1,6 @@
+#ws-react-c-badge-read .pf-v5-c-badge,
+#ws-react-c-badge-unread .pf-v5-c-badge,
+#ws-react-c-badge-badge-as-toggle .pf-v5-c-badge {
+    margin-inline-end: var(--pf-t--global--spacer--xs); 
+    margin-block-end: var(--pf-t--global--spacer--xs); 
+}

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

@@ -5,6 +5,8 @@ cssPrefix: pf-v5-c-badge
 propComponents: ['Badge']
 ---
 
+import './Badge.css';
+
 ## Examples
 
 ### Read
@@ -16,3 +18,8 @@ propComponents: ['Badge']
 
 ```ts file="./BadgeUnread.tsx"
 ```
+
+### Badge as toggle
+
+```ts file="./BadgeToggle.tsx"
+```

package/src/components/Badge/examples/BadgeRead.tsx

@@ -5,13 +5,13 @@ export const BadgeRead: React.FunctionComponent = () => (
   <React.Fragment>
     <Badge key={1} isRead>
       7
-    </Badge>{' '}
+    </Badge>
     <Badge key={2} isRead>
       24
-    </Badge>{' '}
+    </Badge>
     <Badge key={3} isRead>
       240
-    </Badge>{' '}
+    </Badge>
     <Badge key={4} isRead>
       999+
     </Badge>

package/src/components/Badge/examples/BadgeToggle.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+export const BadgeToggle: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Badge key={1} screenReaderText="Unread Messages" isToggle>
+      7
+    </Badge>
+    <Badge key={2} screenReaderText="Read Messages" isRead isToggle>
+      7
+    </Badge>
+  </React.Fragment>
+);

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -28,9 +28,9 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
   className,
   isDisabled = false,
   isSelected = false,
-  'aria-label': ariaLabel = '',
+  'aria-label': ariaLabel,
   onChange = () => {},
-  buttonId = '',
+  buttonId,
   ...props
 }: ToggleGroupItemProps) => {
   const handleChange = (event: any): void => {
@@ -49,12 +49,12 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
         className={css(styles.toggleGroupButton, isSelected && styles.modifiers.selected)}
         aria-pressed={isSelected}
         onClick={handleChange}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
-        {...(isDisabled && { disabled: true })}
-        {...(buttonId && { id: buttonId })}
+        aria-label={ariaLabel}
+        disabled={isDisabled}
+        id={buttonId}
       >
-        {icon ? <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement> : null}
-        {text ? <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement> : null}
+        {icon && <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>}
+        {text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
       </button>
     </div>
   );

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -16,9 +16,6 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
   };
   return (
     <Stack hasGutter>
-      <StackItem>
-        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
-      </StackItem>
       <StackItem>
         <ToggleGroup areAllGroupsDisabled={disableAll} aria-label="Default with multiple selectable">
           <ToggleGroupItem
@@ -38,6 +35,9 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
           <ToggleGroupItem text="Option 3" key={2} isDisabled />
         </ToggleGroup>
       </StackItem>
+      <StackItem>
+        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
+      </StackItem>
     </Stack>
   );
 };