addressed most PR comments

microsoft · May 6, 2020 · d16db23 · d16db23
1 parent 3072d5c
commit d16db23
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 36 deletions.
diff --git a/...ages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts b/...ages/web-components/fast-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -16,12 +16,9 @@ export const AccordionItemStyles = css`
         box-sizing: border-box;
         font-family: var(--body-font);
         flex-direction: column;
-        ${
-            /* Font size, weight, and line height are temporary - 
-            replace when adaptive typography is figured out */ ""
-        } font-size: 12px;
+        font-size: var(--type-ramp-minus-1-font-size);
         font-weight: 400;
-        line-height: 18px;
+        line-height: var(--type-ramp-minus-1-line-height);
         border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
     }
     
@@ -84,7 +81,7 @@ export const AccordionItemStyles = css`
         z-index: 2;
     }
 
-    .glyph {
+    .icon {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -93,19 +90,19 @@ export const AccordionItemStyles = css`
         pointer-events: none;
     }
 
-    slot[name="collapsed-glyph"] {
+    slot[name="collapsed-icon"] {
         display: flex;
     }
 
-    :host(.expanded) slot[name="collapsed-glyph"] {
+    :host(.expanded) slot[name="collapsed-icon"] {
         display: none;
     }
 
-    slot[name="expanded-glyph"] {
+    slot[name="expanded-icon"] {
         display: none;
     }
     
-    :host(.expanded) slot[name="expanded-glyph"] {
+    :host(.expanded) slot[name="expanded-icon"] {
         display: flex;
     }
 

diff --git a/...es/web-components/fast-components/src/accordion/accordion-item/accordion-item.template.ts b/...es/web-components/fast-components/src/accordion/accordion-item/accordion-item.template.ts
@@ -5,6 +5,7 @@ import { AccordionItem } from "./accordion-item";
 export const AccordionItemTemplate = html<AccordionItem>`
     <template
         class="${x => (x.expanded ? "expanded" : "")}"
+        aria-expanded="${x => x.expanded}"
         slot="item"
     >
         <div
@@ -28,9 +29,9 @@ export const AccordionItemTemplate = html<AccordionItem>`
             </button>
             ${startTemplate}
             ${endTemplate}
-            <span class="glyph" part="glyph">
-                <slot name="expanded-glyph" part="expanded-glyph"></slot>
-                <slot name="collapsed-glyph" part="collapsed-glyph"></slot>
+            <span class="icon" part="icon">
+                <slot name="expanded-icon" part="expanded-icon"></slot>
+                <slot name="collapsed-icon" part="collapsed-icon"></slot>
             <span>
         </div>
         <div

diff --git a/packages/web-components/fast-components/src/accordion/accordion.spec.md b/packages/web-components/fast-components/src/accordion/accordion.spec.md
@@ -68,7 +68,8 @@ As defined by the W3C:
 *Slot Names*
 - default
 - heading
-- glyph
+- collapsed-icon
+- expanded-icon
 - start
 - end
 
@@ -89,7 +90,10 @@ As defined by the W3C:
             <slot name="heading" part="heading">Panel one</slot>
        </button>
        <slot name="end" part="end"></slot>
-       <slot name="glyph" part="glyph"></slot>
+       <span class="icon" part="icon">
+           <slot name="expanded-icon" part="expanded-icon"></slot>
+           <slot name="collapsed-icon" part="collapsed-icon"></slot>
+       </span>
     </div>
     <div
         id="accordion1-panel"
@@ -110,7 +114,10 @@ As defined by the W3C:
             <slot name="heading" part="heading">Panel two</slot>
        </button>
        <slot name="end" part="end"></slot>
-       <slot name="glyph" part="glyph"></slot>
+       <span class="icon" part="icon">
+           <slot name="expanded-icon" part="expanded-icon"></slot>
+           <slot name="collapsed-icon" part="collapsed-icon"></slot>
+       </span>
     </div>
     <div
         id="accordion2-panel"
@@ -133,7 +140,10 @@ As defined by the W3C:
             <slot name="heading" part="heading">Panel three</slot>
         </button>
         <slot name="end" part="end"></slot>
-        <slot name="glyph" part="glyph"></slot>
+        <span class="icon" part="icon">
+           <slot name="expanded-icon" part="expanded-icon"></slot>
+           <slot name="collapsed-icon" part="collapsed-icon"></slot>
+       </span>
     </div>
     <div
         id="accordion3-panel"
@@ -157,17 +167,17 @@ As defined by the W3C:
 <fast-accordion>
     <fast-accordion-item>
         <span slot="heading">Panel one</span>
-        <span slot="glyph">^</span>
+        <span slot="icon">^</span>
         Panel one content
     </fast-accordion-item>
     <fast-accordion-item expanded>
         <span slot="heading">Panel two</span>
-        <span slot="glyph">^</span>
+        <span slot="icon">^</span>
         Panel two content
     </fast-accordion-item>
     <fast-accordion-item>
         <span slot="heading">Panel three</span>
-        <span slot="glyph">^</span>
+        <span slot="icon">^</span>
         Panel three content
     </fast-accordion-item>
 </fast-accordion>

diff --git a/packages/web-components/fast-components/src/accordion/accordion.styles.ts b/packages/web-components/fast-components/src/accordion/accordion.styles.ts
@@ -10,10 +10,9 @@ export const AccordionStyles = css`
         box-sizing: border-box;
         flex-direction: column;
         font-family: var(--body-font);
-        ${/* Font size, weight, and line height are temporary - 
-            replace when adaptive typography is figured out */ ""} font-size: 12px;
+        font-size: var(--type-ramp-minus-1-font-size);
         font-weight: 400;
-        line-height: 18px;
+        line-height: var(--type-ramp-minus-1-line-height);
         color: var(--neutral-foreground-rest);
         border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
     }

diff --git a/packages/web-components/fast-components/src/accordion/accordion.ts b/packages/web-components/fast-components/src/accordion/accordion.ts
@@ -21,8 +21,9 @@ export class Accordion extends FASTElement {
 
     @observable
     public accordionItems: HTMLElement[];
-    public accordionItemsChanged(): void {
+    public accordionItemsChanged(oldValue, newValue): void {
         if (this.$fastController.isConnected) {
+            this.removeHeaderListeners(oldValue);
             this.accordionIds = this.getHeaderIds();
             this.setItems();
         }
@@ -63,6 +64,13 @@ export class Accordion extends FASTElement {
         });
     };
 
+    private removeHeaderListeners = (oldValue: any): void => {
+        oldValue.forEach((header: HTMLElement, index: number) => {
+            header.removeEventListener("change", this.activeHeaderChange);
+            header.removeEventListener("keydown", this.handleHeaderKeyDown);
+        });
+    };
+
     private activeHeaderChange = (event): void => {
         const selectedHeader = event.target as HTMLElement;
         if (this.isSingleExpandMode()) {

diff --git a/packages/web-components/fast-components/src/accordion/fixtures/base.html b/packages/web-components/fast-components/src/accordion/fixtures/base.html
@@ -10,38 +10,38 @@ <h4>Default</h4>
                 <button>1</button>
             </div>
             <span slot="heading">Panel one</span>
-            <svg slot="expanded-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="expanded-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-            <svg slot="collapsed-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="collapsed-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             Panel one content
         </fast-accordion-item>
         <fast-accordion-item>
             <span slot="heading">Panel two</span>
-            <svg slot="expanded-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="expanded-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-            <svg slot="collapsed-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="collapsed-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             Panel two content
         </fast-accordion-item>
         <fast-accordion-item expanded>
             <span slot="heading">Panel three</span>
-            <svg slot="expanded-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="expanded-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-            <svg slot="collapsed-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="collapsed-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
@@ -58,38 +58,38 @@ <h4>Single expand</h4>
                 <button>1</button>
             </div>
             <span slot="heading">Panel one</span>
-            <svg slot="expanded-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="expanded-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-            <svg slot="collapsed-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="collapsed-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             Panel one content
         </fast-accordion-item>
         <fast-accordion-item>
             <span slot="heading">Panel two</span>
-            <svg slot="expanded-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="expanded-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-            <svg slot="collapsed-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="collapsed-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             Panel two content
         </fast-accordion-item>
         <fast-accordion-item>
             <span slot="heading">Panel three</span>
-            <svg slot="expanded-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="expanded-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M9 5.44446V12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
-            <svg slot="collapsed-glyph" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg slot="collapsed-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M5.44446 9H12.5556" stroke="#FD3D82" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>