@ionic/core 8.8.19-dev.11786730389.1a1927bf → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -112,20 +112,6 @@
   box-sizing: border-box;
 }
 
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-  min-height: 56px;
-}
-
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -248,8 +234,8 @@
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-top: 0;
+  padding-bottom: 0;
   border-radius: var(--border-radius);
   display: flex;
   position: relative;
@@ -262,23 +248,46 @@
   line-height: normal;
 }
 
+.textarea-control {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-grow: 1;
+  align-items: start;
+  align-self: stretch;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and textarea's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and textarea truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-:host(.has-focus) textarea {
-  caret-color: var(--highlight-color);
+/**
+ * When the label sits beside the textarea, the label should size to its content
+ * and the textarea should take the remaining space. A zero flex basis prevents
+ * the textarea from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.textarea-label-placement-start) .native-wrapper,
+:host(.textarea-label-placement-end) .native-wrapper,
+:host(.textarea-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
 }
 
-.native-wrapper textarea {
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+:host(.has-focus) textarea {
+  caret-color: var(--highlight-color);
 }
 
 .native-wrapper {
@@ -305,8 +314,8 @@
 .native-wrapper::after {
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+  padding-top: 0;
+  padding-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -332,12 +341,6 @@
   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);
 }
@@ -421,12 +424,12 @@
 }
 
 .label-text-wrapper {
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * textarea and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -445,6 +448,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -488,7 +503,7 @@
  * Label is on the left of the textarea in LTR and
  * on the right in RTL.
  */
-:host(.textarea-label-placement-start) .textarea-wrapper {
+:host(.textarea-label-placement-start) .textarea-control {
   flex-direction: row;
 }
 
@@ -510,7 +525,7 @@
  * Label is on the right of the textarea in LTR and
  * on the left in RTL.
  */
-:host(.textarea-label-placement-end) .textarea-wrapper {
+:host(.textarea-label-placement-end) .textarea-control {
   flex-direction: row-reverse;
 }
 
@@ -560,8 +575,15 @@
  * down when the textarea is focused or has a value.
  *
  */
-:host(.textarea-label-placement-stacked) .textarea-wrapper,
-:host(.textarea-label-placement-floating) .textarea-wrapper {
+:host(.textarea-label-placement-stacked),
+:host(.textarea-label-placement-floating) {
+  --padding-top: 20px;
+  --padding-bottom: 6px;
+}
+
+:host(.textarea-label-placement-stacked) .textarea-control,
+:host(.textarea-label-placement-floating) .textarea-control {
+  padding-top: 0;
   flex-direction: column;
   align-items: start;
 }
@@ -574,12 +596,10 @@
 :host(.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   max-width: 100%;
   /**
    * The 2 ensures the label
@@ -614,13 +634,6 @@
   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.
@@ -655,19 +668,17 @@
   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);
+.textarea-start,
+.textarea-end {
   display: flex;
+  position: relative;
   flex-shrink: 0;
   align-self: start;
 }
 
 ::slotted([slot=start]),
 ::slotted([slot=end]) {
-  margin-top: 0;
+  margin-top: var(--padding-top);
 }
 
 ::slotted([slot=start]:last-of-type) {
@@ -856,10 +867,31 @@
   font-size: inherit;
 }
 
+/**
+ * Give stacked and floating textareas a taller minimum height to
+ * accommodate the label and textarea content.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  min-height: 56px;
+}
+
 :host(.textarea-disabled) {
   opacity: 0.3;
 }
 
+::slotted(ion-button[slot=start]),
+::slotted(ion-button[slot=end]) {
+  margin-top: 2px;
+}
+
+:host(.textarea-label-placement-floating) ::slotted(ion-button[slot=start]),
+:host(.textarea-label-placement-floating) ::slotted(ion-button[slot=end]),
+:host(.textarea-label-placement-stacked) ::slotted(ion-button[slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted(ion-button[slot=end]) {
+  margin-top: 10px;
+}
+
 /**
  * Slotted buttons have a lot of default padding that can
  * cause them to look misaligned from other pieces such

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createNotchController, checkInvalidState } from "../../utils/forms/index";
+import { createNotchController, createStartContainerController, checkInvalidState } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -30,9 +30,11 @@ export class Textarea {
     textareaWrapper;
     inheritedAttributes = {};
     originalIonInput;
-    notchSpacerEl;
     slotMutationController;
     notchController;
+    notchSpacerEl;
+    startContainerController;
+    startContainerEl;
     /**
      * The value of the textarea when the textarea is focused.
      */
@@ -260,8 +262,15 @@ export class Textarea {
     }
     connectedCallback() {
         const { el } = this;
-        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+            this.startContainerController?.calculateStartContainerWidth();
+            forceUpdate(this);
+        });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+        });
+        this.startContainerController.calculateStartContainerWidth();
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -300,6 +309,10 @@ export class Textarea {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        if (this.startContainerController) {
+            this.startContainerController.destroy();
+            this.startContainerController = undefined;
+        }
         // Clean up validation observer to prevent memory leaks
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -318,6 +331,7 @@ export class Textarea {
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
+        this.startContainerController?.calculateStartContainerWidth();
     }
     /**
      * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
@@ -480,43 +494,29 @@ export class Textarea {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * Stops propagation when the label is clicked,
-     * otherwise, two clicks will be triggered.
+     * Stops propagation for clicks on the textarea's own content (label text,
+     * textarea field) to prevent double-click events. Allows clicks on slotted
+     * content to propagate so event delegation works for parent handlers.
+     *
+     * Only slots belonging directly to this textarea should be considered.
+     * The textarea itself may have a slot attribute when placed in an item
+     * or toolbar, which does not make its content slotted content.
      */
     onLabelClick = (ev) => {
-        // Only stop propagation if the click was directly on the label
-        // and not on the input or other child elements
-        if (ev.target === ev.currentTarget) {
+        const target = ev.target;
+        const slotted = target.closest('[slot="start"], [slot="end"]');
+        if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
             ev.stopPropagation();
         }
     };
     /**
-     * Renders the border container when fill="outline".
+     * Renders the outline border with a notch for the label.
      */
-    renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
-        if (hasOutlineFill) {
-            /**
-             * The outline fill has a special outline
-             * that appears around the textarea and the label.
-             * Certain stacked and floating label placements cause the
-             * label to translate up and create a "cut out"
-             * inside of that border by using the notch-spacer element.
-             */
-            return [
-                h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
-                        'textarea-outline-notch': true,
-                        'textarea-outline-notch-hidden': !this.hasLabel,
-                    } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })),
-                this.renderLabel(),
-            ];
-        }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+    renderOutlineContainer() {
+        return (h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
+                'textarea-outline-notch': true,
+                'textarea-outline-notch-hidden': !this.hasLabel,
+            } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })));
     }
     /**
      * Renders the helper text or error text values
@@ -564,32 +564,20 @@ export class Textarea {
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
+        const { inputId, disabled, fill, shape, labelPlacement, 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;
+        const hasOutlineFill = mode === 'md' && fill === 'outline';
         /**
          * 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
+         * the textarea has a value or is focused.
          */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'eca1dfed53189408f614661ef3902cdb73d5f5de', class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
