From 99d2347d685db6f7b14f356bd411a8eed2efe2c6 Mon Sep 17 00:00:00 2001
From: Jonas-Omdal <jonasomdal@gmail.com>
Date: Wed, 6 Nov 2024 10:27:47 +0100
Subject: [PATCH 1/2] feat(Button): add new prop fullwidth

---
 .changeset/cold-mice-doubt.md                 |  5 ++++
 .../components/components/ButtonScreen.tsx    | 13 ++++++++++
 .../src/components/Button/Button.tsx          | 26 ++++++++++++++++---
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/cold-mice-doubt.md

diff --git a/.changeset/cold-mice-doubt.md b/.changeset/cold-mice-doubt.md
new file mode 100644
index 000000000..60f030bbc
--- /dev/null
+++ b/.changeset/cold-mice-doubt.md
@@ -0,0 +1,5 @@
+---
+"@equinor/mad-components": minor
+---
+
+Added `fullWidth` prop to the `Button` component
diff --git a/apps/chronicles/screens/components/components/ButtonScreen.tsx b/apps/chronicles/screens/components/components/ButtonScreen.tsx
index 64a4d1d2a..eb2ddf1b6 100644
--- a/apps/chronicles/screens/components/components/ButtonScreen.tsx
+++ b/apps/chronicles/screens/components/components/ButtonScreen.tsx
@@ -53,6 +53,19 @@ export const ButtonScreen = () => {
                 <Button title="Disabled" variant="ghost" disabled />
             </View>
             <Spacer />
+
+            <Typography variant="h2">fullWidth</Typography>
+            <Typography>
+                With use of the fullWidth prop icon floats to the edges of the button whil the ext
+                stay centered
+            </Typography>
+            <View style={{ gap: 12 }}>
+                <Button title="With fullwidth" iconName="dog" iconPosition="leading" fullWidth />
+                <Button title="With fullwidth" iconName="cat" iconPosition="trailing" fullWidth />
+                <Button title="without fullwidth" iconName="bird" />
+            </View>
+            <Spacer />
+
             <View style={styles.buttonRow}>
                 <Button title="Loading" loading />
                 <Button title="Loading" loading disabled />
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index 1b035f471..e11b6a949 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -31,6 +31,10 @@ export type ButtonSpecificProps = {
      * Boolean value indicating whether or not the button should be in its loading state.
      */
     loading?: boolean;
+    /**
+     * Boolean value that floats icon to the edges of the button while the text stay centered.
+     */
+    fullWidth?: boolean;
     /**
      * Name of the icon to use with the title.
      */
@@ -63,6 +67,7 @@ export const Button = forwardRef<View, ButtonProps>(
             variant = "contained",
             disabled = false,
             loading = false,
+            fullWidth = false,
             iconName,
             iconPosition = "leading",
             onPress = () => null,
@@ -83,18 +88,23 @@ export const Button = forwardRef<View, ButtonProps>(
             toggleStatus: isToggleButton ? toggleData.isSelected : false,
             groupData,
             disabled,
+            fullWidth,
         });
 
         const ButtonContent = () => (
             <>
                 {iconName && iconPosition === "leading" && (
-                    <Icon name={iconName} color={styles.textStyle.color} />
+                    <View style={styles.leadingIcon}>
+                        <Icon name={iconName} color={styles.textStyle.color} />
+                    </View>
                 )}
                 <Typography group="interactive" variant="button" style={styles.textStyle}>
                     {title}
                 </Typography>
                 {iconName && iconPosition === "trailing" && (
-                    <Icon name={iconName} color={styles.textStyle.color} />
+                    <View style={styles.trailingIcon}>
+                        <Icon name={iconName} color={styles.textStyle.color} />
+                    </View>
                 )}
             </>
         );
@@ -133,10 +143,11 @@ type ButtonStyleSheetProps = {
     color: "primary" | "secondary" | "danger";
     variant: "contained" | "outlined" | "ghost";
     disabled: boolean;
+    fullWidth: boolean;
 };
 
 const themeStyles = EDSStyleSheet.create((theme, props: ButtonStyleSheetProps) => {
-    const { color, isToggleButton, toggleStatus, groupData, disabled } = props;
+    const { color, isToggleButton, toggleStatus, groupData, disabled, fullWidth } = props;
     let { variant } = props;
 
     variant = isToggleButton ? (toggleStatus ? "contained" : "outlined") : variant;
@@ -175,8 +186,17 @@ const themeStyles = EDSStyleSheet.create((theme, props: ButtonStyleSheetProps) =
             justifyContent: "center",
             gap: theme.spacing.button.iconGap,
         },
+        trailingIcon: {
+            flex: fullWidth ? 1 : undefined,
+            alignItems: fullWidth ? "flex-end" : undefined,
+        },
+        leadingIcon: {
+            flex: fullWidth ? 1 : undefined,
+            alignItems: fullWidth ? "flex-start" : undefined,
+        },
         textStyle: {
             color: textColor,
+            position: fullWidth ? "absolute" : undefined,
         },
     };
 });

From 11be2079d6a03aaddc4235946839c5097e98ef56 Mon Sep 17 00:00:00 2001
From: Jonas-Omdal <jonasomdal@gmail.com>
Date: Thu, 14 Nov 2024 08:00:18 +0100
Subject: [PATCH 2/2] fix typo

---
 .../chronicles/screens/components/components/ButtonScreen.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/chronicles/screens/components/components/ButtonScreen.tsx b/apps/chronicles/screens/components/components/ButtonScreen.tsx
index eb2ddf1b6..2040a057b 100644
--- a/apps/chronicles/screens/components/components/ButtonScreen.tsx
+++ b/apps/chronicles/screens/components/components/ButtonScreen.tsx
@@ -56,8 +56,8 @@ export const ButtonScreen = () => {
 
             <Typography variant="h2">fullWidth</Typography>
             <Typography>
-                With use of the fullWidth prop icon floats to the edges of the button whil the ext
-                stay centered
+                With use of the fullWidth prop icon floats to the edges of the button while the text
+                stay centered:
             </Typography>
             <View style={{ gap: 12 }}>
                 <Button title="With fullwidth" iconName="dog" iconPosition="leading" fullWidth />