Use small/dense style for Element Panel's Fields

changelog/entries/unreleased/refactor/2705_ensure_element_panel_dropdown_and_input_fields_use_the_dense.json

@@ -0,0 +1,7 @@
+{
+    "type": "refactor",
+    "message": "[Builder] Ensure the Element Panel's Dropdown and Input fields use the dense style.",
+    "issue_number": 2705,
+    "bullet_points": [],
+    "created_at": "2024-07-11"
+}

web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue

@@ -13,6 +13,7 @@
         ...applicationContextAdditions,
       }
     "
+    :small="small"
     v-on="$listeners"
   >
     <template #after-input>
@@ -54,6 +55,11 @@ export default {
       required: false,
       default: () => {},
     },
+    small: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     dataSourceLoading() {

web-frontend/modules/builder/components/PaddingSelector.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="padding-selector">
     <FormInput
-      small
       :value="value.horizontal"
       type="number"
       remove-number-input-controls
@@ -12,7 +11,6 @@
       @blur="$emit('blur')"
     />
     <FormInput
-      small
       :value="value.vertical"
       type="number"
       remove-number-input-controls

web-frontend/modules/builder/components/PixelValueSelector.vue

@@ -1,6 +1,5 @@
 <template>
   <FormInput
-    small
     :value="value"
     type="number"
     remove-number-input-controls

web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue

@@ -2,7 +2,6 @@
   <form @submit.prevent @keydown.enter.prevent>
     <ApplicationBuilderFormulaInputGroup
       v-model="values.value"
-      small
       :label="$t('textFieldForm.fieldValueLabel')"
       :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
       :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"

web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue

@@ -2,7 +2,6 @@
   <form @submit.prevent @keydown.enter.prevent>
     <ApplicationBuilderFormulaInputGroup
       v-model="values.label"
-      small
       :label="$t('generalForm.labelTitle')"
       :placeholder="$t('buttonFieldForm.labelPlaceholder')"
       :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"

web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue

@@ -2,7 +2,6 @@
   <form @submit.prevent @keydown.enter.prevent>
     <ApplicationBuilderFormulaInputGroup
       v-model="values.link_name"
-      small
       :label="$t('linkFieldForm.fieldLinkNameLabel')"
       :placeholder="$t('linkFieldForm.fieldLinkNamePlaceholder')"
       :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"

web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue

@@ -2,7 +2,6 @@
   <form @submit.prevent @keydown.enter.prevent>
     <ApplicationBuilderFormulaInputGroup
       v-model="values.values"
-      small
       :label="$t('tagsFieldForm.fieldValuesLabel')"
       :placeholder="$t('tagsFieldForm.fieldValuesPlaceholder')"
       :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
@@ -12,7 +11,6 @@
       <ApplicationBuilderFormulaInputGroup
         v-if="values.colors_is_formula"
         v-model="values.colors"
-        small
         :label="$t('tagsFieldForm.fieldColorsLabel')"
         :placeholder="$t('tagsFieldForm.fieldColorsPlaceholder')"
         :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"

web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue

@@ -2,7 +2,6 @@
   <form @submit.prevent @keydown.enter.prevent>
     <ApplicationBuilderFormulaInputGroup
       v-model="values.value"
-      small
       :label="$t('textFieldForm.fieldValueLabel')"
       :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
       :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"

web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue

@@ -19,6 +19,7 @@
           <Dropdown
             v-model="selectedRoleType"
             :placeholder="$t('visibilityForm.roleTypesHint')"
+            small
           >
             <DropdownItem
               v-for="(value, key) in roleTypeOptions"

web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue

@@ -6,7 +6,7 @@
       small-label
       :label="$t('columnElementForm.columnAmountTitle')"
     >
-      <Dropdown v-model="values.column_amount" :show-search="false">
+      <Dropdown v-model="values.column_amount" :show-search="false" small>
         <DropdownItem
           v-for="columnAmount in columnAmounts"
           :key="columnAmount.value"
@@ -27,7 +27,6 @@
     >
       <FormInput
         v-model="values.column_gap"
-        size="large"
         :label="$t('columnElementForm.columnGapTitle')"
         :placeholder="$t('columnElementForm.columnGapPlaceholder')"
         type="number"

web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue

@@ -14,7 +14,7 @@
       :label="$t('headingElementForm.levelTitle')"
       class="margin-bottom-2"
     >
-      <Dropdown v-model="values.level" :show-search="false">
+      <Dropdown v-model="values.level" :show-search="false" small>
         <DropdownItem
           v-for="level in levels"
           :key="level.value"

web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue

@@ -53,7 +53,6 @@
     >
       <FormInput
         v-model="values.height"
-        size="large"
         type="number"
         :placeholder="$t('iframeElementForm.heightPlaceholder')"
         :to-value="(value) => parseInt(value)"

web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue

@@ -37,7 +37,7 @@
       required
       class="margin-bottom-2"
     >
-      <Dropdown v-model="values.validation_type" :show-search="true">
+      <Dropdown v-model="values.validation_type" :show-search="true" small>
         <DropdownItem
           v-for="validationType in validationTypes"
           :key="validationType.name"
@@ -78,7 +78,6 @@
       <FormInput
         v-model="values.rows"
         type="number"
-        size="large"
         :label="$t('inputTextElementForm.rowsTitle')"
         :placeholder="$t('inputTextElementForm.rowsPlaceholder')"
         :to-value="(value) => parseInt(value)"
@@ -97,7 +96,7 @@
       required
       class="margin-bottom-2"
     >
-      <Dropdown v-model="values.input_type" :show-search="false">
+      <Dropdown v-model="values.input_type" :show-search="false" small>
         <DropdownItem
           v-for="inputType in inputTypes"
           :key="inputType.name"

web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue

@@ -23,7 +23,6 @@
       :placeholder="$t('linkElementForm.textPlaceholder')"
       :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
     />
-
     <LinkNavigationSelectionForm
       :default-values="defaultValues"
       @values-changed="emitChange($event)"

web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue

@@ -46,7 +46,6 @@
         :label="$t('linkNavigationSelection.url')"
         :placeholder="$t('linkNavigationSelection.urlPlaceholder')"
         :data-providers-allowed="dataProvidersAllowed"
-        small
       />
     </FormGroup>
     <FormGroup v-if="destinationPage" class="margin-bottom-2" required>
@@ -74,7 +73,6 @@
             horizontal
             :placeholder="$t('linkNavigationSelection.paramPlaceholder')"
             :data-providers-allowed="dataProvidersAllowed"
-            small
           />
         </div>
       </div>

web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue

@@ -6,7 +6,7 @@
       required
       class="margin-bottom-2"
     >
-      <Dropdown v-model="values.data_source_id" :show-search="false">
+      <Dropdown v-model="values.data_source_id" :show-search="false" small>
         <DropdownItem
           v-for="dataSource in availableDataSources"
           :key="dataSource.id"
@@ -35,7 +35,6 @@
     >
       <FormInput
         v-model="values.items_per_page"
-        size="large"
         :placeholder="$t('repeatElementForm.itemsPerPagePlaceholder')"
         :to-value="(value) => parseInt(value)"
         class="margin-bottom-2"

web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue

@@ -7,7 +7,7 @@
       :label="$t('tableElementForm.dataSource')"
     >
       <div @click="userHasChangedDataSource = true">
-        <Dropdown v-model="values.data_source_id" :show-search="false">
+        <Dropdown v-model="values.data_source_id" :show-search="false" small>
           <DropdownItem
             v-for="dataSource in availableDataSources"
             :key="dataSource.id"
@@ -27,7 +27,6 @@
     >
       <FormInput
         v-model="values.items_per_page"
-        size="large"
         :placeholder="$t('tableElementForm.itemsPerPagePlaceholder')"
         :to-value="(value) => parseInt(value)"
         type="number"
@@ -132,9 +131,9 @@
                 :label="$t('tableElementForm.fieldType')"
               >
                 <Dropdown
-                  small
                   :value="field.type"
                   :show-search="false"
+                  small
                   @input="changeFieldType(field, $event)"
                 >
                   <DropdownItem

web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue

@@ -61,7 +61,7 @@
         required
         class="margin-bottom-1"
       >
-        <Dropdown v-model="values.style_width">
+        <Dropdown v-model="values.style_width" small>
           <DropdownItem
             v-for="type in Object.values(WIDTH_TYPES)"
             :key="type.value"

web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue

@@ -39,7 +39,6 @@
         >
           <FormInput
             v-model="values.image_max_width"
-            small
             type="number"
             :min="0"
             :max="100"
@@ -78,7 +77,6 @@
         >
           <FormInput
             v-model="imageMaxHeight"
-            small
             type="number"
             remove-number-input-controls
             :placeholder="$t('imageThemeConfigBlock.maxHeightPlaceholder')"

web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue

@@ -2,7 +2,7 @@
   <form @submit.prevent>
     <FormGroup :label="$t('tableElementForm.dataSource')" small-label required>
       <div class="control__elements">
-        <Dropdown v-model="values.data_source_id" :show-search="false">
+        <Dropdown v-model="values.data_source_id" :show-search="false" small>
           <DropdownItem
             v-for="dataSource in dataSources"
             :key="dataSource.id"

web-frontend/modules/core/components/integrations/IntegrationDropdown.vue

@@ -2,7 +2,7 @@
   <Dropdown
     :value="value"
     fixed-items
-    :small="small"
+    small
     class="integration-dropdown"
     :disabled="disabled || !integrationType"
     :placeholder="