Refactor dropdown component

2025-05-12 12:21:50 +00:00 · 2024-10-14 08:47:26 +00:00 · 2024-10-14 08:47:26 +00:00 · fb927e12ba
commit fb927e12ba
parent d5d34e1cc4
76 changed files with 321 additions and 194 deletions
--- a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
@ -12,7 +12,7 @@
      required
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.user_source_id" :show-search="false" small>
+      <Dropdown v-model="values.user_source_id" :show-search="false">
        <DropdownItem
          v-for="userSource in userSources"
          :key="userSource.id"
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue
@ -48,7 +48,6 @@
            v-model="values.default_role"
            :show-search="false"
            :fixed-items="true"
-            small
          >
            <DropdownItem
              v-for="role in roles"
--- a/enterprise/web-frontend/modules/baserow_enterprise/integrations/localBaserow/components/userSources/LocalBaserowUserSourceForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/integrations/localBaserow/components/userSources/LocalBaserowUserSourceForm.vue
@ -5,7 +5,7 @@
      class="local-baserow-user-source-form__table-selector"
      :databases="integration.context_data.databases"
      :display-view-dropdown="false"
-      dropdown-sizes="large"
+      dropdown-size="large"
    />

    <p>{{ $t('localBaserowUserSourceForm.description') }}</p>
@ -22,6 +22,7 @@
          :placeholder="
            $t('localBaserowUserSourceForm.emailFieldLabelPlaceholder')
          "
+          size="large"
        >
          <DropdownItem
            v-for="field in emailFields"
@ -46,6 +47,7 @@
          fixed-items
          :disabled="!selectedTable"
          :placeholder="$t('localBaserowUserSourceForm.nameFieldPlaceholder')"
+          size="large"
        >
          <DropdownItem
            v-for="field in nameFields"
@ -63,12 +65,14 @@
      <FormGroup
        :label="$t('localBaserowUserSourceForm.roleFieldLabel')"
        small-label
+        required
      >
        <Dropdown
          v-model="values.role_field_id"
          fixed-items
          :disabled="!selectedTable"
          :placeholder="$t('localBaserowUserSourceForm.roleFieldPlaceholder')"
+          size="large"
        >
          <DropdownItem
            key="use-default-role"
--- a/premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/field/FieldAISubForm.vue
@ -18,12 +18,9 @@
      <Dropdown
        v-model="values.ai_file_field_id"
        class="dropdown--floating"
-        :class="{
-          'dropdown--error': $v.values.ai_file_field_id.$error,
-        }"
+        :error="$v.values.ai_file_field_id.$error"
        :fixed-items="true"
        :show-search="false"
-        small
        @hide="$v.values.ai_file_field_id.$touch()"
      >
        <DropdownItem
--- a/web-frontend/modules/builder/components/FontFamilySelector.vue
+++ b/web-frontend/modules/builder/components/FontFamilySelector.vue
@ -1,5 +1,5 @@
 <template>
-  <Dropdown :value="value" fixed-items small @input="$emit('input', $event)">
+  <Dropdown :value="value" fixed-items @input="$emit('input', $event)">
    <DropdownItem
      v-for="fontFamily in fontFamilies"
      :key="fontFamily.getType()"
--- a/web-frontend/modules/builder/components/dataSource/DataSourceDropdown.vue
+++ b/web-frontend/modules/builder/components/dataSource/DataSourceDropdown.vue
@ -5,7 +5,6 @@
    </p>
    <Dropdown
      :value="value"
-      small
      class="data-source-dropdown"
      @input="$emit('input', $event)"
    >
--- a/web-frontend/modules/builder/components/dataSource/DataSourceForm.vue
+++ b/web-frontend/modules/builder/components/dataSource/DataSourceForm.vue
@ -10,7 +10,7 @@
        <Dropdown
          v-model="values.type"
          fixed-items
-          class="dropdown--small data-source-form__type-dropdown"
+          class="data-source-form__type-dropdown"
          :placeholder="$t('dataSourceForm.servicePlaceholder')"
        >
          <template
@ -33,7 +33,6 @@
          :integrations="integrations"
          :disabled="!values.type"
          :integration-type="serviceType?.integrationType"
-          small
        />
        <ButtonIcon icon="iconoir-bin" @click="$emit('delete')" />
      </div>
--- a/web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue
@ -19,7 +19,6 @@
          <Dropdown
            v-model="selectedRoleType"
            :placeholder="$t('visibilityForm.roleTypesHint')"
-            small
          >
            <DropdownItem
              v-for="(value, key) in roleTypeOptions"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue
+++ b/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" small>
+      <Dropdown v-model="values.column_amount" :show-search="false">
        <DropdownItem
          v-for="columnAmount in columnAmounts"
          :key="columnAmount.value"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue
+++ b/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" small>
+      <Dropdown v-model="values.level" :show-search="false">
        <DropdownItem
          v-for="level in levels"
          :key="level.value"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
@ -54,7 +54,7 @@
      required
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.validation_type" :show-search="true" small>
+      <Dropdown v-model="values.validation_type" :show-search="true">
        <DropdownItem
          v-for="validationType in validationTypes"
          :key="validationType.name"
@ -113,7 +113,7 @@
      required
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.input_type" :show-search="false" small>
+      <Dropdown v-model="values.input_type" :show-search="false">
        <DropdownItem
          v-for="inputType in inputTypes"
          :key="inputType.name"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
@ -6,8 +6,8 @@
      class="margin-bottom-2"
      required
    >
-      <Dropdown v-model="navigateTo" :show-search="false" small>
-        <template #value>
+      <Dropdown v-model="navigateTo" :show-search="false">
+        <template #selectedValue>
          <template v-if="destinationPage">
            {{ destinationPage.name }}
            <span
