fix(label): using prop for position

also fixes #14288

core/src/components/label/label.ios.scss

@@ -29,13 +29,13 @@
 // iOS Stacked & Floating Labels
 // --------------------------------------------------
 
-.label-ios[stacked] {
+.label-ios-stacked {
   @include margin(null, null, 4px, null);
 
   font-size: 12px;
 }
 
-.label-ios[floating] {
+.label-ios-floating {
   @include margin(null, null, 0, null);
   @include transform(translate3d(0, 27px, 0));
   @include transform-origin(start, top);
@@ -43,13 +43,13 @@
   transition: transform 150ms ease-in-out;
 }
 
-.item-input-has-focus .label-ios[floating],
-.item-input-has-value .label-ios[floating] {
+.item-input-has-focus .label-ios-floating,
+.item-input-has-value .label-ios-floating {
   @include transform(translate3d(0, 0, 0), scale(.8));
 }
 
-.item-input-has-focus .label-ios[stacked],
-.item-input-has-focus .label-ios[floating] {
+.item-input-has-focus .label-ios-stacked,
+.item-input-has-focus .label-ios-floating {
   color: $label-ios-text-color-focused;
 }
 

core/src/components/label/label.md.scss

@@ -29,29 +29,29 @@
 // Material Design Stacked & Floating Labels
 // --------------------------------------------------
 
-.label-md[stacked] {
+.label-md-stacked {
   font-size: 12px;
 }
 
-.label-md[floating] {
+.label-md-floating {
   @include transform(translate3d(0, 27px, 0));
   @include transform-origin(start, top);
 
   transition: transform 150ms ease-in-out;
 }
 
-.label-md[stacked],
-.label-md[floating] {
+.label-md-stacked,
+.label-md-floating {
   @include margin(null, null, 0, 0);
 }
 
-.item-input-has-focus .label-md[stacked],
-.item-input-has-focus .label-md[floating] {
+.item-input-has-focus .label-md-stacked,
+.item-input-has-focus .label-md-floating {
   color: $label-md-text-color-focused;
 }
 
-.item-input-has-focus .label-md[floating],
-.item-input-has-value .label-md[floating] {
+.item-input-has-focus .label-md-floating,
+.item-input-has-value .label-md-floating {
   @include transform(translate3d(0, 0, 0), scale(.8));
 }
 

core/src/components/label/label.scss

@@ -33,7 +33,7 @@ ion-label {
 // Stacked & Floating Inputs
 // --------------------------------------------------
 
-ion-label[fixed] {
+.label-fixed {
   flex: 0 0 100px;
 
   width: 100px;
@@ -49,8 +49,8 @@ ion-label[fixed] {
   max-width: 100%;
 }
 
-ion-label[stacked],
-ion-label[floating] {
+.label-stacked ,
+.label-floating {
   @include margin(null, null, 0, null);
 }
 

core/src/components/label/label.tsx

@@ -1,5 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
-
+import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-label',
@@ -12,15 +11,9 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/
   }
 })
 export class Label {
-  styleTmr: any;
 
   @Element() private el: HTMLElement;
 
-  /**
-   * Emitted when the styles change.
-   */
-  @Event() ionStyle: EventEmitter;
-
   /**
    * The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -36,41 +29,44 @@ export class Label {
   @Prop() mode: 'ios' | 'md';
 
   /**
-   * If true, the label will sit alongside an input. Defaults to `false`.
+   * The position determines where and how the label behaves inside an item.
+   * Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
    */
-  @Prop() fixed = false;
+  @Prop({mutable: true}) position: 'inline' | 'fixed' | 'stacked' | 'floating' | undefined;
 
   /**
-   * If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
+   * Emitted when the styles change.
    */
-  @Prop() floating = false;
-
-  /**
-   * If true, the label will be stacked above an input. Defaults to `false`.
-   */
-  @Prop() stacked = false;
+  @Event() ionStyle: EventEmitter;
 
   @Method()
   getText(): string {
     return this.el.textContent || '';
   }
 
-  componentDidLoad() {
-    this.emitStyle();
+  componentWillLoad() {
+    if (this.position === undefined) {
+      this.position = (this.mode === 'ios') ? 'inline' : 'floating';
+    }
   }
 
-  emitStyle() {
-    clearTimeout(this.styleTmr);
+  componentDidLoad() {
+    this.positionChanged();
+  }
 
-    const styles = {
-      'label-fixed': this.fixed,
-      'label-floating': this.floating,
-      'label-stacked': this.stacked
-    };
-
-    this.styleTmr = setTimeout(() => {
-      this.ionStyle.emit(styles);
+  @Watch('position')
+  positionChanged() {
+    return this.ionStyle.emit({
+      [`label-${this.position}`]: true,
     });
   }
 
+  hostData() {
+    return {
+      class: {
+        [`label-${this.position}`]: true,
+        [`label-${this.mode}-${this.position}`]: true
+      }
+    };
+  }
 }

core/src/components/label/readme.md

@@ -16,20 +16,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
-#### fixed
-
-boolean
-
-If true, the label will sit alongside an input. Defaults to `false`.
-
-
-#### floating
-
-boolean
-
-If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
-
-
 #### mode
 
 string
@@ -39,11 +25,12 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
-#### stacked
+#### position
 
-boolean
+string
 
-If true, the label will be stacked above an input. Defaults to `false`.
+The position determines where and how the label behaves inside an item.
+Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
 
 
 ## Attributes
@@ -57,20 +44,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
-#### fixed
-
-boolean
-
-If true, the label will sit alongside an input. Defaults to `false`.
-
-
-#### floating
-
-boolean
-
-If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
-
-
 #### mode
 
 string
@@ -80,11 +53,12 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
-#### stacked
+#### position
 
-boolean
+string
 
-If true, the label will be stacked above an input. Defaults to `false`.
+The position determines where and how the label behaves inside an item.
+Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
 
 
 ## Events

core/src/components/label/test/basic/index.html

@@ -26,15 +26,15 @@
             <ion-input></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label fixed>Fixed</ion-label>
+            <ion-label position="fixed">Fixed</ion-label>
             <ion-input></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label floating>Floating</ion-label>
+            <ion-label position="floating">Floating</ion-label>
             <ion-input></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label stacked>Stacked</ion-label>
+            <ion-label position="stacked">Stacked</ion-label>
             <ion-input></ion-input>
           </ion-item>
         </ion-list>

core/src/components/label/test/preview/index.html

@@ -26,15 +26,15 @@
             <ion-input></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label fixed>Fixed</ion-label>
+            <ion-label position="fixed">Fixed</ion-label>
             <ion-input></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label floating>Floating</ion-label>
+            <ion-label position="floating">Floating</ion-label>
             <ion-input></ion-input>
           </ion-item>
           <ion-item>
-            <ion-label stacked>Stacked</ion-label>
+            <ion-label position="stacked">Stacked</ion-label>
             <ion-input></ion-input>
           </ion-item>
         </ion-list>

core/src/components/label/test/standalone/index.html

@@ -11,8 +11,8 @@
 <body>
   <ion-label>Default</ion-label>
   <ion-label>Wrap label this label just goes on and on and on</ion-label>
-  <ion-label fixed>Fixed</ion-label>
-  <ion-label floating>Floating</ion-label>
-  <ion-label stacked>Stacked</ion-label>
+  <ion-label position="fixed">Fixed</ion-label>
+  <ion-label position="floating">Floating</ion-label>
+  <ion-label position="stacked">Stacked</ion-label>
 </body>
 </html>