fix(textarea): separate common and native styles

core/src/components/textarea/textarea.scss → core/src/components/textarea/textarea.common.scss

@@ -59,35 +59,13 @@
 
   width: 100%;
 
-  min-height: 44px;
-
   color: var(--color);
 
-  font-family: $font-family-base;
-
   z-index: $z-index-item-input;
 
   box-sizing: border-box;
 }
 
-// Textarea Wrapper
-// ----------------------------------------------------------------
-
-/**
- * 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
@@ -279,10 +257,6 @@
   caret-color: var(--highlight-color);
 }
 
-.native-wrapper textarea {
-  @include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
-}
-
 .native-wrapper {
   display: grid;
 
@@ -375,20 +349,11 @@
 // ----------------------------------------------------------------
 
 .textarea-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the textarea.
-   */
-  @include padding(5px, var(--padding-end), 0, var(--padding-start));
-
   display: flex;
 
   justify-content: space-between;
 
   border-top: var(--border-width) var(--border-style) var(--border-color);
-
-  font-size: dynamic-font(12px);
 }
 
 /**
@@ -439,11 +404,7 @@
    */
   @include margin-horizontal(auto, null);
 
-  color: #{$text-color-step-450};
-
   white-space: nowrap;
-
-  padding-inline-start: 16px;
 }
 
 // Textarea Label
@@ -524,15 +485,6 @@
   flex-direction: row;
 }
 
-:host(.textarea-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the textarea should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Textarea Label Placement - End
 // ----------------------------------------------------------------
 
@@ -544,27 +496,9 @@
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the textarea should be on the start
- * when the label sits at the end.
- */
-:host(.textarea-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
 // Textarea Label Placement - Fixed
 // ----------------------------------------------------------------
 
-:host(.textarea-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the textarea should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 /**
  * Label is on the left of the textarea in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -624,13 +558,6 @@
   @include margin(8px, 0px, 0px, 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.
@@ -666,31 +593,14 @@
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
 
-// Start/End Slots
+// Start / End Slots
 // ----------------------------------------------------------------
 
 .start-slot-wrapper,
 .end-slot-wrapper {
-  @include padding(var(--padding-top), 0, var(--padding-bottom), 0);
-
   display: flex;
 
   flex-shrink: 0;
 
   align-self: start;
 }
-
-::slotted([slot="start"]),
-::slotted([slot="end"]) {
-  margin-top: 0; // ensure slot content is vertically aligned with label
-}
-
-::slotted([slot="start"]:last-of-type) {
-  margin-inline-end: $form-control-label-margin;
-  margin-inline-start: 0;
-}
-
-::slotted([slot="end"]:first-of-type) {
-  margin-inline-start: $form-control-label-margin;
-  margin-inline-end: 0;
-}

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

@@ -7,10 +7,6 @@
 :host(.textarea-fill-outline) {
   --border-width: #{globals.$ionic-border-size-025};
   --border-color: #{globals.$ionic-color-neutral-500};
-  --padding-top: #{globals.$ionic-space-300};
-  --padding-end: #{globals.$ionic-space-400};
-  --padding-bottom: #{globals.$ionic-space-300};
-  --padding-start: #{globals.$ionic-space-400};
 }
 
 // Textarea Fill: Outline, Textarea Wrapper
@@ -49,44 +45,19 @@
  * a border with the outline style.
  */
 :host(.textarea-fill-outline) .textarea-bottom {
-  @include padding(#{globals.$ionic-space-100}, var(--padding-end), null, var(--padding-start));
-
   border-top: none;
 }
 
-// Overrides
+// Textarea Fill: Outline, Native Textarea
 // ----------------------------------------------------------------
 
-// TODO remove the following overrides in favor of splitting
-// to common and native files
 :host(.textarea-fill-outline) textarea {
-  @include margin(0);
-  @include padding(0);
-}
-
-:host(.textarea-fill-outline) .start-slot-wrapper,
-:host(.textarea-fill-outline) .end-slot-wrapper {
-  @include padding(0);
-}
-
-:host(.textarea-fill-outline) ion-icon {
-  @include margin(0);
-}
-
-: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: 0;
+  margin-top: 4px;
 }
 
+// Textarea Fill: Outline, Start / End Slots
 // ----------------------------------------------------------------
 
-// TODO see if there is a better way of doing these
-:host(.textarea-fill-outline) textarea {
-  margin-top: 4px;
-}
-
 :host(.textarea-fill-outline) .start-slot-wrapper,
 :host(.textarea-fill-outline) .end-slot-wrapper {
   margin-top: 3px;

core/src/components/textarea/textarea.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./textarea";
+@import "./textarea.common";
 @import "./textarea.ionic.vars";
 @import "./textarea.ionic.outline.scss";
 
@@ -29,15 +29,15 @@
   height: globals.$ionic-scale-3400;
 }
 
-// Textarea Fill: Outline, Textarea Wrapper
+// Textarea Wrapper
 // ----------------------------------------------------------------
 
-:host(.textarea-fill-outline) .textarea-wrapper {
+.textarea-wrapper {
   gap: #{globals.$ionic-space-100};
 }
 
-:host(.textarea-fill-outline) .textarea-wrapper-inner {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+.textarea-wrapper-inner {
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 }
 
 // Textarea Label
@@ -64,7 +64,7 @@ ion-icon {
 // ----------------------------------------------------------------
 
 .textarea-bottom {
-  @include padding(7px, 0);
+  @include globals.padding(#{globals.$ionic-space-100}, var(--padding-end), null, var(--padding-start));
   @include globals.typography(globals.$ionic-body-sm-medium);
 }
 

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

@@ -1,4 +1,4 @@
-@import "./textarea";
+@import "./textarea.native";
 @import "./textarea.vars";
 @import "./textarea.ios.vars";
 

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

@@ -1,4 +1,4 @@
-@import "./textarea";
+@import "./textarea.native";
 @import "./textarea.vars";
 @import "./textarea.md.vars";
 @import "./textarea.md.solid";