diff --git a/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html b/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html index ca0aa3b6a66..5cf6d66638f 100644 --- a/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html +++ b/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html @@ -4,7 +4,7 @@

Radio Group

Defaults

- + One Two @@ -13,7 +13,7 @@

Defaults

Single radio

- + Michael Jordan
diff --git a/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html b/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html index e662f91b7a2..1037d60bb93 100644 --- a/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html +++ b/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html @@ -1,41 +1,41 @@ -
- - - - 0℃ - - - 10℃ - - +

Toggle orientation

+
+ + + + 0℃ + + + 10℃ + + + 90℃ + + - 90℃ + 100℃ - - 100℃ - - - - - - - -
- - + +
+

Vertical

+
+ + + 0℃ + @@ -46,242 +46,277 @@ > 90℃ + + 100℃ + -
- -
- -
+ +

Defaults

+ + + +

Text labels

+
+ - 10 - - - 20 - - - 40 + 10℃ - 60 - - - 80 + 90℃
-
- - - - - 0 - - - 10 - - - 20 - - - 30 - - - 40 - - - 50 - - - 60 - - - 70 - - - 80 - - - 90 - - - 100 - - - - - - + +

Custom labels and rtl support

+
+ +
+ + + 10 + + + 20 + + + 40 + + + 60 + + + 80 + + +
+
- - +

Custom thumb

+ + + 0 + + + 10 + + + 20 + + + 30 + + + 40 + + + 50 + + + 60 + + + 70 + + + 80 + + + 90 + + + 100 + - - - 50 - - + + +

Custom labels and thumb and hidden marks on labels

+ + + + + + + + 50 + + + + Clock Icon + + + - Clock Icon - - - - - + - - - - 0 - - - 10 - - - 20 - - - 30 - - - 40 - - - 50 - - - 60 - - - 70 - - - 80 - - - 90 - - +

Disabled

+ - 100 - - + + 0 + + + 10 + + + 20 + + + 30 + + + 40 + + + 50 + + + 60 + + + 70 + + + 80 + + + 90 + + + 100 + + +
\ No newline at end of file diff --git a/packages/web-components/fast-components/src/radio-group/fixtures/base.html b/packages/web-components/fast-components/src/radio-group/fixtures/base.html index 4931d62e385..ffba205bbe2 100644 --- a/packages/web-components/fast-components/src/radio-group/fixtures/base.html +++ b/packages/web-components/fast-components/src/radio-group/fixtures/base.html @@ -4,7 +4,7 @@

Radio Group

Defaults

- + One Two @@ -12,7 +12,7 @@

Defaults

- + Fir Juniper Hemlock @@ -22,18 +22,18 @@

Defaults

- + Michael Jordan
- + Single life
- + Apples Oranges @@ -60,7 +60,7 @@

Defaults

- + Lamborghini Ferari @@ -68,7 +68,7 @@

Defaults

- + Word Excel @@ -76,7 +76,7 @@

Defaults

- + Ice Man Maverick diff --git a/packages/web-components/fast-components/src/slider/fixtures/base.html b/packages/web-components/fast-components/src/slider/fixtures/base.html index aad74585071..98b65ea991d 100644 --- a/packages/web-components/fast-components/src/slider/fixtures/base.html +++ b/packages/web-components/fast-components/src/slider/fixtures/base.html @@ -1,5 +1,6 @@
+

Toggle orientation

+

Defaults

+

horizontal with left offset

+ +

Vertical with top offset

+ + +

Negative positions

+ +

Min value greater than 0

+
+ + + 5 + + + 15 + + +
+

Text labels

+

Custom labels (rtl)

@@ -140,6 +174,7 @@
+

Custom thumb

- + +

Vertical

+ + + 0℃ + + + 10℃ + + + 90℃ + + + 100℃ + + + + +

Custom labels and thumb, hide marks on labels

+

Disabled

{ const group: RadioControl[] = this.getFilteredRadioButtons(); let index: number = 0; + if (e.keyCode !== keyCodeTab) { + e.preventDefault(); + } switch (e.keyCode) { case keyCodeEnter: this.checkFocusedRadio(); diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts index a41e1ce1363..0e2ecf7d3f2 100644 --- a/packages/web-components/fast-foundation/src/slider/slider.ts +++ b/packages/web-components/fast-foundation/src/slider/slider.ts @@ -7,6 +7,7 @@ import { keyCodeArrowUp, keyCodeEnd, keyCodeHome, + keyCodeTab, Orientation, } from "@microsoft/fast-web-utilities"; import { FormAssociated } from "../form-associated/index"; @@ -133,6 +134,7 @@ export class Slider extends FormAssociated this.setupTrackConstraints(); this.setupListeners(); this.setupDefaultValue(); + this.setThumbPositionForOrientation(this.direction); } public disconnectedCallback(): void { @@ -167,6 +169,10 @@ export class Slider extends FormAssociated protected keypressHandler = (e: KeyboardEvent) => { super.keypressHandler(e); + if (e.keyCode !== keyCodeTab) { + e.preventDefault(); + } + if (e.keyCode === keyCodeHome) { this.value = `${this.min}`; } else if (e.keyCode === keyCodeEnd) { @@ -215,8 +221,9 @@ export class Slider extends FormAssociated private setupTrackConstraints = (): void => { this.trackWidth = this.track.clientWidth; this.trackMinWidth = this.track.clientLeft; - this.trackHeight = this.track.clientHeight; - this.trackMinHeight = this.track.getBoundingClientRect().top; + const clientRect: DOMRect = this.track.getBoundingClientRect(); + this.trackHeight = clientRect.bottom; + this.trackMinHeight = clientRect.top; }; private setupListeners = (): void => { @@ -299,12 +306,12 @@ export class Slider extends FormAssociated }; private clickHandler = (e: MouseEvent) => { + e.preventDefault(); if (!this.disabled && !this.readOnly) { this.trackWidth = this.track.clientWidth; if (this.trackWidth === 0) { this.trackWidth = 1; } - e.preventDefault(); (e.target as HTMLElement).focus(); window.addEventListener("mouseup", this.handleWindowMouseUp); window.addEventListener("mousemove", this.handleMouseMove); @@ -313,6 +320,7 @@ export class Slider extends FormAssociated this.orientation === Orientation.horizontal ? e.pageX - this.getBoundingClientRect().left : e.pageY; + this.value = `${this.calculateNewValue(controlValue)}`; this.updateForm(); }