Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Foundation: Update Slider templates #6800

Merged
merged 4 commits into from
Mar 7, 2024
Merged

Foundation: Update Slider templates #6800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c63d468
Foundation: Update Slider templates
bheston Aug 8, 2023
398db4d
Change files
bheston Aug 8, 2023
43a8949
- Updated containment for thumb part and slot
bheston Feb 4, 2024
7d8ec96
Doc updates
bheston Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@microsoft-fast-foundation-eadfb2dc-2d02-48d8-9106-739f0c3e80d2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
6 changes: 3 additions & 3 deletions packages/web-components/fast-foundation/docs/api-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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;
Expand All @@ -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;
Expand Down
27 changes: 15 additions & 12 deletions packages/web-components/fast-foundation/src/slider-label/slider-label.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
Expand Down
6 changes: 4 additions & 2 deletions packages/web-components/fast-foundation/src/slider-label/slider-label.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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)}.
Expand Down
20 changes: 13 additions & 7 deletions packages/web-components/fast-foundation/src/slider-label/stories/slider-label.register.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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;
}
`;
Expand All @@ -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;
}
Expand Down
21 changes: 12 additions & 9 deletions packages/web-components/fast-foundation/src/slider/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
9 changes: 5 additions & 4 deletions packages/web-components/fast-foundation/src/slider/slider.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions packages/web-components/fast-foundation/src/slider/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -55,7 +56,7 @@ export class FASTSlider extends FormAssociatedSlider implements SliderConfigurat
/**
* @internal
*/
public thumb: HTMLDivElement;
public thumbContainer: HTMLDivElement;

/**
* @internal
Expand Down Expand Up @@ -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
Expand Down
Loading
Loading