feat(field): rename class names to match class name existing pattern (#…

…1047)
oruga-ui · Sep 17, 2024 · a2e9b8a · a2e9b8a
1 parent 5ec65c8
commit a2e9b8a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 49 deletions.
diff --git a/packages/docs/components/Tooltip.md b/packages/docs/components/Tooltip.md
@@ -62,8 +62,8 @@
 
 | Name    | Description                            | Bindings                                    |
 | ------- | -------------------------------------- | ------------------------------------------- |
-| content | Tooltip content, default is label prop |                                             |
 | default | Tooltip trigger slot                   | **active** `boolean` - tooltip active state |
+| content | Tooltip content, default is label prop |                                             |
 
 </div>
 

diff --git a/packages/oruga/src/components/field/Field.vue b/packages/oruga/src/components/field/Field.vue
@@ -81,6 +81,16 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
+    /** Class for field label when horizontal */
+    horizontalLabelClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
+    /** "Class for field body when horizontal */
+    horizontalBodyClass: {
+        type: [String, Array, Function] as PropType<ComponentClass>,
+        default: undefined,
+    },
     /** Class when fields are grouped together */
     groupedClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
@@ -101,8 +111,8 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
-    /** Class for field label when horizontal */
-    labelHorizontalClass: {
+    /** Class of the label field variant */
+    labelVariantClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
@@ -111,11 +121,6 @@ const props = defineProps({
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
-    /** "Class for field body when horizontal */
-    bodyHorizontalClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
     /** Class for components automatically attached together when inside a field */
     addonsClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
@@ -127,12 +132,7 @@ const props = defineProps({
         default: undefined,
     },
     /** Class of the message field variant */
-    variantMessageClass: {
-        type: [String, Array, Function] as PropType<ComponentClass>,
-        default: undefined,
-    },
-    /** Class of the label field variant */
-    variantLabelClass: {
+    messageVariantClass: {
         type: [String, Array, Function] as PropType<ComponentClass>,
         default: undefined,
     },
@@ -294,7 +294,7 @@ const rootClasses = defineClasses(
 const messageClasses = defineClasses(
     ["messageClass", "o-field__message"],
     [
-        "variantMessageClass",
+        "messageVariantClass",
         "o-field__message-",
         fieldVariant,
         computed(() => !!fieldVariant.value),
@@ -310,22 +310,22 @@ const labelClasses = defineClasses(
         computed(() => !!props.labelSize),
     ],
     [
-        "variantLabelClass",
+        "labelVariantClass",
         "o-field__label-",
         fieldVariant,
         computed(() => !!fieldVariant.value),
     ],
 );
 
-const labelHorizontalClasses = defineClasses([
-    "labelHorizontalClass",
+const bodyClasses = defineClasses(["bodyClass", "o-field__body"]);
+
+const horizontalLabelClasses = defineClasses([
+    "horizontalLabelClass",
     "o-field__horizontal-label",
 ]);
 
-const bodyClasses = defineClasses(["bodyClass", "o-field__body"]);
-
-const bodyHorizontalClasses = defineClasses([
-    "bodyHorizontalClass",
+const horizontalBodyClasses = defineClasses([
+    "horizontalBodyClass",
     "o-field__horizontal-body",
 ]);
 
@@ -350,7 +350,7 @@ const innerFieldClasses = defineClasses(
 
 <template>
     <div ref="rootRef" data-oruga="field" :class="rootClasses">
-        <div v-if="horizontal" :class="labelHorizontalClasses">
+        <div v-if="horizontal" :class="horizontalLabelClasses">
             <label v-if="hasLabel" :for="inputId" :class="labelClasses">
                 <!--
                     @slot Override the label
@@ -369,7 +369,7 @@ const innerFieldClasses = defineClasses(
             </label>
         </template>
 
-        <div v-if="horizontal" :class="bodyHorizontalClasses">
+        <div v-if="horizontal" :class="horizontalBodyClasses">
             <template
                 v-for="(element, index) in getInnerContent($slots.default)"
                 :key="index">

diff --git a/packages/oruga/src/components/field/examples/inspector.vue b/packages/oruga/src/components/field/examples/inspector.vue
@@ -17,7 +17,25 @@ const inspectData = [
         class: "horizontalClass",
         description: "Class to align label and control in horizontal forms",
         properties: ["horizontal"],
-        specificity: "when <b>mobileClass</b> is applied",
+        specificity: "when <b>horizontal</b> is applied",
+        action: (cmp, data) => {
+            data.horizontal = true;
+        },
+    },
+    {
+        class: "horizontalLabelClass",
+        description: "Class for field label when horizontal",
+        properties: ["horizontal"],
+        specificity: "when <b>horizontal</b> is applied",
+        action: (cmp, data) => {
+            data.horizontal = true;
+        },
+    },
+    {
+        class: "horizontalBodyClass",
+        description: "Class for field body when horizontal",
+        specificity: "when <b>horizontal</b> is applied",
+        properties: ["horizontal"],
         action: (cmp, data) => {
             data.horizontal = true;
         },
@@ -52,27 +70,18 @@ const inspectData = [
         },
     },
     {
-        class: "labelHorizontalClass",
-        description: "Class for field label when horizontal",
-        properties: ["horizontal"],
-        specificity: "when <b>mobileClass</b> is applied",
+        class: "labelVariantClass",
+        description: "Class of the label field variant",
+        properties: ["variant"],
+        suffixes: ["primary", "info", "warning", "danger"],
         action: (cmp, data) => {
-            data.horizontal = true;
+            data.variant = "info";
         },
     },
     {
         class: "bodyClass",
         description: "Class for field body",
     },
-    {
-        class: "bodyHorizontalClass",
-        description: "Class for field body when horizontal",
-        specificity: "when <b>mobileClass</b> is applied",
-        properties: ["horizontal"],
-        action: (cmp, data) => {
-            data.horizontal = true;
-        },
-    },
     {
         class: "addonsClass",
         description:
@@ -92,7 +101,7 @@ const inspectData = [
         },
     },
     {
-        class: "variantMessageClass",
+        class: "messageVariantClass",
         description: "Class of the message field variant",
         properties: ["variant"],
         suffixes: ["primary", "info", "warning", "danger"],
@@ -101,15 +110,6 @@ const inspectData = [
             data.message = "This is a message for the field";
         },
     },
-    {
-        class: "variantLabelClass",
-        description: "Class of the label field variant",
-        properties: ["variant"],
-        suffixes: ["primary", "info", "warning", "danger"],
-        action: (cmp, data) => {
-            data.variant = "info";
-        },
-    },
     {
         class: "focusedClass",
         description: "Class for the focused field",