fix(input): begin fixing notch adjustment

Author: liamdebeasi

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

@@ -62,7 +62,9 @@
 
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
-  @include transform-origin(center, top);
+  @include transform-origin(start, top);
+
+  position: absolute;
 }
 
 /**
@@ -87,6 +89,21 @@
   @include margin(0);
 }
 
+/**
+ * This element ensures that the notch used
+ * the size of the scaled text so that the
+ * border cut out is the correct width.
+ * The text in this element should not
+ * be interactive.
+ */
+:host(.input-fill-outline) .spacer {
+  font-size: calc(1em * 0.75);
+
+  opacity: 0;
+
+  padding-right: 8px;
+}
+
 /**
  * This ensures that the input does not
  * overlap the floating label while still
@@ -132,7 +149,15 @@
   @include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
   @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
 
-  width: 12px;
+  /**
+   * There should be spacing between the translated text
+   * and .input-outline-start. However, we can't add this
+   * spacing onto the notch because it would cause the
+   * label to look like it is not aligned with the
+   * text input. Instead, we subtract a few pixels from
+   * this element.
+   */
+  width: calc(var(--padding-start) - 4px);
 }
 
 /**

core/src/components/input/input.tsx

@@ -572,9 +572,7 @@ export class Input implements ComponentInterface {
    * when fill="outline".
    */
   private renderLabelContainer() {
-    const { labelPlacement } = this;
     const hasOutlineFill = this.fill === 'outline';
-    const needsNotch = labelPlacement === 'floating' || labelPlacement === 'stacked';
 
     if (hasOutlineFill) {
       /**
@@ -590,10 +588,12 @@ export class Input implements ComponentInterface {
       return [
         <div class="input-outline-container">
           <div class="input-outline-start"></div>
-          <div class="input-outline-notch">{needsNotch && this.renderLabel()}</div>
+          <div class="input-outline-notch">
+            <div class="spacer">{this.label}</div>
+          </div>
           <div class="input-outline-end"></div>
         </div>,
-        !needsNotch && this.renderLabel(),
+        this.renderLabel(),
       ];
     }