fix(range): add correct margin in item (#28161)

Author: liamdebeasi

core/src/components/range/range.scss

@@ -1,4 +1,5 @@
 @import "../../themes/ionic.globals";
+@import "./range.vars.scss";
 
 // Range
 // --------------------------------------------------
@@ -338,3 +339,11 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
+
+:host(.in-item.range-label-placement-stacked) .label-text-wrapper {
+  @include margin($range-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.range-label-placement-stacked) .native-wrapper {
+  @include margin(null, null, $range-item-label-margin-bottom, null);
+}

core/src/components/range/range.vars.scss

@@ -0,0 +1,8 @@
+/// @prop - Top margin of range's label when in an item
+$range-item-label-margin-top: 10px !default;
+
+/// @prop - Bottom margin of range's label when in an item
+// We don't add additional margin because the native container
+// has additional white space. Otherwise there would be too
+// much white space at the bottom of the item.
+$range-item-label-margin-bottom: 0px !default;

core/src/components/range/test/item/range.e2e.ts

@@ -50,3 +50,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('range: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-range label="Temperature" label-placement="stacked"></ion-range>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`range-stacked-label-in-item`));
+    });
+  });
+});