diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index d1b57b1776..62f3956c3d 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -35,7 +35,7 @@ } :host(.range-has-pin) { - @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null); + @include padding(calc($range-ios-pin-font-size + $range-ios-padding-vertical), null, null, null); } .range-bar-active { @@ -70,13 +70,9 @@ } .range-pin { - @include transform(translate3d(0, 28px, 0), scale(.01)); + @include transform(translate3d(0, 100%, 0), scale(.01)); @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start); - display: inline-block; - position: relative; - top: -20px; - min-width: 28px; transition: transform 120ms ease; @@ -89,9 +85,18 @@ text-align: center; } +/** + * The -100% ensures the pin sits on top + * of the range-knob-handle container. + * We apply 11px so that the pin + * text is closer to the knob inside of the container. + * We also apply the 11px here instead of using "top" + * otherwise the pin text will translate below the knob + * when the text is scaled. + */ .range-knob-pressed .range-pin, .range-knob-handle.ion-focused .range-pin { - @include transform(translate3d(0, 0, 0), scale(1)); + transform: translate3d(0, calc(-100% + 11px), 0) scale(1); } // iOS Range: Disabled diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index 1fba3f3c93..79bcd9e54f 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -67,7 +67,7 @@ $range-ios-pin-background-color: transparent !default; $range-ios-pin-color: $text-color !default; /// @prop - Font size of the range pin -$range-ios-pin-font-size: 12px !default; +$range-ios-pin-font-size: dynamic-font(12px) !default; /// @prop - Padding top of the range pin $range-ios-pin-padding-top: 8px !default; diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 6fb2a4a9f8..1c8deedc5a 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -16,18 +16,24 @@ --height: #{$range-md-slider-height}; --pin-background: #{ion-color(primary, base)}; --pin-color: #{ion-color(primary, contrast)}; - - // TODO FW-2997 Apply this to the start/end slots, and the native wrapper - font-size: $range-md-pin-font-size; } -::slotted([slot="label"]), .label-text { +// TODO FW-2997 Remove this +:host(.legacy-range) ::slotted([slot="label"]) { font-size: initial; } +:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot="start"]), +:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot="end"]), +:host(:not(.legacy-range)) .native-wrapper { + font-size: $range-md-pin-font-size; +} + // TODO FW-2997 remove this :host(.legacy-range) { @include padding($range-md-padding-vertical, $range-md-padding-horizontal); + + font-size: $range-md-pin-font-size; } :host(.ion-color) .range-bar { @@ -53,7 +59,7 @@ } :host(.range-has-pin) { - @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null); + @include padding($range-md-pin-dimension, null, null, null); } .range-bar-active { @@ -117,21 +123,30 @@ @include border-radius(50%); @include transform(translate3d(0, 0, 0), scale(.01)); - display: inline-block; - position: relative; + display: flex; - min-width: 28px; - height: 28px; + align-items: center; + justify-content: center; + + /** + * The dimensions of the range need + * to scale with the size of the text + * which is why we use dynamic dimensions here. + */ + width: $range-md-pin-dimension; + height: $range-md-pin-dimension; transition: transform 120ms ease, background 120ms ease; background: var(--pin-background); color: var(--pin-color); - text-align: center; - &::before { - @include position(3px, null, null, 50%); + /** + * The -1px here moves the ::before + * psuedo-element down to create a uniform pin shape. + */ + @include position(null, null, -1px, 50%); @include margin-horizontal(-13px, null); @include multi-dir() { @@ -160,9 +175,14 @@ } } +/** + * Move the pin up by its full height + * plus a few pixels so the tip is above + * (but not touching) the knob. + */ .range-knob-pressed .range-pin, .range-knob-handle.ion-focused .range-pin { - @include transform(translate3d(0, -24px, 0), scale(1)); + transform: translate3d(0, calc(-100% + 4px), 0) scale(1); } @media (any-hover: hover) { diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index ef26283c37..fd9e583411 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -37,7 +37,7 @@ $range-md-pin-background-color: $range-md-bar-active-background-col $range-md-pin-color: ion-color(primary, contrast) !default; /// @prop - Font size of the range pin -$range-md-pin-font-size: 12px !default; +$range-md-pin-font-size: dynamic-font(12px) !default; /// @prop - Padding top/bottom of the range pin $range-md-pin-padding-vertical: 8px !default; @@ -45,6 +45,9 @@ $range-md-pin-padding-vertical: 8px !default; /// @prop - Padding start/end of the range pin $range-md-pin-padding-horizontal: 0 !default; +/// @prop - Width and height of the range pin +$range-md-pin-dimension: dynamic-font(28px) !default; + /// @prop - Background of the range pin when the value is the minimum $range-md-pin-min-background-color: $range-md-bar-background-color !default; diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 500b0a0566..6e6b48563c 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -80,8 +80,12 @@ left: unset; } + display: flex; + position: absolute; + justify-content: center; + width: var(--knob-handle-size); height: var(--knob-handle-size); diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts index d3d053546d..fd2f99e432 100644 --- a/core/src/components/range/test/a11y/range.e2e.ts +++ b/core/src/components/range/test/a11y/range.e2e.ts @@ -70,4 +70,33 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { await expect(range).toHaveScreenshot(screenshot(`range-focus-with-pin`)); }); }); + + test.describe(title('range: font scaling'), () => { + test('should scale text on larger font sizes', async ({ page }) => { + // Capture both icons and text in the start/end slots + await page.setContent( + ` + + + + + + `, + config + ); + + const range = page.locator('ion-range'); + const rangeHandle = range.locator('.range-knob-handle'); + + // Capture the range pin in screenshots + await rangeHandle.evaluate((el) => el.classList.add('ion-focused')); + await page.waitForChanges(); + + await expect(range).toHaveScreenshot(screenshot(`range-scale`)); + }); + }); }); diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png index f7b5aa62d5..166b5679fe 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png index 4f9411a22a..aa86ccec2c 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png index 749a872d58..f2e68d0acd 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png index dfcc18bd7b..474c0ca381 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png index 2276b77e48..b5b4dbacac 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..672913c592 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e160c851e6 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1f3c6586ea Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a876b7029f Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e70daf6de6 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..02113960a2 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Chrome-linux.png index d7f4afc5c5..453829259d 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Safari-linux.png index 493ffd74d3..37082a486c 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Chrome-linux.png index 6497c5e30d..94e93376ae 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Firefox-linux.png index 7e09294015..01b3ebe997 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Safari-linux.png index d863d88ed2..8890854b21 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png index 0e37b3c457..17fd0e30f9 100644 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png index 4dd654bdb0..dda957af20 100644 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png index 37fc8f202b..985cd72e06 100644 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png index 0e9f54de88..4498fc8153 100644 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png index 5bc979dc6d..8948983aa1 100644 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png differ