[QTabs, QTabPane] Fix focus state + refactoring (#41)

* add focus styles
altai-ui · Jan 20, 2021 · 77315c0 · 77315c0
1 parent dd0d01b
commit 77315c0
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 55 deletions.
diff --git a/src/qComponents/QTabPane/QTabPane.test.js b/src/qComponents/QTabPane/QTabPane.test.js
@@ -0,0 +1,14 @@
+import Component from './src/QTabPane';
+
+describe('QTabPane', () => {
+  it('should match snapshot', async () => {
+    const instance = shallowMount(Component, {
+      propsData: {
+        name: 'pane_name',
+        title: 'Pane Title'
+      }
+    });
+
+    expect(instance.element).toMatchSnapshot();
+  });
+});
diff --git a/src/qComponents/QTabPane/__snapshots__/QTabPane.test.js.snap b/src/qComponents/QTabPane/__snapshots__/QTabPane.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QTabPane should match snapshot 1`] = `
+<div
+  class="q-tab-pane"
+>
+  <div
+    class="q-tab-pane__inner"
+  >
+    <button
+      class="q-tab-pane__btn"
+      type="button"
+    >
+      
+      Pane Title
+    
+    </button>
+     
+  </div>
+   
+  <!---->
+</div>
+`;
diff --git a/src/qComponents/QTabPane/index.js b/src/qComponents/QTabPane/index.js
@@ -1,6 +1,6 @@
-import QTabPane from './src/QTabPane.vue';
+import QTabPane from './src/QTabPane';
 
-QTabPane.install = function(Vue) {
+QTabPane.install = Vue => {
   Vue.component(QTabPane.name, QTabPane);
 };
 

diff --git a/src/qComponents/QTabPane/src/QTabPane.vue b/src/qComponents/QTabPane/src/QTabPane.vue
@@ -1,22 +1,24 @@
 <template>
-  <div class="q-tab-pane">
+  <div
+    class="q-tab-pane"
+    :style="tabWidthStyle"
+  >
     <div class="q-tab-pane__inner">
       <button
         type="button"
         class="q-tab-pane__btn"
-        :class="getTabBtnClasses"
-        :style="tabWidthStyle"
+        :class="tabBtnClasses"
         :disabled="isDisabled"
         @click="handleTabClick"
       >
         {{ title }}
       </button>
+
       <slot name="content" />
     </div>
     <div
       v-if="description"
       class="q-tab-pane__description"
-      :style="tabWidthStyle"
     >
       {{ description }}
     </div>
@@ -28,82 +30,74 @@ export default {
   name: 'QTabPane',
   componentName: 'QTabPane',
 
+  inject: {
+    qTabs: {
+      default: null
+    }
+  },
+
   props: {
     /**
-     * name of pane
+     * key of QTabPane
      */
     name: {
       type: String,
       required: true
     },
     /**
-     * title of pane
+     * title of QTabPane
      */
     title: {
       type: String,
       required: true
     },
     /**
-     * whether pane is disabled
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * description of pane
+     * description of QTabPane
      */
     description: {
       type: String,
-      default: ''
+      default: null
     },
     /**
-     * width of Tab pane
+     * width of QTabPane
      */
     width: {
       type: [String, Number],
-      default: ''
+      default: null
+    },
+    /**
+     * whether QTabPane is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
 
   computed: {
     isDisabled() {
-      return this.disabled || this.$parent.disabled;
+      return this.disabled || this.qTabs?.disabled;
     },
 
     tabWidthStyle() {
-      const sourceWidthValue = this.width || this.$parent.tabWidth;
+      const width = this.width ?? this.qTabs?.tabWidth;
 
       return {
-        width: Number(sourceWidthValue)
-          ? `${Number(sourceWidthValue)}px`
-          : sourceWidthValue
+        '--tab-pane-width': Number(width) ? `${Number(width)}px` : width
       };
     },
 
-    getTabBtnClasses() {
+    tabBtnClasses() {
       return {
-        'q-tab-pane__btn_active': this.$parent.currentName === this.name,
+        'q-tab-pane__btn_active': this.qTabs?.currentName === this.name,
         'q-tab-pane__btn_disabled': this.isDisabled
       };
     }
   },
 
-  created() {
-    // eslint-disable-next-line no-underscore-dangle
-    const parentComponentName = this.$parent.$options._componentTag;
-
-    if (
-      parentComponentName !== 'q-tabs' &&
-      process.env.NODE_ENV !== 'production'
-    ) {
-      console.error('QTabPane: component parent must be q-tabs');
-    }
-  },
-
   methods: {
     handleTabClick() {
-      this.$parent.updateValue(this.name);
+      this.qTabs?.updateValue(this.name);
     }
   }
 };

diff --git a/src/qComponents/QTabPane/src/q-tab-pane.scss b/src/qComponents/QTabPane/src/q-tab-pane.scss
@@ -1,13 +1,17 @@
 .q-tab-pane {
-  margin-right: 8px;
+  --tab-pane-width: 200px;
+
+  &:not(:last-child) {
+    margin-right: 8px;
+  }
 
   &__inner {
     display: flex;
     align-items: center;
   }
 
   &__btn {
-    width: 200px;
+    width: var(--tab-pane-width);
     padding: 11px 0;
     font-weight: var(--font-weight-base);
     font-size: var(--font-size-base);
@@ -28,10 +32,11 @@
     }
 
     &:focus {
-      color: var(--color-primary-blue);
+      color: var(--color-primary-black);
+      background-color: var(--color-tertiary-gray-dark);
+      outline: none;
     }
 
-    &:active,
     &_active {
       color: var(--color-primary-black);
       background-color: var(--color-tertiary-gray-ultra-light);
@@ -58,9 +63,9 @@
   }
 
   &__description {
-    width: 200px;
+    width: var(--tab-pane-width);
     margin-top: 8px;
-    font-weight: 500;
+    font-weight: var(--font-weight-base);
     font-size: 10px;
     line-height: 12px;
     color: rgba(var(--color-rgb-gray), 0.32);

diff --git a/src/qComponents/QTabs/QTabs.test.js b/src/qComponents/QTabs/QTabs.test.js
@@ -0,0 +1,13 @@
+import Component from './src/QTabs';
+
+describe('QTabs', () => {
+  it('should match snapshot', () => {
+    const instance = shallowMount(Component);
+
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});
diff --git a/src/qComponents/QTabs/__snapshots__/QTabs.test.js.snap b/src/qComponents/QTabs/__snapshots__/QTabs.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QTabs data should match snapshot 1`] = `
+Object {
+  "currentName": "",
+}
+`;
+
+exports[`QTabs should match snapshot 1`] = `
+<div
+  class="q-tabs"
+/>
+`;
diff --git a/src/qComponents/QTabs/index.js b/src/qComponents/QTabs/index.js
@@ -1,6 +1,6 @@
-import QTabs from './src/QTabs.vue';
+import QTabs from './src/QTabs';
 