+        return (h(Host, { key: '78da9c96e6a29f19b237f268dd8bfd044afe27b6', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -598,7 +586,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'd4d835ffedbf8b6de192096e21167ec4f7e01d30', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '39b03e26c23473de31a0237543eaf1e0875e6ed9', class: "textarea-wrapper-inner" }, h("div", { key: 'e9e0997e7dc6d25f09e8439d81e138590c33a151', class: "start-slot-wrapper" }, h("slot", { key: '2d88aace11d74196758e40af27a777eebb270019', name: "start" })), h("div", { key: '8434424404f9fe707f9209ac6495a33bae060538', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '5bb8eaeba76c39bccadb7c041a10fb077c422dcc', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value)), h("div", { key: '107707676552f8faca3e708285cc3266061a0394', class: "end-slot-wrapper" }, h("slot", { key: 'dc890ffdce898f3d39a315e7bc432840559be466', name: "end" }))), shouldRenderHighlight && h("div", { key: '4554ad09ac0908cea2e90bfa2301b4cd80ac7242', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'c5ea3f26e01e66b857d3a1c88dbafbf2dbb81fdb', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '5a9d0efc8c13d9bd4ec4ceadf1bdb84205c47b3d', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'da08262e33f3a5b454847297338a74f07c5b60c9', name: "start" })), h("div", { key: '6461dc7381929eb83679ec07563b7bdf8bfc3f9f', class: "textarea-control" }, this.renderLabel(), h("div", { key: '8f7902a9e6040384d25d0e2061c04f6b49acf187', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '2149d8b2c23a164c536327c98d7a632e1e85428a', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '84f5f42add89875c3f0cce734b512a9e7be81e03', class: "textarea-end" }, h("slot", { key: 'ea654d78013a00b8af33deb89d42c2b7f6c9cb99', name: "end" })), shouldRenderHighlight && h("div", { key: 'b72195d2606816b3b71e65214d78cef1740f4804', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }