@patternfly/react-core 6.0.0-alpha.51 → 6.0.0-alpha.52

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.50","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.51","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.50","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.51","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.50","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.51","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.51",
+  "version": "6.0.0-alpha.52",
   "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",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8d93660fcd63d544d8ef0f2ee6494cfe5f09379e"
+  "gitHead": "eb609385b2e7b294e5e46d021d615cd63fa92fc6"
 }

package/src/components/DataList/examples/DataList.md

@@ -83,7 +83,7 @@ import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecate
 
 ### Draggable
 
-Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
 
 Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -88,7 +88,7 @@ The dual list selector can also be built in a composable manner to make customiz
 
 ### Composable with drag and drop
 
-Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
 
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -8,6 +8,8 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
   text?: React.ReactNode;
   /** Icon rendered inside the toggle group item */
   icon?: React.ReactNode;
+  /** Sets position of the icon when text is also passed in */
+  iconPosition?: 'start' | 'end';
   /** Additional classes added to the toggle group item */
   className?: string;
   /** Flag indicating if the toggle group item is disabled */
@@ -25,6 +27,7 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
 export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
   text,
   icon,
+  iconPosition = 'start',
   className,
   isDisabled = false,
   isSelected = false,
@@ -42,6 +45,8 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
     console.warn('An accessible aria-label is required when using the toggle group item icon variant.');
   }
 
+  const toggleGroupIcon = <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>;
+
   return (
     <div className={css(styles.toggleGroupItem, className)} {...props}>
       <button
@@ -53,8 +58,9 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
         disabled={isDisabled}
         id={buttonId}
       >
-        {icon && <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>}
+        {icon && iconPosition === 'start' && toggleGroupIcon}
         {text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
+        {icon && iconPosition === 'end' && toggleGroupIcon}
       </button>
     </div>
   );

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

@@ -15,28 +15,57 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
     setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
-    <ToggleGroup aria-label="Text and icon toggle group">
-      <ToggleGroupItem
-        icon={<CopyIcon />}
-        text="Copy"
-        buttonId="toggle-group-text-icons-1"
-        isSelected={isSelected['toggle-group-text-icons-1']}
-        onChange={handleItemClick}
-      />
-      <ToggleGroupItem
-        icon={<UndoIcon />}
-        text="Undo"
-        buttonId="toggle-group-text-icons-2"
-        isSelected={isSelected['toggle-group-text-icons-2']}
-        onChange={handleItemClick}
-      />
-      <ToggleGroupItem
-        icon={<ShareSquareIcon />}
-        text="Share"
-        buttonId="toggle-group-text-icons-3"
-        isSelected={isSelected['toggle-group-text-icons-3']}
-        onChange={handleItemClick}
-      />
-    </ToggleGroup>
+    <>
+      <ToggleGroup aria-label="Text and icon toggle group with icons at start">
+        <ToggleGroupItem
+          icon={<CopyIcon />}
+          text="Copy"
+          buttonId="toggle-group-text-icons-1"
+          isSelected={isSelected['toggle-group-text-icons-1']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<UndoIcon />}
+          text="Undo"
+          buttonId="toggle-group-text-icons-2"
+          isSelected={isSelected['toggle-group-text-icons-2']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<ShareSquareIcon />}
+          text="Share"
+          buttonId="toggle-group-text-icons-3"
+          isSelected={isSelected['toggle-group-text-icons-3']}
+          onChange={handleItemClick}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup aria-label="Text and icon toggle group with icons at end">
+        <ToggleGroupItem
+          icon={<CopyIcon />}
+          iconPosition="end"
+          text="Copy"
+          buttonId="toggle-group-text-icons-4"
+          isSelected={isSelected['toggle-group-text-icons-4']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<UndoIcon />}
+          iconPosition="end"
+          text="Undo"
+          buttonId="toggle-group-text-icons-5"
+          isSelected={isSelected['toggle-group-text-icons-5']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<ShareSquareIcon />}
+          iconPosition="end"
+          text="Share"
+          buttonId="toggle-group-text-icons-6"
+          isSelected={isSelected['toggle-group-text-icons-6']}
+          onChange={handleItemClick}
+        />
+      </ToggleGroup>
+    </>
   );
 };