Clean up k-textbox

christianmemije · christianmemije · commit 3fb98a19fd8c · 2017-08-03T14:30:15.000-07:00
diff --git a/kolibri/core/assets/src/views/k-textbox/index.vue b/kolibri/core/assets/src/views/k-textbox/index.vue
@@ -1,24 +1,24 @@
 <template>
 
   <ui-textbox
-    @focus="$emit('focus')"
-    @blur="$emit('blur')"
-    @input="updateText"
-    @keydown="emitKeydown"
+    ref="textbox"
     v-model="currentText"
-    :disabled="disabled"
-    :placeholder="placeholder"
     :label="label"
     :aria-label="ariaLabel"
-    :autocomplete="autocomplete"
-    :autofocus="autofocus"
+    :disabled="disabled"
     :required="required"
-    :type="type"
-    :error="error"
     :invalid="invalid"
+    :error="invalidText"
+    :autofocus="autofocus"
     :maxlength="maxlength"
-    :enforceMaxlength="enforceMaxlength"
-    ref="textbox"
+    :autocomplete="autocomplete"
+    :type="type"
+    :enforceMaxlength="true"
+    :floatingLabel="true"
+    @input="updateText"
+    @keydown="emitKeydown"
+    @focus="$emit('focus')"
+    @blur="$emit('blur')"
   />
 
 </template>
