@boostdev/design-system-components 2.0.0 → 2.1.0

package/src/web-components/interaction/bds-button.ts

@@ -14,6 +14,7 @@ export type ButtonSize = 'small' | 'medium' | 'large';
  *   target    — forwarded to <a> when href is set
  *   rel       — forwarded to <a> when href is set
  *   has-pulse — boolean, enables the pulse ring animation
+ *   is-icon-only — boolean, forces a 1:1 aspect ratio with minimal xs padding (requires aria-label)
  *   type      — "button" (default) | "submit" | "reset"
  *
  * Slots:
@@ -114,6 +115,23 @@ export class BdsButton extends LitElement {
       animation: pulse 3s infinite;
     }
 
+    /* Icon-only: square (1:1), equal xs padding on both axes — composes with
+       any variant/size. box-sizing: border-box keeps the outer box at
+       --button_height; without it, all: unset reverts to content-box and
+       padding-block would stretch the button past its declared height.
+       Slotted child fills the content area (button height minus the two
+       padding sides) so SVG icons scale with button size. */
+    .button.is-icon-only {
+      aspect-ratio: 1;
+      box-sizing: border-box;
+      padding: var(--bds-space_xs);
+    }
+
+    :host([is-icon-only]) ::slotted(*) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
     /* SVG icon colour */
     .button svg {
       --icon__stroke: currentcolor;
@@ -141,6 +159,12 @@ export class BdsButton extends LitElement {
       transition: var(--bds-animation_transition);
     }
 
+    /* Icon-only: zero out icon slot margins so icon centres */
+    .button.is-icon-only .icon-start.has-content,
+    .button.is-icon-only .icon-end.has-content {
+      margin-inline: 0;
+    }
+
     /* Hover icon animation */
     @media (hover: hover) and (pointer: fine) {
       .button:hover .icon-start svg,
@@ -189,6 +213,7 @@ export class BdsButton extends LitElement {
     target:           { type: String },
     rel:              { type: String },
     hasPulse:         { type: Boolean, attribute: 'has-pulse', reflect: true },
+    isIconOnly:       { type: Boolean, attribute: 'is-icon-only', reflect: true },
     type:             { type: String },
     ariaLabel:        { type: String, attribute: 'aria-label' },
     // Internal state
@@ -205,6 +230,7 @@ export class BdsButton extends LitElement {
   declare target: string | undefined;
   declare rel: string | undefined;
   declare hasPulse: boolean;
+  declare isIconOnly: boolean;
   declare type: 'button' | 'submit' | 'reset';
   declare ariaLabel: string | null;
   declare private _iconStartFilled: boolean;
@@ -216,6 +242,7 @@ export class BdsButton extends LitElement {
     this.size = 'medium';
     this.disabled = false;
     this.hasPulse = false;
+    this.isIconOnly = false;
     this.type = 'button';
     this.ariaLabel = null;
     this._iconStartFilled = false;
@@ -233,7 +260,7 @@ export class BdsButton extends LitElement {
   }
 
   private get _classes() {
-    return `button ${this.variant} ${this.size}${this.hasPulse ? ' has-pulse' : ''}`;
+    return `button ${this.variant} ${this.size}${this.hasPulse ? ' has-pulse' : ''}${this.isIconOnly ? ' is-icon-only' : ''}`;
   }
 
   private _handleAnchorClick(e: MouseEvent) {