Skip to content

Commit

Permalink
feat(slider): add component tokens (#10716)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180

## Summary
Add tokens for the slider component, e2e, and custom-theme chromatic
tests. (WIP)

### Slider Tokens
`--calcite-slider-text-color`: Specifies the component's text color.
`--calcite-slider-track-color`: Specifies the component's track color. 
`--calcite-slider-track-fill-color`: Specifies the component's fill
track color.
`--calcite-slider-handle-fill-color`: Specifies the component's handle
fill color.
`--calcite-slider-handle-extension-color`: Specifies the component's
handle extension color.
`--calcite-slider-tick-color`: Specifies the component's tick color. 
`--calcite-slider-tick-border-color`: Specifies the component's tick
border color.
`--calcite-slider-tick-selected-color`: Specifies the component's tick
color when in selected range.
`--calcite-slider-graph-color`: Specifies the component's graph color.
  • Loading branch information
@DitwanP
DitwanP authored Nov 20, 2024
1 parent a62d704 commit cbd5bb0
Show file tree
Hide file tree
Showing 5 changed files with 247 additions and 16 deletions.
136 changes: 135 additions & 1 deletion packages/calcite-components/src/components/slider/slider.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import { newE2EPage, E2EPage, E2EElement, EventSpy } from "@arcgis/lumina-compiler/puppeteerTesting";
import { describe, expect, it, beforeEach } from "vitest";
import { html } from "../../../support/formatting";
import { defaults, disabled, formAssociated, hidden, labelable, renders, reflects } from "../../tests/commonTests";
import {
defaults,
disabled,
formAssociated,
hidden,
labelable,
renders,
reflects,
themed,
} from "../../tests/commonTests";
import { getElementRect, getElementXY, isElementFocused } from "../../tests/utils";
import { CSS } from "./resources";
import type { Slider } from "./slider";
Expand Down Expand Up @@ -1189,4 +1198,129 @@ describe("calcite-slider", () => {
});
});
});

describe("themed", () => {
describe("default", () => {
themed(html`<calcite-slider value="30"></calcite-slider>`, {
"--calcite-slider-track-color": {
shadowSelector: `.${CSS.track}`,
targetProp: "backgroundColor",
},
"--calcite-slider-track-fill-color": {
shadowSelector: `.${CSS.trackRange}`,
targetProp: "backgroundColor",
},
"--calcite-slider-handle-fill-color": {
shadowSelector: `.${CSS.handle}`,
targetProp: "backgroundColor",
},
});
});

describe("text color", () => {
describe("should apply handle label", () => {
themed(html`<calcite-slider value="30" label-handles max-label="100" min-label="0"></calcite-slider>`, {
"--calcite-slider-text-color": {
shadowSelector: `.${CSS.handleLabel}`,
targetProp: "color",
},
});
});
describe("should apply tick labels", () => {
themed(
html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
{
"--calcite-slider-text-color": {
shadowSelector: `.${CSS.tickLabel}`,
targetProp: "color",
},
},
);
});
});

describe("handle extension", () => {
describe("should apply handle extension", () => {
themed(html`<calcite-slider value="30" precise></calcite-slider>`, {
"--calcite-slider-handle-extension-color": {
shadowSelector: `.${CSS.handleExtension}`,
targetProp: "backgroundColor",
},
});
});
});

describe("ticks", () => {
describe("should apply ticks", () => {
themed(
html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
{
"--calcite-slider-tick-color": {
shadowSelector: `.${CSS.tick}:not(.${CSS.tickActive})`,
targetProp: "backgroundColor",
},
},
);
});
describe("should apply ticks border", () => {
themed(
html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
{
"--calcite-slider-tick-border-color": {
shadowSelector: `.${CSS.tick}`,
targetProp: "borderColor",
},
},
);
});
describe("should apply ticks in selected range", () => {
themed(
html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
{
"--calcite-slider-tick-selected-color": {
shadowSelector: `.${CSS.tickActive}`,
targetProp: "backgroundColor",
},
},
);
});
});

describe("--calcite-slider-graph-color", () => {
describe("should apply graph", () => {
themed(
html`<calcite-slider
min="0"
max="100"
value="60"
step="1"
label-handles
id="basicHistogram"
scale="m"
></calcite-slider>
<script>
const basicHistogram = document.getElementById("basicHistogram");
const histogram = [
[0, 0],
[20, 12],
[40, 35],
[60, 65],
[80, 25],
[90, 10],
[100, 0],
];
basicHistogram.histogram = histogram;
</script>`,
{
"--calcite-slider-graph-color": {
shadowSelector: `.${CSS.graph}`,
targetProp: "color",
},
},
);
});
});
});
});
48 changes: 34 additions & 14 deletions packages/calcite-components/src/components/slider/slider.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-slider-text-color: Specifies the component's text color.
* @prop --calcite-slider-track-color: Specifies the component's track color.
* @prop --calcite-slider-track-fill-color: Specifies the component's track fill color.
* @prop --calcite-slider-handle-fill-color: Specifies the component's handle fill color.
* @prop --calcite-slider-handle-extension-color: Specifies the component's handle extension color.
* @prop --calcite-slider-accent-color: Specifies the component's accent color.
* @prop --calcite-slider-tick-color: Specifies the component's tick color.
* @prop --calcite-slider-tick-border-color: Specifies the component's tick border color.
* @prop --calcite-slider-tick-selected-color: Specifies the component's tick color when in selected range.
* @prop --calcite-slider-graph-color: Specifies the component's graph color.
*
*/

