Foundation: Update Slider templates (#6800)

microsoft · Mar 7, 2024 · 2ba8729 · 2ba8729
1 parent 97ef4d7
commit 2ba8729
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 78 deletions.
diff --git a/change/@microsoft-fast-foundation-eadfb2dc-2d02-48d8-9106-739f0c3e80d2.json b/change/@microsoft-fast-foundation-eadfb2dc-2d02-48d8-9106-739f0c3e80d2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Foundation: Update Slider templates (https://github.com/microsoft/fast/pull/6800)",
+  "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
@@ -1887,7 +1887,7 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
     // @internal (undocumented)
     stepMultiplier: number;
     // @internal (undocumented)
-    thumb: HTMLDivElement;
+    thumbContainer: HTMLDivElement;
     // @internal (undocumented)
     track: HTMLDivElement;
     // @internal (undocumented)
@@ -1911,6 +1911,8 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
 export class FASTSliderLabel extends FASTElement {
     // @internal (undocumented)
     connectedCallback(): void;
+    // @internal (undocumented)
+    container: HTMLDivElement;
     disabled: boolean;
     // @internal (undocumented)
     disconnectedCallback(): void;
@@ -1927,8 +1929,6 @@ export class FASTSliderLabel extends FASTElement {
     // @internal (undocumented)
     positionStyle: string;
     // @internal (undocumented)
-    root: HTMLDivElement;
-    // @internal (undocumented)
     sliderDirection: Direction;
     // @internal (undocumented)
     sliderMaxPosition: number;

diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
@@ -8,18 +8,21 @@ import type { FASTSliderLabel } from "./slider-label.js";
 export function sliderLabelTemplate<T extends FASTSliderLabel>(): ElementViewTemplate<T> {
     return html<T>`
         <template aria-disabled="${x => x.disabled}">
-            <div ${ref("root")} part="root" class="root" style="${x => x.positionStyle}">
-                <div class="container">
-                    ${when(
-                        x => !x.hideMark,
-                        html`
-                            <div class="mark"></div>
-                        `
-                    )}
-                    <div class="label">
-                        <slot></slot>
-                    </div>
-                </div>
+            <div
+                ${ref("container")}
+                part="container"
+                class="container"
+                style="${x => x.positionStyle}"
+            >
+                ${when(
+                    x => !x.hideMark,
+                    html`
+                        <div class="mark" part="mark"></div>
+                    `
+                )}
+                <span class="content" part="content">
+                    <slot></slot>
+                </span>
             </div>
         </template>
     `;

diff --git a/packages/web-components/fast-foundation/src/slider-label/slider-label.ts b/packages/web-components/fast-foundation/src/slider-label/slider-label.ts
@@ -21,7 +21,9 @@ const defaultConfig: SliderConfiguration = {
  * A label element intended to be used with the {@link @microsoft/fast-foundation#(FASTSlider:class)} component.
  *
  * @slot - The default slot for the label content
- * @csspart root - The element wrapping the label mark and text
+ * @csspart container - The element wrapping the label mark and content
+ * @csspart mark - The element wrapping the label mark
+ * @csspart content - The element wrapping the label content
  *
  * @public
  */
@@ -35,7 +37,7 @@ export class FASTSliderLabel extends FASTElement {
     /**
      * @internal
      */
-    public root: HTMLDivElement;
+    public container: HTMLDivElement;
 
     /**
      * The position of the label relative to the min and max value of the parent {@link @microsoft/fast-foundation#(FASTSlider:class)}.

diff --git a/packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts b/packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts
@@ -9,26 +9,27 @@ const styles = css`
         color: var(--neutral-foreground-rest);
         fill: currentcolor;
     }
-    .root {
-        position: absolute;
-        display: grid;
-    }
+
     .container {
+        position: absolute;
         display: grid;
         justify-self: center;
     }
-    .label {
+
+    .content {
         justify-self: center;
         align-self: center;
         white-space: nowrap;
         max-width: 30px;
     }
+
     .mark {
         width: calc((var(--design-unit) / 4) * 1px);
         height: calc(var(--height-number) * 0.25 * 1px);
         background: var(--neutral-stroke-rest);
         justify-self: center;
     }
+
     :host([aria-disabled="true"]) {
         opacity: var(--disabled-opacity);
     }
@@ -42,11 +43,13 @@ const horizontalSliderLabelStyles = css`
         height: calc((var(--height-number) / 2 + var(--design-unit)) * 1px);
         width: auto;
     }
+
     .container {
         grid-template-rows: auto auto;
         grid-template-columns: 0;
     }
-    .label {
+
+    .content {
         margin: 2px 0;
     }
 `;
@@ -59,17 +62,20 @@ const verticalSliderLabelStyles = css`
         height: auto;
         width: calc((var(--height-number) / 2 + var(--design-unit)) * 1px);
     }
+
     .container {
         grid-template-columns: auto auto;
         grid-template-rows: 0;
         min-width: calc(var(--thumb-size) * 1px);
         height: calc(var(--thumb-size) * 1px);
     }
+
     .mark {
         transform: rotate(90deg);
         align-self: center;
     }
-    .label {
+
+    .content {
         margin-left: calc((var(--design-unit) / 2) * 3px);
         align-self: center;
     }

diff --git a/packages/web-components/fast-foundation/src/slider/README.md b/packages/web-components/fast-foundation/src/slider/README.md
@@ -211,12 +211,13 @@ export const mySliderLabel = SliderLabel.compose({
 
 #### CSS Parts
 
-| Name                 | Description                                                     |
-| -------------------- | --------------------------------------------------------------- |
-| `positioning-region` | The region used to position the elements of the slider          |
-| `track-container`    | The region containing the track elements                        |
-| `track-start`        | The element wrapping the track start slot                       |
-| `thumb-container`    | The thumb container element which is programatically positioned |
+| Name                 | Description                                                      |
+| -------------------- | ---------------------------------------------------------------- |
+| `positioning-region` | The region used to position the elements of the slider           |
+| `track`              | The region containing the track elements                         |
+| `track-start`        | The element wrapping the track start slot                        |
+| `thumb-container`    | The thumb container element which is programmatically positioned |
+| `thumb`              | The thumb element                                                |
 
 #### Slots
 
@@ -265,9 +266,11 @@ export const mySliderLabel = SliderLabel.compose({
 
 #### CSS Parts
 
-| Name   | Description                                  |
-| ------ | -------------------------------------------- |
-| `root` | The element wrapping the label mark and text |
+| Name        | Description                                     |
+| ----------- | ----------------------------------------------- |
+| `container` | The element wrapping the label mark and content |
+| `mark`      | The element wrapping the label mark             |
+| `content`   | The element wrapping the label content          |
 
 #### Slots
 

diff --git a/packages/web-components/fast-foundation/src/slider/slider.template.ts b/packages/web-components/fast-foundation/src/slider/slider.template.ts
@@ -21,10 +21,9 @@ export function sliderTemplate<T extends FASTSlider>(
             aria-disabled="${x => (x.disabled ? true : void 0)}"
             aria-readonly="${x => (x.readOnly ? true : void 0)}"
             aria-orientation="${x => x.orientation}"
-            class="${x => x.orientation}"
         >
             <div part="positioning-region" class="positioning-region">
-                <div ${ref("track")} part="track-container" class="track">
+                <div ${ref("track")} part="track" class="track">
                     <slot name="track"></slot>
                     <div
                         part="track-start"
@@ -36,12 +35,14 @@ export function sliderTemplate<T extends FASTSlider>(
                 </div>
                 <slot></slot>
                 <div
-                    ${ref("thumb")}
+                    ${ref("thumbContainer")}
                     part="thumb-container"
                     class="thumb-container"
                     style="${x => x.position}"
                 >
-                    <slot name="thumb">${staticallyCompose(options.thumb)}</slot>
+                    <div class="thumb" part="thumb">
+                        <slot name="thumb">${staticallyCompose(options.thumb)}</slot>
+                    </div>
                 </div>
             </div>
         </template>

diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -24,9 +24,10 @@ import { SliderConfiguration, SliderMode } from "./slider.options.js";
  * @slot thumb - The slider thumb
  * @slot - The default slot for labels
  * @csspart positioning-region - The region used to position the elements of the slider
- * @csspart track-container - The region containing the track elements
+ * @csspart track - The region containing the track elements
  * @csspart track-start - The element wrapping the track start slot
- * @csspart thumb-container - The thumb container element which is programatically positioned
+ * @csspart thumb-container - The thumb container element which is programmatically positioned
+ * @csspart thumb - The thumb element
  * @fires change - Fires a custom 'change' event when the slider value changes
  *
  * @public
@@ -55,7 +56,7 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
     /**
      * @internal
      */
-    public thumb: HTMLDivElement;
+    public thumbContainer: HTMLDivElement;
 
     /**
      * @internal
@@ -381,10 +382,10 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
         const eventAction = `${remove ? "remove" : "add"}EventListener`;
         this[eventAction]("keydown", this.keypressHandler);
         this[eventAction]("mousedown", this.handleMouseDown);
-        this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {
+        this.thumbContainer[eventAction]("mousedown", this.handleThumbMouseDown, {
             passive: true,
         });
-        this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
+        this.thumbContainer[eventAction]("touchstart", this.handleThumbMouseDown, {
             passive: true,
         });
         // removes handlers attached by mousedown handlers