From 006e537639bcc5cb73974cebc3cf4eb2e5cb1759 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 23 Jun 2020 08:18:53 -0400
Subject: [PATCH] Fix button width issue

---
 docs/components/button.md         | 10 +++++-----
 src/components/button/button.scss | 20 +++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/docs/components/button.md b/docs/components/button.md
index ecf99e5d3..3b8c64188 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -62,14 +62,14 @@ Use `type="text"` to create text buttons, which share the same size as regular b
 <sl-button type="text" size="large">Text</sl-button>
 ```
 
-### Block
+### Custom Width
 
-Block buttons can be created by setting the button's width to `100%`.
+Block buttons can be created by setting the button's `--width` property to `100%`. Note that this is different than the standard `width` property.
 
 ```html preview
-<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
-<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
+<sl-button type="default" size="small" style="--width: 100%; margin-bottom: 1rem;">Small</sl-button>
+<sl-button type="default" size="medium" style="--width: 100%; margin-bottom: 1rem;">Medium</sl-button>
+<sl-button type="default" size="large" style="--width: 100%;">Large</sl-button>
 ```
 
 ### Icons
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 75a29befa..e0f7be321 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -1,7 +1,13 @@
 @import 'component';
 
+/**
+  * @prop --width: The width of the button.
+  */
 :host {
+  --width: auto;
+
   display: inline-block;
+  width: var(--width);
   cursor: pointer;
 }
 
@@ -9,7 +15,7 @@
   display: inline-flex;
   align-items: stretch;
   justify-content: center;
-  width: 100%;
+  width: var(--width);
   border-style: solid;
   border-width: var(--sl-input-border-width);
   font-family: var(--sl-input-font-family);
@@ -249,14 +255,6 @@
   }
 }
 
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// Block modifier
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-.button--block {
-  width: 100%;
-}
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Size modifiers
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -339,6 +337,10 @@
   }
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Block modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Caret modifier
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////