.scale--s {
--calcite-slider-handle-size: theme("spacing[2.5]");
--calcite-slider-handle-extension-height: 0.4rem;
Expand Down Expand Up @@ -30,7 +48,8 @@

.handle__label,
.tick__label {
@apply text-color-2 font-medium;
@apply font-medium;
color: var(--calcite-slider-text-color, var(--calcite-color-text-2));
font-size: var(--calcite-slider-container-font-size);
}

Expand Down Expand Up @@ -125,9 +144,9 @@

.handle {
@apply focus-base
bg-foreground-1
box-border
rounded-full;
background-color: var(--calcite-slider-handle-fill-color, var(--calcite-color-foreground-1));
block-size: var(--calcite-slider-handle-size);
inline-size: var(--calcite-slider-handle-size);
box-shadow: 0 0 0 2px var(--calcite-color-text-3) inset;
Expand All @@ -140,15 +159,15 @@
.handle-extension {
@apply w-0.5;
block-size: var(--calcite-slider-handle-extension-height);
background-color: var(--calcite-color-text-3);
background-color: var(--calcite-slider-handle-extension-color, var(--calcite-color-text-3));
}

&:hover {
.handle {
box-shadow: 0 0 0 3px var(--calcite-color-brand) inset;
}
.handle-extension {
@apply bg-brand;
background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
}
}

Expand All @@ -157,7 +176,7 @@
@apply focus-outset;
}
.handle-extension {
@apply bg-brand;
background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
}
}

Expand Down Expand Up @@ -221,29 +240,30 @@
.thumb:focus,
.thumb--active {
.handle {
@apply bg-brand;
background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%); // shadow 1 press
}
}

.thumb:hover.thumb--precise::after,
.thumb:focus.thumb--precise::after,
.thumb--active.thumb--precise::after {
@apply bg-brand;
background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
}

.track {
@apply relative h-0.5 rounded-none;
background-color: var(--calcite-color-border-2);
background-color: var(--calcite-slider-track-color, var(--calcite-color-border-2));
transition: all var(--calcite-internal-animation-timing-medium) ease-in;
}

.track__range {
@apply bg-brand
absolute
@apply absolute
top-0
h-0.5;
background-color: var(--calcite-slider-track-fill-color, var(--calcite-color-brand));
}

