feat(range): support dynamic type (#28006)

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

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;

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) {

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;
 

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);
 

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(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+        <ion-range value="50" label="Label" pin="true">
+          <ion-icon name="snow" slot="start" aria-hidden="true"></ion-icon>
+          <div name="snow" slot="end" aria-hidden="true">Warm</div>
+        </ion-range>
+      `,
+        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`));
+    });
+  });
 });