Foundation: Update Accordion template element naming (#6796)

microsoft · Mar 7, 2024 · 9d7b36d · 9d7b36d
1 parent 2ba8729
commit 9d7b36d
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 72 deletions.
diff --git a/change/@microsoft-fast-foundation-422cca6d-1c45-47a9-aa69-517df2d15393.json b/change/@microsoft-fast-foundation-422cca6d-1c45-47a9-aa69-517df2d15393.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Foundation: Update Accordion template element naming (https://github.com/microsoft/fast/pull/6796)",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -31,8 +31,7 @@ export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
 
 // @public
 export type AccordionItemOptions = StartEndOptions<FASTAccordionItem> & {
-    expandedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
-    collapsedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
+    expandCollapseIcon?: StaticallyComposableHTML<FASTAccordionItem>;
 };
 
 // @public

diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
@@ -31,20 +31,20 @@ export function accordionItemTemplate<T extends FASTAccordionItem>(
                     <slot name="heading"></slot>
                 </span>
             </button>
+            ${
+                /* The start slot is after the button for an improved screen reader experience */ ""
+            }
             ${startSlotTemplate(options)}
             ${endSlotTemplate(options)}
-            <span class="icon" part="icon" aria-hidden="true">
-                <slot name="expanded-icon">
-                    ${staticallyCompose(options.expandedIcon)}
-                </slot>
-                <slot name="collapsed-icon">
-                    ${staticallyCompose(options.collapsedIcon)}
+            <span class="expand-collapse-icon" part="expand-collapse-icon" aria-hidden="true">
+                <slot name="expand-collapse-icon">
+                    ${staticallyCompose(options.expandCollapseIcon)}
                 </slot>
             <span>
         </div>
         <div
-            class="region"
-            part="region"
+            class="panel"
+            part="panel"
             id="${x => x.id}-panel"
             role="region"
             aria-labelledby="${x => x.id}"

diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.ts
@@ -10,8 +10,7 @@ import { applyMixins } from "../utilities/apply-mixins.js";
  * @public
  */
 export type AccordionItemOptions = StartEndOptions<FASTAccordionItem> & {
-    expandedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
-    collapsedIcon?: StaticallyComposableHTML<FASTAccordionItem>;
+    expandCollapseIcon?: StaticallyComposableHTML<FASTAccordionItem>;
 };
 
 /**
@@ -21,14 +20,13 @@ export type AccordionItemOptions = StartEndOptions<FASTAccordionItem> & {
  * @slot end - Content which can be provided between the start slot and icon
  * @slot heading - Content which serves as the accordion item heading and text of the expand button
  * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
+ * @slot expand-collapse-icon - The expanded / collapsed icon
  * @fires change - Fires a custom 'change' event when the button is invoked
  * @csspart heading - Wraps the button
  * @csspart button - The button which serves to invoke the item
  * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
+ * @csspart expand-collapse-icon - The icon container
+ * @csspart panel - The wrapper for the accordion item content
  *
  * @public
  */

diff --git a/...ages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts b/...ages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts
@@ -1,5 +1,4 @@
 import { css } from "@microsoft/fast-element";
-import chevronDownIcon from "../../../statics/svg/chevron_down_12_regular.svg";
 import chevronUpIcon from "../../../statics/svg/chevron_up_12_regular.svg";
 import { FASTAccordionItem } from "../accordion-item.js";
 import { accordionItemTemplate } from "../accordion-item.template.js";
@@ -10,8 +9,8 @@ const styles = css`
         box-sizing: border-box;
         font-family: var(--body-font);
         flex-direction: column;
-        font-size: var(--type-ramp-minus-1-font-size);
-        line-height: var(--type-ramp-minus-1-line-height);
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
         border-bottom: calc(var(--stroke-width) * 1px) solid
             var(--neutral-stroke-divider-rest);
     }
@@ -20,7 +19,7 @@ const styles = css`
         opacity: var(--disabled-opacity);
     }
 
-    .region {
+    .panel {
         display: none;
         padding: calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px);
     }
@@ -48,7 +47,7 @@ const styles = css`
         );
         color: var(--neutral-foreground-rest);
         cursor: pointer;
-        font-family: inherit;
+        font: inherit;
     }
 
     .button:hover {
@@ -75,11 +74,11 @@ const styles = css`
         border-radius: calc(var(--control-corner-radius) * 1px);
     }
 
-    :host([expanded]) .region {
+    :host([expanded]) .panel {
         display: block;
     }
 
-    .icon {
+    .expand-collapse-icon {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -88,25 +87,14 @@ const styles = css`
         position: relative;
     }
 
-    slot[name="expanded-icon"],
-    slot[name="collapsed-icon"] {
-        fill: var(--accent-fill-rest);
+    slot[name="expand-collapse-icon"] * {
+        transition: transform 0.1s linear;
+        transform: rotate(0deg);
+        transform-origin: center;
     }
 
-    slot[name="collapsed-icon"] {
-        display: flex;
-    }
-
-    :host([expanded]) slot[name="collapsed-icon"] {
-        display: none;
-    }
-
-    slot[name="expanded-icon"] {
-        display: none;
-    }
-
-    :host([expanded]) slot[name="expanded-icon"] {
-        display: flex;
+    :host([expanded]) slot[name="expand-collapse-icon"] * {
+        transform: rotate(90deg);
     }
 
     ::slotted([slot="start"]) {
@@ -131,8 +119,7 @@ const styles = css`
 FASTAccordionItem.define({
     name: "fast-accordion-item",
     template: accordionItemTemplate({
-        collapsedIcon: chevronDownIcon,
-        expandedIcon: chevronUpIcon,
+        expandCollapseIcon: chevronUpIcon,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/accordion/README.md b/packages/web-components/fast-foundation/src/accordion/README.md
@@ -147,11 +147,11 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 | ------------- | ---------- | -------------- |
 | `expand-mode` | expandmode |                |
 
-#### CSS Parts
+#### Slots
 
-| Name   | Description                      |
-| ------ | -------------------------------- |
-| `item` | The slot for the accordion items |
+| Name | Description                      |
+| ---- | -------------------------------- |
+|      | The slot for the accordion items |
 
 <hr/>
 
@@ -191,24 +191,23 @@ export const myAccordionItem = AccordionItem.compose<AccordionItemOptions>({
 
 #### CSS Parts
 
-| Name              | Description                                              |
-| ----------------- | -------------------------------------------------------- |
-| `heading`         | Wraps the button                                         |
-| `button`          | The button which serves to invoke the item               |
-| `heading-content` | Wraps the slot for the heading content within the button |
-| `icon`            | The icon container                                       |
-| `region`          | The wrapper for the accordion item content               |
+| Name                   | Description                                              |
+| ---------------------- | -------------------------------------------------------- |
+| `heading`              | Wraps the button                                         |
+| `button`               | The button which serves to invoke the item               |
+| `heading-content`      | Wraps the slot for the heading content within the button |
+| `expand-collapse-icon` | The icon container                                       |
+| `panel`                | The wrapper for the accordion item content               |
 
 #### Slots
 
-| Name             | Description                                                                      |
-| ---------------- | -------------------------------------------------------------------------------- |
-| `start`          | Content which can be provided between the heading and the icon                   |
-| `end`            | Content which can be provided between the start slot and icon                    |
-| `heading`        | Content which serves as the accordion item heading and text of the expand button |
-|                  | The default slot for accordion item content                                      |
-| `expanded-icon`  | The expanded icon                                                                |
-| `collapsed-icon` | The collapsed icon                                                               |
+| Name                   | Description                                                                      |
+| ---------------------- | -------------------------------------------------------------------------------- |
+| `start`                | Content which can be provided between the heading and the icon                   |
+| `end`                  | Content which can be provided between the start slot and icon                    |
+| `heading`              | Content which serves as the accordion item heading and text of the expand button |
+|                        | The default slot for accordion item content                                      |
+| `expand-collapse-icon` | The expanded / collapsed icon                                                    |
 
 <hr/>
 

diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts b/packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts
@@ -2,7 +2,6 @@ import type { Locator, Page } from "@playwright/test";
 import { expect, test } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
 import { AccordionExpandMode } from "./accordion.options.js";
-import type { FASTAccordion } from "./accordion.js";
 
 test.describe("Accordion", () => {
     let page: Page;

diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.template.ts b/packages/web-components/fast-foundation/src/accordion/accordion.template.ts
@@ -7,10 +7,8 @@ import type { FASTAccordion } from "./accordion.js";
  */
 export function accordionTemplate<T extends FASTAccordion>(): ElementViewTemplate<T> {
     return html<T>`
-        <template>
-            <slot
-                ${slotted({ property: "slottedAccordionItems", filter: elements() })}
-            ></slot>
-        </template>
+        <slot
+            ${slotted({ property: "slottedAccordionItems", filter: elements() })}
+        ></slot>
     `;
 }
diff --git a/packages/web-components/fast-foundation/src/accordion/accordion.ts b/packages/web-components/fast-foundation/src/accordion/accordion.ts
@@ -14,8 +14,8 @@ import { AccordionExpandMode } from "./accordion.options.js";
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @slot - The slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
  * @public
  *
  * @remarks

diff --git a/packages/web-components/fast-foundation/src/accordion/stories/accordion.register.ts b/packages/web-components/fast-foundation/src/accordion/stories/accordion.register.ts
@@ -4,11 +4,8 @@ import { accordionTemplate } from "../accordion.template.js";
 
 const styles = css`
     :host {
-        box-sizing: border-box;
+        display: flex;
         flex-direction: column;
-        font: var(--type-ramp-minus1-font-size) / var(--type-ramp-minus1-line-height)
-            var(--body-font);
-        color: var(--neutral-foreground-rest);
         border-top: calc(var(--stroke-width) * 1px) solid
             var(--neutral-stroke-divider-rest);
     }

diff --git a/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts b/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts
@@ -66,6 +66,31 @@ AccordionWithSlottedStartEnd.args = {
     `,
 };
 
+export const AccordionWithSlottedInteractiveStartEnd: Story<FASTAccordion> =
+    renderComponent(storyTemplate).bind({});
+AccordionWithSlottedInteractiveStartEnd.args = {
+    storyContent: html`
+        <fast-accordion-item>
+            <fast-button slot="start">start</fast-button>
+            <span slot="heading">Accordion Item 1 Heading</span>
+            <fast-button slot="end">end</fast-button>
+            Accordion Item 1 Content
+        </fast-accordion-item>
+        <fast-accordion-item>
+            <fast-button slot="start">start</fast-button>
+            <span slot="heading">Accordion Item 2 Heading</span>
+            <fast-button slot="end">end</fast-button>
+            <fast-checkbox>A checkbox as content</fast-checkbox>
+        </fast-accordion-item>
+        <fast-accordion-item disabled>
+            <fast-button slot="start" disabled>start</fast-button>
+            <span slot="heading">Accordion Item 3 Heading</span>
+            <fast-button slot="end" disabled>end</fast-button>
+            Accordion Item 3 Content
+        </fast-accordion-item>
+    `,
+};
+
 export const AccordionWithExpandedChild: Story<FASTAccordion> = renderComponent(
     storyTemplate
 ).bind({});