.container--range {
.track__range {
&:hover {
Expand Down Expand Up @@ -287,15 +307,15 @@
w-0.5
border
border-solid;
background-color: var(--calcite-color-border-input);
border-color: var(--calcite-color-foreground-1);
background-color: var(--calcite-slider-tick-color, var(--calcite-color-border-input));
border-color: var(--calcite-slider-tick-border-color, var(--calcite-color-foreground-1));
inset-block-start: -2px;
pointer-events: none;
margin-inline-start: calc(-1 * theme("margin[0.5]"));
}

.tick--active {
@apply bg-brand;
background-color: var(--calcite-slider-tick-selected-color, var(--calcite-color-brand));
}

.tick__label {
Expand All @@ -322,7 +342,7 @@
}

.graph {
color: var(--calcite-color-foreground-3);
color: var(--calcite-slider-graph-color, var(--calcite-color-foreground-3));
block-size: 48px;
}

Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/custom-theme.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { pagination } from "./custom-theme/pagination";
import { popover, popoverTokens } from "./custom-theme/popover";
import { progress, progressTokens } from "./custom-theme/progress";
import { segmentedControl } from "./custom-theme/segmented-control";
import { slider } from "./custom-theme/slider";
import { slider, sliderTokens } from "./custom-theme/slider";
import { switchTokens } from "./custom-theme/switch";
import { tabs } from "./custom-theme/tabs";
import { textArea, textAreaTokens } from "./custom-theme/text-area";
Expand Down Expand Up @@ -154,6 +154,7 @@ const componentTokens = {
...tooltipTokens,
...tileTokens,
...navigationTokens,
...sliderTokens,
};

export default {
Expand Down
14 changes: 14 additions & 0 deletions packages/calcite-components/src/custom-theme/slider.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
import { html } from "../../support/formatting";

export const sliderTokens = {
calciteSliderTextColor: "",
calciteSliderTrackColor: "",
calciteSliderTrackFillColor: "",
calciteSliderHandleFillColor: "",
calciteSliderHandleExtensionColor: "",
calciteSliderAccentColor: "",
calciteSliderTickColor: "",
calciteSliderTickBorderColor: "",
calciteSliderTickSelectedColor: "",
calciteSliderGraphColor: "",
};

export const slider = html`<calcite-slider
min="0"
max="100"
Expand All @@ -8,4 +21,5 @@ export const slider = html`<calcite-slider
step="1"
min-label="Temperature range (lower)"
max-label="Temperature range (upper)"
precise
></calcite-slider>`;
62 changes: 62 additions & 0 deletions packages/calcite-components/src/demos/slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,19 @@
margin: 60px 0;
border-top: 1px solid var(--calcite-color-border-2);
}

.themed {
--calcite-slider-track-color: darkblue;
--calcite-slider-track-fill-color: green;
--calcite-slider-handle-fill-color: cyan;
--calcite-slider-handle-extension-color: rgb(183, 0, 0);
--calcite-slider-accent-color: rgb(247, 0, 255);
--calcite-slider-tick-color: white;
--calcite-slider-tick-border-color: red;
--calcite-slider-tick-selected-color: cyan;
--calcite-slider-text-color: red;
--calcite-slider-graph-color: lime;
}
</style>
<script src="./_assets/head.ts"></script>
<script type="module" src="./_assets/demo-form.ts"></script>
Expand Down Expand Up @@ -1599,6 +1612,55 @@ <h1 style="margin: 0 auto; text-align: center">Slider</h1>
</div>
</div>

<div class="parent">
<div class="child right-aligned-text">themed</div>

<div class="child">
<calcite-slider
label-ticks
label-handles
min="0"
max="100"
min-value="20"
max-value="80"
step="10"
ticks="10"
precise
scale="s"
class="themed"
>
</calcite-slider>
<calcite-slider
label-ticks
label-handles
min="0"
max="100"
min-value="20"
max-value="80"
step="10"
ticks="10"
precise
scale="m"
class="themed"
>
</calcite-slider>
<calcite-slider
label-ticks
label-handles
min="0"
max="100"
min-value="20"
max-value="80"
step="10"
ticks="10"
precise
scale="l"
class="themed"
>
</calcite-slider>
</div>
</div>

<hr />

<div class="parent">
Expand Down

0 comments on commit cbd5bb0

Please sign in to comment.