fix(accordion, accordion-item): icon-position, icon-type, selection-mode and scale can now be set as props or attributes

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -17,13 +17,12 @@ import {
 import {
   closestElementCrossShadowBoundary,
   getElementDir,
-  getElementProp,
   getSlotted,
   toAriaBoolean
 } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { SLOTS, CSS } from "./resources";
-import { FlipContext, Position, Scale } from "../interfaces";
+import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
 import { RegistryEntry, RequestedItem } from "./interfaces";
 
 /**
@@ -69,6 +68,40 @@ export class AccordionItem implements ConditionalSlotComponent {
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
+  /**
+   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  @Prop() iconPosition: Position;
+
+  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  @Prop() iconType: "chevron" | "caret" | "plus-minus";
+
+  /**
+   * The containing `accordion` element.
+   *
+   * @internal
+   */
+  @Prop() accordionParent: HTMLCalciteAccordionElement;
+
+  /**
+   * Specifies the `selectionMode` of the component inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  @Prop() selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
+
+  /**
+   * Specifies the size of the component inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  @Prop() scale: Scale;
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -97,18 +130,13 @@ export class AccordionItem implements ConditionalSlotComponent {
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    this.parent = this.el.parentElement as HTMLCalciteAccordionElement;
-    this.iconType = getElementProp(this.el, "icon-type", "chevron");
-    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
-    this.scale = getElementProp(this.el, "scale", this.scale);
-
     connectConditionalSlotComponent(this);
   }
 
   componentDidLoad(): void {
     this.itemPosition = this.getItemPosition();
     this.calciteInternalAccordionItemRegister.emit({
-      parent: this.parent,
+      parent: this.accordionParent,
       position: this.itemPosition
     });
   }
@@ -248,38 +276,22 @@ export class AccordionItem implements ConditionalSlotComponent {
   //
   //--------------------------------------------------------------------------
 
-  /** the containing accordion element */
-  private parent: HTMLCalciteAccordionElement;
-
   /** position within parent */
   private itemPosition: number;
 
   /** the latest requested item */
   private requestedAccordionItem: HTMLCalciteAccordionItemElement;
 
-  /** what selection mode is the parent accordion in */
-  private selectionMode: string;
-
-  /** what icon position does the parent accordion specify */
-  private iconPosition: Position = "end";
-
-  /** what icon type does the parent accordion specify */
-  private iconType: string;
-
   /** handle clicks on item header */
   private itemHeaderClickHandler = (): void => this.emitRequestedItem();
 
-  /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-  scale: Scale = "m";
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
   private determineActiveItem(): void {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "multiple");
     switch (this.selectionMode) {
       case "multiple":
         if (this.el === this.requestedAccordionItem) {

packages/calcite-components/src/components/accordion/accordion.e2e.ts

@@ -14,6 +14,14 @@ describe("calcite-accordion", () => {
     <calcite-accordion-item heading="Accordion Title 3" id="3">Accordion Item Content </calcite-accordion-item>
   `;
 
+  const accordionContentInheritablePropsNonDefault = html`
+    <calcite-accordion-item heading="Accordion Title 1" id="1">
+      <calcite-action></calcite-action>Accordion Item Content<calcite-action></calcite-action>
+    </calcite-accordion-item>
+    <calcite-accordion-item heading="Accordion Title 1" id="2">Accordion Item Content </calcite-accordion-item>
+    <calcite-accordion-item heading="Accordion Title 3" id="3">Accordion Item Content </calcite-accordion-item>
+  `;
+
   describe("renders", () => {
     renders("calcite-accordion", { display: "block" });
   });
@@ -33,11 +41,26 @@ describe("calcite-accordion", () => {
     ${accordionContent}
     </calcite-accordion>`);
     const element = await page.find("calcite-accordion");
-    expect(element).toEqualAttribute("appearance", "solid");
-    expect(element).toEqualAttribute("icon-position", "end");
-    expect(element).toEqualAttribute("scale", "m");
-    expect(element).toEqualAttribute("selection-mode", "multiple");
-    expect(element).toEqualAttribute("icon-type", "chevron");
+
+    expect(await element.getProperty("appearance")).toBe("solid");
+    expect(await element.getProperty("iconPosition")).toBe("end");
+    expect(await element.getProperty("scale")).toBe("m");
+    expect(await element.getProperty("selectionMode")).toBe("multiple");
+    expect(await element.getProperty("iconType")).toBe("chevron");
+  });
+
+  it("renders inheritable props: `iconPosition`, `iconType`, `selectionMode`, and `scale` to match those set on parent (non-default)", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <calcite-accordion icon-position="start", icon-type="plus-minus", selection-mode="single-persist" scale="l">
+    ${accordionContentInheritablePropsNonDefault}
+    </calcite-accordion>`);
+    const element = await page.find("calcite-accordion");
+
+    expect(await element.getProperty("iconPosition")).toBe("start");
+    expect(await element.getProperty("iconType")).toBe("plus-minus");
+    expect(await element.getProperty("selectionMode")).toBe("single-persist");
+    expect(await element.getProperty("scale")).toBe("l");
   });
 
   it("renders requested props when valid props are provided", async () => {

packages/calcite-components/src/components/accordion/accordion.tsx

@@ -1,5 +1,16 @@
-import { Component, Element, Event, EventEmitter, h, Listen, Prop, VNode } from "@stencil/core";
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Listen,
+  Prop,
+  VNode,
+  Watch
+} from "@stencil/core";
 import { Appearance, Position, Scale, SelectionMode } from "../interfaces";
+import { createObserver } from "../../utils/observers";
 import { RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
@@ -24,6 +35,9 @@ export class Accordion {
   //
   //--------------------------------------------------------------------------
 
+  /** Specifies the parent of the component. */
+  @Prop({ reflect: true }) accordionParent: HTMLCalciteAccordionElement;
+
   /** Specifies the appearance of the component. */
   @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid";
 
@@ -45,6 +59,14 @@ export class Accordion {
     SelectionMode
   > = "multiple";
 
+  @Watch("iconPosition")
+  @Watch("iconType")
+  @Watch("scale")
+  @Watch("selectionMode")
+  handlePropsChange(): void {
+    this.updateAccordionItems();
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -62,13 +84,26 @@ export class Accordion {
   //
   //--------------------------------------------------------------------------
 
+  connectedCallback(): void {
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateAccordionItems();
+  }
+
   componentDidLoad(): void {
     if (!this.sorted) {
-      this.items = this.sortItems(this.items);
+      this.accordionItems = this.sortItems(this.accordionItems);
       this.sorted = true;
     }
   }
 
+  // componentDidRender(): void {
+
+  // }
+
+  disconnectedCallback(): void {
+    this.mutationObserver?.disconnect();
+  }
+
   render(): VNode {
     const transparent = this.appearance === "transparent";
     return (
@@ -91,13 +126,15 @@ export class Accordion {
 
   @Listen("calciteInternalAccordionItemRegister")
   registerCalciteAccordionItem(event: CustomEvent): void {
+    this.accordionParent = event.detail.parent as HTMLCalciteAccordionElement;
+
     const item = {
-      item: event.target as HTMLCalciteAccordionItemElement,
-      parent: event.detail.parent as HTMLCalciteAccordionElement,
+      accordionItem: event.target as HTMLCalciteAccordionItemElement,
       position: event.detail.position as number
     };
-    if (this.el === item.parent) {
-      this.items.push(item);
+
+    if (this.el === this.accordionParent) {
+      this.accordionItems.push(item);
     }
     event.stopPropagation();
   }
@@ -117,8 +154,13 @@ export class Accordion {
   //
   //--------------------------------------------------------------------------
 
-  /** created list of Accordion items */
-  private items = [];
+  mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
+
+  /** list of `accordion-item`s */
+  accordionItems: {
+    accordionItem: HTMLCalciteAccordionItemElement;
+    position: number;
+  }[] = [];
 
   /** keep track of whether the items have been sorted so we don't re-sort */
   private sorted = false;
@@ -132,6 +174,24 @@ export class Accordion {
   //
   //--------------------------------------------------------------------------
 
-  private sortItems = (items: any[]): any[] =>
-    items.sort((a, b) => a.position - b.position).map((a) => a.item);
+  private updateAccordionItems = (): void => {
+    const accordionItemsQueryArray = Array.from(this.el.querySelectorAll("calcite-accordion-item"));
+
+    this.accordionItems = accordionItemsQueryArray.map((_item, index) => {
+      return { accordionItem: accordionItemsQueryArray[index], position: null };
+    });
+
+    this.accordionItems.forEach((object) => {
+      const accordionItem = object.accordionItem;
+      accordionItem.iconPosition = this.iconPosition;
+      accordionItem.iconType = this.iconType;
+      accordionItem.selectionMode = this.selectionMode;
+      accordionItem.scale = this.scale;
+      accordionItem.accordionParent = this.el;
+    });
+  };
+
+  private sortItems = (
+    accordionItems: { accordionItem: HTMLCalciteAccordionItemElement; position: number }[]
+  ): any[] => accordionItems.sort((a, b) => a.position - b.position).map((a) => a.accordionItem);
 }