From 6617497d0fc13ef39dba11138aae848c0f7f9485 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Mon, 25 Jul 2022 12:32:56 +0200
Subject: [PATCH 01/15] Remove material from button component

---
 lib/src/button/Button.tsx                     | 218 +++++++++---------
 lib/src/button/types.ts                       |  10 +-
 .../components/button/code/ButtonCodePage.tsx |   8 +-
 3 files changed, 116 insertions(+), 120 deletions(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index a04699989..d70894cfa 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -1,6 +1,4 @@
-// @ts-nocheck
 import React, { useContext } from "react";
-import Button from "@material-ui/core/Button";
 import styled, { ThemeProvider } from "styled-components";
 import { spaces } from "../common/variables.js";
 import { getMargin } from "../common/utils.js";
@@ -8,6 +6,21 @@ import useTheme from "../useTheme";
 import BackgroundColorContext from "../BackgroundColorContext";
 import ButtonPropsType from "./types";
 
+const sizes = {
+  small: "42px",
+  medium: "120px",
+  large: "240px",
+  fillParent: "100%",
+  fitContent: "unset",
+};
+
+const calculateWidth = (margin, size) => {
+  if (size === "fillParent") {
+    return `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
+  }
+  return sizes[size];
+};
+
 const DxcButton = ({
   label = "",
   mode = "primary",
@@ -31,22 +44,14 @@ const DxcButton = ({
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <DxCButton
-        type={type}
-        margin={margin}
-        mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
-        disabled={disabled}
-        iconPosition={iconPosition}
-        size={size}
-        backgroundType={backgroundType}
-        icon={icon}
-      >
+      <ButtonContainer margin={margin} size={size} backgroundType={backgroundType}>
         <Button
           type={type}
+          mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
           disabled={disabled}
-          disableRipple
           aria-disabled={disabled}
           tabIndex={disabled ? -1 : tabIndex}
+          backgroundType={backgroundType}
           onClick={() => {
             onClick();
           }}
@@ -59,56 +64,25 @@ const DxcButton = ({
           )}
           {label && iconPosition === "before" && labelComponent}
         </Button>
-      </DxCButton>
+      </ButtonContainer>
     </ThemeProvider>
   );
 };
 
-const sizes = {
-  small: "42px",
-  medium: "120px",
-  large: "240px",
-  fillParent: "100%",
-  fitContent: "unset",
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
 };
-
-const calculateWidth = (margin, size) => {
-  if (size === "fillParent") {
-    return `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
-  }
-  return sizes[size];
+type ButtonContainerPropsType = {
+  margin?: Space | Margin;
+  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+  backgroundType?: "dark" | "light";
 };
 
-const LabelContainer = styled.span`
-  line-height: ${(props) => props.theme.labelFontLineHeight};
-  font-size: ${(props) => props.theme.fontSize};
-  text-overflow: ellipsis;
-  overflow: hidden;
-  text-transform: none;
-  white-space: nowrap;
-  margin-right: ${(props) => (!props.icon || props.iconPosition === "before" ? "8px" : "0px")};
-  margin-left: ${(props) => (!props.icon || props.iconPosition === "after" ? "8px" : "0px")};
-`;
-
-const IconContainer = styled.div`
-  max-height: 24px;
-  max-width: 24px;
-  margin-left: ${(props) =>
-    !props.label ? "0px" : (props.iconPosition === "after" && props.label !== "" && "8px") || "8px"};
-  margin-right: ${(props) =>
-    !props.label ? "0px" : (props.iconPosition === "before" && props.label !== "" && "8px") || "8px"};
-  overflow: hidden;
-  display: flex;
-  img,
-  svg {
-    height: 100%;
-    width: 100%;
-  }
-`;
-
-const ButtonIcon = styled.img``;
-
-const DxCButton = styled.div`
+const ButtonContainer = styled.div<ButtonContainerPropsType>`
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -118,43 +92,44 @@ const DxCButton = styled.div`
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-
   display: inline-block;
   width: ${(props) => calculateWidth(props.margin, props.size)};
-  cursor: ${(props) => (props.disabled && "not-allowed") || "pointer"};
-
-  .MuiButtonBase-root {
-    padding-left: ${(props) => props.theme.paddingLeft};
-    padding-right: ${(props) => props.theme.paddingRight};
-    padding-top: ${(props) => props.theme.paddingTop};
-    padding-bottom: ${(props) => props.theme.paddingBottom};
-
-    .MuiButton-label {
-      display: flex;
-      align-items: center;
-    }
+`;
 
-    box-shadow: 0 0 0 2px transparent;
-    font-family: ${(props) => props.theme.fontFamily};
-    font-size: ${(props) => props.theme.fontSize};
-    font-weight: ${(props) => props.theme.fontWeight};
-    letter-spacing: ${(props) => props.theme.labelLetterSpacing};
-    min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "unset"};
-    width: 100%;
-    height: 40px;
-    transition: none !important;
+type ButtonProps = {
+  mode?: "primary" | "secondary" | "text";
+  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+  backgroundType?: "dark" | "light";
+};
 
-    &:focus {
-      border-color: transparent;
-      box-shadow: 0 0 0 2px
-        ${(props) =>
-          props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor};
-    }
+const Button = styled.button<ButtonProps>`
+  padding-left: ${(props) => props.theme.paddingLeft};
+  padding-right: ${(props) => props.theme.paddingRight};
+  padding-top: ${(props) => props.theme.paddingTop};
+  padding-bottom: ${(props) => props.theme.paddingBottom};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 2px transparent;
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: ${(props) => props.theme.fontSize};
+  font-weight: ${(props) => props.theme.fontWeight};
+  letter-spacing: ${(props) => props.theme.labelLetterSpacing};
+  min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "unset"};
+  width: 100%;
+  height: 40px;
+  cursor: pointer;
+  &:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px
+      ${(props) =>
+        props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor};
+  }
 
-    ${(props) => {
-      const { mode, backgroundType } = props;
-      if (mode === "primary") {
-        return `
+  ${(props) => {
+    const { mode, backgroundType } = props;
+    if (mode === "primary") {
+      return `
         border-radius: ${props.theme.primaryBorderRadius};
         border-width:  ${props.theme.primaryBorderThickness};
         border-style:  ${props.theme.primaryBorderStyle};
@@ -168,8 +143,7 @@ const DxCButton = styled.div`
           backgroundType && backgroundType === "dark"
             ? props.theme.primaryFontColorOnDark
             : props.theme.primaryFontColor
-        } !important;
-
+        };
         &:hover {
           background-color: ${
             backgroundType === "dark"
@@ -182,7 +156,7 @@ const DxCButton = styled.div`
             backgroundType === "dark"
               ? props.theme.primaryActiveBackgroundColorOnDark
               : props.theme.primaryActiveBackgroundColor
-          } !important;
+          };
           border-color: transparent;
           box-shadow: 0 0 0 2px ${
             backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
@@ -199,11 +173,11 @@ const DxCButton = styled.div`
             backgroundType === "dark"
               ? props.theme.primaryDisabledFontColorOnDark
               : props.theme.primaryDisabledFontColor
-          } !important; 
+          };
         }
       `;
-      } else if (mode === "secondary") {
-        return `
+    } else if (mode === "secondary") {
+      return `
         border-radius: ${props.theme.secondaryBorderRadius};
         border-width:  ${props.theme.secondaryBorderThickness};
         border-style:  ${props.theme.secondaryBorderStyle};
@@ -213,13 +187,10 @@ const DxCButton = styled.div`
         background-color: ${
           backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor
         };
-        color: ${
-          backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor
-        } !important;
+        color: ${backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor};
         border-color: ${
           backgroundType === "dark" ? props.theme.secondaryBorderColorOnDark : props.theme.secondaryBorderColor
         };
-
         &:hover {
           background-color: ${
             backgroundType === "dark"
@@ -228,17 +199,17 @@ const DxCButton = styled.div`
           };
           color: ${
             backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
-          } !important;
+          };
         }
         &:active {
           background-color: ${
             backgroundType === "dark"
               ? props.theme.secondaryActiveBackgroundColorOnDark
               : props.theme.secondaryActiveBackgroundColor
-          } !important;
+          };
           color: ${
             backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
-          } !important;
+          };
           border-color: transparent;
           box-shadow: 0 0 0 2px ${
             backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
@@ -250,12 +221,12 @@ const DxCButton = styled.div`
             backgroundType === "dark"
               ? props.theme.secondaryDisabledBackgroundColorOnDark
               : props.theme.secondaryDisabledBackgroundColor
-          } !important;
+          };
           color: ${
             backgroundType === "dark"
               ? props.theme.secondaryDisabledFontColorOnDark
               : props.theme.secondaryDisabledFontColor
-          } !important;
+          };
           border-color: ${
             backgroundType === "dark"
               ? props.theme.secondaryDisabledBorderColorOnDark
@@ -263,8 +234,8 @@ const DxCButton = styled.div`
           };
           }
         `;
-      } else if (mode === "text") {
-        return `
+    } else if (mode === "text") {
+      return `
         border-radius: ${props.theme.textBorderRadius};
         border-width:  ${props.theme.textBorderThickness};
         border-style:  ${props.theme.textBorderStyle};
@@ -275,7 +246,6 @@ const DxCButton = styled.div`
           backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor
         };
         color: ${backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor} !important;
-
         &:hover {
           background-color: ${
             backgroundType === "dark"
@@ -288,7 +258,7 @@ const DxCButton = styled.div`
             backgroundType === "dark"
               ? props.theme.textActiveBackgroundColorOnDark
               : props.theme.textActiveBackgroundColor
-          } !important;
+          };
           border-color: transparent;
           box-shadow: 0 0 0 2px ${
             backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
@@ -298,7 +268,7 @@ const DxCButton = styled.div`
           cursor:not-allowed;
           color: ${
             backgroundType === "dark" ? props.theme.textDisabledFontColorOnDark : props.theme.textDisabledFontColor
-          } !important;
+          };
           background-color: ${
             backgroundType === "dark"
               ? props.theme.textDisabledBackgroundColorOnDark
@@ -306,9 +276,37 @@ const DxCButton = styled.div`
           };
         }
       `;
-      }
-    }}
+    }
+  }}
+`;
+
+const LabelContainer = styled.span<ButtonPropsType>`
+  line-height: ${(props) => props.theme.labelFontLineHeight};
+  font-size: ${(props) => props.theme.fontSize};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-transform: none;
+  white-space: nowrap;
+  margin-right: ${(props) => (!props.icon || props.iconPosition === "before" ? "8px" : "0px")};
+  margin-left: ${(props) => (!props.icon || props.iconPosition === "after" ? "8px" : "0px")};
+`;
+
+const IconContainer = styled.div<ButtonPropsType>`
+  max-height: 24px;
+  max-width: 24px;
+  margin-left: ${(props) =>
+    !props.label ? "0px" : (props.iconPosition === "after" && props.label !== "" && "8px") || "8px"};
+  margin-right: ${(props) =>
+    !props.label ? "0px" : (props.iconPosition === "before" && props.label !== "" && "8px") || "8px"};
+  overflow: hidden;
+  display: flex;
+  img,
+  svg {
+    height: 100%;
+    width: 100%;
   }
 `;
 