@ -20,6 +20,7 @@
            $t('linkNavigationSelection.navigateToCustom')
          }}</span>
        </template>
+
        <DropdownItem
          v-for="pageItem in pages"
          :key="pageItem.id"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
@ -169,7 +169,6 @@
                <Dropdown
                  :value="field.type"
                  :show-search="false"
-                  small
                  @input="changeFieldType(field, $event)"
                >
                  <DropdownItem
--- a/web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue
@ -61,7 +61,7 @@
        required
        class="margin-bottom-2"
      >
-        <Dropdown v-model="values.style_width" small>
+        <Dropdown v-model="values.style_width">
          <DropdownItem
            v-for="type in Object.values(WIDTH_TYPES)"
            :key="type.value"
--- a/web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue
+++ b/web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue
@ -9,7 +9,6 @@
      <div class="page-settings-path-params__dropdown">
        <Dropdown
          :value="pathParam.type"
-          small
          :disabled="disabled"
          @input="$emit('update', pathParam.name, $event)"
        >
--- a/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
+++ b/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
@ -101,7 +101,6 @@
        >
          <Dropdown
            v-model="values.image_constraint"
-            small
            fixed-items
            :show-search="true"
            class="flex-grow-1"
--- a/web-frontend/modules/builder/components/userSource/CreateUserSourceForm.vue
+++ b/web-frontend/modules/builder/components/userSource/CreateUserSourceForm.vue
@ -6,11 +6,13 @@
      required
      small-label
      class="margin-bottom-2"
+      size="large"
    >
      <Dropdown
        v-model="$v.values.type.$model"
        :show-search="false"
        class="user-source-settings__user-source-type"
+        size="large"
      >
        <DropdownItem
          v-for="userSourceType in userSourceTypes"
@ -33,6 +35,7 @@
        :application="builder"
        :integrations="integrations"
        :integration-type="currentUserSourceType?.integrationType"
+        size="large"
      />
    </FormGroup>

--- a/web-frontend/modules/builder/components/userSource/UpdateUserSourceForm.vue
+++ b/web-frontend/modules/builder/components/userSource/UpdateUserSourceForm.vue
@ -25,9 +25,11 @@
          :application="builder"
          :integrations="integrations"
          :integration-type="userSourceType.integrationType"
+          size="large"
        />
      </FormGroup>
    </FormRow>
+
    <component
      :is="userSourceType.formComponent"
      v-if="integration"
--- a/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
+++ b/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
@ -7,7 +7,7 @@
      class="margin-bottom-2"
    >
      <div class="control__elements">
-        <Dropdown v-model="values.data_source_id" :show-search="false" small>
+        <Dropdown v-model="values.data_source_id" :show-search="false">
          <DropdownItem
            v-for="dataSource in dataSources"
            :key="dataSource.id"
--- a/web-frontend/modules/core/assets/scss/components/dropdown.scss
+++ b/web-frontend/modules/core/assets/scss/components/dropdown.scss
@ -15,7 +15,7 @@
  box-sizing: border-box;
  color: $palette-neutral-1200;

-  @include fixed-height(44px, 13px);
+  @include fixed-height(36px, 13px);
  @include rounded($rounded);
  @include flex-align-items(4px);

@ -28,9 +28,8 @@
    border-color: $palette-red-600;
  }

-  .dropdown--tiny & {
-    height: 32px;
-    line-height: 32px;
+  .dropdown--large & {
+    @include fixed-height(44px, 13px);
  }

  .dropdown--disabled & {
@ -39,12 +38,6 @@
    cursor: not-allowed;
    border-color: $palette-neutral-600;
  }
-
-  .dropdown.dropdown--small & {
-    padding: 8px 12px;
-
-    @include fixed-height(36px, 13px);
-  }
 }

 .dropdown__selected-text {
--- a/web-frontend/modules/core/components/ColorPickerContext.vue
+++ b/web-frontend/modules/core/components/ColorPickerContext.vue
@ -10,7 +10,6 @@
        v-model="type"
        class="dropdown--floating color-picker-context__color-type"
        :show-search="false"
-        small
      >
        <DropdownItem name="Hex" :value="COLOR_NOTATIONS.HEX"></DropdownItem>
        <DropdownItem name="RGB" :value="COLOR_NOTATIONS.RGB"></DropdownItem>
@ -65,11 +64,7 @@
      v-if="Object.keys(variables).length > 0"
      class="color-picker-context__variables"
    >
-      <Dropdown
-        :value="selectedVariable?.name || ''"
-        small
-        @input="setVariable"
-      >
+      <Dropdown :value="selectedVariable?.name || ''" @input="setVariable">
        <DropdownItem name="Custom" value=""></DropdownItem>
        <DropdownItem
          v-for="variable in variables"
--- a/web-frontend/modules/core/components/Dropdown.vue
+++ b/web-frontend/modules/core/components/Dropdown.vue
@ -4,7 +4,8 @@
    :class="{
      'dropdown--floating': !showInput,
      'dropdown--disabled': disabled,
-      'dropdown--small': small,
+      'dropdown--large': size === 'large',
+      'dropdown--error': error,
    }"
    :tabindex="realTabindex"
    @focusin="show()"
@ -12,7 +13,7 @@
  >
    <a v-if="showInput" class="dropdown__selected" @click="show()">
      <template v-if="hasValue()">
-        <slot name="value">
+        <slot name="selectedValue">
          <template v-if="multiple">
            <span
              class="dropdown__selected-text"
--- a/web-frontend/modules/core/components/PaginatedDropdown.vue
+++ b/web-frontend/modules/core/components/PaginatedDropdown.vue
@ -1,9 +1,11 @@
 <template>
  <div
