adds icon, icon-before, icon-after properties

umbraco · Apr 17, 2024 · 53f17c2 · 53f17c2
1 parent e159c43
commit 53f17c2
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 6 deletions.
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
@@ -63,6 +63,30 @@ export class UUIButtonElement extends UUIFormControlMixin(
   @property({ type: String, reflect: true })
   type: UUIButtonType = 'button';
 
+  /**
+   * Optionally set an icon to render before the label
+   * @attr
+   * @default undefined;
+   */
+  @property({ reflect: true, attribute: 'icon-before' })
+  iconBefore?: string;
+
+  /**
+   * Optionally set an icon to render after the label
+   * @attr
+   * @default undefined;
+   */
+  @property({ reflect: true, attribute: 'icon-after' })
+  iconAfer?: string;
+
+  /**
+   * Optionally set an icon without positioning. Renders as icon-before.
+   * @attr
+   * @default undefined;
+   */
+  @property({ reflect: true })
+  icon?: string;
+
   /**
    * Disables the button, changes the looks of it and prevents if from emitting the click event
    * @type {boolean}
@@ -220,6 +244,13 @@ export class UUIButtonElement extends UUIFormControlMixin(
     return html`<div id="state">${element}</div>`;
   }
 
+  renderIcon(icon?: string) {
+    if (!icon) return null;
+
+    demandCustomElement(this, 'uui-icon');
+    return html`<uui-icon class="icon" name=${icon}></uui-icon>`;
+  }
+
   render() {
     return this.href
       ? html`
@@ -231,7 +262,9 @@ export class UUIButtonElement extends UUIFormControlMixin(
             rel=${ifDefined(
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             )}>
-            ${this.renderState()} ${this.renderLabel()}
+            ${this.renderState()}
+            ${this.renderIcon(this.icon ?? this.iconBefore)}
+            ${this.renderLabel()} ${this.renderIcon(this.iconAfer)}
             <slot name="extra"></slot>
           </a>
         `
@@ -240,7 +273,9 @@ export class UUIButtonElement extends UUIFormControlMixin(
             id="button"
             ?disabled=${this.disabled}
             aria-label=${ifDefined(this.label)}>
-            ${this.renderState()} ${this.renderLabel()}
+            ${this.renderState()}
+            ${this.renderIcon(this.icon ?? this.iconBefore)}
+            ${this.renderLabel()} ${this.renderIcon(this.iconAfer)}
             <slot name="extra"></slot>
           </button>
         `;
@@ -271,7 +306,8 @@ export class UUIButtonElement extends UUIFormControlMixin(
           color 80ms;
       }
 
-      :host([compact]) {
+      :host([compact]),
+      :host([icon]) {
         --uui-button-padding-left-factor: 1;
         --uui-button-padding-right-factor: 1;
         --uui-button-padding-top-factor: 0;
@@ -283,7 +319,9 @@ export class UUIButtonElement extends UUIFormControlMixin(
         display: block;
         transition: opacity 120ms;
       }
-      :host([state]:not([state=''])) .label {
+
+      :host([state]:not([state=''])) .label,
+      :host([state]:not([state=''])) .icon {
         opacity: 0;
       }
 
@@ -349,6 +387,11 @@ export class UUIButtonElement extends UUIFormControlMixin(
         animation: ${UUIHorizontalShakeAnimationValue};
       }
 
+      .label:not(:empty) ~ .icon,
+      .icon + .label:not(:empty) {
+        margin-left: var(--uui-size-2);
+      }
+
       /* ANIMATIONS */
       @keyframes fadeIn {
         0% {

diff --git a/packages/uui-button/lib/uui-button.story.ts b/packages/uui-button/lib/uui-button.story.ts
@@ -289,7 +289,7 @@ LooksAndColors.parameters = {
   },
 };
 
-export const WithIcon = () => html`
+export const WithSlottedIcon = () => html`
   <uui-icon-registry-essential>
     <uui-button look="primary" color="danger" label="A11Y proper label">
       <uui-icon .name=${'favorite'}></uui-icon>
@@ -314,7 +314,7 @@ export const WithIcon = () => html`
     </uui-button>
   </uui-icon-registry-essential>
 `;
-WithIcon.parameters = {
+WithSlottedIcon.parameters = {
   docs: {
     source: {
       code: `
@@ -323,6 +323,52 @@ WithIcon.parameters = {
   },
 };
 
+export const WithIconProperty = () => html`
+  <uui-icon-registry-essential>
+    <uui-button
+      look="primary"
+      color="danger"
+      icon="favorite"
+      label="A11Y proper label">
+    </uui-button>
+    <br />
+    <br />
+    <uui-button
+      look="primary"
+      color="default"
+      icon-before="favorite"
+      label="Button with icon"></uui-button>
+    <br />
+    <br />
+    <uui-button
+      look="primary"
+      color="positive"
+      icon-after="favorite"
+      label="Button with icon"></uui-button>
+    <br />
+    <br />
+    <uui-button
+      look="primary"
+      color="warning"
+      icon-before="check"
+      icon-after="favorite"
+      label="Button with icon"></uui-button>
+    <br />
+    <br />
+    <p>
+      The 'compact' attribute is not required when using the 'icon' property.
+    </p>
+  </uui-icon-registry-essential>
+`;
+WithIconProperty.parameters = {
+  docs: {
+    source: {
+      code: `
+      <uui-button look="primary" icon="alert" label="A11Y proper label">Button Label</uui-button>`,
+    },
+  },
+};
+
 export const WaitingState = Template.bind({});
 WaitingState.args = { state: 'waiting' };
 WaitingState.parameters = {