+const ButtonIcon = styled.img``;
+
 export default DxcButton;
diff --git a/lib/src/button/types.ts b/lib/src/button/types.ts
index f6434961d..1205d7abd 100644
--- a/lib/src/button/types.ts
+++ b/lib/src/button/types.ts
@@ -1,5 +1,5 @@
 type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
+export type Margin = {
   top?: Space;
   bottom?: Space;
   left?: Space;
@@ -9,11 +9,11 @@ type SVG = React.SVGProps<SVGSVGElement>;
 
 type Props = {
   /**
-   * Text to be placed next to the button.
+   * Text to be placed in the button.
    */
   label?: string;
   /**
-   * Uses one of the available button modes.
+   * The available button modes.
    */
   mode?: "primary" | "secondary" | "text";
   /**
@@ -25,11 +25,11 @@ type Props = {
    */
   iconPosition?: "before" | "after";
   /**
-   * This prop corresponds to the 'type' prop of the button in html.
+   * 'type' html prop of the button.
    */
   type?: "button" | "reset" | "submit";
   /**
-   * Element or path used as the icon that will be placed next to the button label.
+   * Element or path used as the icon that will be placed next to the label.
    */
   icon?: string | SVG;
   /**
diff --git a/website/screens/components/button/code/ButtonCodePage.tsx b/website/screens/components/button/code/ButtonCodePage.tsx
index 39baffd30..fb4e455a4 100644
--- a/website/screens/components/button/code/ButtonCodePage.tsx
+++ b/website/screens/components/button/code/ButtonCodePage.tsx
@@ -26,21 +26,19 @@ const sections = [
             <td>
               <Code>'primary'</Code>
             </td>
-            <td>Uses one of the available button modes.</td>
+            <td>The available button modes.</td>
           </tr>
           <tr>
             <td>type: 'button' | 'reset' | 'submit'</td>
             <td>
               <Code>'button'</Code>
             </td>
-            <td>
-              This prop corresponds to the 'type' prop of the button in html.
-            </td>
+            <td>'type' html prop of the button.</td>
           </tr>
           <tr>
             <td>label: string</td>
             <td></td>
-            <td>Text to be placed next to the button.</td>
+            <td>Text to be placed in the button.</td>
           </tr>
           <tr>
             <td>icon: node | string</td>

From 4670277f150a32f4181b9a727810ea427626cabf Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Mon, 25 Jul 2022 12:35:19 +0200
Subject: [PATCH 02/15] Small change in button

---
 lib/src/button/Button.tsx | 9 +--------
 lib/src/button/types.ts   | 2 +-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index d70894cfa..61c700a8d 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -4,7 +4,7 @@ import { spaces } from "../common/variables.js";
 import { getMargin } from "../common/utils.js";
 import useTheme from "../useTheme";
 import BackgroundColorContext from "../BackgroundColorContext";
-import ButtonPropsType from "./types";
+import ButtonPropsType, { Space, Margin } from "./types";
 
 const sizes = {
   small: "42px",
@@ -69,13 +69,6 @@ const DxcButton = ({
   );
 };
 
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
 type ButtonContainerPropsType = {
   margin?: Space | Margin;
   size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
diff --git a/lib/src/button/types.ts b/lib/src/button/types.ts
index 1205d7abd..2c4a3ecbd 100644
--- a/lib/src/button/types.ts
+++ b/lib/src/button/types.ts
@@ -1,4 +1,4 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 export type Margin = {
   top?: Space;
   bottom?: Space;

From 562573646ccd4f1e3b067228dcef169b05d47c47 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Mon, 25 Jul 2022 12:51:54 +0200
Subject: [PATCH 03/15] Change in button styles

---
 lib/src/button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 61c700a8d..b89b14422 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -238,7 +238,7 @@ const Button = styled.button<ButtonProps>`
         background-color: ${
           backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor
         };
-        color: ${backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor} !important;
+        color: ${backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor};
         &:hover {
           background-color: ${
             backgroundType === "dark"

From 595ccafa006a21330899e72d7a725acf377c893a Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Tue, 26 Jul 2022 08:53:10 +0200
Subject: [PATCH 04/15] Fix button focus

---
 lib/src/button/Button.tsx | 43 ++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index b89b14422..89c363789 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -113,14 +113,14 @@ const Button = styled.button<ButtonProps>`
   height: 40px;
   cursor: pointer;
   &:focus {
-    border-color: transparent;
+    outline: none;
     box-shadow: 0 0 0 2px
       ${(props) =>
         props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor};
   }
 
   ${(props) => {
-    const { mode, backgroundType } = props;
+    const { mode, backgroundType, disabled } = props;
     if (mode === "primary") {
       return `
         border-radius: ${props.theme.primaryBorderRadius};
@@ -150,10 +150,14 @@ const Button = styled.button<ButtonProps>`
               ? props.theme.primaryActiveBackgroundColorOnDark
               : props.theme.primaryActiveBackgroundColor
           };
-          border-color: transparent;
-          box-shadow: 0 0 0 2px ${
-            backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
-          };
+          outline: none;
+          box-shadow: ${
+            !disabled
+              ? `0 0 0 2px ${
+                  backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
+                }`
+              : ""
+          }
         }
         &:disabled { 
           cursor: not-allowed;
@@ -194,6 +198,9 @@ const Button = styled.button<ButtonProps>`
             backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
           };
         }
+        &:focus {
+          border-color: transparent;
+        }
         &:active {
           background-color: ${
             backgroundType === "dark"
@@ -203,10 +210,14 @@ const Button = styled.button<ButtonProps>`
           color: ${
             backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
           };
-          border-color: transparent;
-          box-shadow: 0 0 0 2px ${
-            backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
-          };
+          outline: none;
+          box-shadow: ${
+            !disabled
+              ? `0 0 0 2px ${
+                  backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
+                }`
+              : ""
+          }
         }
         &:disabled {
           cursor: not-allowed;
@@ -252,10 +263,14 @@ const Button = styled.button<ButtonProps>`
               ? props.theme.textActiveBackgroundColorOnDark
               : props.theme.textActiveBackgroundColor
           };
-          border-color: transparent;
-          box-shadow: 0 0 0 2px ${
-            backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
-          };
+          outline: none;
+          box-shadow: ${
+            !disabled
+              ? `0 0 0 2px ${
+                  backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
+                }`
+              : ""
+          }
         }
         &:disabled {
           cursor:not-allowed;

From 4c12e52aeb488460d7c0593bc55635bd9296ce6e Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Tue, 26 Jul 2022 09:01:54 +0200
Subject: [PATCH 05/15] Fix button focus

---
 lib/src/button/Button.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 89c363789..3454a0769 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -210,6 +210,7 @@ const Button = styled.button<ButtonProps>`
           color: ${
             backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
           };
+          border-color: transparent;
           outline: none;
           box-shadow: ${
             !disabled

From c7b550850d01bcd74945ed2c4dd1c0c955e3561a Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 08:41:33 +0200
Subject: [PATCH 06/15] Refactor styles button component

---
 app/src/pages/Button.jsx                      |   4 +-
 .../cdk-components/button/examples/modes.js   |   4 +-
 .../button/examples/withIcon.js               |   2 +-
 lib/src/button/Button.tsx                     | 320 +++++++++---------
 4 files changed, 161 insertions(+), 169 deletions(-)

diff --git a/app/src/pages/Button.jsx b/app/src/pages/Button.jsx
index 9fdec342e..8574aecff 100644
--- a/app/src/pages/Button.jsx
+++ b/app/src/pages/Button.jsx
@@ -29,8 +29,8 @@ function App() {
 
   return (
     <div>
-      <div>
-        <h4>Disabled</h4>
+      <h4>Disabled</h4>
+      <div style={{ display: "flex" }}>
         <DxcButton
           mode="primary"
           label="Custom Button"
diff --git a/docs/src/pages/components/cdk-components/button/examples/modes.js b/docs/src/pages/components/cdk-components/button/examples/modes.js
index 53acddef0..62a845d04 100644
--- a/docs/src/pages/components/cdk-components/button/examples/modes.js
+++ b/docs/src/pages/components/cdk-components/button/examples/modes.js
@@ -6,7 +6,7 @@ const code = `() => {
   };
 
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       <DxcButton
         mode="primary"
         label="Primary Button"
@@ -30,7 +30,7 @@ const code = `() => {
 }`;
 
 const scope = {
-  DxcButton
+  DxcButton,
 };
 
 export default { code, scope };
diff --git a/docs/src/pages/components/cdk-components/button/examples/withIcon.js b/docs/src/pages/components/cdk-components/button/examples/withIcon.js
index b26df54c3..1bfa6ad68 100644
--- a/docs/src/pages/components/cdk-components/button/examples/withIcon.js
+++ b/docs/src/pages/components/cdk-components/button/examples/withIcon.js
@@ -7,7 +7,7 @@ const code = `() => {
   };
 
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       <DxcButton
         label="Primary Button"
         onClick={onClick}
diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 3454a0769..d06d490ae 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -44,38 +44,39 @@ const DxcButton = ({
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <ButtonContainer margin={margin} size={size} backgroundType={backgroundType}>
-        <Button
-          type={type}
-          mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
-          disabled={disabled}
-          aria-disabled={disabled}
-          tabIndex={disabled ? -1 : tabIndex}
-          backgroundType={backgroundType}
-          onClick={() => {
-            onClick();
-          }}
-        >
-          {label && iconPosition === "after" && labelComponent}
-          {icon && (
-            <IconContainer label={label} iconPosition={iconPosition}>
-              {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
-            </IconContainer>
-          )}
-          {label && iconPosition === "before" && labelComponent}
-        </Button>
-      </ButtonContainer>
+      <Button
+        type={type}
+        mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
+        disabled={disabled}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : tabIndex}
+        backgroundType={backgroundType}
+        margin={margin}
+        size={size}
+        onClick={() => {
+          onClick();
+        }}
+      >
+        {label && iconPosition === "after" && labelComponent}
+        {icon && (
+          <IconContainer label={label} iconPosition={iconPosition}>
+            {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
+          </IconContainer>
+        )}
+        {label && iconPosition === "before" && labelComponent}
+      </Button>
     </ThemeProvider>
   );
 };
 
-type ButtonContainerPropsType = {
+type ButtonProps = {
+  mode?: "primary" | "secondary" | "text";
   margin?: Space | Margin;
   size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
   backgroundType?: "dark" | "light";
 };
 
-const ButtonContainer = styled.div<ButtonContainerPropsType>`
+const Button = styled.button<ButtonProps>`
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -85,17 +86,8 @@ const ButtonContainer = styled.div<ButtonContainerPropsType>`
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-  display: inline-block;
   width: ${(props) => calculateWidth(props.margin, props.size)};
-`;
-
-type ButtonProps = {
-  mode?: "primary" | "secondary" | "text";
-  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
-  backgroundType?: "dark" | "light";
-};
-
-const Button = styled.button<ButtonProps>`
+  height: 40px;
   padding-left: ${(props) => props.theme.paddingLeft};
   padding-right: ${(props) => props.theme.paddingRight};
   padding-top: ${(props) => props.theme.paddingTop};
@@ -108,9 +100,6 @@ const Button = styled.button<ButtonProps>`
   font-size: ${(props) => props.theme.fontSize};
   font-weight: ${(props) => props.theme.fontWeight};
   letter-spacing: ${(props) => props.theme.labelLetterSpacing};
-  min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "unset"};
-  width: 100%;
-  height: 40px;
   cursor: pointer;
   &:focus {
     outline: none;
@@ -118,99 +107,131 @@ const Button = styled.button<ButtonProps>`
       ${(props) =>
         props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor};
   }
-
   ${(props) => {
     const { mode, backgroundType, disabled } = props;
-    if (mode === "primary") {
-      return `
-        border-radius: ${props.theme.primaryBorderRadius};
-        border-width:  ${props.theme.primaryBorderThickness};
-        border-style:  ${props.theme.primaryBorderStyle};
-        font-family:   ${props.theme.primaryFontFamily};
-        font-size:     ${props.theme.primaryFontSize};
-        font-weight:   ${props.theme.primaryFontWeight};
-        background-color: ${
-          backgroundType === "dark" ? props.theme.primaryBackgroundColorOnDark : props.theme.primaryBackgroundColor
+    return `
+        border-radius: ${
+          props.mode === "primary"
+            ? props.theme.primaryBorderRadius
+            : props.mode === "secondary"
+            ? props.theme.secondaryBorderRadius
+            : props.theme.textBorderRadius
         };
-        color: ${
-          backgroundType && backgroundType === "dark"
-            ? props.theme.primaryFontColorOnDark
-            : props.theme.primaryFontColor
+        border-width: ${
+          props.mode === "primary"
+            ? props.theme.primaryBorderThickness
+            : props.mode === "secondary"
+            ? props.theme.secondaryBorderThickness
+            : props.theme.textBorderThickness
+        };
+        border-style: ${
+          mode === "primary"
+            ? props.theme.primaryBorderStyle
+            : mode === "secondary"
+            ? props.theme.secondaryBorderStyle
+            : props.theme.textBorderStyle
+        };
+        font-family: ${
+          mode === "primary"
+            ? props.theme.primaryFontFamily
+            : mode === "secondary"
+            ? props.theme.secondaryFontFamily
+            : props.theme.textFontFamily
+        };
+        font-size: ${
+          mode === "primary"
+            ? props.theme.primaryFontSize
+            : mode === "secondary"
+            ? props.theme.secondaryFontSize
+            : props.theme.textFontSize
+        };
+        font-weight: ${
+          mode === "primary"
+            ? props.theme.primaryFontWeight
+            : mode === "secondary"
+            ? props.theme.secondaryFontWeight
+            : props.theme.textFontWeight
         };
-        &:hover {
-          background-color: ${
-            backgroundType === "dark"
-              ? props.theme.primaryHoverBackgroundColorOnDark
-              : props.theme.primaryHoverBackgroundColor
-          };
-        }
-        &:active {
-          background-color: ${
-            backgroundType === "dark"
-              ? props.theme.primaryActiveBackgroundColorOnDark
-              : props.theme.primaryActiveBackgroundColor
-          };
-          outline: none;
-          box-shadow: ${
-            !disabled
-              ? `0 0 0 2px ${
-                  backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
-                }`
-              : ""
-          }
-        }
-        &:disabled { 
-          cursor: not-allowed;
-          background-color: ${
-            backgroundType === "dark"
-              ? props.theme.primaryDisabledBackgroundColorOnDark
-              : props.theme.primaryDisabledBackgroundColor
-          };
-          color: ${
-            backgroundType === "dark"
-              ? props.theme.primaryDisabledFontColorOnDark
-              : props.theme.primaryDisabledFontColor
-          };
-        }
-      `;
-    } else if (mode === "secondary") {
-      return `
-        border-radius: ${props.theme.secondaryBorderRadius};
-        border-width:  ${props.theme.secondaryBorderThickness};
-        border-style:  ${props.theme.secondaryBorderStyle};
-        font-family:   ${props.theme.secondaryFontFamily};
-        font-size:     ${props.theme.secondaryFontSize};
-        font-weight:   ${props.theme.secondaryFontWeight};
         background-color: ${
-          backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor
+          mode === "primary"
+            ? backgroundType === "dark"
+              ? props.theme.primaryBackgroundColorOnDark
+              : props.theme.primaryBackgroundColor
+            : mode === "secondary"
+            ? backgroundType === "dark"
+              ? props.theme.secondaryBackgroundColorOnDark
+              : props.theme.secondaryBackgroundColor
+            : backgroundType === "dark"
+            ? props.theme.textBackgroundColorOnDark
+            : props.theme.textBackgroundColor
+        };
+        color: ${
+          mode === "primary"
+            ? backgroundType === "dark"
+              ? props.theme.primaryFontColorOnDark
+              : props.theme.primaryFontColor
+            : mode === "secondary"
+            ? backgroundType === "dark"
+              ? props.theme.secondaryFontColorOnDark
+              : props.theme.secondaryFontColor
+            : backgroundType === "dark"
+            ? props.theme.textFontColorOnDark
+            : props.theme.textFontColor
         };
-        color: ${backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor};
         border-color: ${
-          backgroundType === "dark" ? props.theme.secondaryBorderColorOnDark : props.theme.secondaryBorderColor
+          mode === "secondary"
+            ? backgroundType === "dark"
+              ? props.theme.secondaryBorderColorOnDark
+              : props.theme.secondaryBorderColor
+            : ""
         };
         &:hover {
           background-color: ${
-            backgroundType === "dark"
-              ? props.theme.secondaryHoverBackgroundColorOnDark
-              : props.theme.secondaryHoverBackgroundColor
+            mode === "primary"
+              ? backgroundType === "dark"
+                ? props.theme.primaryHoverBackgroundColorOnDark
+                : props.theme.primaryHoverBackgroundColor
+              : mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryHoverBackgroundColorOnDark
+                : props.theme.secondaryHoverBackgroundColor
+              : backgroundType === "dark"
+              ? props.theme.textHoverBackgroundColorOnDark
+              : props.theme.textHoverBackgroundColor
           };
           color: ${
-            backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
+            mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryHoverFontColorOnDark
+                : props.theme.secondaryHoverFontColor
+              : ""
           };
         }
         &:focus {
-          border-color: transparent;
+          border-color: ${mode === "secondary" ? "transparent" : ""};
         }
         &:active {
           background-color: ${
-            backgroundType === "dark"
-              ? props.theme.secondaryActiveBackgroundColorOnDark
-              : props.theme.secondaryActiveBackgroundColor
+            mode === "primary"
+              ? backgroundType === "dark"
+                ? props.theme.primaryActiveBackgroundColorOnDark
+                : props.theme.primaryActiveBackgroundColor
+              : mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryActiveBackgroundColorOnDark
+                : props.theme.secondaryActiveBackgroundColor
+              : backgroundType === "dark"
+              ? props.theme.textActiveBackgroundColorOnDark
+              : props.theme.textActiveBackgroundColor
           };
           color: ${
-            backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor
+            mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryHoverFontColorOnDark
+                : props.theme.secondaryHoverFontColor
+              : ""
           };
-          border-color: transparent;
+          border-color: ${mode === "secondary" ? "transparent" : ""};
           outline: none;
           box-shadow: ${
             !disabled
@@ -218,74 +239,45 @@ const Button = styled.button<ButtonProps>`
                   backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
                 }`
               : ""
-          }
+          };
         }
         &:disabled {
           cursor: not-allowed;
           background-color: ${
-            backgroundType === "dark"
-              ? props.theme.secondaryDisabledBackgroundColorOnDark
-              : props.theme.secondaryDisabledBackgroundColor
+            mode === "primary"
+              ? backgroundType === "dark"
+                ? props.theme.primaryDisabledBackgroundColorOnDark
+                : props.theme.primaryDisabledBackgroundColor
+              : mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryDisabledBackgroundColorOnDark
+                : props.theme.secondaryDisabledBackgroundColor
+              : backgroundType === "dark"
+              ? props.theme.textDisabledBackgroundColorOnDark
+              : props.theme.textDisabledBackgroundColor
           };
           color: ${
-            backgroundType === "dark"
-              ? props.theme.secondaryDisabledFontColorOnDark
-              : props.theme.secondaryDisabledFontColor
+            mode === "primary"
+              ? backgroundType === "dark"
+                ? props.theme.primaryDisabledFontColorOnDark
+                : props.theme.primaryDisabledFontColor
+              : mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryDisabledFontColorOnDark
+                : props.theme.secondaryDisabledFontColor
+              : backgroundType === "dark"
+              ? props.theme.textDisabledFontColorOnDark
+              : props.theme.textDisabledFontColor
           };
           border-color: ${
-            backgroundType === "dark"
-              ? props.theme.secondaryDisabledBorderColorOnDark
-              : props.theme.secondaryDisabledBorderColor
-          };
-          }
-        `;
-    } else if (mode === "text") {
-      return `
-        border-radius: ${props.theme.textBorderRadius};
-        border-width:  ${props.theme.textBorderThickness};
-        border-style:  ${props.theme.textBorderStyle};
-        font-family:   ${props.theme.textFontFamily};
-        font-size:     ${props.theme.textFontSize};
-        font-weight:   ${props.theme.textFontWeight};
-        background-color: ${
-          backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor
-        };
-        color: ${backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor};
-        &:hover {
-          background-color: ${
-            backgroundType === "dark"
-              ? props.theme.textHoverBackgroundColorOnDark
-              : props.theme.textHoverBackgroundColor
-          };
-        }
-        &:active {
-          background-color: ${
-            backgroundType === "dark"
-              ? props.theme.textActiveBackgroundColorOnDark
-              : props.theme.textActiveBackgroundColor
-          };
-          outline: none;
-          box-shadow: ${
-            !disabled
-              ? `0 0 0 2px ${
-                  backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor
-                }`
+            mode === "secondary"
+              ? backgroundType === "dark"
+                ? props.theme.secondaryDisabledBorderColorOnDark
+                : props.theme.secondaryDisabledBorderColor
               : ""
-          }
-        }
-        &:disabled {
-          cursor:not-allowed;
-          color: ${
-            backgroundType === "dark" ? props.theme.textDisabledFontColorOnDark : props.theme.textDisabledFontColor
-          };
-          background-color: ${
-            backgroundType === "dark"
-              ? props.theme.textDisabledBackgroundColorOnDark
-              : props.theme.textDisabledBackgroundColor
           };
         }
       `;
-    }
   }}
 `;
 

From 1719ec262813dc033c92bb66eacaaef0d5518c29 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 09:18:28 +0200
Subject: [PATCH 07/15] Updated button stories

---
 lib/src/button/Button.stories.tsx | 9 +++++++++
 lib/src/button/Button.tsx         | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/src/button/Button.stories.tsx b/lib/src/button/Button.stories.tsx
index 705cc04f0..4c977312d 100644
--- a/lib/src/button/Button.stories.tsx
+++ b/lib/src/button/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import DxcButton from "./Button";
+import DxcStack from "../stack/Stack";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
@@ -270,5 +271,13 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcButton label="Xxlarge margin" margin="xxlarge" />
     </ExampleContainer>
+    <Title title="Inside a stack" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcStack gutter="2rem">
+        <DxcButton label="Button" />
+        <DxcButton label="Button" />
+        <DxcButton label="Button" />
+      </DxcStack>
+    </ExampleContainer>
   </>
 );
diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index d06d490ae..c21e8be88 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -11,7 +11,7 @@ const sizes = {
   medium: "120px",
   large: "240px",
   fillParent: "100%",
-  fitContent: "unset",
+  fitContent: "fit-content",
 };
 
 const calculateWidth = (margin, size) => {

From d291c5b8682754f1c2e6df21b0503dd31d616f29 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 11:12:27 +0200
Subject: [PATCH 08/15] Fix button

---
 lib/src/button/Button.tsx | 63 +++++++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index c21e8be88..edaa2c9a2 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -44,39 +44,40 @@ const DxcButton = ({
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <Button
-        type={type}
-        mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
-        disabled={disabled}
-        aria-disabled={disabled}
-        tabIndex={disabled ? -1 : tabIndex}
-        backgroundType={backgroundType}
-        margin={margin}
-        size={size}
-        onClick={() => {
-          onClick();
-        }}
-      >
-        {label && iconPosition === "after" && labelComponent}
-        {icon && (
-          <IconContainer label={label} iconPosition={iconPosition}>
-            {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
-          </IconContainer>
-        )}
-        {label && iconPosition === "before" && labelComponent}
-      </Button>
+      <ButtonContainer margin={margin} size={size} backgroundType={backgroundType}>
+        <Button
+          type={type}
+          mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
+          disabled={disabled}
+          aria-disabled={disabled}
+          tabIndex={disabled ? -1 : tabIndex}
+          backgroundType={backgroundType}
+          margin={margin}
+          size={size}
+          onClick={() => {
+            onClick();
+          }}
+        >
+          {label && iconPosition === "after" && labelComponent}
+          {icon && (
+            <IconContainer label={label} iconPosition={iconPosition}>
+              {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
+            </IconContainer>
+          )}
+          {label && iconPosition === "before" && labelComponent}
+        </Button>
+      </ButtonContainer>
     </ThemeProvider>
   );
 };
 
-type ButtonProps = {
-  mode?: "primary" | "secondary" | "text";
+type ButtonContainerPropsType = {
   margin?: Space | Margin;
   size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
   backgroundType?: "dark" | "light";
 };
 
-const Button = styled.button<ButtonProps>`
+const ButtonContainer = styled.div<ButtonContainerPropsType>`
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -86,8 +87,17 @@ const Button = styled.button<ButtonProps>`
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
+  display: inline-block;
   width: ${(props) => calculateWidth(props.margin, props.size)};
-  height: 40px;
+`;
+
+type ButtonProps = {
+  mode?: "primary" | "secondary" | "text";
+  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+  backgroundType?: "dark" | "light";
+};
+
+const Button = styled.button<ButtonProps>`
   padding-left: ${(props) => props.theme.paddingLeft};
   padding-right: ${(props) => props.theme.paddingRight};
   padding-top: ${(props) => props.theme.paddingTop};
@@ -100,6 +110,9 @@ const Button = styled.button<ButtonProps>`
   font-size: ${(props) => props.theme.fontSize};
   font-weight: ${(props) => props.theme.fontWeight};
   letter-spacing: ${(props) => props.theme.labelLetterSpacing};
+  min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "fit-content"};
+  width: 100%;
+  height: 40px;
   cursor: pointer;
   &:focus {
     outline: none;

From 11bc9e190f9adfcdac18ac4b95d1972f37e0e175 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 11:13:48 +0200
Subject: [PATCH 09/15] Fix button

---
 lib/src/button/Button.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index edaa2c9a2..b6f17f449 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -52,7 +52,6 @@ const DxcButton = ({
           aria-disabled={disabled}
           tabIndex={disabled ? -1 : tabIndex}
           backgroundType={backgroundType}
-          margin={margin}
           size={size}
           onClick={() => {
             onClick();

From 7ae0f177996780e7ec7d54dbb36abb43d08eb2f7 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 11:22:25 +0200
Subject: [PATCH 10/15] Fix min-width button

---
 lib/src/button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index b6f17f449..4bb22b252 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -109,7 +109,7 @@ const Button = styled.button<ButtonProps>`
   font-size: ${(props) => props.theme.fontSize};
   font-weight: ${(props) => props.theme.fontWeight};
   letter-spacing: ${(props) => props.theme.labelLetterSpacing};
-  min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "fit-content"};
+  min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "unset"};
   width: 100%;
   height: 40px;
   cursor: pointer;

From 13a80734ba6f4bae1d1e255cf43c209919266b65 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 12:13:06 +0200
Subject: [PATCH 11/15] Remove button container

---
 lib/src/button/Button.tsx | 85 +++++++++++++++++++++------------------
 lib/src/button/types.ts   |  2 +-
 2 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 4bb22b252..8b9b9c77d 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -4,7 +4,7 @@ import { spaces } from "../common/variables.js";
 import { getMargin } from "../common/utils.js";
 import useTheme from "../useTheme";
 import BackgroundColorContext from "../BackgroundColorContext";
-import ButtonPropsType, { Space, Margin } from "./types";
+import ButtonPropsType, { Space, Margin, SVG } from "./types";
 
 const sizes = {
   small: "42px",
@@ -44,39 +44,39 @@ const DxcButton = ({
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <ButtonContainer margin={margin} size={size} backgroundType={backgroundType}>
-        <Button
-          type={type}
-          mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
-          disabled={disabled}
-          aria-disabled={disabled}
-          tabIndex={disabled ? -1 : tabIndex}
-          backgroundType={backgroundType}
-          size={size}
-          onClick={() => {
-            onClick();
-          }}
-        >
-          {label && iconPosition === "after" && labelComponent}
-          {icon && (
-            <IconContainer label={label} iconPosition={iconPosition}>
-              {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
-            </IconContainer>
-          )}
-          {label && iconPosition === "before" && labelComponent}
-        </Button>
-      </ButtonContainer>
+      <Button
+        type={type}
+        mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
+        disabled={disabled}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : tabIndex}
+        backgroundType={backgroundType}
+        size={size}
+        margin={margin}
+        onClick={() => {
+          onClick();
+        }}
+      >
+        {label && iconPosition === "after" && labelComponent}
+        {icon && (
+          <IconContainer label={label} iconPosition={iconPosition}>
+            {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
+          </IconContainer>
+        )}
+        {label && iconPosition === "before" && labelComponent}
+      </Button>
     </ThemeProvider>
   );
 };
 
-type ButtonContainerPropsType = {
+type ButtonProps = {
+  mode?: "primary" | "secondary" | "text";
   margin?: Space | Margin;
   size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
   backgroundType?: "dark" | "light";
 };
 
-const ButtonContainer = styled.div<ButtonContainerPropsType>`
+const Button = styled.button<ButtonProps>`
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   margin-top: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -86,22 +86,12 @@ const ButtonContainer = styled.div<ButtonContainerPropsType>`
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-  display: inline-block;
+  display: inline-flex;
   width: ${(props) => calculateWidth(props.margin, props.size)};
-`;
-
-type ButtonProps = {
-  mode?: "primary" | "secondary" | "text";
-  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
-  backgroundType?: "dark" | "light";
-};
-
-const Button = styled.button<ButtonProps>`
   padding-left: ${(props) => props.theme.paddingLeft};
   padding-right: ${(props) => props.theme.paddingRight};
   padding-top: ${(props) => props.theme.paddingTop};
   padding-bottom: ${(props) => props.theme.paddingBottom};
-  display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 2px transparent;
@@ -110,7 +100,6 @@ const Button = styled.button<ButtonProps>`
   font-weight: ${(props) => props.theme.fontWeight};
   letter-spacing: ${(props) => props.theme.labelLetterSpacing};
   min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "unset"};
-  width: 100%;
   height: 40px;
   cursor: pointer;
   &:focus {
@@ -293,7 +282,12 @@ const Button = styled.button<ButtonProps>`
   }}
 `;
 
-const LabelContainer = styled.span<ButtonPropsType>`
+type LabelPropsType = {
+  iconPosition?: "before" | "after";
+  icon?: string | SVG;
+};
+
+const LabelContainer = styled.span<LabelPropsType>`
   line-height: ${(props) => props.theme.labelFontLineHeight};
   font-size: ${(props) => props.theme.fontSize};
   text-overflow: ellipsis;
@@ -304,7 +298,12 @@ const LabelContainer = styled.span<ButtonPropsType>`
   margin-left: ${(props) => (!props.icon || props.iconPosition === "after" ? "8px" : "0px")};
 `;
 
-const IconContainer = styled.div<ButtonPropsType>`
+type IconPropsType = {
+  label?: string;
+  iconPosition?: "before" | "after";
+};
+
+const IconContainer = styled.div<IconPropsType>`
   max-height: 24px;
   max-width: 24px;
   margin-left: ${(props) =>
@@ -320,6 +319,12 @@ const IconContainer = styled.div<ButtonPropsType>`
   }
 `;
 
-const ButtonIcon = styled.img``;
+const ButtonIcon = styled.img`
+  img,
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+`;
 
 export default DxcButton;
diff --git a/lib/src/button/types.ts b/lib/src/button/types.ts
index 2c4a3ecbd..612a2ac24 100644
--- a/lib/src/button/types.ts
+++ b/lib/src/button/types.ts
@@ -5,7 +5,7 @@ export type Margin = {
   left?: Space;
   right?: Space;
 };
-type SVG = React.SVGProps<SVGSVGElement>;
+export type SVG = React.SVGProps<SVGSVGElement>;
 
 type Props = {
   /**

From 8ba8b21ad54f6470aadf42d1e49b0de55c79dd78 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 12:17:09 +0200
Subject: [PATCH 12/15] Fix button

---
 lib/src/button/Button.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 8b9b9c77d..505613e0e 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -99,7 +99,6 @@ const Button = styled.button<ButtonProps>`
   font-size: ${(props) => props.theme.fontSize};
   font-weight: ${(props) => props.theme.fontWeight};
   letter-spacing: ${(props) => props.theme.labelLetterSpacing};
-  min-width: ${(props) => (props.size === "small" && "calc(100% - 22px)") || "unset"};
   height: 40px;
   cursor: pointer;
   &:focus {

From cd89a9cdb751a944c68c15aac26f3ef6e1531796 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Fri, 29 Jul 2022 12:22:41 +0200
Subject: [PATCH 13/15] Change button

---
 lib/src/button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 505613e0e..98582e880 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -88,6 +88,7 @@ const Button = styled.button<ButtonProps>`
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   display: inline-flex;
   width: ${(props) => calculateWidth(props.margin, props.size)};
+  height: 40px;
   padding-left: ${(props) => props.theme.paddingLeft};
   padding-right: ${(props) => props.theme.paddingRight};
   padding-top: ${(props) => props.theme.paddingTop};
@@ -99,7 +100,6 @@ const Button = styled.button<ButtonProps>`
   font-size: ${(props) => props.theme.fontSize};
   font-weight: ${(props) => props.theme.fontWeight};
   letter-spacing: ${(props) => props.theme.labelLetterSpacing};
-  height: 40px;
   cursor: pointer;
   &:focus {
     outline: none;

From cbdcbfa7be5a36c902f1f0fe3c53a2ed8d8272b4 Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Mon, 1 Aug 2022 15:03:44 +0200
Subject: [PATCH 14/15] Fix in button types

---
 lib/src/button/Button.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
index 98582e880..a4689966c 100644
--- a/lib/src/button/Button.tsx
+++ b/lib/src/button/Button.tsx
@@ -70,10 +70,10 @@ const DxcButton = ({
 };
 
 type ButtonProps = {
-  mode?: "primary" | "secondary" | "text";
+  mode: "primary" | "secondary" | "text";
   margin?: Space | Margin;
-  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
-  backgroundType?: "dark" | "light";
+  size: "small" | "medium" | "large" | "fillParent" | "fitContent";
+  backgroundType: "dark" | "light";
 };
 
 const Button = styled.button<ButtonProps>`
@@ -282,7 +282,7 @@ const Button = styled.button<ButtonProps>`
 `;
 
 type LabelPropsType = {
-  iconPosition?: "before" | "after";
+  iconPosition: "before" | "after";
   icon?: string | SVG;
 };
 
@@ -299,7 +299,7 @@ const LabelContainer = styled.span<LabelPropsType>`
 
 type IconPropsType = {
   label?: string;
-  iconPosition?: "before" | "after";
+  iconPosition: "before" | "after";
 };
 
 const IconContainer = styled.div<IconPropsType>`

From f055dca7d71b0a9f116ce1831b017d499b2c2c9c Mon Sep 17 00:00:00 2001
From: raquelarrojo <arrojoraquel@gmail.com>
Date: Thu, 1 Sep 2022 11:30:17 +0200
Subject: [PATCH 15/15] Removed stack from button stories

---
 lib/src/button/Button.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/src/button/Button.stories.tsx b/lib/src/button/Button.stories.tsx
index 4c977312d..b26eaaf45 100644
--- a/lib/src/button/Button.stories.tsx
+++ b/lib/src/button/Button.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import DxcButton from "./Button";
-import DxcStack from "../stack/Stack";
+import DxcFlex from "./../flex/Flex";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
@@ -271,13 +271,13 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcButton label="Xxlarge margin" margin="xxlarge" />
     </ExampleContainer>
-    <Title title="Inside a stack" theme="light" level={2} />
+    <Title title="Inside a flex" theme="light" level={2} />
     <ExampleContainer>
-      <DxcStack gutter="2rem">
+      <DxcFlex direction="column" gap="0.75rem">
         <DxcButton label="Button" />
         <DxcButton label="Button" />
         <DxcButton label="Button" />
-      </DxcStack>
+      </DxcFlex>
     </ExampleContainer>
   </>
 );