@ionic/core 7.5.7-dev.11701203423.1b6a8829 → 7.5.7-dev.11701273756.1eb73d4c

package/dist/collection/components/textarea/test/slot/textarea.e2e.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: start and end slots (visual checks)'), () => {
+    test('should not have visual regressions with a start-positioned label', async ({ page }) => {
+      await page.setContent(`
+          <ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
+            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-label slot="end">lbs</ion-label>
+          </ion-textarea>
+        `, config);
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-slots-label-start`));
+    });
+    test('should not have visual regressions with a floating label', async ({ page }) => {
+      await page.setContent(`
+          <ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
+            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-label slot="end">lbs</ion-label>
+          </ion-textarea>
+        `, config);
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-slots-label-floating`));
+    });
+  });
+});
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('textarea: start and end slots (functionality checks)'), () => {
+    test('should raise floating label when there is content in the start slot', async ({ page }) => {
+      await page.setContent(`
+          <ion-textarea label-placement="floating" fill="solid" label="Weight">
+            <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+          </ion-textarea>
+        `, config);
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveClass(/label-floating/);
+    });
+    test('should raise floating label when there is content in the end slot', async ({ page }) => {
+      await page.setContent(`
+          <ion-textarea label-placement="floating" fill="solid" label="Weight">
+            <ion-icon slot="end" name="barbell" aria-hidden="true"></ion-icon>
+          </ion-textarea>
+        `, config);
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveClass(/label-floating/);
+    });
+  });
+});

package/dist/collection/components/textarea/textarea.ios.css

@@ -356,9 +356,7 @@
 }
 
 .native-wrapper {
-  display: flex;
   position: relative;
-  flex-grow: 1;
   width: 100%;
   height: 100%;
 }
@@ -429,6 +427,12 @@
   word-break: break-word;
 }
 
