From 9c4f33b0c2bf999d106cfbc7794fe7feabf387a9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 17 Sep 2024 13:26:24 +0300
Subject: [PATCH] Fixed #6418 - New Float Label Variants

---
 apps/showcase/assets/menu/menu.json           |   3 +-
 apps/showcase/doc/floatlabel/BasicDoc.vue     |   2 +-
 apps/showcase/doc/floatlabel/InvalidDoc.vue   | 113 ++++++++++++++++++
 apps/showcase/doc/floatlabel/VariantsDoc.vue  |  90 ++++++++++++++
 apps/showcase/pages/floatlabel/index.vue      |  14 ++-
 .../src/floatlabel/BaseFloatLabel.vue         |   6 +
 .../src/floatlabel/style/FloatLabelStyle.js   |  66 +++++++++-
 .../src/presets/aura/floatlabel/index.js      |  28 ++++-
 packages/themes/src/presets/aura/index.js     |   6 +-
 .../src/presets/lara/floatlabel/index.js      |  28 ++++-
 packages/themes/src/presets/lara/index.js     |   6 +-
 .../src/presets/nora/floatlabel/index.js      |  28 ++++-
 packages/themes/src/presets/nora/index.js     |   6 +-
 13 files changed, 378 insertions(+), 18 deletions(-)
 create mode 100644 apps/showcase/doc/floatlabel/InvalidDoc.vue
 create mode 100644 apps/showcase/doc/floatlabel/VariantsDoc.vue

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index bdc8a016b..26e9f9482 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -97,7 +97,8 @@
                         },
                         {
                             "name": "FloatLabel",
-                            "to": "/floatlabel"
+                            "to": "/floatlabel",
+                            "badge": "NEW"
                         },
                         {
                             "name": "IconField",
diff --git a/apps/showcase/doc/floatlabel/BasicDoc.vue b/apps/showcase/doc/floatlabel/BasicDoc.vue
index 09edcc57b..6ebf82616 100644
--- a/apps/showcase/doc/floatlabel/BasicDoc.vue
+++ b/apps/showcase/doc/floatlabel/BasicDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <FloatLabel>
-            <InputText id="username" v-model="value" />
+            <InputText id="username" v-model="value" autocomplete="off" />
             <label for="username">Username</label>
         </FloatLabel>
     </div>
diff --git a/apps/showcase/doc/floatlabel/InvalidDoc.vue b/apps/showcase/doc/floatlabel/InvalidDoc.vue
new file mode 100644
index 000000000..b6a9ed61a
--- /dev/null
+++ b/apps/showcase/doc/floatlabel/InvalidDoc.vue
@@ -0,0 +1,113 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the form element is invalid, the label is also highlighted.</p>
+    </DocSectionText>
+    <div class="card flex justify-center items-center gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" autocomplete="off" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" autocomplete="off" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: '',
+            code: {
+                basic: `
+<FloatLabel>
+    <InputText id="value1" v-model="value1" :invalid="!value1" />
+    <label for="value1">Username</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <InputText id="value2" v-model="value2" :invalid="!value2" />
+    <label for="value2">Username</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="value3" v-model="value3" :invalid="!value3" />
+    <label for="value3">Username</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center items-center gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: ''
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center items-center gap-4">
+        <FloatLabel>
+            <InputText id="value1" v-model="value1" :invalid="!value1" />
+            <label for="value1">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <InputText id="value2" v-model="value2" :invalid="!value2" />
+            <label for="value2">Username</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="value3" v-model="value3" :invalid="!value3" />
+            <label for="value3">Username</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/floatlabel/VariantsDoc.vue b/apps/showcase/doc/floatlabel/VariantsDoc.vue
new file mode 100644
index 000000000..9660a2f26
--- /dev/null
+++ b/apps/showcase/doc/floatlabel/VariantsDoc.vue
@@ -0,0 +1,90 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="inlabel" v-model="value1" autocomplete="off" />
+            <label for="inlabel">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="onlabel" v-model="value2" autocomplete="off" />
+            <label for="onlabel">On Label</label>
+        </FloatLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            code: {
+                basic: `
+<FloatLabel variant="in">
+    <InputText id="inlabel" v-model="value1" />
+    <label for="inlabel">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <InputText id="onlabel" v-model="value2" />
+    <label for="onlabel">On Label</label>
+</FloatLabel>
+`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="inlabel" v-model="value1" />
+            <label for="inlabel">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="onlabel" v-model="value2" />
+            <label for="onlabel">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+}
+<\/script>
+
+`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <FloatLabel variant="in">
+            <InputText id="inlabel" v-model="value1" />
+            <label for="inlabel">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <InputText id="onlabel" v-model="value2" />
+            <label for="onlabel">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/floatlabel/index.vue b/apps/showcase/pages/floatlabel/index.vue
index f5ecb57e0..9d20662d2 100644
--- a/apps/showcase/pages/floatlabel/index.vue
+++ b/apps/showcase/pages/floatlabel/index.vue
@@ -1,13 +1,15 @@
 <template>
-    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
+    <DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel visually integrates a label with its form element." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/floatlabel/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/floatlabel/BasicDoc.vue';
 import ImportDoc from '@/doc/floatlabel/ImportDoc.vue';
+import InvalidDoc from '@/doc/floatlabel/InvalidDoc.vue';
 import PTComponent from '@/doc/floatlabel/pt/index.vue';
 import ThemingDoc from '@/doc/floatlabel/theming/index.vue';
+import VariantsDoc from '@/doc/floatlabel/VariantsDoc.vue';
 
 export default {
     data() {
@@ -23,6 +25,16 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'variants',
+                    label: 'Variants',
+                    component: VariantsDoc
+                },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/packages/primevue/src/floatlabel/BaseFloatLabel.vue b/packages/primevue/src/floatlabel/BaseFloatLabel.vue
index 832ddbef5..85be43204 100644
--- a/packages/primevue/src/floatlabel/BaseFloatLabel.vue
+++ b/packages/primevue/src/floatlabel/BaseFloatLabel.vue
@@ -5,6 +5,12 @@ import FloatLabelStyle from 'primevue/floatlabel/style';
 export default {
     name: 'BaseFloatLabel',
     extends: BaseComponent,
+    props: {
+        variant: {
+            type: String,
+            default: 'over'
+        }
+    },
     style: FloatLabelStyle,
     provide() {
         return {
diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
index f4a4d85a1..b58a03419 100644
--- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
+++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
@@ -14,7 +14,8 @@ const theme = ({ dt }) => `
     transition-property: all;
     transition-timing-function: ease;
     line-height: 1;
-    left: 0.75rem;
+    font-weight: ${dt('floatlabel.font.weight')};
+    left: ${dt('floatlabel.position.x')};
     color: ${dt('floatlabel.color')};
     transition-duration: ${dt('floatlabel.transition.duration')};
 }
@@ -23,6 +24,10 @@ const theme = ({ dt }) => `
     top: 1rem;
 }
 
+.p-floatlabel:has(.p-invalid) label {
+    color: ${dt('floatlabel.invalid.color')};
+}
+
 .p-floatlabel:has(input:focus) label,
 .p-floatlabel:has(input.p-filled) label,
 .p-floatlabel:has(input:-webkit-autofill) label,
@@ -30,8 +35,22 @@ const theme = ({ dt }) => `
 .p-floatlabel:has(textarea.p-filled) label,
 .p-floatlabel:has(.p-inputwrapper-focus) label,
 .p-floatlabel:has(.p-inputwrapper-filled) label {
-    top: -.75rem;
-    font-size: 12px;
+    top: ${dt('floatlabel.focus.top')};
+    margin-top: 0;
+    font-size: ${dt('floatlabel.focus.font.size')};
+    font-weight: ${dt('floatlabel.label.focus.font.weight')};
+}
+
+.p-floatlabel:has(input.p-filled) label,
+.p-floatlabel:has(textarea.p-filled) label,
+.p-floatlabel:has(.p-inputwrapper-filled) label {
+    color: ${dt('floatlabel.active.color')};
+}
+
+.p-floatlabel:has(input:focus) label ,
+.p-floatlabel:has(input:-webkit-autofill) label,
+.p-floatlabel:has(textarea:focus) label ,
+.p-floatlabel:has(.p-inputwrapper-focus) label  {
     color: ${dt('floatlabel.focus.color')};
 }
 
@@ -51,13 +70,48 @@ const theme = ({ dt }) => `
     transition-timing-function: ease;
 }
 
-.p-floatlabel > .p-invalid + label {
-    color: ${dt('floatlabel.invalid.color')};
+.p-floatlabel-in .p-inputtext {
+    padding-top: ${dt('floatlabel.in.input.padding.top')};
+}
+
+.p-floatlabel-in:has(input:focus) label,
+.p-floatlabel-in:has(input.p-filled) label,
+.p-floatlabel-in:has(input:-webkit-autofill) label,
+.p-floatlabel-in:has(textarea:focus) label,
+.p-floatlabel-in:has(textarea.p-filled) label,
+.p-floatlabel-in:has(.p-inputwrapper-focus) label,
+.p-floatlabel-in:has(.p-inputwrapper-filled) label {
+    top: ${dt('floatlabel.in.focus.top')};
+}
+
+.p-floatlabel-on .p-inputtext {
+    padding-top: ${dt('floatlabel.on.input.padding.top')};
+    padding-bottom: ${dt('floatlabel.on.input.padding.bottom')};
+}
+
+.p-floatlabel-on:has(input:focus) label,
+.p-floatlabel-on:has(input.p-filled) label,
+.p-floatlabel-on:has(input:-webkit-autofill) label,
+.p-floatlabel-on:has(textarea:focus) label,
+.p-floatlabel-on:has(textarea.p-filled) label,
+.p-floatlabel-on:has(.p-inputwrapper-focus) label,
+.p-floatlabel-on:has(.p-inputwrapper-filled) label {
+    top: 0;
+    transform: translateY(-50%);
+    background: ${dt('floatlabel.on.focus.background')};
+    padding: ${dt('floatlabel.on.focus.padding')};
 }
 `;
 
 const classes = {
-    root: 'p-floatlabel'
+    root: ({ instance, props }) => [
+        'p-floatlabel',
+        {
+            'p-floatlabel-over': props.variant === 'over',
+            'p-floatlabel-on': props.variant === 'on',
+            'p-floatlabel-in': props.variant === 'in'
+        }
+    ]
 };
 
 export default BaseStyle.extend({
diff --git a/packages/themes/src/presets/aura/floatlabel/index.js b/packages/themes/src/presets/aura/floatlabel/index.js
index 674a61f54..088c922b4 100644
--- a/packages/themes/src/presets/aura/floatlabel/index.js
+++ b/packages/themes/src/presets/aura/floatlabel/index.js
@@ -2,7 +2,33 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
+        activeColor: '{form.field.float.label.active.color}',
         invalidColor: '{form.field.float.label.invalid.color}',
-        transitionDuration: '0.2s'
+        transitionDuration: '0.2s',
+        positionX: '{form.field.padding.x}',
+        fontWeight: '500',
+        focus: {
+            top: '-1.25rem',
+            fontSize: '0.875rem',
+            fontWeight: '400'
+        }
+    },
+    in: {
+        input: {
+            paddingTop: '1.5rem'
+        },
+        focus: {
+            top: '{form.field.padding.y}'
+        }
+    },
+    on: {
+        input: {
+            paddingTop: '1rem',
+            paddingBottom: '1rem'
+        },
+        focus: {
+            background: '{form.field.background}',
+            padding: '0 0.125rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/aura/index.js b/packages/themes/src/presets/aura/index.js
index 1b62de27f..c58df5a3d 100644
--- a/packages/themes/src/presets/aura/index.js
+++ b/packages/themes/src/presets/aura/index.js
@@ -258,7 +258,8 @@ export default {
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
                     floatLabelColor: '{surface.500}',
-                    floatLabelFocusColor: '{surface.500}',
+                    floatLabelFocusColor: '{primary.600}',
+                    floatLabelActiveColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
@@ -380,7 +381,8 @@ export default {
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
                     floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
+                    floatLabelFocusColor: '{primary.color}',
+                    floatLabelActiveColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
diff --git a/packages/themes/src/presets/lara/floatlabel/index.js b/packages/themes/src/presets/lara/floatlabel/index.js
index 674a61f54..7d18833a5 100644
--- a/packages/themes/src/presets/lara/floatlabel/index.js
+++ b/packages/themes/src/presets/lara/floatlabel/index.js
@@ -2,7 +2,33 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
+        activeColor: '{form.field.float.label.active.color}',
         invalidColor: '{form.field.float.label.invalid.color}',
-        transitionDuration: '0.2s'
+        transitionDuration: '0.2s',
+        positionX: '{form.field.padding.x}',
+        fontWeight: '500',
+        focus: {
+            top: '-1.25rem',
+            fontSize: '0.875rem',
+            fontWeight: '400'
+        }
+    },
+    in: {
+        input: {
+            paddingTop: '1.875rem'
+        },
+        focus: {
+            top: '{form.field.padding.y}'
+        }
+    },
+    on: {
+        input: {
+            paddingTop: '1.25rem',
+            paddingBottom: '1.25rem'
+        },
+        focus: {
+            background: '{form.field.background}',
+            padding: '0 0.125rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/lara/index.js b/packages/themes/src/presets/lara/index.js
index b94b86593..b5b78fa6f 100644
--- a/packages/themes/src/presets/lara/index.js
+++ b/packages/themes/src/presets/lara/index.js
@@ -260,7 +260,8 @@ export default {
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
                     floatLabelColor: '{surface.500}',
-                    floatLabelFocusColor: '{surface.500}',
+                    floatLabelFocusColor: '{primary.color}',
+                    floatLabelActiveColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.500}',
                     shadow: 'none'
@@ -385,7 +386,8 @@ export default {
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
                     floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
+                    floatLabelFocusColor: '{primary.color}',
+                    floatLabelActiveColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
diff --git a/packages/themes/src/presets/nora/floatlabel/index.js b/packages/themes/src/presets/nora/floatlabel/index.js
index 674a61f54..088c922b4 100644
--- a/packages/themes/src/presets/nora/floatlabel/index.js
+++ b/packages/themes/src/presets/nora/floatlabel/index.js
@@ -2,7 +2,33 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
+        activeColor: '{form.field.float.label.active.color}',
         invalidColor: '{form.field.float.label.invalid.color}',
-        transitionDuration: '0.2s'
+        transitionDuration: '0.2s',
+        positionX: '{form.field.padding.x}',
+        fontWeight: '500',
+        focus: {
+            top: '-1.25rem',
+            fontSize: '0.875rem',
+            fontWeight: '400'
+        }
+    },
+    in: {
+        input: {
+            paddingTop: '1.5rem'
+        },
+        focus: {
+            top: '{form.field.padding.y}'
+        }
+    },
+    on: {
+        input: {
+            paddingTop: '1rem',
+            paddingBottom: '1rem'
+        },
+        focus: {
+            background: '{form.field.background}',
+            padding: '0 0.125rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/nora/index.js b/packages/themes/src/presets/nora/index.js
index dd1c8a6f9..fda99dd13 100644
--- a/packages/themes/src/presets/nora/index.js
+++ b/packages/themes/src/presets/nora/index.js
@@ -258,7 +258,8 @@ export default {
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
                     floatLabelColor: '{surface.600}',
-                    floatLabelFocusColor: '{surface.600}',
+                    floatLabelFocusColor: '{primary.color}',
+                    floatLabelActiveColor: '{surface.600}',
                     floatLabelInvalidColor: '{red.500}',
                     iconColor: '{surface.900}',
                     shadow: 'none'
@@ -380,7 +381,8 @@ export default {
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
                     floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
+                    floatLabelFocusColor: '{primary.color}',
+                    floatLabelActiveColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.0}',
                     shadow: 'none'