Merge remote-tracking branch 'origin/main' into sp/sync-feature-7-6-with-main

core/src/components/textarea/textarea.ios.scss

@@ -40,26 +40,3 @@
 :host(.textarea-disabled) {
   opacity: #{$textarea-ios-disabled-opacity};
 }
-
-// Textarea Wrapper
-// ----------------------------------------------------------------
-
-// TODO: FW-2876 - Make this style a :host style, remove :not selector
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
-/**
- * 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;
-}

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

@@ -4,9 +4,6 @@
 // iOS Textarea
 // --------------------------------------------------
 
-/// @prop - Margin start of the textarea when it is after a label
-$textarea-ios-by-label-margin-start:         $item-ios-padding-start !default;
-
 /// @prop - Font size of the textarea
 $textarea-ios-font-size:                     inherit !default;
 
@@ -22,8 +19,5 @@ $textarea-ios-padding-bottom:                 $item-ios-padding-bottom !default;
 /// @prop - Margin start of the textarea
 $textarea-ios-padding-start:                  0 !default;
 
-/// @prop - Placeholder text color of the textarea
-$textarea-ios-placeholder-color:            $placeholder-text-color !default;
-
 /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea
 $textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;

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

@@ -8,6 +8,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {

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

@@ -42,24 +42,6 @@
   letter-spacing: 0.0333333333em;
 }
 
-// Textarea Wrapper
-// ----------------------------------------------------------------
-
-// TODO: FW-2876 - Make this a style on :host, remove :not selector
-:host(:not(.legacy-textarea)) {
-  min-height: 56px;
-}
-
-/**
- * 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;
-}
-
 // Textarea Label
 // ----------------------------------------------------------------
 

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

@@ -9,6 +9,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 /**

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

@@ -19,9 +19,6 @@ $textarea-md-padding-bottom: $item-md-padding-bottom !default;
 /// @prop - Margin start of the textarea
 $textarea-md-padding-start: ($item-md-padding-start * 0.5) !default;
 
-/// @prop - Placeholder text color of the textarea
-$textarea-md-placeholder-color: $placeholder-text-color !default;
-
 /// @prop - The amount of whitespace to display on either side of the floating label
 $textarea-md-floating-label-padding: 4px !default;
 

core/src/components/textarea/textarea.scss

@@ -67,6 +67,29 @@
   box-sizing: border-box;
 }
 
+// Textarea Wrapper
+// ----------------------------------------------------------------
+
+// TODO: FW-2876 - Make this style a :host style, remove :not selector
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
+/**
+ * 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

core/src/components/textarea/textarea.tsx

@@ -16,7 +16,13 @@ import {
 import type { LegacyFormController, NotchController } from '@utils/forms';
 import { createLegacyFormController, createNotchController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
+import {
+  inheritAriaAttributes,
+  debounceEvent,
+  findItemLabel,
+  inheritAttributes,
+  componentOnReady,
+} from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
 import type { SlotMutationController } from '@utils/slot-mutation-controller';
@@ -378,7 +384,14 @@ export class Textarea implements ComponentInterface {
    * Returns the native `<textarea>` element used under the hood.
    */
   @Method()
-  getInputElement(): Promise<HTMLTextAreaElement> {
+  async getInputElement(): Promise<HTMLTextAreaElement> {
+    /**
+     * If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
+     * nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
+     */
+    if (!this.nativeInput) {
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
+    }
     return Promise.resolve(this.nativeInput!);
   }