From 5663e95cb7046e3d36cf8e8013af198bbc5465cc Mon Sep 17 00:00:00 2001
From: Orr Gottlieb <orr@monday.com>
Date: Wed, 29 May 2024 10:55:22 +0300
Subject: [PATCH] Change naming fix typos change prop to toptional

---
 .../core/src/components/ButtonGroup/ButtonGroup.module.scss | 2 +-
 packages/core/src/components/ButtonGroup/ButtonGroup.tsx    | 6 +++---
 .../src/components/ButtonGroup/__stories__/buttonGroup.mdx  | 4 ++--
 .../ButtonGroup/__stories__/buttonGroup.stories.tsx         | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss b/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss
index 7f5292bc89..488e122fc4 100644
--- a/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss
+++ b/packages/core/src/components/ButtonGroup/ButtonGroup.module.scss
@@ -64,6 +64,6 @@
   cursor: not-allowed;
 }
 
-.stretch {
+.fullWidth {
   flex: 1;
 }
diff --git a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx b/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
index e641ede594..e3c70d3403 100644
--- a/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/core/src/components/ButtonGroup/ButtonGroup.tsx
@@ -49,7 +49,7 @@ export interface ButtonGroupProps extends VibeComponentProps {
   tooltipContainerSelector?: string;
   tooltipMoveBy?: MoveBy;
   children?: React.ReactNode;
-  stretch: boolean;
+  fellWidth?: boolean;
 }
 
 const ButtonGroup: VibeComponent<ButtonGroupProps, HTMLDivElement> & {
@@ -76,7 +76,7 @@ const ButtonGroup: VibeComponent<ButtonGroupProps, HTMLDivElement> & {
       tooltipMoveBy,
       id,
       "data-testid": dataTestId,
-      stretch = false
+      fellWidth = false
     },
     ref
   ) => {
@@ -130,7 +130,7 @@ const ButtonGroup: VibeComponent<ButtonGroupProps, HTMLDivElement> & {
               [styles.selected]: isSelected,
               [styles.disabled]: disabled,
               [styles.buttonDisabled]: option.disabled,
-              [styles.stretch]: stretch
+              [styles.fellWidth]: fellWidth
             })}
             activeButtonClassName={styles.activeButton}
           >
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
index 0df1ce398c..ed1481a8e0 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
@@ -209,11 +209,11 @@ For on and off actions, use the <StorybookLink page="Inputs/Toggle">Toggle</Stor
 
 <Canvas of={ButtonGroupStories.ButtonGroupAsToggle} />
 
-### Stretch Button group
+### Full width button group
 
 Use this option in order for the ButtonGroup to fill the entire width of its container
 
-<Canvas of={ButtonGroupStories.StretchedButtonGroup} />
+<Canvas of={ButtonGroupStories.FullWidthButtonGroup} />
 
 ## Related components
 
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
index 2a679d2735..8b1d41a126 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
@@ -253,11 +253,11 @@ export const ButtonGroupAsToggle: Story = {
   name: "Button group as toggle"
 };
 
-export const StretchedButtonGroup: Story = {
+export const FullWidthButtonGroup: Story = {
   render: () => (
     <div style={{ width: "100%" }}>
       <ButtonGroup
-        groupAriaLabel="Stretched Buttong Gfroup"
+        groupAriaLabel="Full Width Button Group"
         stretch
         value={1}
         options={[