refactor(web-components): cleanup accordion and update to elementInte…

…rnals for state (#31866)
microsoft · Jul 3, 2024 · 61b0027 · 61b0027
1 parent 0ad7f7c
commit 61b0027
Show file tree

Hide file tree

Showing 15 changed files with 298 additions and 355 deletions.
diff --git a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
@@ -63,41 +63,41 @@ export const Size = () =>
 export const SizeRTL = getStoryVariant(Size, RTL);
 export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
 
-export const ExpandIconPositionEnd = () =>
+export const MarkerPositionEnd = () =>
   parse(`
   <fluent-accordion openItems={[0]}>
-    <fluent-accordion-item expanded expand-icon-position="end">
+    <fluent-accordion-item expanded marker-position="end">
       <span slot="heading">Opened</span>
       Visible Panel
     </fluent-accordion-item>
-    <fluent-accordion-item expand-icon-position="end">
+    <fluent-accordion-item marker-position="end">
       <span slot="heading">Closed</span>
       Hidden Panel
     </fluent-accordion-item>
   </fluent-accordion>
 `);
 
-export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
-export const ExpandIconPositionEndDarkMode = getStoryVariant(ExpandIconPositionEnd, DARK_MODE);
+export const MarkerPositionEndRTL = getStoryVariant(MarkerPositionEnd, RTL);
+export const MarkerPositionEndDarkMode = getStoryVariant(MarkerPositionEnd, DARK_MODE);
 
 export const AccordionWithCustomIcons = () =>
   parse(`
   <fluent-accordion>
     <fluent-accordion-item>
-      <span slot="collapsed-icon">${add20Filled}</span>
-      <span slot="expanded-icon">${subtract20Filled}</span>
+      <span slot="marker-collapsed">${add20Filled}</span>
+      <span slot="marker-expanded">${subtract20Filled}</span>
       <span slot="heading">Accordion Header 1</span>
       Accordion Panel 1
     </fluent-accordion-item>
     <fluent-accordion-item>
-      <span slot="collapsed-icon">${add20Filled}</span>
-      <span slot="expanded-icon">${subtract20Filled}</span>
+      <span slot="marker-collapsed">${add20Filled}</span>
+      <span slot="marker-expanded">${subtract20Filled}</span>
       <span slot="heading">Accordion Header 2</span>
       Accordion Panel 1
     </fluent-accordion-item>
     <fluent-accordion-item>
-      <span slot="collapsed-icon">${add20Filled}</span>
-      <span slot="expanded-icon">${subtract20Filled}</span>
+      <span slot="marker-collapsed">${add20Filled}</span>
+      <span slot="marker-expanded">${subtract20Filled}</span>
       <span slot="heading">Accordion Header 3</span>
       Accordion Panel 1
     </fluent-accordion-item>

diff --git a/change/@fluentui-web-components-bfd68275-8db7-4591-a7d9-3adfcc8ba806.json b/change/@fluentui-web-components-bfd68275-8db7-4591-a7d9-3adfcc8ba806.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor(web-components): cleanup accordion and convert to element internals for states",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -23,12 +23,12 @@ import { ViewTemplate } from '@microsoft/fast-element';
 
 // @public
 export class Accordion extends FASTElement {
-    // (undocumented)
+    // @internal (undocumented)
     protected accordionItems: Element[];
     expandmode: AccordionExpandMode;
     // (undocumented)
     expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
-    // @internal (undocumented)
+    // @internal
     handleChange(source: any, propertyName: string): void;
     // @internal (undocumented)
     slottedAccordionItems: HTMLElement[];
@@ -56,16 +56,21 @@ export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
 // @public (undocumented)
 export class AccordionItem extends FASTElement {
     block: boolean;
-    // @internal (undocumented)
-    clickHandler: (e: MouseEvent) => void;
+    blockChanged(prev: boolean, next: boolean): void;
     disabled: boolean;
+    disabledChanged(prev: boolean, next: boolean): void;
+    // @internal
+    elementInternals: ElementInternals;
     // @internal (undocumented)
     expandbutton: HTMLElement;
     expanded: boolean;
-    expandIconPosition?: AccordionItemExpandIconPosition;
+    expandedChanged(prev: boolean, next: boolean): void;
     headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
     id: string;
+    markerPosition?: AccordionItemMarkerPosition;
+    markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
     size?: AccordionItemSize;
+    sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void;
 }
 
 // Warning: (ae-forgotten-export) The symbol "StartEnd" needs to be exported by the entry point index.d.ts
@@ -77,16 +82,16 @@ export interface AccordionItem extends StartEnd {
 // @public (undocumented)
 export const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
 
-// Warning: (ae-missing-release-tag) "AccordionItemExpandIconPosition" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+// Warning: (ae-missing-release-tag) "AccordionItemMarkerPosition" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const AccordionItemExpandIconPosition: {
+export const AccordionItemMarkerPosition: {
     readonly start: "start";
     readonly end: "end";
 };
 
 // @public
-export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;
 
 // Warning: (ae-forgotten-export) The symbol "StartEndOptions" needs to be exported by the entry point index.d.ts
 //

diff --git a/packages/web-components/src/accordion-item/README.md b/packages/web-components/src/accordion-item/README.md
@@ -30,24 +30,24 @@ Fluent WC3 Accordion Item extends from the [FAST Accordion Item](https://explore
 
 ### **Variables**
 
-| Name                              | Description                | Type                                                                              |
-| --------------------------------- | -------------------------- | --------------------------------------------------------------------------------- |
-| `AccordionItemSize`               | Expand modes for Accordion | `{ small: "small", medium: "medium", large: "large", extraLarge: "extra-large" }` |
-| `AccordionItemExpandIconPosition` | Expand icon position       | `{ start: "start", end: "end" }`                                                  |
+| Name                          | Description                | Type                                                                              |
+| ----------------------------- | -------------------------- | --------------------------------------------------------------------------------- |
+| `AccordionItemSize`           | Expand modes for Accordion | `{ small: "small", medium: "medium", large: "large", extraLarge: "extra-large" }` |
+| `AccordionItemMarkerPosition` | Expand icon position       | `{ start: "start", end: "end" }`                                                  |
 
 <br />
 
 ### **Fields**
 
-| Name                 | Privacy | Type                              | Default  | Description                                                                                    | Inherited From |
-| -------------------- | ------- | --------------------------------- | -------- | ---------------------------------------------------------------------------------------------- | -------------- |
-| `headinglevel`       | public  | `1 or 2 or 3 or 4 or 5 or 6`      | `2`      | Configures the [level](https://www.w3.org/TR/wai-aria-1.1/#aria-level) of the heading element. |                |
-| `expanded`           | public  | `boolean`                         | `false`  | Expands or collapses the item.                                                                 |                |
-| `disabled`           | public  | `boolean`                         | `false`  | Disables an accordion item                                                                     |                |
-| `id`                 | public  | `string`                          |          | The item ID                                                                                    |                |
-| `size`               | public  | `AccordionItemSize`               | `medium` | The font size of the AccordionItem header.                                                     |
-| `block`              | public  | `boolean`                         | `true`   | Sets the width of the focus state.                                                             |
-| `expandIconPosition` | public  | `AccordionItemExpandIconPosition` | `start`  | Sets the position of the expand icon                                                           |
+| Name             | Privacy | Type                          | Default  | Description                                                                                    | Inherited From |
+| ---------------- | ------- | ----------------------------- | -------- | ---------------------------------------------------------------------------------------------- | -------------- |
+| `headinglevel`   | public  | `1 or 2 or 3 or 4 or 5 or 6`  | `2`      | Configures the [level](https://www.w3.org/TR/wai-aria-1.1/#aria-level) of the heading element. |                |
+| `expanded`       | public  | `boolean`                     | `false`  | Expands or collapses the item.                                                                 |                |
+| `disabled`       | public  | `boolean`                     | `false`  | Disables an accordion item                                                                     |                |
+| `id`             | public  | `string`                      |          | The item ID                                                                                    |                |
+| `size`           | public  | `AccordionItemSize`           | `medium` | The font size of the AccordionItem header.                                                     |
+| `block`          | public  | `boolean`                     | `true`   | Sets the width of the focus state.                                                             |
+| `markerPosition` | public  | `AccordionItemMarkerPosition` | `start`  | Sets the position of the expand icon                                                           |
 
 <br />
 
@@ -61,15 +61,15 @@ Fluent WC3 Accordion Item extends from the [FAST Accordion Item](https://explore
 
 ### **Attributes**
 
-| Name                 | Field              |
-| -------------------- | ------------------ |
-| `heading-level`      | headinglevel       |
-|                      | expanded           |
-|                      | disabled           |
-|                      | block              |
-| `id`                 | id                 |
-| `expandIconPosition` | expandIconPosition |
-| `size`               | size               |
+| Name             | Field          |
+| ---------------- | -------------- |
+| `heading-level`  | headinglevel   |
+|                  | expanded       |
+|                  | disabled       |
+|                  | block          |
+| `id`             | id             |
+| `markerPosition` | markerPosition |
+| `size`           | size           |
 
 <br />
 
@@ -136,6 +136,6 @@ Fluent WC3 Accordion Item extends from the [FAST Accordion Item](https://explore
 | `size` | `size` | |
 | `as: 'h1'` &#124; `'h2'` &#124; `'h3'` &#124; `'h4'` &#124; `'h5'` &#124; `'h6'` | `headinglevel: 1` &#124; `2` &#124; `3` &#124; `4` &#124; `5` &#124; `6` | `as` property sets a wrapper around the `AccordionItem` header with the corresponding header tag ( `h1`, `h2`, etc. ) <hr /> `headinglevel` sets the `aria-level` attribute to the corresponding heading level.
 | `disabled` | `disabled` |
-| `expandIconPosition` | `expand-icon-position` |
+| `markerPosition` | `marker-position` |
 | `expandIcon` | `named slot: collapsed-icon` + `expanded-icon` | `expandIcon` is a prop that is passed a ternary to render the appropriate icon. <hr /> `collapsed-icon` and `expanded-icon` are named slots to supply the appropriate icons.
 | `icon` | `named slot: start` + `end` | `icon` is a property set on the `AccordionHeader` through which an icon is passed <hr /> `start` and `end` are named slots through which to supply a presentation icon.
diff --git a/packages/web-components/src/accordion-item/accordion-item.options.ts b/packages/web-components/src/accordion-item/accordion-item.options.ts
@@ -19,7 +19,7 @@ export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
 /**
  * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
  */
-export const AccordionItemExpandIconPosition = {
+export const AccordionItemMarkerPosition = {
   start: 'start',
   end: 'end',
 } as const;
@@ -28,4 +28,4 @@ export const AccordionItemExpandIconPosition = {
  * Applies expand/collapse icon position
  * @public
  */
-export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;
diff --git a/packages/web-components/src/accordion-item/accordion-item.spec.ts b/packages/web-components/src/accordion-item/accordion-item.spec.ts
@@ -191,23 +191,23 @@ test.describe('Accordion item', () => {
     await expect(element).toHaveJSProperty('block', false);
   });
 
-  test('should set the expand-icon-position attribute to the provided value', async () => {
+  test('should set the marker-position attribute to the provided value', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
         <fluent-accordion>
-            <fluent-accordion-item expand-icon-position="end"></fluent-accordion-item>
+            <fluent-accordion-item marker-position="end"></fluent-accordion-item>
         </fluent-accordion>
       `;
     });
 
-    await expect(element).toHaveAttribute('expand-icon-position', 'end');
-    await expect(element).toHaveJSProperty('expandIconPosition', 'end');
+    await expect(element).toHaveAttribute('marker-position', 'end');
+    await expect(element).toHaveJSProperty('markerPosition', 'end');
 
     await element.evaluate<void, AccordionItem>(node => {
-      node.expandIconPosition = 'start';
+      node.markerPosition = 'start';
     });
 
-    await expect(element).toHaveAttribute('expand-icon-position', 'start');
-    await expect(element).toHaveJSProperty('expandIconPosition', 'start');
+    await expect(element).toHaveAttribute('marker-position', 'start');
+    await expect(element).toHaveJSProperty('markerPosition', 'start');
   });
 });