feat(button): allow icon only buttons

adobe · Oct 9, 2019 · 25623d6 · 25623d6
1 parent 10de932
commit 25623d6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/packages/button/src/button-base.ts b/packages/button/src/button-base.ts
@@ -32,6 +32,8 @@ export class ButtonBase extends Focusable {
         return !!this.querySelector('[slot="icon"]');
     }
 
+    private hasLabel = false;
+
     public get focusElement(): HTMLElement {
         /* istanbul ignore if */
         if (!this.shadowRoot) {
@@ -40,13 +42,30 @@ export class ButtonBase extends Focusable {
         return this.shadowRoot.querySelector('#button') as HTMLElement;
     }
 
+    private manageLabelSlot(e: Event): void {
+        const slot = e.target as HTMLSlotElement;
+        let assignedElements = slot.assignedElements
+            ? slot.assignedNodes()
+            : [...this.childNodes].filter((node) => {
+                  const el = node as HTMLElement;
+                  return !el.hasAttribute('slot');
+              });
+        assignedElements = assignedElements.filter((node) => {
+            return node.textContent ? node.textContent.trim() : false;
+        });
+        this.hasLabel = assignedElements.length > 0;
+        this.requestUpdate();
+    }
+
     protected get buttonContent(): TemplateResult[] {
         const icon = html`
             <slot name="icon"></slot>
         `;
         const content = [
             html`
-                <div id="label"><slot></slot></div>
+                <div id="label" ?hidden=${!this.hasLabel}>
+                    <slot @slotchange=${this.manageLabelSlot}></slot>
+                </div>
             `,
         ];
         if (!this.hasIcon) {

diff --git a/packages/button/stories/action-button.stories.ts b/packages/button/stories/action-button.stories.ts
@@ -45,10 +45,22 @@ function renderButtonsSelected(properties: Properties): TemplateResult {
     `;
 }
 
-storiesOf('ActionButton', module).add('Default', () => {
-    return renderButtonsSelected({
-        quiet: false,
-        disabled: false,
-        selected: false,
+storiesOf('ActionButton', module)
+    .add('Default', () => {
+        return renderButtonsSelected({
+            quiet: false,
+            disabled: false,
+            selected: false,
+        });
+    })
+    .add('Icon button', () => {
+        return html`
+            <sp-action-button>
+                <svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
+                    <path
+                        d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
+                    ></path>
+                </svg>
+            </sp-action-button>
+        `;
     });
-});
diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts
@@ -57,6 +57,21 @@ describe('Button', () => {
             `<button id="button" tabindex="0"><slot name="icon"></slot><div id="label"><slot></slot></div></button>`
         );
     });
+    it('loads default only icon', async () => {
+        const el = await fixture<Button>(
+            html`
+                <sp-button>
+                    <svg slot="icon"></svg>
+                </sp-button>
+            `
+        );
+
+        await elementUpdated(el);
+        expect(el).to.not.be.undefined;
+        expect(el).shadowDom.to.equal(
+            `<button id="button" tabindex="0"><slot name="icon"></slot><div id="label" hidden><slot></slot></div></button>`
+        );
+    });
     it('loads default w/ an icon on the right', async () => {
         const el = await fixture<Button>(
             html`