From cffd0ade293cbadea89cee08e66db87533026d75 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Thu, 18 Jan 2024 11:31:09 +0100
Subject: [PATCH 1/2] refactor(ToggleGroupItem)

---
 .../src/components/ToggleGroup/ToggleGroupItem.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
index 793d6e087a0..b2c5e79b3a3 100644
--- a/packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react-core/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>
   );

From d126e75896146b554ebb66f2368d5fb5baf9a968 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Thu, 18 Jan 2024 11:31:57 +0100
Subject: [PATCH 2/2] docs(ToggleGroup): update example so button is not at the
 top

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

diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
index 869b1dc62f4..c256c9eb82b 100644
--- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx
+++ b/packages/react-core/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>
   );
 };