refactor(input): split common and native styles

Author: brandyscarney

core/src/components/input/input.scss renamed to core/src/components/input/input.common.scss

@@ -1,6 +1,6 @@
-@import "./input.vars";
+@import "../../themes/mixins";
 
-// Input
+// Input: Common
 // --------------------------------------------------
 
 :host {
@@ -19,8 +19,6 @@
    * @prop --placeholder-font-weight: Font weight of the input placeholder text
    * @prop --placeholder-opacity: Opacity of the input placeholder text
    *
-   * @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
-   * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
    *
@@ -32,17 +30,11 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: #{$placeholder-opacity};
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
   --padding-start: 0px;
-  --background: transparent;
-  --color: initial;
   --border-style: solid;
-  --highlight-color-focused: #{ion-color(primary, base)};
-  --highlight-color-valid: #{ion-color(success, base)};
-  --highlight-color-invalid: #{ion-color(danger, base)};
 
   /**
    * This is a private API that is used to switch
@@ -58,16 +50,10 @@
 
   width: 100%;
 
-  min-height: 44px;
-
   /* stylelint-disable-next-line all */
   padding: 0 !important;
 
   color: var(--color);
-
-  font-family: $font-family-base;
-
-  z-index: $z-index-item-input;
 }
 
 :host-context(ion-item)[slot="start"],
@@ -79,19 +65,6 @@
   --highlight-color-focused: #{current-color(base)};
 }
 
-// Input 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 input text.
- */
-:host(.input-label-placement-floating),
-:host(.input-label-placement-stacked) {
-  min-height: 56px;
-}
-
 // Native Text Input
 // --------------------------------------------------
 
@@ -190,18 +163,13 @@
   align-items: center;
   justify-content: center;
 
-  width: 30px;
-  height: 30px;
-
   border: 0;
 
   outline: none;
 
   background-color: transparent;
   background-repeat: no-repeat;
 
-  color: $text-color-step-400;
-
   visibility: hidden;
   appearance: none;
 }
@@ -210,17 +178,6 @@
   color: inherit;
 }
 
-/**
- * Normally, we would not want to use :focus
- * here because that would mean tapping the button
- * on mobile would focus it (and keep it focused).
- * However, the clear button always disappears after
- * being activated, so we never get to that state.
- */
-.input-clear-icon:focus {
-  opacity: 0.5;
-}
-
 :host(.has-value) .input-clear-icon {
   visibility: visible;
 }
@@ -292,21 +249,12 @@
 // ----------------------------------------------------------------
 
 .input-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 text input.
-   */
-  @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);
-
   white-space: normal;
 }
 
@@ -341,8 +289,6 @@
 
 .input-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -364,11 +310,7 @@
    */
   @include margin-horizontal(auto, null);
 
-  color: $text-color-step-300;
-
   white-space: nowrap;
-
-  padding-inline-start: 16px;
 }
 
 // Input Native
@@ -463,15 +405,6 @@
   flex-direction: row;
 }
 
-:host(.input-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Input Label Placement - End
 // ----------------------------------------------------------------
 
@@ -483,27 +416,9 @@
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the input should be on the start
- * when the label sits at the end.
- */
-:host(.input-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
 // Input Label Placement - Fixed
 // ----------------------------------------------------------------
 
-:host(.input-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input 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 input in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -551,15 +466,6 @@
   z-index: 2;
 }
 
-/**
- * Ensures the input does not
- * overlap the label.
- */
-:host(.input-label-placement-stacked) input,
-:host(.input-label-placement-floating) input {
-  @include margin(1px, 0, 0, 0);
-}
-
 /**
  * This makes the label sit over the input
  * when the input is blurred and has no value.
@@ -568,6 +474,15 @@
   @include transform(translateY(100%), scale(1));
 }
 
+/**
+ * Ensures the input does not
+ * overlap the label.
+ */
+ :host(.input-label-placement-stacked) input,
+ :host(.input-label-placement-floating) input {
+   @include margin(1px, 0, 0, 0);
+ }
+
 /**
  * The input should be hidden when the label
  * is on top of the input. This prevents the label
@@ -582,32 +497,9 @@
   opacity: 1;
 }
 
-/**
- * This makes the label sit above the input.
- */
-:host(.label-floating) .label-text-wrapper {
-  @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% / #{$form-control-label-stacked-scale});
-}
-
-// Start/End Slots
+// Input Password Toggle
 // ----------------------------------------------------------------
 
-::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;
-}
-
 /**
  * The input password toggle component should be hidden when the input is readonly/disabled
  * because it is not possible to edit a password.

core/src/components/input/input.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./input";
+@import "./input.common";
 @import "./input.ionic.outline.scss";
 
 // Ionic Input
@@ -139,8 +139,7 @@
 
 .input-bottom {
   @include padding(globals.$ion-space-100, 0, 0, 0);
-
-  font-weight: globals.$ion-font-weight-medium;
+  @include globals.typography(globals.$ion-body-sm-medium);
 }
 
 .input-bottom .helper-text,

core/src/components/input/input.ios.scss

@@ -1,4 +1,4 @@
-@import "./input";
+@import "./input.native";
 @import "./input.ios.vars";
 
 :host {

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

@@ -1,4 +1,4 @@
-@import "./input";
+@import "./input.native";
 @import "./input.md.vars";
 @import "./input.md.solid.scss";
 @import "./input.md.outline.scss";