fix(elements/ino-input): prevent label cut-off in outline variant (#1189

) * style(elements|ino-input): add padding to label * chore: add outline runtime change warning * fix: ino-input story type errors * use MDCNotchedOutline * fix notch of input * push build changes * revert to minimal changes * improve spacing * remove redundant css * feat: add mac special font scaling * fix mac issue * move label logic to ino-label * use correct lifecycle --------- Co-authored-by: Jan-Niklas Voß <[email protected]> Co-authored-by: Benjamin Pagelsdorf <[email protected]>
inovex · Mar 14, 2024 · 576f68b · 576f68b
1 parent b7eb49c
commit 576f68b
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 45 deletions.
diff --git a/packages/elements-angular/src/directives/proxies.ts b/packages/elements-angular/src/directives/proxies.ts
@@ -585,7 +585,8 @@ export declare interface InoInputFile extends Components.InoInputFile {
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'for', 'outline', 'required', 'showHint', 'text']
+  inputs: ['disabled', 'for', 'outline', 'required', 'showHint', 'text'],
+  methods: ['getMdcNotchedOutlineInstance']
 })
 @Component({
   selector: 'ino-label',

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -71,6 +71,7 @@
     "@material/tab-indicator": "^13.0.0",
     "@material/tab-scroller": "^13.0.0",
     "@material/textfield": "^13.0.0",
+    "@material/notched-outline": "^13.0.0",
     "@material/typography": "^13.0.0",
     "@stencil/core": "^4.12.2",
     "@tarekraafat/autocomplete.js": "^10.2.7",

diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts
@@ -8,10 +8,12 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
 import { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
 import { Placement, Props } from "tippy.js";
+import { MDCNotchedOutline } from "@material/notched-outline";
 import { SortDirection, SortDirectionChangeDetails } from "./interface";
 export { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
 export { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
 export { Placement, Props } from "tippy.js";
+export { MDCNotchedOutline } from "@material/notched-outline";
 export { SortDirection, SortDirectionChangeDetails } from "./interface";
 export namespace Components {
     interface InoAccordion {
@@ -796,7 +798,7 @@ export namespace Components {
          */
         "name"?: string;
         /**
-          * Styles the input field as outlined element.
+          * Styles the input field as outlined element.  This property is immutable which means that it should not be changed after its first initialization. Changing this property at runtime causes problems in combination with the floating label. You can read more about this issue [here](https://github.com/inovex/elements/issues/1216).
          */
         "outline"?: boolean;
         /**
@@ -906,6 +908,10 @@ export namespace Components {
           * Id of the associated form control
          */
         "for": string;
+        /**
+          * Returns internal mdcNotchedOutline instance
+         */
+        "getMdcNotchedOutlineInstance": () => Promise<MDCNotchedOutline>;
         /**
           * Styles the label in an outlined style
          */
@@ -3598,7 +3604,7 @@ declare namespace LocalJSX {
          */
         "onValueChange"?: (event: InoInputCustomEvent<string>) => void;
         /**
-          * Styles the input field as outlined element.
+          * Styles the input field as outlined element.  This property is immutable which means that it should not be changed after its first initialization. Changing this property at runtime causes problems in combination with the floating label. You can read more about this issue [here](https://github.com/inovex/elements/issues/1216).
          */
         "outline"?: boolean;
         /**

diff --git a/packages/elements/src/components/ino-input/ino-input.tsx b/packages/elements/src/components/ino-input/ino-input.tsx
@@ -18,6 +18,7 @@ import classNames from 'classnames';
 import { generateUniqueId, hasSlotContent } from '../../util/component-utils';
 import { getPrecision } from '../../util/math-utils';
 import { InputType, UserInputInterceptor } from '../types';
+import { MDCNotchedOutline } from '@material/notched-outline';
 
 /**
  * An input component with styles. It functions as a wrapper around the material [textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
@@ -36,6 +37,7 @@ export class Input implements ComponentInterface {
   @Element() el!: HTMLInoInputElement;
 
   private nativeInputEl?: HTMLInputElement;
+  private inoLabelElement?: HTMLInoLabelElement;
   private cursorPosition = 0;
 
   /**
@@ -54,12 +56,12 @@ export class Input implements ComponentInterface {
   private mdcTextfield: MDCTextField;
 
   /**
-   * An internal instance of an textfield helper text instance (if neccessary).
+   * An internal instance of a textfield helper text instance (if necessary).
    */
   private mdcHelperText: MDCTextFieldHelperText;
 
   /**
-   * An internal instance of an textfield icon instance (if neccessary).
+   * An internal instance of a textfield icon instance (if necessary).
    */
   private mdcTextfieldIcon: MDCTextFieldIcon;
 
@@ -163,9 +165,21 @@ export class Input implements ComponentInterface {
 
   /**
    * Styles the input field as outlined element.
+   *
+   * This property is immutable which means that it should not be changed after its first initialization.
+   * Changing this property at runtime causes problems in combination with the floating label.
+   * You can read more about this issue [here](https://github.com/inovex/elements/issues/1216).
    */
   @Prop() outline?: boolean;
 
+  @Watch('outline')
+  handleOutlineChange(oldVal: boolean, newVal: boolean) {
+    if (oldVal !== newVal)
+      console.warn(
+        `Changing the 'outline' property at runtime is not recommended. Read more about it here: https://github.com/inovex/elements/issues/1216`,
+      );
+  }
+
   /**
    * The validation pattern of this element.
    */
@@ -260,20 +274,15 @@ export class Input implements ComponentInterface {
   // Lifecycle methods
   // ----
 
-  componentDidLoad() {
+  async componentDidLoad() {
     this.mdcTextfield = new MDCTextField(
       this.el.querySelector('.mdc-text-field'),
     );
 
-    if (this.type === 'email') {
-      this.mdcTextfield.useNativeValidation = false;
-    }
-
     if (this.helper) {
-      const helperTextEl = document.querySelector(
-        '.mdc-text-field-helper-text',
+      this.mdcHelperText = new MDCTextFieldHelperText(
+        this.el.querySelector('.mdc-text-field-helper-text'),
       );
-      this.mdcHelperText = new MDCTextFieldHelperText(helperTextEl);
     }
 
     if (
@@ -284,6 +293,23 @@ export class Input implements ComponentInterface {
         this.el.querySelector('.mdc-text-field__icon'),
       );
     }
+
+    const mdcNotchedOutline =
+      await this.inoLabelElement.getMdcNotchedOutlineInstance();
+    this.mdcTextfield.initialize(
+      undefined,
+      undefined,
+      (el) => this.mdcHelperText ?? new MDCTextFieldHelperText(el),
+      undefined,
+      (el) => this.mdcTextfieldIcon ?? new MDCTextFieldIcon(el),
+      undefined,
+      (el) => mdcNotchedOutline ?? new MDCNotchedOutline(el),
+    );
+
+    if (this.type === 'email') {
+      this.mdcTextfield.useNativeValidation = false;
+    }
+
     this.textfieldValue = this.value || '';
 
     if (this.autoFocus) {
@@ -306,8 +332,6 @@ export class Input implements ComponentInterface {
 
   disconnectedCallback() {
     this.mdcTextfield?.destroy();
-    this.mdcHelperText?.destroy();
-    this.mdcTextfieldIcon?.destroy();
   }
 
   // ----
@@ -492,6 +516,7 @@ export class Input implements ComponentInterface {
       <Host>
         <span class={classTextfield}>
           <ino-label
+            ref={(el) => (this.inoLabelElement = el)}
             for={this.inputID}
             outline={this.outline}
             text={this.label}