+.textarea-wrapper-inner {
+  display: flex;
+  width: 100%;
+  min-height: inherit;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -704,6 +708,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 8px;
+}
+
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -729,9 +740,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-: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 {
+:host(.label-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -740,6 +749,29 @@
   max-width: calc(100% / 0.75);
 }
 
+.start-slot-wrapper, .end-slot-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-shrink: 0;
+  align-self: start;
+}
+
+::slotted([slot=start]),
+::slotted([slot=end]) {
+  margin-top: 0;
+}
+
+::slotted([slot=start]) {
+  margin-inline-end: 16px;
+}
+
+::slotted([slot=end]) {
+  margin-inline-start: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/textarea/textarea.js

@@ -13,6 +13,8 @@ import { getCounterText } from "../input/input.utils";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
+ * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
+ * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
  */
 export class Textarea {
   constructor() {
@@ -121,7 +123,7 @@ export class Textarea {
   connectedCallback() {
     const { el } = this;
     this.legacyFormController = createLegacyFormController(el);
-    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
+    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
     this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
     this.emitStyle();
     this.debounceChanged();
@@ -189,6 +191,8 @@ export class Textarea {
         'has-placeholder': this.placeholder !== undefined,
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
+        // TODO(FW-2876): remove this
+        legacy: !!this.legacy,
       });
     }
   }
@@ -360,20 +364,41 @@ Developers can use the "legacy" property to continue using the legacy form marku
     return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
   }
   renderTextarea() {
-    const { inputId, disabled, fill, shape, labelPlacement } = this;
+    const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+    const hasValue = this.hasValue();
+    const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+    /**
+     * If the label is stacked, it should always sit above the textarea.
+     * For floating labels, the label should move above the textarea if
+     * the textarea has a value, is focused, or has anything in either
+     * the start or end slot.
+     *
+     * If there is content in the start slot, the label would overlap
+     * it if not forced to float. This is also applied to the end slot
+     * because with the default or solid fills, the textarea is not
+     * vertically centered in the container, but the label is. This
+     * causes the slots and label to appear vertically offset from each
+     * other when the label isn't floating above the input. This doesn't
+     * apply to the outline fill, but this was not accounted for to keep
+     * things consistent.
+     *
+     * TODO(FW-5592): Remove hasStartEndSlots condition
+     */
+    const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
     return (h(Host, { class: createColorClasses(this.color, {
         [mode]: true,
-        'has-value': this.hasValue(),
-        'has-focus': this.hasFocus,
+        'has-value': hasValue,
+        'has-focus': hasFocus,
+        'label-floating': labelShouldFloat,
         [`textarea-fill-${fill}`]: fill !== undefined,
         [`textarea-shape-${shape}`]: shape !== undefined,
         [`textarea-label-placement-${labelPlacement}`]: true,
         'textarea-disabled': disabled,
-      }) }, h("label", { class: "textarea-wrapper" }, this.renderLabelContainer(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+      }) }, h("label", { class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "textarea-wrapper-inner" }, h("div", { class: "start-slot-wrapper" }, h("slot", { name: "start" })), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { class: "end-slot-wrapper" }, h("slot", { name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
   }
   render() {
     const { legacyFormController } = this;

package/dist/collection/components/textarea/textarea.md.css

@@ -356,9 +356,7 @@
 }
 
 .native-wrapper {
-  display: flex;
   position: relative;
-  flex-grow: 1;
   width: 100%;
   height: 100%;
 }
@@ -429,6 +427,12 @@
   word-break: break-word;
 }
 
+.textarea-wrapper-inner {
+  display: flex;
+  width: 100%;
+  min-height: inherit;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -704,6 +708,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 8px;
+}
+
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -729,9 +740,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-: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 {
+:host(.label-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -740,6 +749,29 @@
   max-width: calc(100% / 0.75);
 }
 
+.start-slot-wrapper, .end-slot-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-shrink: 0;
+  align-self: start;
+}
+
+::slotted([slot=start]),
+::slotted([slot=end]) {
+  margin-top: 0;
+}
+
+::slotted([slot=start]) {
+  margin-inline-end: 16px;
+}
+
+::slotted([slot=end]) {
+  margin-inline-start: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -1037,9 +1069,7 @@
   }
 }
 
-:host(.textarea-fill-solid.textarea-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper {
+:host(.label-floating.textarea-fill-solid) .label-text-wrapper {
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -1193,9 +1223,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-: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 {
+:host(.label-floating.textarea-fill-outline) .label-text-wrapper {
   transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
@@ -1227,6 +1255,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 12px;
+}
+
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1362,9 +1397,7 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
-:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
-:host(.textarea-fill-outline.textarea-label-placement-stacked) .textarea-outline-notch {
+:host(.label-floating.textarea-fill-outline) .textarea-outline-notch {
   border-top: none;
 }
 

package/dist/collection/components/toast/animations/ios.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
 /**
  * iOS Toast Enter Animation
  */
@@ -18,7 +19,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
       wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
       break;
     case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
+      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;

package/dist/collection/components/toast/animations/md.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
 /**
  * MD Toast Enter Animation
  */
@@ -15,16 +16,16 @@ export const mdEnterAnimation = (baseEl, opts) => {
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':
-      wrapperEl.style.top = top;
+      wrapperEl.style.setProperty('transform', `translateY(${top})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
+      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperEl.style.bottom = bottom;
+      wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
   }

package/dist/collection/components/toast/animations/utils.js

@@ -7,10 +7,12 @@ import { printIonWarning } from "../../../utils/logging/index";
  * Calculate the CSS top and bottom position of the toast, to be used
  * as starting points for the animation keyframes.
  *
- * Note that MD animates bottom-positioned toasts using style.bottom,
- * which calculates from the bottom edge of the screen, while iOS uses
- * translateY, which calculates from the top edge of the screen. This
- * is why the bottom calculates differ slightly between modes.
+ * The default animations for both MD and iOS
+ * use translateY, which calculates from the
+ * top edge of the screen. This behavior impacts
+ * how we compute the offset when a toast has
+ * position='bottom' since we need to calculate from
+ * the bottom edge of the screen instead.
  *
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
@@ -25,7 +27,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
    */
   let offset;
   if (mode === 'md') {
-    offset = 8;
+    offset = position === 'top' ? 8 : -8;
   }
   else {
     offset = position === 'top' ? 10 : -10;
@@ -48,12 +50,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
        * to the top edge of the anchor. We want to calculate from the
        * bottom edge of the screen instead.
        */
-      if (mode === 'md') {
-        offset += win.innerHeight - box.top;
-      }
-      else {
-        offset -= win.innerHeight - box.top;
-      }
+      offset -= win.innerHeight - box.top;
     }
     /**
      * We don't include safe area here because that should already be
@@ -67,9 +64,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
   else {
     return {
       top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-      bottom: mode === 'md'
-        ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
-        : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
     };
   }
 }
@@ -83,3 +78,14 @@ function warnIfAnchorIsHidden(positionAnchor, toast) {
     printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
   }
 }
+/**
+ * Returns the top offset required to place
+ * the toast in the middle of the screen.
+ * Only needed when position="toast".
+ * @param toastHeight - The height of the ion-toast element
+ * @param wrapperHeight - The height of the .toast-wrapper element
+ * inside the toast's shadow root.
+ */
+export const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
+  return Math.floor(toastHeight / 2 - wrapperHeight / 2);
+};