fix(many): add correct scale to stacked labels

core/src/components/checkbox/checkbox.scss

@@ -278,12 +278,28 @@ input {
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  @include transform(scale(#{$form-control-label-stacked-scale}));
+
   /**
    * The margin between the label and
    * the checkbox should be on the bottom
    * when the label sits at the top.
    */
   @include margin(null, 0, $form-control-label-margin, 0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the checkbox.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {
+  @include transform-origin(start, top);
+}
+
+:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {
+  @include transform-origin(center, top);
 }
 
 // Checked / Indeterminate Checkbox

core/src/components/checkbox/test/label/checkbox.e2e.ts

@@ -166,3 +166,19 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('checkbox: stacked long label'), () => {
+    test('long label should truncate', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
+        `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-long-label`));
+    });
+  });
+});

core/src/components/input/input.md.outline.scss

@@ -90,14 +90,14 @@
 :host(.has-focus.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(#{$input-floating-label-scale}));
+  @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
 
   /**
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$input-floating-label-scale});
+  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale});
 }
 
 /**
@@ -166,7 +166,7 @@
    */
   @include padding(null, #{$input-md-floating-label-padding * 2}, null, null);
 
-  font-size: calc(1em * #{$input-floating-label-scale});
+  font-size: calc(1em * #{$form-control-label-stacked-scale});
 
   opacity: 0;
   pointer-events: none;

core/src/components/input/input.md.solid.scss

@@ -72,5 +72,5 @@
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc(100% / #{$input-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/input/input.scss

@@ -627,11 +627,11 @@
 :host(.input-label-placement-stacked) .label-text-wrapper,
 :host(.has-focus.input-label-placement-floating) .label-text-wrapper,
 :host(.has-value.input-label-placement-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$input-floating-label-scale}));
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
 
   /**
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc(100% / #{$input-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/input/input.vars.scss

@@ -1,5 +1 @@
 @import "../../themes/ionic.globals";
-
-/// @prop - How much to scale the floating label by
-$input-floating-label-scale: 0.75 !default;
-

core/src/components/radio/radio.scss

@@ -253,10 +253,26 @@ input {
 }
 
 :host(.radio-label-placement-stacked) .label-text-wrapper {
+  @include transform(scale(#{$form-control-label-stacked-scale}));
+
   /**
    * The margin between the label and
    * the radio should be on the bottom
    * when the label sits on top.
    */
   @include margin(null, 0, $form-control-label-margin, 0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the radio.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
+  @include transform-origin(start, top);
+}
+
+:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
+  @include transform-origin(center, top);
 }

core/src/components/radio/test/label-placement/radio.e2e.ts

@@ -168,3 +168,19 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('radio: stacked long label'), () => {
+    test('long label should truncate', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-radio label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-radio>
+        `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-long-label`));
+    });
+  });
+});

core/src/components/range/range.scss

@@ -322,10 +322,19 @@
 }
 
 :host(.range-label-placement-stacked) .label-text-wrapper {
+  @include transform-origin(start, top);
+  @include transform(scale(#{$form-control-label-stacked-scale}));
+
   /**
   * The margin between the label and
   * the range should be on the bottom
   * when the label sits on top.
   */
   @include margin(null, 0, $form-control-label-margin, 0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the range.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

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

@@ -241,4 +241,20 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await expect(container).toHaveScreenshot(screenshot(`range-stacked-pin`));
     });
   });