-QTabs.install = function(Vue) {
+QTabs.install = Vue => {
   Vue.component(QTabs.name, QTabs);
 };
 

diff --git a/src/qComponents/QTabs/src/QTabs.vue b/src/qComponents/QTabs/src/QTabs.vue
@@ -14,20 +14,26 @@ export default {
     event: 'change'
   },
 
+  provide() {
+    return {
+      qTabs: this
+    };
+  },
+
   props: {
     /**
-     * width of Tab panes
+     * width of QTabPanes
      */
     tabWidth: {
       type: [String, Number],
-      default: ''
+      default: null
     },
     value: {
       type: String,
-      default: ''
+      default: null
     },
     /**
-     * whether Tab is disabled
+     * whether QTabs is disabled
      */
     disabled: {
       type: Boolean,

diff --git a/src/qComponents/QTextarea/src/calcTextareaHeight.js b/src/qComponents/QTextarea/src/calcTextareaHeight.js
@@ -58,7 +58,7 @@ export default function calcTextareaHeight(
     document.body.appendChild(hiddenTextarea);
   }
 
-  let {
+  const {
     paddingSize,
     borderSize,
     boxSizing,
@@ -72,13 +72,13 @@ export default function calcTextareaHeight(
   const result = {};
 
   if (boxSizing === 'border-box') {
-    height = height + borderSize;
+    height += borderSize;
   } else if (boxSizing === 'content-box') {
-    height = height - paddingSize;
+    height -= paddingSize;
   }
 
   hiddenTextarea.value = '';
-  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
 
   if (minRows !== null) {
     let minHeight = singleRowHeight * minRows;