- Updated containment for thumb part and slot

- Story and default style cleanup
microsoft · Feb 4, 2024 · 76e5763 · 76e5763
1 parent f0de47c
commit 76e5763
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/packages/web-components/fast-foundation/src/slider/slider.template.ts b/packages/web-components/fast-foundation/src/slider/slider.template.ts
@@ -40,11 +40,9 @@ export function sliderTemplate<T extends FASTSlider>(
                     class="thumb-container"
                     style="${x => x.position}"
                 >
-                    <slot name="thumb">
-                        ${staticallyCompose(
-                            options.thumb ?? `<div class="thumb" part="thumb"></div>`
-                        )}
-                    </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/stories/slider.register.ts b/packages/web-components/fast-foundation/src/slider/stories/slider.register.ts
@@ -11,44 +11,42 @@ const styles = css`
         display: inline-grid;
         --thumb-size: calc(var(--height-number) * 0.5 - var(--design-unit));
         --thumb-translate: calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);
-        --track-overhang: calc((var(--design-unit) / 2) * -1);
         --track-width: var(--design-unit);
         --fast-slider-height: calc(var(--thumb-size) * 10);
-        align-items: center;
-        margin: calc(var(--design-unit) * 1px) 0;
         user-select: none;
         box-sizing: border-box;
         border-radius: calc(var(--control-corner-radius) * 1px);
         outline: none;
         cursor: pointer;
     }
 
-    :host([orientation="horizontal"]) .positioning-region {
+    .positioning-region {
         position: relative;
-        margin: 0 8px;
         display: grid;
+    }
+
+    :host([orientation="horizontal"]) .positioning-region {
         grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;
     }
 
     :host([orientation="vertical"]) .positioning-region {
-        position: relative;
-        margin: 0 8px;
-        display: grid;
         height: 100%;
         grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
     }
 
-    :host(:focus-visible) .thumb {
-        box-shadow: 0 0 0 2px var(--fill-color), 0 0 0 4px var(--focus-stroke-outer);
-    }
-
     .thumb-container {
         position: absolute;
         height: calc(var(--thumb-size) * 1px);
         width: calc(var(--thumb-size) * 1px);
         transition: all 0.2s ease;
-        color: var(--neutral-foreground-rest);
-        fill: currentcolor;
+    }
+
+    :host([orientation="horizontal"]) .thumb-container {
+        transform: translateX(calc(var(--thumb-size) * 0.5px));
+    }
+
+    :host([orientation="vertical"]) .thumb-container {
+        transform: translateY(calc(var(--thumb-size) * -0.5px));
     }
 
     .thumb {
@@ -57,6 +55,8 @@ const styles = css`
         height: calc(var(--thumb-size) * 1px);
         background: var(--neutral-foreground-rest);
         border-radius: calc(var(--control-corner-radius) * 1px);
+        color: var(--neutral-foreground-rest);
+        fill: currentcolor;
     }
 
     .thumb:hover {
@@ -68,6 +68,10 @@ const styles = css`
         background: var(--neutral-foreground-rest);
     }
 
+    :host(:focus-visible) .thumb {
+        box-shadow: 0 0 0 2px var(--fill-color), 0 0 0 4px var(--focus-stroke-outer);
+    }
+
     .track-start {
         background: var(--accent-foreground-rest);
         position: absolute;
@@ -80,32 +84,23 @@ const styles = css`
         left: 0;
     }
 
-    :host([orientation="horizontal"]) .thumb-container {
-        transform: translateX(calc(var(--thumb-size) * 0.5px))
-            translateY(calc(var(--thumb-translate) * 1px));
-    }
-
-    :host([orientation="vertical"]) .thumb-container {
-        transform: translateX(calc(var(--thumb-translate) * 1px))
-            translateY(calc(var(--thumb-size) * -0.5px));
-    }
-
     :host([orientation="horizontal"]) {
         touch-action: pan-y;
         min-width: calc(var(--thumb-size) * 1px);
         width: 100%;
     }
 
     :host([orientation="horizontal"]) .track {
-        right: calc(var(--track-overhang) * 1px);
-        left: calc(var(--track-overhang) * 1px);
-        align-self: start;
+        top: calc(((var(--thumb-size) - var(--track-width)) / 2) * 1px);
+        right: 0;
+        left: 0;
         height: calc(var(--track-width) * 1px);
     }
 
     :host([orientation="vertical"]) .track {
-        top: calc(var(--track-overhang) * 1px);
-        bottom: calc(var(--track-overhang) * 1px);
+        left: calc(((var(--thumb-size) - var(--track-width)) / 2) * 1px);
+        top: 0;
+        bottom: 0;
         width: calc(var(--track-width) * 1px);
         height: 100%;
     }

diff --git a/packages/web-components/fast-foundation/src/slider/stories/slider.stories.ts b/packages/web-components/fast-foundation/src/slider/stories/slider.stories.ts
@@ -78,6 +78,23 @@ SliderVerticalOrientation.args = {
     orientation: SliderOrientation.vertical,
 };
 
+export const SliderVerticalOrientationWithLabels: Story<FASTSlider> = Slider.bind({});
+SliderVerticalOrientationWithLabels.args = {
+    orientation: SliderOrientation.vertical,
+    min: 0,
+    max: 100,
+    step: 10,
+    storyContent: html`
+        ${repeat(x => x.storyItems, sliderLabelStoryTemplate)}
+    `,
+    storyItems: [
+        { position: 0, storyContent: "0℃" },
+        { position: 10, storyContent: "10℃" },
+        { position: 90, storyContent: "90℃" },
+        { position: 100, storyContent: "100℃" },
+    ],
+};
+
 export const SliderInForm: Story<FASTSlider> = renderComponent(
     html<StoryArgs<FASTSlider>>`
         <form @submit="${() => false}">