-    class="dropdown dropdown--small"
+    class="dropdown"
    :class="{
      'dropdown--floating': !showInput,
      'dropdown--disabled': disabled,
+      'dropdown--large': size === 'large',
+      'dropdown--error': error,
    }"
    :tabindex="realTabindex"
    @focusin="show()"
--- a/web-frontend/modules/core/components/Picker.vue
+++ b/web-frontend/modules/core/components/Picker.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown" :class="{ 'dropdown--small': small }">
+  <div class="dropdown" :class="{ 'dropdown--large': !small }">
    <a
      ref="pickerLink"
      class="dropdown__selected"
--- a/web-frontend/modules/core/components/ai/SelectAIModelForm.vue
+++ b/web-frontend/modules/core/components/ai/SelectAIModelForm.vue
@ -9,12 +9,9 @@
      <Dropdown
        v-model="values.ai_generative_ai_type"
        class="dropdown--floating"
-        :class="{
-          'dropdown--error': $v.values.ai_generative_ai_type.$error,
-        }"
+        :error="$v.values.ai_generative_ai_type.$errors"
        :fixed-items="true"
        :show-search="false"
-        small
        @hide="$v.values.ai_generative_ai_type.$touch()"
        @change="$refs.aiModel.select(aIModelsPerType[0])"
      >
@ -37,12 +34,9 @@
        ref="aiModel"
        v-model="values.ai_generative_ai_model"
        class="dropdown--floating"
-        :class="{
-          'dropdown--error': $v.values.ai_generative_ai_model.$error,
-        }"
+        :error="$v.values.ai_generative_ai_model.$error"
        :fixed-items="true"
        :show-search="false"
-        small
        @hide="$v.values.ai_generative_ai_model.$touch()"
      >
        <DropdownItem
--- a/web-frontend/modules/core/components/integrations/IntegrationDropdown.vue
+++ b/web-frontend/modules/core/components/integrations/IntegrationDropdown.vue
@ -2,8 +2,8 @@
  <Dropdown
    :value="value"
    fixed-items
-    small
    class="integration-dropdown"
+    :size="size"
    :disabled="disabled || !integrationType"
    :placeholder="
      !integrationType
@ -72,10 +72,10 @@ export default {
      required: false,
      default: false,
    },
-    small: {
-      type: Boolean,
+    size: {
+      type: String,
      required: false,
-      default: false,
+      default: 'regular',
    },
  },
 }
--- a/web-frontend/modules/core/components/onboarding/MoreStep.vue
+++ b/web-frontend/modules/core/components/onboarding/MoreStep.vue
@ -55,7 +55,8 @@
    >
      <Dropdown
        v-model="country"
-        :class="{ 'dropdown--error': $v.country.$error }"
+        :error="$v.country.$error"
+        size="large"
        @hide="$v.country.$touch()"
      >
        <DropdownItem
--- a/web-frontend/modules/core/components/services/ServiceSchemaPropertySelector.vue
+++ b/web-frontend/modules/core/components/services/ServiceSchemaPropertySelector.vue
@ -1,11 +1,12 @@
 <template>
  <div>
+    test1
    <p v-show="value === null" class="margin-bottom-1">
      <slot name="chooseValueState"></slot>
    </p>
    <Dropdown
      :value="value"
-      :small="small"
+      :size="small ? 'regular' : 'large'"
      :placeholder="placeholder"
      :show-search="true"
      @input="$emit('input', $event)"
--- a/web-frontend/modules/core/components/settings/AccountForm.vue
+++ b/web-frontend/modules/core/components/settings/AccountForm.vue
@ -31,7 +31,7 @@
    </FormGroup>

    <FormGroup :label="$t('accountForm.languageLabel')" small-label required>
-      <Dropdown v-model="values.language" :show-search="false">
+      <Dropdown v-model="values.language" :show-search="false" size="large">
        <DropdownItem
          v-for="locale in $i18n.locales"
          :key="locale.code"
--- a/web-frontend/modules/core/components/workflowActions/WorkflowActionSelector.vue
+++ b/web-frontend/modules/core/components/workflowActions/WorkflowActionSelector.vue
@ -4,7 +4,6 @@
      :value="workflowActionType.getType()"
      :show-search="false"
      :disabled="disabled"
-      small
      @change="$emit('change', $event)"
    >
      <DropdownItem
--- a/web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue
+++ b/web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue
@ -26,7 +26,6 @@
              class="workspace-invite-form__role-selector-dropdown"
              :show-search="false"
              fixed-items
-              small
            >
              <DropdownItem
                v-for="(role, index) in roles"
