From 20e25a968e72d2ba035f2a46d1ccd1777e098876 Mon Sep 17 00:00:00 2001
From: Vineeth Asok Kumar <me@vineethasok.com>
Date: Thu, 2 Nov 2023 12:14:45 +0100
Subject: [PATCH] Fix Button Group fillWidth (#194)

---
 .../ButtonGroup/ButtonGroup.stories.ts          |  1 +
 src/components/ButtonGroup/ButtonGroup.tsx      | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.stories.ts b/src/components/ButtonGroup/ButtonGroup.stories.ts
index 5b6fb4e1..8cd29142 100644
--- a/src/components/ButtonGroup/ButtonGroup.stories.ts
+++ b/src/components/ButtonGroup/ButtonGroup.stories.ts
@@ -13,5 +13,6 @@ export const Playground = {
       { label: "Option 2", value: "option2" },
       { label: "Option 3", value: "option3" },
     ],
+    fillWidth: false,
   },
 };
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 9b908bf0..deb41eff 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -5,7 +5,6 @@ export interface ButtonGroupElementProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
   value: string;
   label?: ReactNode;
-  fillWidth?: boolean;
 }
 
 export interface ButtonGroupProps
@@ -13,16 +12,18 @@ export interface ButtonGroupProps
   options: Array<ButtonGroupElementProps>;
   selected?: string;
   onClick?: (value: string) => void;
+  fillWidth?: boolean;
 }
 
 export const ButtonGroup = ({
   options,
   selected,
+  fillWidth,
   onClick,
   ...props
 }: ButtonGroupProps) => {
   const lastIndex = options.length - 1;
-  const btns = options.map(({ value, label, fillWidth, ...props }, index) => {
+  const btns = options.map(({ value, label, ...props }, index) => {
     const position: ButtonPosition =
       index === 0 ? "left" : index === lastIndex ? "right" : "center";
     return (
@@ -39,7 +40,14 @@ export const ButtonGroup = ({
       </Button>
     );
   });
-  return <ButtonGroupWrapper {...props}>{btns}</ButtonGroupWrapper>;
+  return (
+    <ButtonGroupWrapper
+      $fillWidth={fillWidth}
+      {...props}
+    >
+      {btns}
+    </ButtonGroupWrapper>
+  );
 };
 
 type ButtonPosition = "left" | "center" | "right";
@@ -51,7 +59,7 @@ interface ButtonProps {
   $fillWidth?: boolean;
 }
 
-const ButtonGroupWrapper = styled.div`
+const ButtonGroupWrapper = styled.div<{ $fillWidth?: boolean }>`
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -61,6 +69,7 @@ const ButtonGroupWrapper = styled.div`
   border: 1px solid ${({ theme }) => theme.click.button.group.color.stroke.panel};
   background: ${({ theme }) => theme.click.button.group.color.background.panel};
   border-radius: ${({ theme }) => theme.click.button.group.radii.end};
+  width: ${({ $fillWidth }) => ($fillWidth ? "100%" : "auto")};
 `;
 
 const endRadii = "var(--click-button-button-group-radii-end)";