From b82cb0f97e41530a92b5a5d100838545449314a4 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Fri, 19 Apr 2024 15:49:41 -0400
Subject: [PATCH 1/5] feat(Toggle group): Add support for icon position

---
 .../ToggleGroup/ToggleGroupItem.tsx           | 10 ++-
 .../examples/ToggleGroupTextIcon.tsx          | 75 +++++++++++++------
 2 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
index b2c5e79b3a3..b9d315ccdeb 100644
--- a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react-core/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 */
+  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,
@@ -53,8 +56,13 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
         disabled={isDisabled}
         id={buttonId}
       >
-        {icon && <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>}
+        {icon && iconPosition === 'start' && (
+          <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>
+        )}
         {text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
+        {icon && iconPosition === 'end' && (
+          <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>
+        )}
       </button>
     </div>
   );
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
index f3e6c61868e..167de96528a 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
+++ b/packages/react-core/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">
+        <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">
+        <ToggleGroupItem
+          icon={<CopyIcon />}
+          iconPosition="end"
+          text="Copy"
+          buttonId="toggle-group-text-icons-1"
+          isSelected={isSelected['toggle-group-text-icons-1']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<UndoIcon />}
+          iconPosition="end"
+          text="Undo"
+          buttonId="toggle-group-text-icons-2"
+          isSelected={isSelected['toggle-group-text-icons-2']}
+          onChange={handleItemClick}
+        />
+        <ToggleGroupItem
+          icon={<ShareSquareIcon />}
+          iconPosition="end"
+          text="Share"
+          buttonId="toggle-group-text-icons-3"
+          isSelected={isSelected['toggle-group-text-icons-3']}
+          onChange={handleItemClick}
+        />
+      </ToggleGroup>
+    </>
   );
 };

From 6d9d9aace6fc06b9f9115a09b2246549be65f997 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Fri, 19 Apr 2024 16:18:21 -0400
Subject: [PATCH 2/5] fix ids

---
 .../components/ToggleGroup/examples/ToggleGroupTextIcon.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
index 167de96528a..a54ac5b0b81 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
@@ -46,7 +46,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           iconPosition="end"
           text="Copy"
           buttonId="toggle-group-text-icons-1"
-          isSelected={isSelected['toggle-group-text-icons-1']}
+          isSelected={isSelected['toggle-group-text-icons-4']}
           onChange={handleItemClick}
         />
         <ToggleGroupItem
@@ -54,7 +54,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           iconPosition="end"
           text="Undo"
           buttonId="toggle-group-text-icons-2"
-          isSelected={isSelected['toggle-group-text-icons-2']}
+          isSelected={isSelected['toggle-group-text-icons-5']}
           onChange={handleItemClick}
         />
         <ToggleGroupItem
@@ -62,7 +62,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           iconPosition="end"
           text="Share"
           buttonId="toggle-group-text-icons-3"
-          isSelected={isSelected['toggle-group-text-icons-3']}
+          isSelected={isSelected['toggle-group-text-icons-6']}
           onChange={handleItemClick}
         />
       </ToggleGroup>

From 1c7d0ca7155ec9223ffa7eb3addd0766ce5f768a Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Fri, 19 Apr 2024 17:19:38 -0400
Subject: [PATCH 3/5] fix ids

---
 .../components/ToggleGroup/examples/ToggleGroupTextIcon.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
index a54ac5b0b81..05d46d083df 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
@@ -45,7 +45,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           icon={<CopyIcon />}
           iconPosition="end"
           text="Copy"
-          buttonId="toggle-group-text-icons-1"
+          buttonId="toggle-group-text-icons-4"
           isSelected={isSelected['toggle-group-text-icons-4']}
           onChange={handleItemClick}
         />
@@ -53,7 +53,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           icon={<UndoIcon />}
           iconPosition="end"
           text="Undo"
-          buttonId="toggle-group-text-icons-2"
+          buttonId="toggle-group-text-icons-5"
           isSelected={isSelected['toggle-group-text-icons-5']}
           onChange={handleItemClick}
         />
@@ -61,7 +61,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           icon={<ShareSquareIcon />}
           iconPosition="end"
           text="Share"
-          buttonId="toggle-group-text-icons-3"
+          buttonId="toggle-group-text-icons-6"
           isSelected={isSelected['toggle-group-text-icons-6']}
           onChange={handleItemClick}
         />

From 68f83422911c720f03bb6dbac3775040e1496546 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Mon, 22 Apr 2024 09:28:28 -0400
Subject: [PATCH 4/5] refactor duplicate code

---
 .../src/components/ToggleGroup/ToggleGroupItem.tsx     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
index b9d315ccdeb..2e17f6e3c8f 100644
--- a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
@@ -45,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
@@ -56,13 +58,9 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
         disabled={isDisabled}
         id={buttonId}
       >
-        {icon && iconPosition === 'start' && (
-          <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>
-        )}
+        {icon && iconPosition === 'start' && toggleGroupIcon}
         {text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
-        {icon && iconPosition === 'end' && (
-          <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>
-        )}
+        {icon && iconPosition === 'end' && toggleGroupIcon}
       </button>
     </div>
   );

From db2276e49c805285a142b471c442919879e152a3 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Mon, 22 Apr 2024 16:32:25 -0400
Subject: [PATCH 5/5] update some comment

---
 .../react-core/src/components/ToggleGroup/ToggleGroupItem.tsx | 2 +-
 .../components/ToggleGroup/examples/ToggleGroupTextIcon.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
index 2e17f6e3c8f..81e00ff5d23 100644
--- a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
@@ -8,7 +8,7 @@ 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 */
+  /** Sets position of the icon when text is also passed in */
   iconPosition?: 'start' | 'end';
   /** Additional classes added to the toggle group item */
   className?: string;
diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
index 05d46d083df..147290697c9 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
+++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
@@ -16,7 +16,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   };
   return (
     <>
-      <ToggleGroup aria-label="Text and icon toggle group">
+      <ToggleGroup aria-label="Text and icon toggle group with icons at start">
         <ToggleGroupItem
           icon={<CopyIcon />}
           text="Copy"
@@ -40,7 +40,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
         />
       </ToggleGroup>
       <br />
-      <ToggleGroup aria-label="Text and icon toggle group">
+      <ToggleGroup aria-label="Text and icon toggle group with icons at end">
         <ToggleGroupItem
           icon={<CopyIcon />}
           iconPosition="end"