From a374288697b0b668b225d26a383a504c0017b132 Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Tue, 31 Oct 2023 15:35:34 +0100
Subject: [PATCH] Add fillWidth option to button group

---
 src/components/ButtonGroup/ButtonGroup.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 073e5a14..1d354b91 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -5,6 +5,7 @@ export interface ButtonGroupElementProps
   extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
   value: string;
   label?: ReactNode;
+  fillWidth?: boolean;
 }
 
 export interface ButtonGroupProps
@@ -21,7 +22,7 @@ export const ButtonGroup = ({
   ...props
 }: ButtonGroupProps) => {
   const lastIndex = options.length - 1;
-  const btns = options.map(({ value, label, ...props }, index) => {
+  const btns = options.map(({ value, label, fillWidth, ...props }, index) => {
     const position: ButtonPosition =
       index === 0 ? "left" : index === lastIndex ? "right" : "center";
     return (
@@ -29,6 +30,7 @@ export const ButtonGroup = ({
         key={value}
         $active={value === selected}
         $position={position}
+        $fillWidth={fillWidth}
         onClick={() => onClick?.(value)}
         role="button"
         {...props}
@@ -46,6 +48,7 @@ interface ButtonProps {
   $active: boolean;
   $position: ButtonPosition;
   theme: DefaultTheme;
+  $fillWidth?: boolean;
 }
 
 const ButtonGroupWrapper = styled.div`
@@ -82,6 +85,7 @@ const Button = styled.button<ButtonProps>`
   padding: ${({ theme }) => theme.click.button.basic.space.y}
     ${({ theme }) => theme.click.button.basic.space.x};
   gap: ${({ theme }) => theme.click.button.basic.space.group};
+  ${({ $fillWidth = false }) => ($fillWidth ? "flex: 1;" : "")}
   cursor: pointer;
 
   &:hover {