Made Select component to make using styled selects easier

src/App.scss

@@ -187,7 +187,7 @@ a {
   }
 }
 
-input, textarea, .select, .input {
+input, textarea, .input {
 
   &.unstyled {
     border-radius: 0;
@@ -217,11 +217,7 @@ input, textarea, .select, .input {
   hyphens: none;
   padding: 8px .5em;
 
-  &.select {
+  &:disabled, &[disabled=disabled], &.disabled {
-    padding: 0;
-  }
-
-  &:disabled, &[disabled=disabled] {
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -239,25 +235,6 @@ input, textarea, .select, .input {
     pointer-events: none;
   }
 
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
-    margin: 0;
-    padding: 0 2em 0 .2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
-    width: 100%;
-    z-index: 1;
-    height: 28px;
-    line-height: 16px;
-  }
-
   &[type=range] {
     background: none;
     border: none;
@@ -809,13 +786,6 @@ nav {
   }
 }
 
-.select-multiple {
-  display: flex;
-  .option-list {
-    margin: 0;
-    padding-left: .5em;
-  }
-}
 .setting-list,
 .option-list{
   list-style-type: none;

src/components/font_control/font_control.js

@@ -1,14 +1,10 @@
 import { set } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 export default {
+  components: {
+    Select
+  },
   props: [
     'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],

src/components/font_control/font_control.vue

@@ -22,12 +22,7 @@
       class="opt-l"
       :for="name + '-o'"
     />
-    <label
+    <Select
-      :for="name + '-font-switcher'"
-      class="select"
-      :disabled="!present"
-    >
-      <select
       :id="name + '-font-switcher'"
       v-model="preset"
       :disabled="!present"
@@ -40,12 +35,7 @@
       >
         {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
       </option>
-      </select>
+    </Select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
     <input
       v-if="isCustom"
       :id="name"

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -3,11 +3,7 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label
+    <Select
-      for="interface-language-switcher"
-      class="select"
-    >
-      <select
       id="interface-language-switcher"
       v-model="language"
     >
@@ -18,12 +14,7 @@
       >
         {{ lang.name }}
       </option>
-      </select>
+    </Select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
   </div>
 </template>
 
@@ -32,16 +23,12 @@ import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 export default {
+  components: {
+    Select
+  },
   computed: {
     languages () {
       return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))

src/components/poll/poll_form.js

@@ -1,19 +1,21 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
 import {
   faTimes,
-  faChevronDown,
   faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
-  faChevronDown,
   faPlus
 )
 
 export default {
+  components: {
+    Select
+  },
   name: 'PollForm',
   props: ['visible'],
   data: () => ({

src/components/poll/poll_form.vue

@@ -46,23 +46,13 @@
         class="poll-type"
         :title="$t('polls.type')"
       >
-        <label
+        <Select
-          for="poll-type-selector"
-          class="select"
-        >
-          <select
           v-model="pollType"
-            class="select"
           @change="updatePollToParent"
         >
           <option value="single">{{ $t('polls.single_choice') }}</option>
           <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
-          </select>
+        </Select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
       </div>
       <div
         class="poll-expiry"
@@ -76,9 +66,9 @@
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
         >
-        <label class="expiry-unit select">
+        <Select
-          <select
           v-model="expiryUnit"
+          class="expiry-unit"
           @change="expiryAmountChange"
         >
           <option
@@ -88,12 +78,7 @@
           >
             {{ $t(`time.${unit}_short`, ['']) }}
           </option>
-          </select>
+        </Select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
       </div>
     </div>
   </div>

src/components/post_status_form/post_status_form.js

@@ -11,10 +11,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
+import Select from '../select/select.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
   faSmileBeam,
   faPollH,
   faUpload,
@@ -24,7 +24,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown,
   faSmileBeam,
   faPollH,
   faUpload,
@@ -84,6 +83,7 @@ const PostStatusForm = {
     PollForm,
     ScopeSelector,
     Checkbox,
+    Select,
     Attachment,
     StatusContent
   },

src/components/post_status_form/post_status_form.vue

@@ -189,11 +189,7 @@
             v-if="postFormats.length > 1"
             class="text-format"
           >
-            <label
+            <Select
-              for="post-content-type"
-              class="select"
-            >
-              <select
               id="post-content-type"
               v-model="newStatus.contentType"
               class="form-control"
@@ -205,12 +201,7 @@
               >
                 {{ $t(`post_status.content_type["${postFormat}"]`) }}
               </option>
-              </select>
+            </Select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
           </div>
           <div
             v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"

src/components/select/select.vue

@@ -0,0 +1,67 @@
+
+<template>
+  <label
+    class="Select input"
+    :class="{ disabled }"
+  >
+    <select
+      :disabled="disabled"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    >
+      <slot />
+    </select>
+    <FAIcon
+      class="select-down-icon"
+      icon="chevron-down"
+    />
+  </label>
+</template>
+
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled'
+  ]
+}
+</script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.Select {
+  padding: 0;
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: $fallback--text;
+    color: var(--inputText, --text, $fallback--text);
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
+    width: 100%;
+    z-index: 1;
+    height: 28px;
+    line-height: 16px;
+  }
+}
+</style>

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,15 +1,8 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import Select from '../../select/select.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 const FilteringTab = {
   data () {
@@ -18,7 +11,8 @@ const FilteringTab = {
     }
   },
   components: {
-    BooleanSetting
+    BooleanSetting,
+    Select
   },
   computed: {
     ...SharedComputedObject(),

src/components/settings_modal/tabs/filtering_tab.vue

@@ -38,11 +38,7 @@
       </div>
       <div>
         {{ $t('settings.replies_in_timeline') }}
-        <label
+        <Select
-          for="replyVisibility"
-          class="select"
-        >
-          <select
           id="replyVisibility"
           v-model="replyVisibility"
         >
@@ -52,12 +48,7 @@
           >{{ $t('settings.reply_visibility_all') }}</option>
           <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
           <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-          </select>
+        </Select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
       </div>
       <div>
         <BooleanSetting path="hidePostStats">
@@ -88,3 +79,12 @@
   </div>
 </template>
 <script src="./filtering_tab.js"></script>
+<style lang="scss">
+.select-multiple {
+  display: flex;
+  .option-list {
+    margin: 0;
+    padding-left: .5em;
+  }
+}
+</style>

src/components/settings_modal/tabs/general_tab.js

@@ -1,15 +1,14 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import Select from '../../select/select.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown,
   faGlobe
 )
 
@@ -27,7 +26,8 @@ const GeneralTab = {
   },
   components: {
     BooleanSetting,
-    InterfaceLanguageSwitcher
+    InterfaceLanguageSwitcher,
+    Select
   },
   computed: {
     postFormats () {

src/components/settings_modal/tabs/general_tab.vue

@@ -87,11 +87,7 @@
         <li>
           <div>
             {{ $t('settings.subject_line_behavior') }}
-            <label
+            <Select
-              for="subjectLineBehavior"
-              class="select"
-            >
-              <select
               id="subjectLineBehavior"
               v-model="subjectLineBehavior"
             >
@@ -107,22 +103,13 @@
                 {{ $t('settings.subject_line_noop') }}
                 {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
               </option>
-              </select>
+            </Select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
           </div>
         </li>
         <li v-if="postFormats.length > 0">
           <div>
             {{ $t('settings.post_status_content_type') }}
-            <label
+            <Select
-              for="postContentType"
-              class="select"
-            >
-              <select
               id="postContentType"
               v-model="postContentType"
             >
@@ -134,12 +121,7 @@
                 {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
               </option>
-              </select>
+            </Select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
           </div>
         </li>
         <li>

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -33,16 +33,9 @@ import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
 
 import Preview from './preview.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -384,7 +377,8 @@ export default {
     TabSwitcher,
     Preview,
     ExportImport,
-    Checkbox
+    Checkbox,
+    Select
   },
   methods: {
     loadTheme (

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -59,11 +59,7 @@
           <template slot="before">
             <div class="presets">
               {{ $t('settings.presets') }}
-              <label
+              <Select
-                for="preset-switcher"
-                class="select"
-              >
-                <select
                 id="preset-switcher"
                 v-model="selected"
                 class="preset-switcher"
@@ -79,12 +75,7 @@
                 >
                   {{ style[0] || style.name }}
                 </option>
-                </select>
+              </Select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
             </div>
           </template>
         </ExportImport>
@@ -902,11 +893,7 @@
           <div class="tab-header shadow-selector">
             <div class="select-container">
               {{ $t('settings.style.shadows.component') }}
-              <label
+              <Select
-                for="shadow-switcher"
-                class="select"
-              >
-                <select
                 id="shadow-switcher"
                 v-model="shadowSelected"
                 class="shadow-switcher"
@@ -918,12 +905,7 @@
                 >
                   {{ $t('settings.style.shadows.components.' + shadow) }}
                 </option>
-                </select>
+              </Select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
             </div>
             <div class="override">
               <label

src/components/shadow_control/shadow_control.js

@@ -1,5 +1,6 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
+import Select from '../select/select.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -45,7 +46,8 @@ export default {
   },
   components: {
     ColorInput,
-    OpacityInput
+    OpacityInput,
+    Select
   },
   methods: {
     add () {

src/components/shadow_control/shadow_control.vue

@@ -59,12 +59,7 @@
         :disabled="usingFallback"
         class="id-control style-control"
       >
-        <label
+        <Select
-          for="shadow-switcher"
-          class="select"
-          :disabled="!ready || usingFallback"
-        >
-          <select
           id="shadow-switcher"
           v-model="selectedId"
           class="shadow-switcher"
@@ -77,12 +72,7 @@
           >
             {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
           </option>
-          </select>
+        </Select>
-          <FAIcon
-            icon="chevron-down"
-            class="select-down-icon"
-          />
-        </label>
         <button
           class="btn button-default"
           :disabled="!ready || !present"

src/components/user_card/user_card.js

@@ -4,13 +4,13 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
+import Select from '../select/select.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
   faRss,
-  faChevronDown,
   faSearchPlus,
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
@@ -18,7 +18,6 @@ import {
 library.add(
   faRss,
   faBell,
-  faChevronDown,
   faSearchPlus,
   faExternalLinkAlt
 )
@@ -118,7 +117,8 @@ export default {
     ModerationTools,
     AccountActions,
     ProgressButton,
-    FollowButton
+    FollowButton,
+    Select
   },
   methods: {
     muteUser () {

src/components/user_card/user_card.vue

@@ -132,11 +132,7 @@
               class="userHighlightCl"
               type="color"
             >
-            <label
+            <Select
-              for="theme_tab"
-              class="userHighlightSel select"
-            >
-              <select
               :id="'userHighlightSel'+user.id"
               v-model="userHighlightType"
               class="userHighlightSel"
@@ -145,12 +141,7 @@
               <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
               <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
               <option value="side">{{ $t('user_card.highlight.side') }}</option>
-              </select>
+            </Select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
           </div>
         </div>
         <div