--- a/web-frontend/modules/core/mixins/dropdown.js
+++ b/web-frontend/modules/core/mixins/dropdown.js
@ -20,46 +20,77 @@ export default {
    }
  },
  props: {
+    /**
+     * The size of the dropdown.
+     */
+    size: {
+      type: String,
+      required: false,
+      validator: function (value) {
+        return ['regular', 'large'].includes(value)
+      },
+      default: 'regular',
+    },
+    /**
+     * The value of the dropdown. This can be a single value or an array of values if
+     * the multiple property is set to true.
+     */
    value: {
      type: [String, Number, Boolean, Object, Array],
      required: false,
      default: null,
    },
+    /**
+     * A string that is used to filter the dropdown items.
+     */
    searchText: {
      type: [String, null],
      required: false,
      default: null,
    },
+    /**
+     * The dropdown placeholder that is shown when no value is selected.
+     */
    placeholder: {
      type: [String, null],
      required: false,
      default: null,
    },
+    /**
+     * Wether or not to show the search input field.
+     */
    showSearch: {
      type: Boolean,
      required: false,
      default: true,
    },
+    /**
+     * Wether or not to show the input field. This is different from the search input.
+     */
    showInput: {
      type: Boolean,
      required: false,
      default: true,
    },
+    /**
+     * Wether or not to show the footer in the dropdown.
+     */
    showFooter: {
      type: Boolean,
      required: false,
      default: false,
    },
+    /**
+     * Wether or not the dropdown is disabled.
+     */
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
-    small: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
+    /**
+     * The tabindex of the dropdown.
+     */
    tabindex: {
      type: Number,
      required: false,
@ -84,6 +115,9 @@ export default {
      required: false,
      default: false,
    },
+    /**
+     * If true, the dropdown will allow multiple values to be selected.
+     */
    multiple: {
      type: Boolean,
      required: false,
@ -100,6 +134,13 @@ export default {
      required: false,
      default: null,
    },
+    /* Error prop is used to show the dropdown in error state.
+     */
+    error: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
  },
  data() {
    return {
--- a/web-frontend/modules/core/pages/styleGuide.vue
+++ b/web-frontend/modules/core/pages/styleGuide.vue
@ -285,43 +285,6 @@
            </div>
          </FormGroup>

-          <FormGroup label="Dropdown small" required class="margin-bottom-2">
-            <div style="width: 200px">
-              <Dropdown v-model="dropdown" small>
-                <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
-                <DropdownItem
-                  name="Choice 2"
-                  value="choice-2"
-                  icon="iconoir-edit-pencil"
-                  description="Lorem ipsum dolor sit amet, consectetur."
-                ></DropdownItem>
-                <DropdownItem
-                  name="Choice 3"
-                  value="choice-3"
-                  icon="iconoir-db"
-                ></DropdownItem>
-                <DropdownItem
-                  name="Choice 4"
-                  value="choice-4"
-                  icon="iconoir-cancel"
-                  :disabled="true"
-                ></DropdownItem>
-                <DropdownItem
-                  name="Choice 5"
-                  value="choice-5"
-                  icon="iconoir-edit-pencil"
-                  description="Lorem ipsum dolor sit amet, consectetur."
-                ></DropdownItem>
-                <DropdownItem
-                  name="Choice 6"
-                  value="choice-6"
-                  icon="iconoir-edit-pencil"
-                  description="Lorem ipsum dolor sit amet, consectetur."
-                ></DropdownItem>
-              </Dropdown>
-            </div>
-          </FormGroup>
-
          <FormGroup label="Dropdown disabled" required class="margin-bottom-2">
            <div style="width: 200px">
              <Dropdown v-model="dropdown" disabled>
@ -465,13 +428,9 @@
            </div>
          </FormGroup>

-          <FormGroup label="Dropdown tiny" required class="margin-bottom-2">
+          <FormGroup label="Dropdown large" required class="margin-bottom-2">
            <div style="width: 200px">
-              <Dropdown
-                v-model="dropdown"
-                :show-search="false"
-                class="dropdown--tiny"
-              >
+              <Dropdown v-model="dropdown" :show-search="false" size="large">
                <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
                <DropdownItem
                  name="Choice 2"
@ -495,7 +454,7 @@

          <FormGroup label="Dropdown error" required class="margin-bottom-2">
            <div style="width: 200px">
-              <Dropdown v-model="dropdown" class="dropdown--error">
+              <Dropdown v-model="dropdown" :error="true">
                <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
                <DropdownItem
                  name="Choice 2"
@ -1373,7 +1332,6 @@
            </p>
          </Modal>
          <Button
-            type="success"
            @click="
              $store.dispatch('toast/success', {
                title: 'Custom success toast',
@ -1384,7 +1342,7 @@
            toggle success toast
          </Button>
          <Button
-            type="error"
+            type="danger"
            @click="
              $store.dispatch('toast/error', {
                title: 'Custom error toast',
--- a/web-frontend/modules/database/components/docs/APIDocsExample.vue
+++ b/web-frontend/modules/database/components/docs/APIDocsExample.vue
@ -52,7 +52,6 @@
        <Dropdown
          class="dropdown--floating"
          :value="value.type"
-          small
          @input="
            $emit('input', {
              userFieldNames: value.userFieldNames,
--- a/web-frontend/modules/database/components/field/FieldCollaboratorDropdown.vue
+++ b/web-frontend/modules/database/components/field/FieldCollaboratorDropdown.vue
@ -4,7 +4,8 @@
    :class="{
      'dropdown--floating': !showInput,
      'dropdown--disabled': disabled,
-      'dropdown--small': small,
+      'dropdown--large': size === 'large',
+      'dropdown--error': error,
    }"
    :tabindex="realTabindex"
    @contextmenu.stop
--- a/web-frontend/modules/database/components/field/FieldDateSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldDateSubForm.vue
@ -9,9 +9,8 @@
    >
      <Dropdown
        v-model="values.date_format"
-        :class="{ 'dropdown--error': $v.values.date_format.$error }"
+        :error="$v.values.date_format.$error"
        :fixed-items="true"
-        small
        @hide="$v.values.date_format.$touch()"
      >
        <DropdownItem
@ -43,7 +42,6 @@
      <Dropdown
        v-model="values.date_time_format"
        :fixed-items="true"
-        small
        @hide="$v.values.date_time_format.$touch()"
      >
        <DropdownItem
--- a/web-frontend/modules/database/components/field/FieldDurationSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldDurationSubForm.vue
@ -6,9 +6,8 @@
  >
    <Dropdown
      v-model="values.duration_format"
-      :class="{ 'dropdown--error': $v.values.duration_format.$error }"
+      :error="$v.values.duration_format.$error"
      :fixed-items="true"
-      small
      @hide="$v.values.duration_format.$touch()"
    >
      <DropdownItem
--- a/web-frontend/modules/database/components/field/FieldForm.vue
+++ b/web-frontend/modules/database/components/field/FieldForm.vue
@ -40,12 +40,11 @@
        <Dropdown
          ref="fieldTypesDropdown"
          v-model="values.type"
-          :class="{ 'dropdown--error': $v.values.type.$error }"
+          :error="$v.values.type.$error"
          :fixed-items="true"
          :disabled="
            defaultValues.immutable_type || defaultValues.immutable_properties
          "
-          small
          @hide="$v.values.type.$touch()"
        >
          <DropdownItem
--- a/web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue
@ -9,10 +9,9 @@
    >
      <Dropdown
        v-model="values.link_row_table_id"
-        :class="{ 'dropdown--error': $v.values.link_row_table_id.$error }"
+        :error="$v.values.link_row_table_id.$error"
        :fixed-items="true"
        :disabled="!isSelectedFieldAccessible"
-        small
        @hide="$v.values.link_row_table_id.$touch()"
        @input="tableChange"
      >
@ -50,7 +49,6 @@
          v-else
          v-model="values.link_row_limit_selection_view_id"
          class="margin-top-1"
-          small
          :fixed-items="true"
        >
          <DropdownItem
--- a/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
@ -9,9 +9,8 @@
    >
      <Dropdown
        v-model="values.number_decimal_places"
-        :class="{ 'dropdown--error': $v.values.number_decimal_places.$error }"
+        :error="$v.values.number_decimal_places.$error"
        :fixed-items="true"
-        small
        @hide="$v.values.number_decimal_places.$touch()"
      >
        <DropdownItem name="0 (1)" :value="0"></DropdownItem>
--- a/web-frontend/modules/database/components/field/FieldRatingSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldRatingSubForm.vue
@ -19,10 +19,9 @@
      <Dropdown
        v-model="values.style"
        class="dropdown--floating rating-field-form__dropdown-style"
-        :class="{ 'dropdown--error': $v.values.style.$error }"
+        :error="$v.values.style.$error"
        :fixed-items="true"
        :show-search="false"
-        small
        @hide="$v.values.style.$touch()"
      >
        <DropdownItem
@ -44,10 +43,9 @@
      <Dropdown
        v-model="values.max_value"
        class="dropdown--floating"
-        :class="{ 'dropdown--error': $v.values.max_value.$error }"
+        :error="$v.values.max_value.$error"
        :show-search="false"
        :fixed-items="true"
-        small
        @hide="$v.values.max_value.$touch()"
      >
        <DropdownItem
--- a/web-frontend/modules/database/components/field/FieldRollupSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldRollupSubForm.vue
@ -24,9 +24,8 @@
        <Dropdown
          v-model="values.rollup_function"
          max-width
-          :class="{ 'dropdown--error': $v.values.rollup_function.$error }"
+          :error="$v.values.rollup_function.$error"
          :fixed-items="true"
-          small
          @hide="$v.values.rollup_function.$touch()"
        >
          <DropdownItem
--- a/web-frontend/modules/database/components/field/FieldSelectOptionsDropdown.vue
+++ b/web-frontend/modules/database/components/field/FieldSelectOptionsDropdown.vue
@ -4,6 +4,8 @@
    :class="{
      'dropdown--floating': !showInput,
      'dropdown--disabled': disabled,
+      'dropdown--large': size === 'large',
+      'dropdown--error': error,
    }"
    :tabindex="realTabindex"
    @contextmenu.stop
@ -125,6 +127,11 @@ export default {
      required: false,
      default: true,
    },
+    size: {
+      type: String,
+      required: false,
+      default: 'regular',
+    },
  },
  data() {
    return {
--- a/web-frontend/modules/database/components/field/FieldSelectTargetFieldSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldSelectTargetFieldSubForm.vue
@ -17,9 +17,8 @@
    >
      <Dropdown
        v-model="values.target_field_id"
-        :class="{ 'dropdown--error': $v.values.target_field_id.$error }"
+        :error="$v.values.target_field_id.$error"
        :fixed-items="true"
-        small
        @hide="$v.values.target_field_id.$touch()"
        @input="targetFieldChanged($event)"
      >
--- a/web-frontend/modules/database/components/field/FieldSelectThroughFieldSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldSelectThroughFieldSubForm.vue
@ -13,9 +13,8 @@
    >
      <Dropdown
        v-model="values.through_field_id"
-        :class="{ 'dropdown--error': $v.values.through_field_id.$error }"
+        :error="$v.values.through_field_id.$error"
        :fixed-items="true"
-        small
        @hide="$v.values.through_field_id.$touch()"
        @input="throughFieldChanged($event)"
      >
--- a/web-frontend/modules/database/components/row/RowEditFieldMultipleCollaborators.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldMultipleCollaborators.vue
@ -40,7 +40,7 @@
      :disabled="readOnly"
      :show-input="false"
      :show-empty-value="false"
-      :class="{ 'dropdown--error': touched && !valid }"
+      :error="touched && !valid"
      @input="updateValue($event, value)"
      @hide="touch()"
    ></FieldCollaboratorDropdown>
--- a/web-frontend/modules/database/components/row/RowEditFieldMultipleSelect.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldMultipleSelect.vue
@ -31,7 +31,7 @@
      :disabled="readOnly"
      :show-input="false"
      :show-empty-value="false"
-      :class="{ 'dropdown--error': touched && !valid }"
+      :error="touched && !valid"
      @input="updateValue($event, value)"
      @create-option="createOption($event)"
      @hide="touch()"
--- a/web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue
+++ b/web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue
@ -5,7 +5,8 @@
      :options="singleSelectOptions"
      :allow-create-option="allowCreateOptions"
      :disabled="readOnly"
-      :class="{ 'dropdown--error': touched && !valid }"
+      :error="touched && !valid"
+      size="large"
      @input="updateValue($event, value)"
      @create-option="createOption($event)"
      @hide="touch()"
--- a/web-frontend/modules/database/components/table/ImportFileModal.vue
+++ b/web-frontend/modules/database/components/table/ImportFileModal.vue
@ -125,7 +125,7 @@
            required
            class="margin-bottom-2"
          >
-            <Dropdown v-model="mapping[index]" small>
+            <Dropdown v-model="mapping[index]">
              <DropdownItem name="Skip" :value="0" icon="ban" />
              <DropdownItem
                v-for="field in availableFields"
--- a/web-frontend/modules/database/components/view/ViewFieldConditionItem.vue
+++ b/web-frontend/modules/database/components/view/ViewFieldConditionItem.vue
@ -8,7 +8,6 @@
        :value="filter.field"
        :disabled="disableFilter"
        :fixed-items="true"
-        small
        @input="$emit('updateFilter', { field: $event })"
      >
        <DropdownItem
@ -25,7 +24,6 @@
        :disabled="disableFilter"
        :value="filter.type"
        :fixed-items="true"
-        small
        @input="$emit('updateFilter', { type: $event })"
      >
        <DropdownItem
--- a/web-frontend/modules/database/components/view/ViewFilterFormOperator.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterFormOperator.vue
@ -8,7 +8,6 @@
      :value="filterType"
      :show-search="false"
      :fixed-items="true"
-      small
      @input="$emit('updateFilterType', $event)"
    >
      <DropdownItem
--- a/web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue
@ -6,7 +6,6 @@
    :show-empty-value="false"
    :fixed-items="true"
    class="dropdown--floating filters__value-dropdown"
-    small
    @input="input"
  ></FieldCollaboratorDropdown>
 </template>
--- a/web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue
@ -4,7 +4,6 @@
    :show-search="false"
    :fixed-items="true"
    class="filters__value-dropdown"
-    small
    @input="$emit('input', $event)"
  >
    <DropdownItem
--- a/web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue
@ -7,7 +7,6 @@
    :disabled="disabled"
    :fixed-items="true"
    class="filters__value-dropdown"
-    small
    @input="$emit('input', $event)"
  ></PaginatedDropdown>
  <a
--- a/web-frontend/modules/database/components/view/ViewFilterTypeMultiStepDate.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeMultiStepDate.vue
@ -5,10 +5,9 @@
      :disabled="disabled"
      :value="operatorValue"
      :fixed-items="true"
-      small
      @input="setOperator($event)"
    >
-      <template #value>
+      <template #selectedValue>
        <span
          class="dropdown__selected-text"
          :title="$t(selectedOperatorLabel)"
@ -181,8 +180,8 @@ export default {
      }

      if (newDate.isValid()) {
-        const dateString = newDate.format('YYYY-MM-DD')
-        this.setValue(dateString, sender)
+        this.setCopy(newDate.format('YYYY-MM-DD'), sender)
+        this.delayedUpdate(this.copy, true)
      } else {
        this.copy = value
      }
--- a/web-frontend/modules/database/components/view/ViewFilterTypeMultipleSelectOptions.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeMultipleSelectOptions.vue
@ -6,8 +6,7 @@
    :fixed-items="true"
    :multiple="true"
    :show-empty-value="false"
-    class="dropdown--floating dropdown--small filters__value-dropdown"
-    small
+    class="dropdown--floating filters__value-dropdown"
    @input="input"
  ></FieldSelectOptionsDropdown>
 </template>
--- a/web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue
@ -4,8 +4,7 @@
    :options="field.select_options"
    :disabled="disabled"
    :fixed-items="true"
-    class="dropdown--floating dropdown--small filters__value-dropdown"
-    small
+    class="dropdown--floating filters__value-dropdown"
    @input="input"
  ></FieldSelectOptionsDropdown>
 </template>
--- a/web-frontend/modules/database/components/view/ViewGroupByContext.vue
+++ b/web-frontend/modules/database/components/view/ViewGroupByContext.vue
@ -49,7 +49,6 @@
              :disabled="disableGroupBy"
              :fixed-items="true"
              class="dropdown--floating"
-              small
              @input="updateGroupBy(groupBy, { field: $event })"
            >
              <DropdownItem
--- a/web-frontend/modules/database/components/view/ViewSortContext.vue
+++ b/web-frontend/modules/database/components/view/ViewSortContext.vue
@ -49,7 +49,6 @@
              :disabled="disableSort"
              :fixed-items="true"
              class="dropdown--floating"
-              small
              @input="updateSort(sort, { field: $event })"
            >
              <DropdownItem
--- a/web-frontend/modules/database/components/view/form/FormViewFieldLinkRow.vue
+++ b/web-frontend/modules/database/components/view/form/FormViewFieldLinkRow.vue
@ -4,7 +4,7 @@
      :fetch-page="fetchPage"
      :value="dropdownValue"
      :initial-display-name="initialDisplayName"
-      :class="{ 'dropdown--error': touched && !valid }"
+      :error="touched && !valid"
      :fetch-on-open="lazyLoad"
      :disabled="readOnly"
      :include-display-name-in-selected-event="true"
--- a/web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue
+++ b/web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue
@ -10,11 +10,7 @@
          :fetch-page="fetchPage"
          :value="value[index].id"
          :initial-display-name="value[index].value"
-          small
-          :class="{
-            'dropdown--error':
-              touched && !valid && isInvalidValue(value[index]),
-          }"
+          :error="touched && !valid && isInvalidValue(value[index])"
          :fetch-on-open="lazyLoad"
          :disabled="readOnly"
          :include-display-name-in-selected-event="true"
--- a/web-frontend/modules/database/components/webhook/WebhookForm.vue
+++ b/web-frontend/modules/database/components/webhook/WebhookForm.vue
@ -53,7 +53,7 @@
            required
            class="margin-bottom-2"
          >
-            <Dropdown v-model="values.request_method" small>
+            <Dropdown v-model="values.request_method">
              <DropdownItem name="GET" value="GET"></DropdownItem>
              <DropdownItem name="POST" value="POST"></DropdownItem>
              <DropdownItem name="PATCH" value="PATCH"></DropdownItem>
@ -229,7 +229,6 @@
            <Dropdown
              v-model="exampleWebhookEventType"
              class="dropdown--floating-left"
-              small
            >
              <DropdownItem
                v-for="webhookEvent in webhookEventTypes"
--- a/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowTableSelector.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowTableSelector.vue
@ -9,7 +9,7 @@
        v-model="databaseSelectedId"
        :show-search="false"
        fixed-items
-        :small="smallDropdowns"
+        :size="dropdownSize"
      >
        <DropdownItem
          v-for="database in databases"
@ -32,7 +32,7 @@
        :show-search="false"
        :disabled="databaseSelectedId === null"
        fixed-items
-        :small="smallDropdowns"
+        :size="dropdownSize"
        @input="$emit('input', $event)"
      >
        <DropdownItem
@ -56,7 +56,7 @@
        :show-search="false"
        :disabled="value === null"
        fixed-items
-        :small="smallDropdowns"
+        :size="dropdownSize"
        @input="$emit('update:view-id', $event)"
      >
        <DropdownItem
@ -99,13 +99,13 @@ export default {
      type: Boolean,
      default: true,
    },
-    dropdownSizes: {
+    dropdownSize: {
      type: String,
      required: false,
      validator: function (value) {
-        return ['small', 'large'].includes(value)
+        return ['regular', 'large'].includes(value)
      },
-      default: 'small',
+      default: 'regular',
    },
  },
  data() {
@ -129,9 +129,6 @@ export default {
        ) || []
      )
    },
-    smallDropdowns() {
-      return this.dropdownSizes === 'small'
-    },
  },
  watch: {
    value: {
--- a/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceSortForm.vue
+++ b/web-frontend/modules/integrations/localBaserow/components/services/LocalBaserowTableServiceSortForm.vue
@ -37,7 +37,6 @@
            :disabled="disableSort"
            :fixed-items="true"
            class="dropdown--floating"
-            small
            @input="updateSort(sort, { field: $event })"
          >
            <DropdownItem
--- a/web-frontend/stories/Checkbox.stories.mdx
+++ b/web-frontend/stories/Checkbox.stories.mdx
@ -6,7 +6,7 @@ import { useArgs } from '@storybook/client-api'
 import Checkbox from '@baserow/modules/core/components/Checkbox'

 <Meta
-    title="Baserow/Form/Checkbox"
+    title="Baserow/Form Elements/Checkbox"
    component={Checkbox}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/Dropdown.stories.mdx
+++ b/web-frontend/stories/Dropdown.stories.mdx
@ -0,0 +1,160 @@
+import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
+import { config, withDesign } from 'storybook-addon-designs'
+import { action } from '@storybook/addon-actions'
+import { useArgs } from '@storybook/client-api'
+
+import Dropdown from '@baserow/modules/core/components/Dropdown'
+import DropdownItem from '@baserow/modules/core/components/DropdownItem'
+
+<Meta
+    title="Baserow/Form Elements/Dropdown"
+    component={Dropdown}
+    parameters={{
+        backgrounds: {
+            default: 'white',
+            values: [
+                { name: 'white', value: '#ffffff' },
+                { name: 'light', value: '#eeeeee' },
+                { name: 'dark', value: '#222222' },
+            ],
+        },
+    }}
+    decorators={[
+        withDesign,
+        (story, context) => {
+            const [_, updateArgs] = useArgs()
+            return story({ ...context, updateArgs })
+        },
+    ]}
+    argTypes={{
+        searchText: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: '',
+        },
+        placeholder: {
+            control: {
+                type: 'text',
+            },
+            defaultValue: '',
+        },
+        showSearch: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        showInput: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: true,
+        },
+        showFooter: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        size: {
+            control: {
+                type: 'select',
+                options: ['regular', 'large'],
+            },
+            defaultValue: 'regular',
+        },
+        tabindex: {
+            control: {
+                type: 'number',
+            },
+            defaultValue: 0,
+        },
+        fixedItems: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        maxWidth: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+        multiple: {
+            control: { type: null },
+        },
+        error: {
+            control: {
+                type: 'boolean',
+                options: [true, false],
+            },
+            defaultValue: false,
+        },
+    }}
+/>
+
+# Dropdown
+
+The dropdown component is a basic native select input. It can be used to select a single or multiple options from a list.
+
+export const Template = (args, { argTypes, updateArgs }) => ({
+    methods: {
+        action,
+        handleInput(value) {
+            updateArgs({ ...args, value })
+            action('handleInput')(value)
+        },
+    },
+    components: { Dropdown, DropdownItem },
+    props: Object.keys(argTypes),
+    template: `
+    <Dropdown @input="handleInput" v-bind="$props">
+        <DropdownItem name="France" value="france"></DropdownItem>
+        <DropdownItem name="Italy" value="italy"></DropdownItem>
+        <DropdownItem name="Netherlands" value="netherlands"></DropdownItem>
+        <DropdownItem name="Belgium" value="belgium"></DropdownItem>
+    </Dropdown>
+    `,
+})
+
+<Canvas>
+    <Story name="Default">{Template.bind({})}</Story>
+    <Story
+        name="Multiple selection"
+        args={{
+            multiple: true,
+            value: [],
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Example
+
+```javascript
+<Dropdown>
+    <DropdownItem name="France" value="france"></DropdownItem>
+    <DropdownItem name="Italy" value="italy"></DropdownItem>
+    <DropdownItem name="Netherlands" value="netherlands"></DropdownItem>
+    <DropdownItem name="Belgium" value="belgium"></DropdownItem>
+</Dropdown>
+```
+
+## Props
+
+<Props of={Dropdown} />
--- a/web-frontend/stories/FormGroup.stories.mdx
+++ b/web-frontend/stories/FormGroup.stories.mdx
@ -7,7 +7,7 @@ import FormInput from '@baserow/modules/core/components/FormInput'
 import ButtonIcon from '@baserow/modules/core/components/FormInput'

 <Meta
-    title="Baserow/Form/Group"
+    title="Baserow/Form Elements/Group"
    component={FormGroup}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/FormInput.stories.mdx
+++ b/web-frontend/stories/FormInput.stories.mdx
@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions'
 import FormInput from '@baserow/modules/core/components/FormInput'

 <Meta
-    title="Baserow/Form/Input"
+    title="Baserow/Form Elements/Input"
    component={FormInput}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/FormTextarea.stories.mdx
+++ b/web-frontend/stories/FormTextarea.stories.mdx
@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions'
 import FormTextarea from '@baserow/modules/core/components/FormTextarea'

 <Meta
-    title="Baserow/Form/Textarea"
+    title="Baserow/Form Elements/Textarea"
    component={FormTextarea}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/Radio.stories.mdx
+++ b/web-frontend/stories/Radio.stories.mdx
@ -6,7 +6,7 @@ import { useArgs } from '@storybook/client-api'
 import Radio from '@baserow/modules/core/components/Radio'

 <Meta
-    title="Baserow/Form/Radio/Radio"
+    title="Baserow/Form Elements/Radio/Radio"
    component={Radio}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/RadioButton.stories.mdx
+++ b/web-frontend/stories/RadioButton.stories.mdx
@ -6,7 +6,7 @@ import { useArgs } from '@storybook/client-api'
 import RadioButton from '@baserow/modules/core/components/RadioButton'

 <Meta
-    title="Baserow/Form/Radio/RadioButton"
+    title="Baserow/Form Elements/Radio/RadioButton"
    component={RadioButton}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/RadioGroup.stories.mdx
+++ b/web-frontend/stories/RadioGroup.stories.mdx
@ -6,7 +6,7 @@ import { useArgs } from '@storybook/client-api'
 import RadioGroup from '@baserow/modules/core/components/RadioGroup'

 <Meta
-    title="Baserow/Form/Radio/RadioGroup"
+    title="Baserow/Form Elements/Radio/RadioGroup"
    component={RadioGroup}
    parameters={{
        backgrounds: {
--- a/web-frontend/stories/SwitchInput.stories.mdx
+++ b/web-frontend/stories/SwitchInput.stories.mdx
@ -6,7 +6,7 @@ import { useArgs } from '@storybook/client-api'
 import SwitchInput from '@baserow/modules/core/components/SwitchInput'

 <Meta
-    title="Baserow/Form/Switch"
+    title="Baserow/Form Elements/Switch"
    component={SwitchInput}
    parameters={{
        backgrounds: {
--- a/web-frontend/test/unit/core/components/snapshots/dropdown.spec.js.snap
+++ b/web-frontend/test/unit/core/components/snapshots/dropdown.spec.js.snap
@ -8,9 +8,16 @@ exports[`Dropdown component Test slots 1`] = `
  <a
    class="dropdown__selected"
  >
-    <p>
-      The value
-    </p>
+    <!---->
+     
+    <!---->
+     
+    <span
+      class="dropdown__selected-text"
+      title="A"
+    >
+      A
+    </span>
     
    <i
      class="dropdown__toggle-icon iconoir-nav-arrow-down"
--- a/web-frontend/test/unit/database/components/view/snapshots/viewDecoratorContext.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/snapshots/viewDecoratorContext.spec.js.snap
@ -226,7 +226,7 @@ exports[`GridViewRows component with decoration View with decoration configured
            class="decorator-context__decorator-header-select"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
            >
              <a
                class="dropdown__selected"
--- a/web-frontend/test/unit/database/components/view/snapshots/viewFilterForm.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/snapshots/viewFilterForm.spec.js.snap
@ -104,7 +104,7 @@ exports[`ViewFilterForm match snapshots Full view filter component 1`] = `
            class="filters__field"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a
@ -251,7 +251,7 @@ exports[`ViewFilterForm match snapshots Full view filter component 1`] = `
            class="filters__type"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a
@ -624,7 +624,7 @@ exports[`ViewFilterForm match snapshots Full view filter component 1`] = `
          <!---->
           
          <div
-            class="dropdown dropdown--small"
+            class="dropdown"
            tabindex="0"
          >
            <a
@ -734,7 +734,7 @@ exports[`ViewFilterForm match snapshots Full view filter component 1`] = `
            class="filters__field"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a
@ -881,7 +881,7 @@ exports[`ViewFilterForm match snapshots Full view filter component 1`] = `
            class="filters__type"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a
@ -1249,7 +1249,7 @@ exports[`ViewFilterForm match snapshots Test rating filter 1`] = `
            class="filters__field"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a
@ -1396,7 +1396,7 @@ exports[`ViewFilterForm match snapshots Test rating filter 1`] = `
            class="filters__type"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex=""
            >
              <a
@ -1765,7 +1765,7 @@ exports[`ViewFilterForm match snapshots Test rating filter 2`] = `
            class="filters__field"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a
@ -1912,7 +1912,7 @@ exports[`ViewFilterForm match snapshots Test rating filter 2`] = `
            class="filters__type"
          >
            <div
-              class="dropdown dropdown--small"
+              class="dropdown"
              tabindex="0"
            >
              <a