@@ -33,53 +33,112 @@
    */
   export default {
     name: 'k-textbox',
+    components: { uiTextbox },
     props: {
-      disabled: { type: Boolean },
-      autofocus: { type: Boolean },
-      required: { type: Boolean },
-      invalid: { type: Boolean },
+      /**
+       * v-model
+       */
       value: {
         type: [String, Number],
       },
-      error: { type: String },
-      placeholder: { type: String },
-      label: { type: String },
+      /**
+       * Label
+       */
+      label: {
+        type: String,
+        required: true,
+      },
+      /**
+       * Aria label
+       */
       ariaLabel: {
         type: String,
         // enforcing accessibility
-        required: !!this.label,
+        required: true,
       },
-      autocomplete: { type: String },
-      type: { type: String },
-      maxlength: { type: Number },
-      enforceMaxlength: {
+      /**
+       * Whether or not disabled
+       */
+      disabled: {
         type: Boolean,
-        default: true,
+        default: false,
+      },
+      /**
+       * Whether or not required
+       */
+      required: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * Whether or not input is invalid
+       */
+      invalid: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * Text displayed if input is invalid
+       */
+      invalidText: {
+        type: String,
+        required: false,
+      },
+      /**
+       * Whether or not to autofocus
+       */
+      autofocus: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * Max allowed length of input
+       */
+      maxlength: {
+        type: Number,
+        required: false,
+      },
+      /**
+       * HTML5 autocomplete attribute (off, on, name, username, current-password, etc.)
+       */
+      autocomplete: {
+        type: String,
+        required: false,
+      },
+      /**
+       * HTML5 type of input (text, password, number, etc.)
+       */
+      type: {
+        type: String,
+        default: 'text',
       },
     },
     data() {
       return { currentText: this.value };
     },
+    watch: {
+      value(val) {
+        this.currentText = val;
+      },
+    },
     methods: {
-      updateText(text) {
+      updateText() {
+        // v-model is just a :value + @input
         /**
-         * v-model is just a :value + @input
+         * Emits input event with new value
          */
         this.$emit('input', this.currentText);
       },
       reset() {
         this.$refs.textbox.reset();
       },
       emitKeydown(e) {
+        /**
+         * Emits keydown event with event
+         */
         this.$emit('keydown', e);
       },
     },
-    watch: {
-      value(val) {
-        this.currentText = val;
-      },
-    },
-    components: { uiTextbox },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/create-exam-page/index.vue b/kolibri/plugins/coach/assets/src/views/create-exam-page/index.vue
@@ -7,10 +7,9 @@
         <k-textbox
           :label="$tr('title')"
           :ariaLabel="$tr('title')"
-          :placeholder="$tr('enterTitle')"
           :autofocus="true"
           :invalid="titleInvalid"
-          :error="titleInvalidMsg"
+          :invalidText="titleInvalidMsg"
           v-model.trim="inputTitle"
           @blur="validateTitle = true"
           @input="validateTitle = true"
@@ -20,9 +19,8 @@
         <k-textbox
           :label="$tr('numQuestions')"
           :ariaLabel="$tr('numQuestions')"
-          :placeholder="$tr('enterNum')"
           :invalid="numQuestionsInvalid"
-          :error="numQuestionsInvalidMsg"
+          :invalidText="numQuestionsInvalidMsg"
           type="number"
           v-model.trim.number="inputNumQuestions"
           @blur="validateNumQuestMax = true"
@@ -34,7 +32,6 @@
     <h2>{{ $tr('chooseExercises') }}</h2>
     <!--<k-textbox-->
       <!--:ariaLabel="$tr('searchContent')"-->
-      <!--:placeholder="$tr('searchContent')"-->
       <!--v-model.trim="searchInput"-->
     <!--/>-->
     <!--<div v-if="searchInput">-->
@@ -150,9 +147,7 @@
       chooseExercises: 'Select exercises to pull questions from',
       selectAll: 'Select all',
       title: 'Exam title',
-      enterTitle: 'Enter a title',
       numQuestions: 'Number of questions',
-      enterNum: 'Enter a number',
       examRequiresTitle: 'The exam requires a title',
       numQuestionsBetween: 'The exam requires a number of questions between 1 and 50',
       numQuestionsExceed:
diff --git a/kolibri/plugins/coach/assets/src/views/exams-page/rename-exam-modal.vue b/kolibri/plugins/coach/assets/src/views/exams-page/rename-exam-modal.vue
@@ -8,7 +8,7 @@
         :autofocus="true"
         :required="true"
         :invalid="duplicateTitle"
-        :error="$tr('duplicateTitle')"
+        :invalidText="$tr('duplicateTitle')"
         v-model.trim="newExamTitle"/>
       <div class="footer">
         <k-button :text="$tr('cancel')" :raised="false" type="button" @click="close"/>
diff --git a/kolibri/plugins/coach/assets/src/views/groups-page/create-group-modal.vue b/kolibri/plugins/coach/assets/src/views/groups-page/create-group-modal.vue
@@ -10,7 +10,7 @@
           :autofocus="true"
           :required="true"
           :invalid="duplicateName"
-          :error="$tr('duplicateName')"
+          :invalidText="$tr('duplicateName')"
           v-model.trim="groupNameInput" />
         <k-button :text="$tr('cancel')"
           @click="close"
diff --git a/kolibri/plugins/coach/assets/src/views/groups-page/rename-group-modal.vue b/kolibri/plugins/coach/assets/src/views/groups-page/rename-group-modal.vue
@@ -10,7 +10,7 @@
           :autofocus="true"
           :required="true"
           :invalid="duplicateName"
-          :error="$tr('duplicateName')"
+          :invalidText="$tr('duplicateName')"
           v-model.trim="groupNameInput" />
         <k-button :text="$tr('cancel')"
           :raised="false"
diff --git a/kolibri/plugins/management/assets/src/views/class-edit-page/class-rename-modal.vue b/kolibri/plugins/management/assets/src/views/class-edit-page/class-rename-modal.vue
@@ -13,7 +13,7 @@
           :autofocus="true"
           :required="true"
           :invalid="duplicateName"
-          :error="$tr('duplicateName')"
+          :invalidText="$tr('duplicateName')"
           type="text"
         />
 
diff --git a/kolibri/plugins/management/assets/src/views/manage-class-page/class-create-modal.vue b/kolibri/plugins/management/assets/src/views/manage-class-page/class-create-modal.vue
@@ -13,7 +13,7 @@
           :autofocus="true"
           :required="true"
           :invalid="duplicateName"
-          :error="$tr('duplicateName')"
+          :invalidText="$tr('duplicateName')"
           type="text"
         />
 
diff --git a/kolibri/plugins/management/assets/src/views/manage-content-page/wizard-import-network.vue b/kolibri/plugins/management/assets/src/views/manage-content-page/wizard-import-network.vue
@@ -10,7 +10,7 @@
     @back="goBack"
   >
     <div class="main">
-      <k-textbox :label="$tr('enterContentChannel')" v-model="channelId" :disabled="wizardState.busy"/>
+      <k-textbox :label="$tr('enterContentChannel')" ariaLabel="$tr('enterContentChannel')" v-model="channelId" :disabled="wizardState.busy"/>
     </div>
     <div class="core-text-alert">
       {{ wizardState.error }}
@@ -41,8 +41,8 @@
   export default {
     name: 'wizardImportNetwork',
     $trs: {
-      title: 'Please choose a source...',
-      enterContentChannel: 'Please enter a content channel ID:',
+      title: 'Import from the internet',
+      enterContentChannel: 'Content channel ID',
       cancel: 'Cancel',
       import: 'Import',
     },
diff --git a/kolibri/plugins/management/assets/src/views/user-page/user-create-modal.vue b/kolibri/plugins/management/assets/src/views/user-page/user-create-modal.vue
@@ -11,34 +11,36 @@
       <section>
         <k-textbox
           :label="$tr('name')"
+          :ariaLabel="$tr('name')"
           :autofocus="true"
           :required="true"
           :maxlength="120"
-          :enforceMaxlength="true"
           type="text"
           class="user-field"
           v-model.trim="fullName"/>
         <k-textbox
           :label="$tr('username')"
+          :ariaLabel="$tr('username')"
           :required="true"
           :maxlength="30"
-          :enforceMaxlength="true"
           :invalid="usernameInvalid"
-          :error="usernameInvalidMsg"
+          :invalidText="usernameInvalidMsg"
           type="text"
           class="user-field"
           v-model="username"/>
         <k-textbox
           :label="$tr('password')"
+          :ariaLabel="$tr('password')"
           :required="true"
           type="password"
           class="user-field"
           v-model="password"/>
         <k-textbox
           :label="$tr('reEnterPassword')"
+          :ariaLabel="$tr('reEnterPassword')"
           :required="true"
           :invalid="passwordConfirmInvalid"
-          :error="$tr('pwMismatchError')"
+          :invalidText="$tr('pwMismatchError')"
           type="password"
           class="user-field"
           v-model="passwordConfirm"/>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/index.vue b/kolibri/plugins/setup_wizard/assets/src/views/index.vue
@@ -20,20 +20,21 @@
             @focus="firstUsernameFieldVisit || visitUsername()"
             @blur="validateUsername()"
             :invalid="!!usernameError"
-            :error="usernameError"
+            :invalidText="usernameError"
             :required="true"
             :label="$tr('usernameInputLabel')"
+            :ariaLabel="$tr('usernameInputLabel')"
             :maxlength="30"
-            :enforceMaxlength="true"
             v-model="username"
           />
 
           <k-textbox
             @focus="firstPasswordFieldsVisit || visitPassword()"
             :invalid="!!passwordError"
-            :error="passwordError"
+            :invalidText="passwordError"
             :required="true"
             :label="$tr('passwordInputLabel')"
+            :ariaLabel="$tr('passwordInputLabel')"
             type="password"
             v-model="password"
           />
@@ -43,6 +44,7 @@
             :invalid="!!passwordError"
             :required="true"
             :label="$tr('reEnterPasswordInputLabel')"
+            :ariaLabel="$tr('reEnterPasswordInputLabel')"
             type="password"
             v-model="passwordConfirm"
           />
@@ -59,11 +61,11 @@
             @focus="firstFacilityFieldVisit || visitFacility()"
             @blur="validateFacility"
             :invalid="!!facilityError"
-            :error="facilityError"
+            :invalidText="facilityError"
             :required="true"
             :label="$tr('facilityInputLabel')"
+            :ariaLabel="$tr('facilityInputLabel')"
             :maxlength="100"
-            :enforceMaxlength="true"
             v-model="facility"
           />
         </fieldset>
diff --git a/kolibri/plugins/style_guide/assets/src/views/content/text-fields/example.html b/kolibri/plugins/style_guide/assets/src/views/content/text-fields/example.html
diff --git a/kolibri/plugins/user/assets/src/views/profile-page/index.vue b/kolibri/plugins/user/assets/src/views/profile-page/index.vue
diff --git a/kolibri/plugins/user/assets/src/views/sign-in-page/index.vue b/kolibri/plugins/user/assets/src/views/sign-in-page/index.vue
diff --git a/kolibri/plugins/user/assets/src/views/sign-up-page/index.vue b/kolibri/plugins/user/assets/src/views/sign-up-page/index.vue
