Improve button spacing

docs/components/button.md

@@ -91,6 +91,24 @@ As expected, buttons can be given a custom width by setting its `width`. This is
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html preview
+<sl-button type="default" size="small">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+
+<sl-button type="default" size="small">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+  Refresh
+</sl-button>
+
+<sl-button type="default" size="small">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+  Open
+</sl-button>
+
+<br><br>
+
 <sl-button type="default">
   <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
@@ -106,6 +124,24 @@ Use the `prefix` and `suffix` slots to add icons.
   <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
 </sl-button>
+
+<br><br>
+
+<sl-button type="default" size="large">
+  <sl-icon slot="prefix" name="gear"></sl-icon>
+  Settings
+</sl-button>
+
+<sl-button type="default" size="large">
+  <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
+  Refresh
+</sl-button>
+
+<sl-button type="default" size="large">
+  <sl-icon slot="prefix" name="link-45deg"></sl-icon>
+  <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
+  Open
+</sl-button>
 ```
 
 ### Caret
@@ -144,4 +180,22 @@ Use the `disabled` prop to disable a button. Clicks will be suppressed until the
 <sl-button type="danger" disabled>Danger</sl-button>
 ```
 
+### Split Buttons
+
+Create a split button using a [button group](/components/button-group) and a [dropdown](/components/dropdown).
+
+```html preview
+<sl-button-group> 
+  <sl-button>Save</sl-button>
+  <sl-dropdown placement="bottom-end">
+    <sl-button slot="trigger" caret></sl-button>
+    <sl-menu>
+      <sl-menu-item>Save</sl-menu-item>
+      <sl-menu-item>Save as&hellip;</sl-menu-item>
+      <sl-menu-item>Save all</sl-menu-item>
+    </sl-menu>
+  </sl-dropdown>
+</sl-button-group>
+```
+
 [component-metadata:sl-button]

docs/getting-started/changelog.md

@@ -25,6 +25,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
 - Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/285)
 - Fixed a bug where disabled link buttons didn't appear disabled
+- Improved button spacings and added split button example
 - Improved elevation tokens in dark theme
 - Improved accessibility in `sl-tooltip` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
 - Improved slot detection in `sl-card`, `sl-dialog`, and `sl-drawer`

src/components/button/button.scss

@@ -19,6 +19,7 @@
   user-select: none;
   white-space: nowrap;
   vertical-align: middle;
+  padding: 0;
   transition: var(--sl-transition-fast) background-color, var(--sl-transition-fast) color,
     var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
   cursor: inherit;