+
+  test.describe(title('range: stacked long label'), () => {
+    test('long label should truncate', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-range label-placement="stacked" style="width: 200px">
+            <div slot="label">Temperature Temperature Temperature Temperature Temperature Temperature Temperature Temperature Temperature </div>
+          </ion-radio>
+        `,
+        config
+      );
+
+      const range = page.locator('ion-range');
+      await expect(range).toHaveScreenshot(screenshot(`range-label-stacked-long-label`));
+    });
+  });
 });

core/src/components/select/select.md.outline.scss

@@ -104,14 +104,14 @@
 :host(.ion-focused.select-fill-outline.select-label-placement-floating) .label-text-wrapper,
 :host(.has-value.select-fill-outline.select-label-placement-floating) .label-text-wrapper,
 :host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(#{$select-floating-label-scale}));
+  @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
 
   /**
    * Label text should not extend
    * beyond the bounds of the select.
    */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$select-md-floating-label-padding * 2}) / #{$select-floating-label-scale});
+  max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$select-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale});
 }
 
 /**
@@ -190,7 +190,7 @@
    */
   @include padding(null, #{$select-md-floating-label-padding * 2}, null, null);
 
-  font-size: calc(1em * #{$select-floating-label-scale});
+  font-size: calc(1em * #{$form-control-label-stacked-scale});
 
   opacity: 0;
   pointer-events: none;

core/src/components/select/select.md.solid.scss

@@ -74,5 +74,5 @@
    * Label text should not extend
    * beyond the bounds of the select.
    */
-  max-width: calc(100% / #{$select-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/select/select.scss

@@ -513,11 +513,11 @@ button {
 :host(.select-expanded.select-label-placement-floating) .label-text-wrapper,
 :host(.ion-focused.select-label-placement-floating) .label-text-wrapper,
 :host(.has-value.select-label-placement-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$select-floating-label-scale}));
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
 
   /**
    * Label text should not extend
    * beyond the bounds of the input.
    */
-  max-width: calc(100% / #{$select-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/select/select.vars.scss

@@ -1,7 +1,4 @@
 @import "../../themes/ionic.globals";
 
-/// @prop - How much to scale the floating label by
-$select-floating-label-scale: 0.75 !default;
-
 /// @prop - Margin start of the select icon
 $select-icon-margin-start: 4px !default;

core/src/components/textarea/textarea.md.outline.scss

@@ -90,15 +90,15 @@
 :host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
 :host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
 :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(#{$textarea-floating-label-scale}));
+  @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
 
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
    */
   max-width: calc(
-    (100% - var(--padding-start) - var(--padding-end) - #{$textarea-md-floating-label-padding * 2}) / #{$textarea-floating-label-scale}
+    (100% - var(--padding-start) - var(--padding-end) - #{$textarea-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale}
   );
 }
 
@@ -170,7 +170,7 @@
    */
   @include padding(null, #{$textarea-md-floating-label-padding * 2}, null, null);
 
-  font-size: calc(1em * #{$textarea-floating-label-scale});
+  font-size: calc(1em * #{$form-control-label-stacked-scale});
 
   opacity: 0;
   pointer-events: none;

core/src/components/textarea/textarea.md.solid.scss

@@ -72,5 +72,5 @@
    * Label text should not extend
    * beyond the bounds of the textarea.
    */
-  max-width: calc(100% / #{$textarea-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/textarea/textarea.scss

@@ -693,11 +693,11 @@
 :host(.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.has-focus.textarea-label-placement-floating) .label-text-wrapper,
 :host(.has-value.textarea-label-placement-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$textarea-floating-label-scale}));
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
 
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
    */
-  max-width: calc(100% / #{$textarea-floating-label-scale});
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
 }

core/src/components/textarea/textarea.vars.scss

@@ -1,10 +1,5 @@
 @import "../../themes/ionic.globals";
 
-/// @prop - How much to scale the floating label by.
-/// The value 0.75 is used to match the MD spec.
-/// iOS does not have a floating label design spec, so we standardize on 0.75.
-$textarea-floating-label-scale: 0.75 !default;
-
 /// @prop - The bottom padding of the textarea element.
 /// The value 8px is to add additional spacing for auto grow and scrollable textareas.
 $textarea-padding-bottom: 8px !default;

core/src/components/toggle/test/label/toggle.e2e.ts

@@ -153,3 +153,19 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('toggle: stacked long label'), () => {
+    test('long label should truncate', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-toggle label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-toggle>
+        `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-long-label`));
+    });
+  });
+});

core/src/components/toggle/toggle.scss

@@ -251,12 +251,28 @@ input {
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
+  @include transform(scale(#{$form-control-label-stacked-scale}));
+
   /**
    * The margin between the label and
    * the toggle should be on the bottom
    * when the label sits on top.
    */
   @include margin(null, 0, $form-control-label-margin, 0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the toggle.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
+  @include transform-origin(start, top);
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
+  @include transform-origin(center, top);
 }
 
 // Toggle Background Track: Unchecked

core/src/themes/ionic.globals.scss

@@ -39,6 +39,11 @@ $placeholder-opacity: 0.6 !default;
 
 $form-control-label-margin: 16px !default;
 
+// How much the stacked labels should be scaled by
+/// The value 0.75 is used to match the MD spec.
+/// iOS does not have a floating label design spec, so we standardize on 0.75.
+$form-control-label-stacked-scale: 0.75 !default;
+
 
 // Z-Index
 // --------------------------------------------------

core/src/utils/forms/notch-controller.ts

@@ -153,7 +153,7 @@ export const createNotchController = (
      * The notch is only visible when the label is scaled,
      * which is why we multiply the width by 0.75 as this is
      * the same amount the label element is scaled by in the host CSS.
-     * (For ion-select, see $select-floating-label-scale in select.vars.scss).
+     * (See $form-control-label-stacked-scale in ionic.globals.scss).
      */
     notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
   };