From 346050f7b9d88f71b6fbb4873cee1a1891f54b17 Mon Sep 17 00:00:00 2001
From: Rafael Gondi <rdias.ga@gmail.com>
Date: Thu, 18 Apr 2024 16:15:53 -0300
Subject: [PATCH] =?UTF-8?q?feat(component):=20Adiciona=20prop=20block=20no?=
 =?UTF-8?q?=20cds-button,=20para=20torn=C3=A1-lo=20fluido?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  2 +-
 src/components/Button.vue                 | 16 ++++++++++++++--
 src/stories/components/Button.stories.mdx |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 881125b3..8796a47b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.0.1",
+	"version": "3.1.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 03f0ae9a..ca3de7db 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -19,6 +19,7 @@
 		</slot>
 	</button>
 </template>
+
 <script>
 import CdsSpinner from '../components/Spinner.vue';
 import Cdstip from '../utils/directives/cdstip';
@@ -49,6 +50,13 @@ export default {
 			type: String,
 			default: 'md',
 		},
+		/**
+		* Quando true, torna a largura do botão fluida
+		*/
+		block: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Especifica o texto a ser apresentado no corpo do botão.
 		 * Este texto será exibido apenas se o slot default não for utilizado.
@@ -111,6 +119,9 @@ export default {
 	},
 
 	computed: {
+		widthResolver() {
+			return this.block ? '100%' : 'fit-content';
+		},
 
 		tooltipDisabled() {
 			return this.disabled && this.tooltipText !== '' ? this.tooltipText : null;
@@ -188,7 +199,8 @@ export default {
 		font-family: Satoshi, Inter, Avenir, Helvetica, Arial, sans-serif;
 		display: flex;
 		align-items: center;
-		width: max-content;
+		justify-content: center;
+		width: v-bind(widthResolver);
 		border: none;
 		cursor: pointer;
 
@@ -282,7 +294,7 @@ export default {
 
 	&--lg {
 		@include button-1;
-		padding: pYX(3, 6);
+		padding: pYX(4, 8);
 		border-radius: $border-radius-extra-small;
 	}
 }
diff --git a/src/stories/components/Button.stories.mdx b/src/stories/components/Button.stories.mdx
index b32fa16d..a370f211 100644
--- a/src/stories/components/Button.stories.mdx
+++ b/src/stories/components/Button.stories.mdx
@@ -99,6 +99,7 @@ Nesse caso, recomendamos o uso de links.
 			variant: 'green',
 			size: 'md',
 			text: 'Button',
+			block: false,
 		}}
 	>
 		{ Template.bind({}) }