Skip to content

Commit

Permalink
feat(slider): add style mixin + css modification (#234)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValentinNelu
ValentinNelu authored Nov 21, 2023
1 parent 142113c commit 585e2d5
Show file tree
Hide file tree
Showing 10 changed files with 93 additions and 55 deletions.
4 changes: 2 additions & 2 deletions angular/lib/src/lib/slider/slider.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ import {take} from 'rxjs';
[attr.aria-orientation]="state().vertical ? 'vertical' : null"
[disabled]="state().disabled"
[class]="state().vertical ? 'au-slider-handle-vertical' : 'au-slider-handle-horizontal'"
[style.left.%]="state().handleDisplayOptions[item.id].left"
[style.top.%]="state().handleDisplayOptions[item.id].top"
[style.left.%]="state().vertical ? null : state().handleDisplayOptions[item.id].left"
[style.top.%]="state().vertical ? state().handleDisplayOptions[item.id].top : null"
(keydown)="onKeyDown($event, item.id)"
(mousedown)="widget.actions.mouseDown($event, item.id)"
>
Expand Down
6 changes: 3 additions & 3 deletions e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h2>
aria-valuetext="70"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 70%; top: 0%;"
style="left: 70%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand Down Expand Up @@ -94,7 +94,7 @@ <h2>
aria-valuetext="20"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 20%; top: 0%;"
style="left: 20%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand Down Expand Up @@ -147,7 +147,7 @@ <h2>
class="au-slider-handle au-slider-handle-horizontal"
disabled=""
role="slider"
style="left: 60%; top: 0%;"
style="left: 60%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand Down
2 changes: 1 addition & 1 deletion e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
aria-valuetext="0"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 0%; top: 0%;"
style="left: 0%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand Down
14 changes: 7 additions & 7 deletions e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h2>
aria-valuetext="10"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 10%; top: 0%;"
style="left: 10%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand All @@ -72,7 +72,7 @@ <h2>
aria-valuetext="40"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 40%; top: 0%;"
style="left: 40%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand All @@ -88,7 +88,7 @@ <h2>
aria-valuetext="50"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 50%; top: 0%;"
style="left: 50%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand All @@ -104,7 +104,7 @@ <h2>
aria-valuetext="60"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 60%; top: 0%;"
style="left: 60%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand All @@ -120,7 +120,7 @@ <h2>
aria-valuetext="90"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 90%; top: 0%;"
style="left: 90%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand Down Expand Up @@ -170,7 +170,7 @@ <h2>
aria-valuetext="10"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 10%; top: 0%;"
style="left: 10%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand All @@ -186,7 +186,7 @@ <h2>
aria-valuetext="40"
class="au-slider-handle au-slider-handle-horizontal"
role="slider"
style="left: 40%; top: 0%;"
style="left: 40%;"
/>
<div
class="au-slider-label au-slider-label-now"
Expand Down
6 changes: 3 additions & 3 deletions e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
aria-valuetext="10"
class="au-slider-handle au-slider-handle-vertical"
role="slider"
style="left: 0%; top: 90%;"
style="top: 90%;"
/>
<div
class="au-slider-label-vertical au-slider-label-vertical-now"
Expand All @@ -67,7 +67,7 @@
aria-valuetext="40"
class="au-slider-handle au-slider-handle-vertical"
role="slider"
style="left: 0%; top: 60%;"
style="top: 60%;"
/>
<div
class="au-slider-label-vertical au-slider-label-vertical-now"
Expand Down Expand Up @@ -123,7 +123,7 @@
aria-valuetext="40"
class="au-slider-handle au-slider-handle-vertical"
role="slider"
style="left: 0%; top: 60%;"
style="top: 60%;"
/>
<div
class="au-slider-label-vertical au-slider-label-vertical-now"
Expand Down
42 changes: 21 additions & 21 deletions e2e/slider/slider.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const defaultExpectedState: {[key: string]: string | null} = {
ariaLabel: '60',
readonly: null,
disabled: null,
style: 'left: 60%; top: 0%;',
style: 'left: 60%;',
};

const defaultExpectedHandleState: {[key: string]: string | null}[] = [
Expand All @@ -22,7 +22,7 @@ const defaultExpectedHandleState: {[key: string]: string | null}[] = [
ariaLabel: '10',
readonly: null,
disabled: null,
style: 'left: 10%; top: 0%;',
style: 'left: 10%;',
},
{
value: '40',
Expand All @@ -32,7 +32,7 @@ const defaultExpectedHandleState: {[key: string]: string | null}[] = [
ariaLabel: '40',
readonly: null,
disabled: null,
style: 'left: 40%; top: 0%;',
style: 'left: 40%;',
},
];

Expand All @@ -45,7 +45,7 @@ const defaultExpectedHandleStateVertical: {[key: string]: string | null}[] = [
ariaLabel: '10',
readonly: null,
disabled: null,
style: 'left: 0%; top: 90%;',
style: 'top: 90%;',
},
{
value: '40',
Expand All @@ -55,7 +55,7 @@ const defaultExpectedHandleStateVertical: {[key: string]: string | null}[] = [
ariaLabel: '40',
readonly: null,
disabled: null,
style: 'left: 0%; top: 60%;',
style: 'top: 60%;',
},
];

Expand All @@ -73,7 +73,7 @@ test.describe(`Slider tests`, () => {
expectedState.value = '43';
expectedState.text = '43';
expectedState.ariaLabel = '43';
expectedState.style = 'left: 43%; top: 0%;';
expectedState.style = 'left: 43%;';

const sliderProgressLocator = sliderPO.locatorProgress;
const boundingBox = await sliderProgressLocator.boundingBox();
Expand All @@ -94,7 +94,7 @@ test.describe(`Slider tests`, () => {
expectedState.value = '88';
expectedState.text = '88';
expectedState.ariaLabel = '88';
expectedState.style = 'left: 88%; top: 0%;';
expectedState.style = 'left: 88%;';

const sliderHandleLocator = sliderPO.locatorHandle;
const sliderLocator = sliderPO.locatorRoot;
Expand All @@ -117,7 +117,7 @@ test.describe(`Slider tests`, () => {
expectedState.value = '0';
expectedState.text = '0';
expectedState.ariaLabel = '0';
expectedState.style = 'left: 0%; top: 0%;';
expectedState.style = 'left: 0%;';

const minLabelLocator = sliderPO.locatorMinLabelHorizontal;
const maxLabelLocator = sliderPO.locatorMaxLabelHorizontal;
Expand All @@ -136,7 +136,7 @@ test.describe(`Slider tests`, () => {
expectedState.text = '100';
expectedState.ariaLabel = '100';
expectedState.value = '100';
expectedState.style = 'left: 100%; top: 0%;';
expectedState.style = 'left: 100%;';

expect((await sliderPO.sliderHandleState())[0]).toEqual(expectedState);

Expand Down Expand Up @@ -188,7 +188,7 @@ test.describe(`Slider tests`, () => {
expectedState.value = '88';
expectedState.text = '88';
expectedState.ariaLabel = '88';
expectedState.style = 'left: 88%; top: 0%;';
expectedState.style = 'left: 88%;';
expectedState.readonly = null;

expect((await sliderPO.sliderHandleState())[0]).toEqual(expectedState);
Expand All @@ -207,7 +207,7 @@ test.describe(`Slider tests`, () => {
expectedState.value = '88';
expectedState.text = '88';
expectedState.ariaLabel = '88';
expectedState.style = 'left: 88%; top: 0%;';
expectedState.style = 'left: 88%;';

const sliderLocator = sliderPO.locatorRoot;
const boundingBox = await sliderLocator.boundingBox();
Expand All @@ -228,11 +228,11 @@ test.describe(`Slider tests`, () => {
expectedState[0].value = '40';
expectedState[0].text = '40';
expectedState[0].ariaLabel = '40';
expectedState[0].style = 'left: 40%; top: 0%;';
expectedState[0].style = 'left: 40%;';
expectedState[1].value = '83';
expectedState[1].text = '83';
expectedState[1].ariaLabel = '83';
expectedState[1].style = 'left: 83%; top: 0%;';
expectedState[1].style = 'left: 83%;';

const sliderHandleLocator = sliderPO.locatorHandle;
const sliderLocator = sliderPO.locatorRoot;
Expand All @@ -257,11 +257,11 @@ test.describe(`Slider tests`, () => {
expectedState[0].value = '0';
expectedState[0].text = '0';
expectedState[0].ariaLabel = '0';
expectedState[0].style = 'left: 0%; top: 0%;';
expectedState[0].style = 'left: 0%;';
expectedState[1].text = '40';
expectedState[1].ariaLabel = '40';
expectedState[1].value = '40';
expectedState[1].style = 'left: 40%; top: 0%;';
expectedState[1].style = 'left: 40%;';

const minLabelLocator = sliderPO.locatorMinLabelHorizontal;
const maxLabelLocator = sliderPO.locatorMaxLabelHorizontal;
Expand All @@ -281,11 +281,11 @@ test.describe(`Slider tests`, () => {
expectedState[0].text = '40';
expectedState[0].ariaLabel = '40';
expectedState[0].value = '40';
expectedState[0].style = 'left: 40%; top: 0%;';
expectedState[0].style = 'left: 40%;';
expectedState[1].text = '100';
expectedState[1].ariaLabel = '100';
expectedState[1].value = '100';
expectedState[1].style = 'left: 100%; top: 0%;';
expectedState[1].style = 'left: 100%;';

expect((await sliderPO.sliderHandleState()).at(0)).toEqual(expectedState[0]);
expect((await sliderPO.sliderHandleState()).at(1)).toEqual(expectedState[1]);
Expand All @@ -308,7 +308,7 @@ test.describe(`Slider tests`, () => {
expectedState.value = '80';
expectedState.text = '80';
expectedState.ariaLabel = '80';
expectedState.style = 'left: 0%; top: 20%;';
expectedState.style = 'top: 20%;';

const sliderLocator = sliderPO.locatorRoot;
const boundingBox = await sliderLocator.boundingBox();
Expand All @@ -329,7 +329,7 @@ test.describe(`Slider tests`, () => {
expectedState[0].value = '0';
expectedState[0].text = '0';
expectedState[0].ariaLabel = '0';
expectedState[0].style = 'left: 0%; top: 100%;';
expectedState[0].style = 'top: 100%;';

const minLabelLocator = sliderPO.locatorMinLabelVertical;
const maxLabelLocator = sliderPO.locatorMaxLabelVertical;
Expand All @@ -349,11 +349,11 @@ test.describe(`Slider tests`, () => {
expectedState[0].text = '40';
expectedState[0].ariaLabel = '40';
expectedState[0].value = '40';
expectedState[0].style = 'left: 0%; top: 60%;';
expectedState[0].style = 'top: 60%;';
expectedState[1].text = '100';
expectedState[1].ariaLabel = '100';
expectedState[1].value = '100';
expectedState[1].style = 'left: 0%; top: 0%;';
expectedState[1].style = 'top: 0%;';

expect((await sliderPO.sliderHandleState()).at(0)).toEqual(expectedState[0]);
expect((await sliderPO.sliderHandleState()).at(1)).toEqual(expectedState[1]);
Expand Down
13 changes: 9 additions & 4 deletions react/lib/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,15 @@ export function Slider(props: Partial<SliderProps>) {
aria-disabled={disabled ? 'true' : undefined}
aria-orientation={vertical ? 'vertical' : undefined}
disabled={disabled}
style={{
left: `${handleDisplayOptions[item.id].left}%`,
top: `${handleDisplayOptions[item.id].top}%`,
}}
style={
vertical
? {
top: `${handleDisplayOptions[item.id].top}%`,
}
: {
left: `${handleDisplayOptions[item.id].left}%`,
}
}
onKeyDown={(e) => keydown(e as unknown as KeyboardEvent, item.id)}
onMouseDown={(e) => mouseDown(e as unknown as MouseEvent, item.id)}
>
Expand Down
Loading

0 comments on commit 585e2d5

Please sign in to comment.