feat: add default slot change method (microsoft#4148)

* add default slot change method * change default name to content * update css class name * add default slotted change method * add slot slotted to template * update template * add defaultSlottedContentChange method * add else statement to defaultSlottedContentChanged Co-authored-by: Dexter Lesaca <v-dlesac@microsoft.com>
AvishekNath · Dec 2, 2020 · 5e9fb05 · 5e9fb05
1 parent aee631c
commit 5e9fb05
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 7 deletions.
diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md
@@ -269,6 +269,8 @@ export class FASTButton extends Button {
     appearance: ButtonAppearance;
     // (undocumented)
     connectedCallback(): void;
+    // (undocumented)
+    defaultSlottedContentChanged(oldValue: any, newValue: any): void;
 }
 
 // @public

diff --git a/packages/web-components/fast-components/src/button/index.ts b/packages/web-components/fast-components/src/button/index.ts
@@ -45,11 +45,27 @@ export class FASTButton extends Button {
 
     public connectedCallback() {
         super.connectedCallback();
-
         if (!this.appearance) {
             this.appearance = "neutral";
         }
     }
+
+    /**
+     * Applies 'icon-only' class when there is only an SVG in the default slot
+     *
+     * @public
+     * @remarks
+     */
+    public defaultSlottedContentChanged(oldValue, newValue): void {
+        const slottedElements = this.defaultSlottedContent.filter(
+            x => x.nodeType === Node.ELEMENT_NODE
+        );
+        if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {
+            this.root.classList.add("icon-only");
+        } else {
+            this.root.classList.remove("icon-only");
+        }
+    }
 }
 
 /**

diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
@@ -275,6 +275,9 @@ export interface ElementViewTemplate {
 // @internal
 export const emptyArray: readonly never[];
 
+// @public
+export function enableArrayObservation(): void;
+
 // @public
 export class ExecutionContext<TParent = any, TGrandparent = any> {
     get event(): Event;
@@ -430,8 +433,6 @@ export function repeat<TSource = any, TItem = any>(itemsBinding: Binding<TSource
 export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
     constructor(location: Node, itemsBinding: Binding<TSource, any[]>, isItemsBindingVolatile: boolean, templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean, options: RepeatOptions);
     bind(source: TSource, context: ExecutionContext): void;
-    // Warning: (ae-forgotten-export) The symbol "Splice" needs to be exported by the entry point index.d.ts
-    //
     // @internal (undocumented)
     handleChange(source: any, args: Splice[]): void;
     unbind(): void;
@@ -469,6 +470,13 @@ export class SlottedBehavior extends NodeObservationBehavior<SlottedBehaviorOpti
 export interface SlottedBehaviorOptions<T = any> extends NodeBehaviorOptions<T>, AssignedNodesOptions {
 }
 
+// @public
+export interface Splice {
+    addedCount: number;
+    index: number;
+    removed: any[];
+}
+
 // @public
 export interface StyleTarget {
     adoptedStyleSheets?: CSSStyleSheet[];

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -156,12 +156,14 @@ export class Button extends FormAssociatedButton {
     autofocus: boolean;
     // @internal (undocumented)
     connectedCallback(): void;
+    defaultSlottedContent: HTMLElement[];
     formaction: string;
     formenctype: string;
     formId: string;
     formmethod: string;
     formnovalidate: boolean;
     formtarget: "_self" | "_blank" | "_parent" | "_top";
+    root: HTMLButtonElement;
     type: "submit" | "reset" | "button";
     }
 

diff --git a/packages/web-components/fast-foundation/src/button/button.template.ts b/packages/web-components/fast-foundation/src/button/button.template.ts
@@ -1,4 +1,4 @@
-import { html } from "@microsoft/fast-element";
+import { html, ref, slotted, elements } from "@microsoft/fast-element";
 import { endTemplate, startTemplate } from "../patterns/start-end";
 import { Button } from "./button";
 
@@ -42,10 +42,11 @@ export const ButtonTemplate = html<Button>`
         aria-pressed="${x => x.ariaPressed}"
         aria-relevant="${x => x.ariaRelevant}"
         aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref("root")}
     >
         ${startTemplate}
-        <span class="content" part="content">
-            <slot></slot>
+        <span part="content">
+            <slot ${slotted("defaultSlottedContent")}></slot>
         </span>
         ${endTemplate}
     </button>

diff --git a/packages/web-components/fast-foundation/src/button/button.ts b/packages/web-components/fast-foundation/src/button/button.ts
@@ -1,4 +1,4 @@
-import { attr } from "@microsoft/fast-element";
+import { attr, observable } from "@microsoft/fast-element";
 import { ARIAGlobalStatesAndProperties, StartEnd } from "../patterns/index";
 import { applyMixins } from "../utilities/apply-mixins";
 import { FormAssociatedButton } from "./button.form-associated";
@@ -128,6 +128,16 @@ export class Button extends FormAssociatedButton {
         previous === "reset" && this.removeEventListener("click", this.handleFormReset);
     }
 
+    /**
+     *
+     * Default slotted content
+     *
+     * @public
+     * @remarks
+     */
+    @observable
+    public defaultSlottedContent: HTMLElement[];
+
     /**
      * @internal
      */
@@ -168,6 +178,11 @@ export class Button extends FormAssociatedButton {
     private handleFormReset = () => {
         this.form?.reset();
     };
+
+    /**
+     * References the root element
+     */
+    public root: HTMLButtonElement;
 }
 
 /**