pkp/pkp-lib#9658 Add large support for FieldSelect to be consistent w…

…ith text inputs on invitation pages (#377)

src/components/Form/fields/FieldSelect.vue

@@ -41,6 +41,7 @@
 				:id="controlId"
 				v-model="currentValue"
 				class="pkpFormField__input pkpFormField--select__input"
+				:class="inputClasses"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
 				:aria-invalid="errors && errors.length"
@@ -78,8 +79,21 @@ export default {
 	props: {
 		/**   An optional object containing preset information. When preset information exists, a button will appear in the toolbar. */
 		options: Array,
+		/** One of `small`, `normal` or `large`. Default: `normal`. */
+		size: {
+			default: 'normal',
+			validator: function (value) {
+				return ['normal', 'large'].indexOf(value) !== -1;
+			},
+		},
 	},
+
 	computed: {
+		inputClasses() {
+			let classes = ['pkpFormField--select__input--size' + this.size];
+			return classes;
+		},
+
 		/**
 		 * Get localized set of options
 		 *
@@ -95,10 +109,14 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.pkpFormField--select__input {
+.pkpFormField--select__input--sizenormal {
 	width: 20em;
 }
 
+.pkpFormField--select__input--sizelarge {
+	width: 100%;
+}
+
 .pkpFormField--select__input:-moz-focusring {
 	color: transparent;
 	text-shadow: 0 0 0 @text;

src/components/Form/mocks/field-select-country.js

@@ -2,6 +2,7 @@ export default {
 	name: 'country',
 	component: 'field-select',
 	label: 'Country',
+	size: 'normal',
 	options: [
 		{
 			value: '',