Merge pull request #1199 from dxc-technology/rarrojolopez-button

Remove material from button component
dxc-technology · Sep 1, 2022 · a7043e2 · a7043e2
2 parents b2237e2 + f055dca
commit a7043e2
Show file tree

Hide file tree

Showing 7 changed files with 272 additions and 250 deletions.
diff --git 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
@@ -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
@@ -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.stories.tsx b/lib/src/button/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import DxcButton from "./Button";
+import DxcFlex from "./../flex/Flex";
 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 flex" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcFlex direction="column" gap="0.75rem">
+        <DxcButton label="Button" />
+        <DxcButton label="Button" />
+        <DxcButton label="Button" />
+      </DxcFlex>
+    </ExampleContainer>
   </>
 );