Foundation: Update standard template naming

change/@microsoft-fast-foundation-82e8ecae-0e02-4f0d-aa40-59763c8c59d9.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Foundation: Update standard template naming (https://github.com/microsoft/fast/pull/6922)",
+ "packageName": "@microsoft/fast-foundation",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/dialog/README.md

@@ -99,11 +99,10 @@ export const myDialog = Dialog.compose({
 
 #### CSS Parts
 
-| Name | Description |
-| -------------------- | --------------------------------------------------------------------------- |
-| `positioning-region` | A wrapping element used to center the dialog and position the modal overlay |
-| `overlay` | The modal dialog overlay |
-| `control` | The dialog element |
+| Name | Description |
+| --------- | ------------------------ |
+| `overlay` | The modal dialog overlay |
+| `control` | The dialog element |
 
 #### Slots
 

packages/web-components/fast-foundation/src/dialog/dialog.spec.md

@@ -64,22 +64,20 @@ Web components complicate the dialog focus queue implementation as the typical m
 ### Anatomy and Appearance
 **Structure:**
 ```
-<div class="root">
- <div class="positioning-region">
- <div class="overlay">
- <div
- role="dialog"
- aria-modal="true"
- tabindex="-1"
- class="content-region"
- aria-describedby="foo"
- aria-labelledby="bar"
- aria-label="baz"
- >
- <slot></slot>
- </div>
+<template>
+ <div class="overlay">
+ <div
+ role="dialog"
+ aria-modal="true"
+ tabindex="-1"
+ class="content-region"
+ aria-describedby="foo"
+ aria-labelledby="bar"
+ aria-label="baz"
+ >
+ <slot></slot>
  </div>
-</div>
+</template>
 ```
 
 **Appearance:**
@@ -89,10 +87,9 @@ Web components complicate the dialog focus queue implementation as the typical m
 | dark mode | ![](./images/dialog-dark.png) |
 
 Parts:
-- root - the root of the dialog
-- positioning-region - ensuring the dialog is centered correctly requires a certain structure. Centering with absolute positioning can cause blurry content within the dialog itself. After investigating several implementations, the best and most common way of ensuring the dialog can be centered is to include a div to position the actual dialog itself using something like flexbox or css-grid. This ensures that the blurry content issue does not happen and the dialog centers easily within the screen.
-- modal-overlay - the modal overlay
-- content-region - the region where content is actually rendered. This part is where the `role="dialog"` will actually exist
+- root - ensuring the dialog is centered correctly requires a certain structure. Centering with absolute positioning can cause blurry content within the dialog itself. After investigating several implementations, the best and most common way of ensuring the dialog can be centered is to include a div to position the actual dialog itself using something like flexbox or css-grid. This ensures that the blurry content issue does not happen and the dialog centers easily within the screen.
+- overlay - the modal overlay
+- dialog - the region where content is actually rendered. This part is where the `role="dialog"` will actually exist
 
 Animation:
 The current working model (assumption) is that animation will be taken up as part of the adaptive ui story in the design system at some point. This will provide configurability to users. From a dialog standpoint, I think we'll have a default animation baked in, though this would be configurable through the design system.

packages/web-components/fast-foundation/src/dialog/dialog.template.ts

@@ -7,31 +7,29 @@ import type { FASTDialog } from "./dialog.js";
  */
 export function dialogTemplate<T extends FASTDialog>(): ElementViewTemplate<T> {
  return html<T>`
- <div class="positioning-region" part="positioning-region">
- ${when(
- x => x.modal,
- html<T>`
- <div
- class="overlay"
- part="overlay"
- role="presentation"
- @click="${x => x.dismiss()}"
- ></div>
- `
- )}
- <div
- role="dialog"
- tabindex="-1"
- class="control"
- part="control"
- aria-modal="${x => (x.modal ? x.modal : void 0)}"
- aria-describedby="${x => x.ariaDescribedby}"
- aria-labelledby="${x => x.ariaLabelledby}"
- aria-label="${x => x.ariaLabel}"
- ${ref("dialog")}
- >
- <slot></slot>
- </div>
+ ${when(
+ x => x.modal,
+ html<T>`
+ <div
+ class="overlay"
+ part="overlay"
+ role="presentation"
+ @click="${x => x.dismiss()}"
+ ></div>
+ `
+ )}
+ <div
+ role="dialog"
+ tabindex="-1"
+ class="control"
+ part="control"
+ aria-modal="${x => (x.modal ? x.modal : void 0)}"
+ aria-describedby="${x => x.ariaDescribedby}"
+ aria-labelledby="${x => x.ariaLabelledby}"
+ aria-label="${x => x.ariaLabel}"
+ ${ref("dialog")}
+ >
+ <slot></slot>
  </div>
  `;
 }

packages/web-components/fast-foundation/src/dialog/dialog.ts

@@ -14,7 +14,6 @@ import { getRootActiveElement } from "../utilities/index.js";
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
  *
  * @slot - The default slot for the dialog content
- * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
  * @csspart overlay - The modal dialog overlay
  * @csspart control - The dialog element
  * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked

packages/web-components/fast-foundation/src/dialog/stories/dialog.register.ts

@@ -11,28 +11,24 @@ const styles = css`
  --elevation: 14;
  --dialog-height: 480px;
  --dialog-width: 640px;
- display: block;
- }
-
- .overlay {
+ display: flex;
+ justify-content: center;
  position: fixed;
  top: 0;
+ bottom: 0;
  left: 0;
  right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.3);
- touch-action: none;
+ overflow: auto;
  }
 
- .positioning-region {
- display: flex;
- justify-content: center;
+ .overlay {
  position: fixed;
  top: 0;
- bottom: 0;
  left: 0;
  right: 0;
- overflow: auto;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.3);
+ touch-action: none;
  }
 
  .control {

packages/web-components/fast-foundation/src/radio-group/README.md

@@ -111,9 +111,9 @@ export const myRadioGroup = RadioGroup.compose({
 
 #### CSS Parts
 
-| Name  | Description  |
-| -------------------- | ------------------------------------------------ |
-| `positioning-region` | The positioning region for laying out the radios |
+| Name | Description |
+| --------- | --------------------------------------- |
+| `control` | The container for laying out the radios |
 
 #### Slots
 

packages/web-components/fast-foundation/src/radio-group/radio-group.pw.spec.ts

@@ -50,31 +50,6 @@ test.describe("Radio Group", () => {
  );
  });
 
- test("should set a matching class on the `positioning-region` when an orientation is provided", async () => {
- await root.evaluate(node => {
- node.innerHTML = /* html */ `
- <fast-radio-group></fast-radio-group>
- `;
- });
-
- const positioningRegion = element.locator(".positioning-region");
-
- // Horizontal by default
- await expect(positioningRegion).toHaveClass(/horizontal/);
-
- await element.evaluate((node: FASTRadioGroup, RadioGroupOrientation) => {
- node.orientation = RadioGroupOrientation.vertical;
- }, RadioGroupOrientation);
-
- await expect(positioningRegion).toHaveClass(/vertical/);
-
- await element.evaluate((node: FASTRadioGroup, RadioGroupOrientation) => {
- node.orientation = RadioGroupOrientation.horizontal;
- }, RadioGroupOrientation);
-
- await expect(positioningRegion).toHaveClass(/horizontal/);
- });
-
  test("should set the `aria-orientation` attribute equal to the `orientation` value", async () => {
  await root.evaluate(node => {
  node.innerHTML = /* html */ `

packages/web-components/fast-foundation/src/radio-group/radio-group.template.ts

@@ -1,6 +1,5 @@
 import { elements, ElementViewTemplate, html, slotted } from "@microsoft/fast-element";
 import type { FASTRadioGroup } from "./radio-group.js";
-import { RadioGroupOrientation } from "./radio-group.options.js";
 
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.
@@ -20,13 +19,7 @@ export function radioGroupTemplate<T extends FASTRadioGroup>(): ElementViewTempl
  @focusout="${(x, c) => x.focusOutHandler(c.event as FocusEvent)}"
  >
  <slot name="label"></slot>
- <div
- class="positioning-region ${x =>
- x.orientation === RadioGroupOrientation.horizontal
- ? "horizontal"
- : "vertical"}"
- part="positioning-region"
- >
+ <div class="control" part="control">
  <slot
  ${slotted({
  property: "slottedRadioButtons",

packages/web-components/fast-foundation/src/radio-group/radio-group.ts

@@ -18,7 +18,7 @@ import { RadioGroupOrientation } from "./radio-group.options.js";
  *
  * @slot label - The slot for the label
  * @slot - The default slot for radio buttons
- * @csspart positioning-region - The positioning region for laying out the radios
+ * @csspart control - The container for laying out the radios
  * @fires change - Fires a custom 'change' event when the value changes
  *
  * @public

packages/web-components/fast-foundation/src/radio-group/stories/radio-group.register.ts

@@ -6,20 +6,24 @@ const styles = css`
  :host([hidden]) {
  display: none;
  }
+
  :host {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: calc(var(--design-unit) * 1px) 0;
  }
- .positioning-region {
+
+ .control {
  display: flex;
  flex-wrap: wrap;
  }
- :host([orientation="vertical"]) .positioning-region {
+
+ :host([orientation="vertical"]) .control {
  flex-direction: column;
  }
- :host([orientation="horizontal"]) .positioning-region {
+
+ :host([orientation="horizontal"]) .control {
  flex-direction: row;
  }