Updated on float label style

apps/showcase/doc/floatlabel/VariantsDoc.vue

@@ -2,7 +2,7 @@
     <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">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel variant="in">
             <InputText id="in_label" v-model="value1" autocomplete="off" />
             <label for="in_label">In Label</label>
@@ -36,7 +36,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap justify-center gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel variant="in">
             <InputText id="in_label" v-model="value1" autocomplete="off" />
             <label for="in_label">In Label</label>
@@ -49,7 +49,7 @@ export default {
     </div>
 </template>
 
-<script setup>
+<script>
 export default {
     data() {
         return {
@@ -59,10 +59,9 @@ export default {
     }
 }
 <\/script>
-
 `,
                 composition: `
-<template>
+<div class="card flex flex-wrap justify-center items-end gap-4">
     <div class="card flex flex-wrap justify-center gap-4">
         <FloatLabel variant="in">
             <InputText id="in_label" v-model="value1" autocomplete="off" />

packages/primevue/src/floatlabel/style/FloatLabelStyle.js

@@ -90,15 +90,6 @@ const theme = ({ dt }) => `
     top: ${dt('floatlabel.in.active.top')};
 }
 
-.p-floatlabel-on .p-inputtext,
-.p-floatlabel-on .p-select-label,
-.p-floatlabel-on .p-multiselect-label-container,
-.p-floatlabel-on .p-cascadeselect-label,
-.p-floatlabel-on .p-treeselect-label {
-    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,
@@ -108,6 +99,7 @@ const theme = ({ dt }) => `
 .p-floatlabel-on:has(.p-inputwrapper-filled) label {
     top: 0;
     transform: translateY(-50%);
+    border-radius: ${dt('floatlabel.on.border.radius')};
     background: ${dt('floatlabel.on.active.background')};
     padding: ${dt('floatlabel.on.active.padding')};
 }

packages/themes/src/presets/aura/floatlabel/index.js

@@ -27,10 +27,7 @@ export default {
         }
     },
     on: {
-        input: {
+        borderRadius: '{border.radius.xs}',
-            paddingTop: '1rem',
-            paddingBottom: '1rem'
-        },
         active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'

packages/themes/src/presets/lara/floatlabel/index.js

@@ -27,10 +27,7 @@ export default {
         }
     },
     on: {
-        input: {
+        borderRadius: '{border.radius.xs}',
-            paddingTop: '1.25rem',
-            paddingBottom: '1.25rem'
-        },
         active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'

packages/themes/src/presets/nora/floatlabel/index.js

@@ -27,10 +27,7 @@ export default {
         }
     },
     on: {
-        input: {
+        borderRadius: '{border.radius.xs}',
-            paddingTop: '1rem',
-            paddingBottom: '1rem'
-        },
         active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'