@@ -55,13 +56,13 @@
 }
 
 .button__prefix ::slotted(:first-child) {
-  margin-left: calc(-1 * var(--sl-spacing-x-small));
+  // margin-left: calc(-1 * var(--sl-spacing-x-small));
-  margin-right: var(--sl-spacing-x-small);
+  // margin-right: var(--sl-spacing-x-small);
 }
 
 .button__suffix ::slotted(:last-child) {
-  margin-left: var(--sl-spacing-x-small);
+  // margin-left: var(--sl-spacing-x-small);
-  margin-right: calc(-1 * var(--sl-spacing-x-small));
+  // margin-right: calc(-1 * var(--sl-spacing-x-small));
 }
 
 .button__label {
@@ -264,7 +265,6 @@
   height: var(--sl-input-height-small);
   line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
   border-radius: var(--sl-input-border-radius-small);
-  padding: 0 var(--sl-spacing-medium);
 }
 
 .button--medium {
@@ -272,7 +272,6 @@
   height: var(--sl-input-height-medium);
   line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
   border-radius: var(--sl-input-border-radius-medium);
-  padding: 0 var(--sl-spacing-large);
 }
 
 .button--large {
@@ -280,7 +279,6 @@
   height: var(--sl-input-height-large);
   line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
   border-radius: var(--sl-input-border-radius-large);
-  padding: 0 var(--sl-spacing-x-large);
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -343,8 +341,6 @@
   .button__caret {
     display: flex;
     align-items: center;
-    margin-left: var(--sl-spacing-xx-small);
-    margin-right: calc(-1 * var(--sl-spacing-xx-small));
 
     svg {
       width: 1em;
@@ -389,3 +385,74 @@
   transform: translateY(-50%) translateX(50%);
   pointer-events: none;
 }
+
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Button spacing
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+.button--has-label {
+  &.button--small .button__label {
+    padding: 0 var(--sl-spacing-small);
+  }
+
+  &.button--medium .button__label {
+    padding: 0 var(--sl-spacing-medium);
+  }
+
+  &.button--large .button__label {
+    padding: 0 var(--sl-spacing-large);
+  }
+}
+
+.button--has-prefix {
+  &.button--small {
+    padding-left: var(--sl-spacing-x-small);
+
+    .button__label {
+      padding-left: var(--sl-spacing-x-small);
+    }
+  }
+
+  &.button--medium {
+    padding-left: var(--sl-spacing-small);
+
+    .button__label {
+      padding-left: var(--sl-spacing-small);
+    }
+  }
+
+  &.button--large {
+    padding-left: var(--sl-spacing-small);
+
+    .button__label {
+      padding-left: var(--sl-spacing-small);
+    }
+  }
+}
+
+.button--has-suffix,
+.button--caret {
+  &.button--small {
+    padding-right: var(--sl-spacing-x-small);
+
+    .button__label {
+      padding-right: var(--sl-spacing-x-small);
+    }
+  }
+
+  &.button--medium {
+    padding-right: var(--sl-spacing-small);
+
+    .button__label {
+      padding-right: var(--sl-spacing-small);
+    }
+  }
+
+  &.button--large {
+    padding-right: var(--sl-spacing-small);
+
+    .button__label {
+      padding-right: var(--sl-spacing-small);
+    }
+  }
+}

src/components/button/button.tsx

@@ -1,4 +1,5 @@
-import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
+import { hasSlot } from '../../utilities/slot';
 
 /**
  * @since 2.0
@@ -23,7 +24,12 @@ import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil
 export class Button {
   button: HTMLButtonElement;
 
+  @Element() host: HTMLSlButtonElement;
+
   @State() hasFocus = false;
+  @State() hasLabel = false;
+  @State() hasPrefix = false;
+  @State() hasSuffix = false;
 
   /** The button's type. */
   @Prop({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'default';
@@ -74,6 +80,11 @@ export class Button {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+
+  componentWillLoad() {
+    this.handleSlotChange();
   }
 
   /** Sets focus on the button. */
@@ -88,6 +99,12 @@ export class Button {
     this.button.blur();
   }
 
+  handleSlotChange() {
+    this.hasLabel = hasSlot(this.host);
+    this.hasPrefix = hasSlot(this.host, 'prefix');
+    this.hasSuffix = hasSlot(this.host, 'suffix');
+  }
+
   handleBlur() {
     this.hasFocus = false;
     this.slBlur.emit();
@@ -137,7 +154,10 @@ export class Button {
           'button--disabled': this.disabled,
           'button--focused': this.hasFocus,
           'button--loading': this.loading,
-          'button--pill': this.pill
+          'button--pill': this.pill,
+          'button--has-label': this.hasLabel,
+          'button--has-prefix': this.hasPrefix,
+          'button--has-suffix': this.hasSuffix
         }}
         disabled={isButton ? this.disabled : null}
         type={isButton ? (this.submit ? 'submit' : 'button') : null}
@@ -152,13 +172,13 @@ export class Button {
         onClick={this.handleClick}
       >
         <span part="prefix" class="button__prefix">
-          <slot name="prefix" />
+          <slot onSlotchange={this.handleSlotChange} name="prefix" />
         </span>
         <span part="label" class="button__label">
-          <slot />
+          <slot onSlotchange={this.handleSlotChange} />
         </span>
         <span part="suffix" class="button__suffix">
-          <slot name="suffix" />
+          <slot onSlotchange={this.handleSlotChange} name="suffix" />
         </span>
         {this.caret && (
           <span part="caret" class="button__caret">