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

532/slider enhancements #660

Merged
merged 53 commits into from
Jun 15, 2020
Merged

532/slider enhancements #660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
dd6d186
Adding hasHistogram prop for use in css later
eriklharper May 20, 2020
0a978e8
refactor: replacing borders with box-shadow and increasing the hitbox…
eriklharper May 20, 2020
6115675
fixing the minValue handle position post-refactor
eriklharper May 20, 2020
414c179
fix: handles not perfectly centered at both ends of the track
eriklharper May 21, 2020
fae8d40
Attempt at using getBoundingClientRect to change positioning
eriklharper May 22, 2020
d2ed0db
got a poc of it working! still more to do to make this bulletproof t…
eriklharper May 22, 2020
6a4c81c
Removing unnecessary wrapping span
eriklharper May 22, 2020
1c660f5
feature: prevent handle labels from extending past edge of slider (no…
eriklharper May 22, 2020
0e190da
fix: removing unnecessary left position after refactor
eriklharper May 22, 2020
6e7696f
feat: preventing minValue handle labels from extending past the edge …
eriklharper May 22, 2020
0222032
fix: correcting placement of min precise handle
eriklharper May 26, 2020
545c994
fix: precise handle position
eriklharper May 26, 2020
d6d9e67
fix: precise handle label positions
eriklharper May 26, 2020
ecaacd4
feat: only min and max tick labels appear for precise ranges
eriklharper May 27, 2020
f149f26
restoring handle bg color
eriklharper May 27, 2020
cd00a3d
good start to object collision detection for hiding min tick label. …
eriklharper May 28, 2020
20ca5f2
breaking change: start of major layout refactor that moves away from …
eriklharper May 28, 2020
a9b968d
refactor fixes: handle and labeled handle
eriklharper May 29, 2020
55cd59a
refactor: removed need to track handle labels in state. Transforming…
eriklharper May 30, 2020
bdbdbd3
fix: moving to flex display since labels need to have a margin but th…
eriklharper Jun 1, 2020
5f086be
Merge branch 'master' of github.com:Esri/calcite-components into 532/…
eriklharper Jun 1, 2020
69f3a8e
fix: range button positions
eriklharper Jun 1, 2020
3cd1a37
fixing a couple css bugs
eriklharper Jun 1, 2020
66bf0e5
Removing static JSX that was causing stencil warnings
eriklharper Jun 2, 2020
bdcaa3d
feat: hiding bounding track labels for precise handles with ticks whe…
eriklharper Jun 2, 2020
bc7bd83
adding all histogram permutations
eriklharper Jun 3, 2020
ec9e37b
feat: moving labeled range handles both to the bottom when using a hi…
eriklharper Jun 3, 2020
ad7b5c2
feat: adding number formatting with toLocaleString
eriklharper Jun 3, 2020
8a336ec
adding missing demos and moving histogram non-precise labels below th…
eriklharper Jun 4, 2020
29b0c92
fix: moving all histogram labels and precise handles below track
eriklharper Jun 4, 2020
2fa4251
Removing unnecessary css after previous refactor
eriklharper Jun 4, 2020
9c41b49
Only showing endcap tick labels when precise label handles are used o…
eriklharper Jun 4, 2020
019838d
fix: font size adjustments per design and fixes for precise handle po…
eriklharper Jun 5, 2020
89795d6
converting tick labels to endcap labels for labeled ticks with precis…
eriklharper Jun 5, 2020
7a12500
more positioning bug fixes
eriklharper Jun 5, 2020
97da0af
endcap tick label margin adjustment
eriklharper Jun 5, 2020
11e3f0e
more endcap styles
eriklharper Jun 5, 2020
d6a31a9
fixing tick label bugs
eriklharper Jun 8, 2020
15a58af
finally getting bounding track label hiding logic working
eriklharper Jun 8, 2020
2eec824
fix: endcaps shouldn't display for non-precise or non-labeled handle …
eriklharper Jun 8, 2020
347cf94
adjusting slider demo page to add dark versions
eriklharper Jun 9, 2020
67a522f
Fixing the case where you want the value 0 to stay centered over the …
eriklharper Jun 9, 2020
3ea6678
feature: spacing range labels apart when getting too close. Next ste…
eriklharper Jun 10, 2020
d9cfe00
first start to the hyphenation logic
eriklharper Jun 11, 2020
12b9fd2
fix: perfect hyphen centering and using pure css with responsive ems …
eriklharper Jun 11, 2020
02000ba
removing unneeded css
eriklharper Jun 11, 2020
ad95d41
fix: precise css bugs discovered from storybook setting precise=false
eriklharper Jun 11, 2020
020ce35
shrinking focus square to around 24x24
eriklharper Jun 11, 2020
9814b70
fix: shortening white gap between ticks
eriklharper Jun 11, 2020
0945b90
feat: adding histogram highlighting for single handle sliders
eriklharper Jun 12, 2020
4eb616c
fix: small-value overlap issues
eriklharper Jun 12, 2020
b262d9f
fix: preventing the jumping effect that occurs when handles butt righ…
eriklharper Jun 12, 2020
8956acb
fix: prevent hyphenated range labels from extending past edge of slid…
eriklharper Jun 12, 2020
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
6 changes: 3 additions & 3 deletions src/components/calcite-slider/calcite-slider.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ describe("calcite-slider", () => {
>
</calcite-slider>
`);
const maxButton = await page.find("calcite-slider >>> .thumb--max");
const minButton = await page.find("calcite-slider >>> .thumb--min");
const maxButton = await page.find("calcite-slider >>> .thumb--value");
const minButton = await page.find("calcite-slider >>> .thumb--minValue");
expect(minButton).toEqualAttribute("role", "slider");
expect(maxButton).toEqualAttribute("role", "slider");
expect(minButton).toEqualAttribute("aria-label", "Min Label");
Expand Down Expand Up @@ -112,7 +112,7 @@ describe("calcite-slider", () => {
</calcite-slider>
`);
const slider = await page.find("calcite-slider");
const handle = await page.find("calcite-slider >>> .thumb--max");
const handle = await page.find("calcite-slider >>> .thumb--value");
await page.waitForChanges();
let value = await slider.getProperty("value");
expect(value).toBe(20);
Expand Down
267 changes: 182 additions & 85 deletions src/components/calcite-slider/calcite-slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ $thumb-padding: ($thumb-size - $handle-size) / 2;
$track-height: 2px;
$tick-height: 4px;

@mixin histogramEndcaps() {
.tick__label--min,
.tick__label--max {
margin: 6px -3px;
font-weight: 300;
color: var(--calcite-ui-text-3);
}
}

:host {
display: block;
padding: $handle-size / 2 0;
Expand All @@ -26,125 +35,206 @@ $tick-height: 4px;
* with text elements to prevent overlap
*/
:host([label-handles]),
:host([precise]) {
:host([precise]:not([precise="false"])) {
margin-top: $handle-size + $thumb-padding;
}

:host([label-ticks]),
:host([precise][is-range]) {
:host([precise]:not([precise="false"])[is-range]) {
margin-bottom: $handle-size + $thumb-padding;
}

:host([precise][label-handles]) {
:host([precise]:not([precise="false"])[label-handles]) {
margin-top: $thumb-size + $thumb-padding;
}

:host([precise][label-handles][is-range]) {
:host([precise]:not([precise="false"])[label-handles][is-range]) {
margin-bottom: $thumb-size + $thumb-padding;
}

// focus styles
.thumb {
@include focus-style-base();
&:focus {
@include focus-style-outset();
}
}

.thumb {
position: absolute;
height: $thumb-size;
width: $thumb-size;
margin: -15px;
box-sizing: border-box;
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
z-index: 2;
}
outline: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
transform: translate(7px, -8px);

.handle {
position: absolute;
top: 0;
left: 0;
height: $handle-size;
width: $handle-size;
margin: $thumb-padding;
box-sizing: border-box;
border-radius: 100%;
background-color: var(--calcite-ui-foreground-1);
border: 2px solid var(--calcite-ui-text-3);
transition: border 0.25s ease, background-color 0.25s ease,
box-shadow 0.25s ease;
}

.handle__label {
position: absolute;
left: 0;
bottom: $thumb-size;
width: $thumb-size;
height: 0.75em;
@include font-size(-3);
font-weight: 500;
line-height: 1;
color: var(--calcite-ui-text-3);
text-align: center;
}
.handle__label {
transition: transform 150ms;
@include font-size(-4);
font-weight: 500;
line-height: 1;
color: var(--calcite-ui-text-2);
margin-bottom: 5px;
&.static,
&.transformed {
opacity: 0;
position: absolute;
top: 0;
}
&--minValue.hyphen::after {
content: "\2014";
display: inline-block;
width: 1em;
}
&--value.hyphen::before {
content: "\2014";
display: inline-block;
width: 1em;
}
}

.handle {
@include focus-style-base();
height: $handle-size;
width: $handle-size;
box-sizing: border-box;
border-radius: 100%;
background-color: var(--calcite-ui-foreground-1);
box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
transition: border 0.25s ease, background-color 0.25s ease,
box-shadow 0.25s ease;
}

.handle-extension {
width: 2px;
height: $thumb-padding;
background-color: var(--calcite-ui-text-3);
}

.thumb:hover .handle {
border-width: 3px;
border-color: var(--calcite-ui-blue-1);
@include shadow(1, "hover");
&:hover {
.handle {
box-shadow: 0 0 0 3px var(--calcite-ui-blue-1) inset;
}
.handle-extension {
background-color: var(--calcite-ui-blue-1);
}
}

&:focus {
.handle {
@include focus-style-outset();
outline-offset: 2px;
}
.handle-extension {
background-color: var(--calcite-ui-blue-1);
}
}
}
.thumb--minValue {
transform: translate(-7px, -8px);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what are all these magic pixel values in the translate y position?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 7px is half the handle size, so I suppose I could do $handle-size / 2 for that and the -8px is the correct amount of y distance needed to place the center of the handle circle at the end of of the track line. Since the handle is 7x7 you would think that the 8 could just be 7, but it needed an extra pixel for some reason.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found out why it has to be 8px in the y direction: .track { height: 2px }. Because the track element is set to 2px height, if you bump that down to 1 and change the transform y to 7px you'll see the circle centered on the track line, so that's why it needs to be 1 pixel more to get it to center.

}
:host([label-handles]) {
.thumb {
transform: translate(50%, -25px);
}
.thumb--minValue {
transform: translate(-50%, -25px);
}
}
:host([has-histogram][label-handles]) {
.thumb {
transform: translate(50%, -8px);
.handle__label {
margin-bottom: unset;
margin-top: 5px;
}
}
.thumb--minValue {
transform: translate(-50%, -8px);
}
}
:host([precise]:not([precise="false"])) {
.thumb {
transform: translate(7px, -21px);
}
.thumb--minValue {
transform: translate(-7px, -2px);
.handle__label {
margin-bottom: unset;
margin-top: 5px;
}
}
}
:host([has-histogram][precise]:not([precise="false"])) {
.thumb {
transform: translate(7px, -2px);
}
.thumb--minValue {
transform: translate(-50%, -2px);
}
}
:host([ticks][precise]:not([precise="false"])) {
.thumb {
transform: translate(7px, -20px);
}
.thumb--minValue {
transform: translate(-7px, -3px);
}
}
:host([has-histogram][ticks][precise]:not([precise="false"])) {
.thumb {
transform: translate(7px, -3px);
}
.thumb--minValue {
transform: translate(-50%, -3px);
}
}
:host([label-handles][precise]:not([precise="false"])) {
.thumb {
transform: translate(50%, -38px);
}
.thumb--minValue {
transform: translate(-50%, -2px);
}
}
:host([has-histogram][label-handles][precise]:not([precise="false"])) {
.thumb {
transform: translate(50%, -2px);
}
.thumb--minValue {
transform: translate(-50%, -2px);
}
}
:host([ticks][label-handles][precise]:not([precise="false"])) {
.thumb {
transform: translate(50%, -37px);
}
.thumb--minValue {
transform: translate(-50%, -3px);
}
}
:host([has-histogram][ticks][label-handles][precise]:not([precise="false"])) {
.thumb {
transform: translate(50%, -3px);
}
.thumb--minValue {
transform: translate(-50%, -3px);
}
}

.thumb:focus,
.thumb--active {
z-index: 3;
.handle {
background-color: var(--calcite-ui-blue-1);
border-color: var(--calcite-ui-blue-1);
@include shadow(1, "press");
}
}

.thumb--precise {
margin-top: -$thumb-size;
}

.thumb--precise:after {
content: "";
display: block;
position: absolute;
top: $handle-size;
left: 50%;
width: 2px;
height: $thumb-padding;
background-color: var(--calcite-ui-text-3);
margin-left: -1px;
margin-top: $thumb-padding;
z-index: 1;
}

.thumb:hover.thumb--precise:after,
.thumb:focus.thumb--precise:after,
.thumb--active.thumb--precise:after {
background-color: var(--calcite-ui-blue-1);
}

.thumb--precise.thumb--min {
margin-top: -$track-height;
.handle__label {
bottom: unset;
top: $thumb-size;
}
}

.thumb--precise.thumb--min:after {
top: 0;
margin-top: 0;
}

.track {
height: $track-height;
border-radius: 0;
Expand Down Expand Up @@ -181,10 +271,8 @@ $tick-height: 4px;
width: 2px;
height: $tick-height;
left: var(--calcite-ui-border-1-offset);
margin-left: -3px;
margin-left: -2px;
border: 1px solid var(--calcite-ui-foreground-1);
border-right-width: 2px;
border-left-width: 2px;
background-color: var(--calcite-ui-border-1);
}

Expand All @@ -194,9 +282,9 @@ $tick-height: 4px;

.tick__label {
position: absolute;
@include font-size(-3);
@include font-size(-4);
font-weight: 500;
color: var(--calcite-ui-text-3);
color: var(--calcite-ui-text-2);
width: 4em;
margin: $thumb-size / 2 -2em;
text-align: center;
Expand All @@ -208,13 +296,22 @@ $tick-height: 4px;
left: 0;
margin: $thumb-size / 2 -3px;
text-align: left;
transition: opacity 150ms;
}

.tick__label--max {
left: unset;
right: 0;
margin: $thumb-size / 2 -3px;
text-align: right;
transition: opacity 50ms;
}

:host([has-histogram][label-handles]) {
@include histogramEndcaps();
}
:host([has-histogram][precise]:not([precise="false"])) {
@include histogramEndcaps();
}

.graph {
Expand Down
Loading