Merge pull request #494 from aziontech/refactor/standardize-label-component

refactor(form): standardize label usage with LabelBlock component

Author: robsongajunior

apps/storybook/src/stories/core/form/Label.stories.js

@@ -7,7 +7,7 @@ export default {
   argTypes: {
     label: {
       control: 'text',
-      description: 'Label text to display (required)'
+      description: 'Label text to display. When empty, the label is not rendered.'
     },
     isRequired: {
       control: 'boolean',

packages/webkit/src/core/form/field-auto-complete/field-auto-complete.vue

@@ -3,6 +3,7 @@
   import { useField } from 'vee-validate'
   import AutoComplete from 'primevue/autocomplete'
   import InputSlot from '../slots/input-slot'
+  import LabelBlock from '../label'
 
   const props = defineProps({
     value: {
@@ -69,12 +70,10 @@
 
 <template>
   <InputSlot>
-    <label
+    <LabelBlock
       :for="props.name"
-      class="text-color text-base font-medium leading-5"
-    >
-      {{ props.label }}
-    </label>
+      :label="props.label"
+    />
 
     <div
       class="p-inputgroup h-fit"

packages/webkit/src/core/form/field-dropdown-icon/field-dropdown-icon.vue

@@ -3,6 +3,7 @@
   import { useField } from 'vee-validate'
   import Dropdown from 'primevue/dropdown'
   import InputSlot from '../slots/input-slot'
+  import LabelBlock from '../label'
 
   const emit = defineEmits(['onChange'])
 
@@ -76,12 +77,10 @@
 
 <template>
   <InputSlot>
-    <label
+    <LabelBlock
       :for="props.name"
-      class="text-color text-base font-medium leading-5"
-    >
-      {{ props.label }}
-    </label>
+      :label="props.label"
+    />
 
     <div
       class="p-inputgroup h-fit"

packages/webkit/src/core/form/field-dropdown-lazy-loader-dynamic/field-dropdown-lazy-loader-dynamic.vue

@@ -1,7 +1,6 @@
 <template>
   <InputSlot>
     <Label
-      v-if="props.label"
       :for="props.name"
       :label="props.label"
       :isRequired="$attrs.required"

packages/webkit/src/core/form/field-dropdown-lazy-loader-with-filter/field-dropdown-lazy-loader-with-filter.vue

@@ -423,7 +423,6 @@
 <template>
   <InputSlot>
     <Label
-      v-if="props.label"
       :for="props.name"
       :label="props.label"
       :isRequired="$attrs.required"

packages/webkit/src/core/form/field-dropdown-lazy-loader/field-dropdown-lazy-loader.vue

@@ -528,7 +528,6 @@
 <template>
   <InputSlot>
     <Label
-      v-if="props.label"
       :for="props.name"
       :label="props.label"
       :isRequired="$attrs.required"

packages/webkit/src/core/form/field-dropdown-multi-select-lazy-loader/field-dropdown-multi-select-lazy-loader.vue

@@ -358,7 +358,6 @@
 <template>
   <InputSlot>
     <Label
-      v-if="props.label"
       :for="props.name"
       :label="props.label"
       :isRequired="$attrs.required"

packages/webkit/src/core/form/field-dropdown/field-dropdown.vue

@@ -179,7 +179,6 @@
       :label="props.label"
       :isRequired="$attrs.required"
       :data-testid="customTestId.label"
-      v-if="props.label"
     />
     <Dropdown
       :dropdown-icon="isDisabledIcon"

packages/webkit/src/core/form/field-group-checkbox/field-group-checkbox.vue

@@ -2,6 +2,7 @@
   import FieldCheckboxBlock from '../field-checkbox-block'
   import { computed, ref } from 'vue'
   import PrimeDivider from 'primevue/divider'
+  import LabelBlock from '../label'
 
   defineOptions({ name: 'FieldGroupCheckbox' })
 
@@ -63,9 +64,7 @@
 
 <template>
   <div :class="['flex flex-col gap-2', classStateRoot]">
-    <label class="text-color text-base font-medium leading-5">
-      {{ props.label }}
-    </label>
+    <LabelBlock :label="props.label" />
     <div
       class="flex"
       :class="classListSelector"

packages/webkit/src/core/form/field-group-radio/field-group-radio.vue

@@ -3,6 +3,7 @@
   import { useField } from 'vee-validate'
   import { computed, ref, toRefs, useAttrs } from 'vue'
   import PrimeDivider from 'primevue/divider'
+  import LabelBlock from '../label'
 
   defineOptions({ name: 'FieldGroupRadio' })
 
@@ -86,19 +87,11 @@
 
 <template>
   <div :class="['flex flex-col gap-2', classStateRoot]">
-    <label
-      class="text-color text-base font-medium leading-5 flex gap-1 align-items-center"
+    <LabelBlock
+      :label="props.label"
+      :isRequired="props.isRequired"
       :data-testid="customTestId.label"
-    >
-      {{ props.label }}
-      <div
-        v-if="props.isRequired"
-        class="text-sm text-orange-500 flex gap-1"
-      >
-        *
-        <span class="text-[0.625rem] text-color-secondary">(Required)</span>
-      </div>
-    </label>
+    />
     <div
       class="flex"
       :class="classListSelector"