[QColorPicker] Add focus accessibility (#38)

*  Add focus accessibility to QColorPicker

src/qComponents/QButton/src/q-button.scss

@@ -63,18 +63,6 @@
     }
   }
 
-  &_size {
-    &_small {
-      &.q-button_type_icon {
-        width: 24px;
-        height: 24px;
-        padding: 0;
-        font-size: 16px;
-        line-height: 1;
-      }
-    }
-  }
-
   &_theme {
     &_secondary {
       color: var(--color-primary-blue);
@@ -97,6 +85,7 @@
     &_link {
       padding: 0;
       font-weight: var(--font-weight-base);
+      font-size: var(--font-size-base);
       color: var(--color-primary-blue);
       text-transform: initial;
       background-color: transparent;
@@ -116,6 +105,22 @@
     }
   }
 
+  &_size {
+    &_small {
+      &.q-button_type_icon {
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        font-size: 16px;
+        line-height: 1;
+      }
+
+      &.q-button_theme_link {
+        font-size: 12px;
+      }
+    }
+  }
+
   &_full-width {
     width: 100%;
   }

src/qComponents/QColorPicker/QColorAlphaSlider.test.js

@@ -0,0 +1,18 @@
+import Component from './src/QColorAlphaSlider';
+
+describe('QColorAlphaSlider', () => {
+  it('should match snapshot', async () => {
+    const instance = shallowMount(Component, {
+      propsData: {
+        color: 'rgba(255,155,155,.5)',
+        alpha: 55
+      }
+    });
+
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QColorPicker/QColorHueSlider.test.js

@@ -0,0 +1,17 @@
+import Component from './src/QColorHueSlider';
+
+describe('QColorHueSlider', () => {
+  it('should match snapshot', async () => {
+    const instance = shallowMount(Component, {
+      propsData: {
+        hue: 155
+      }
+    });
+
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QColorPicker/QColorPicker.test.js

@@ -0,0 +1,13 @@
+import Component from './src/QColorPicker';
+
+describe('QColorPicker', () => {
+  it('should match snapshot', async () => {
+    const instance = shallowMount(Component);
+
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QColorPicker/QColorSvpanel.test.js

@@ -0,0 +1,19 @@
+import Component from './src/QColorSvpanel';
+
+describe('QColorSvpanel', () => {
+  it('should match snapshot', async () => {
+    const instance = shallowMount(Component, {
+      propsData: {
+        hue: 100,
+        saturation: 50,
+        value: 25
+      }
+    });
+
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QColorPicker/QPickerDropdown.test.js

@@ -0,0 +1,13 @@
+import Component from './src/QPickerDropdown';
+
+describe('QPickerDropdown', () => {
+  it('should match snapshot', async () => {
+    const instance = shallowMount(Component);
+
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  it('data should match snapshot', () => {
+    expect(Component.data()).toMatchSnapshot();
+  });
+});

src/qComponents/QColorPicker/__snapshots__/QColorAlphaSlider.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QColorAlphaSlider data should match snapshot 1`] = `
+Object {
+  "thumbLeft": 0,
+}
+`;
+
+exports[`QColorAlphaSlider should match snapshot 1`] = `
+<div
+  class="q-color-alpha-slider"
+>
+  <div
+    class="q-color-alpha-slider__bar"
+  />
+   
+  <div
+    class="q-color-alpha-slider__thumb"
+    style="left: 0px;"
+  />
+</div>
+`;

src/qComponents/QColorPicker/__snapshots__/QColorHueSlider.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QColorHueSlider data should match snapshot 1`] = `
+Object {
+  "thumbTop": 0,
+}
+`;
+
+exports[`QColorHueSlider should match snapshot 1`] = `
+<div
+  class="q-color-hue-slider"
+>
+  <div
+    class="q-color-hue-slider__bar"
+  />
+   
+  <div
+    class="q-color-hue-slider__thumb"
+    style="top: 0px;"
+  />
+</div>
+`;

src/qComponents/QColorPicker/__snapshots__/QColorPicker.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QColorPicker data should match snapshot 1`] = `
+Object {
+  "isClickIgnored": false,
+  "isPickerShown": false,
+  "popperJS": null,
+  "zIndex": null,
+}
+`;
+
+exports[`QColorPicker should match snapshot 1`] = `
+<div
+  class="q-color-picker"
+>
+  <div
+    class="q-color-picker-trigger"
+  >
+    <button
+      class="q-color-picker-trigger__default"
+    >
+      <div
+        class="q-color-picker-trigger__color"
+      />
+       
+      <span
+        class="q-color-picker-trigger__icon q-icon-triangle-down"
+      />
+    </button>
+  </div>
+   
+  <q-picker-dropdown-stub
+    colorformat="hex"
+    isclearbtnshown="true"
+  />
+</div>
+`;

src/qComponents/QColorPicker/__snapshots__/QColorSvpanel.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QColorSvpanel data should match snapshot 1`] = `
+Object {
+  "cursorLeft": 0,
+  "cursorTop": 0,
+}
+`;
+
+exports[`QColorSvpanel should match snapshot 1`] = `
+<div
+  class="q-color-svpanel"
+  style="background-color: rgb(0, 0, 0);"
+>
+  <div
+    class="q-color-svpanel__cursor"
+    style="top: 0px; left: 0px;"
+  />
+</div>
+`;

src/qComponents/QColorPicker/__snapshots__/QPickerDropdown.test.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QPickerDropdown data should match snapshot 1`] = `
+Object {
+  "alpha": 100,
+  "elementToFocusAfterClosing": null,
+  "hue": 0,
+  "saturation": 100,
+  "tempColor": "",
+  "value": 100,
+}
+`;
+
+exports[`QPickerDropdown should match snapshot 1`] = `
+<transition-stub
+  name="fade"
+>
+  <div
+    class="q-picker-dropdown"
+    style="display: none;"
+    tabindex="-1"
+  >
+    <div
+      class="q-picker-dropdown__base"
+    >
+      <q-color-svpanel-stub
+        hue="0"
+        saturation="0"
+        value="0"
+      />
+       
+      <q-color-hue-slider-stub
+        hue="0"
+      />
+    </div>
+     
+    <!---->
+     
+    <div
+      class="q-picker-dropdown__footer"
+    >
+      <div
+        class="q-picker-dropdown__input"
+      >
+        <q-input-stub
+          autocomplete="off"
+          label=""
+          suffixicon=""
+          tabindex=""
+          type="text"
+          value="#000000"
+        />
+      </div>
+       
+      <!---->
+       
+      <q-button-stub
+        icon=""
+        nativetype="button"
+        size="medium"
+        theme="primary"
+        type="default"
+      >
+        
+        Применить
+      
+      </q-button-stub>
+    </div>
+  </div>
+</transition-stub>
+`;

src/qComponents/QColorPicker/index.js

@@ -1,6 +1,6 @@
-import QColorPicker from './src/QColorPicker.vue';
+import QColorPicker from './src/QColorPicker';
 
-QColorPicker.install = function(Vue) {
+QColorPicker.install = Vue => {
   Vue.component(QColorPicker.name, QColorPicker);
 };
 

src/qComponents/QColorPicker/src/QColorPicker.vue

@@ -29,16 +29,16 @@
       </button>
     </div>
 
-    <picker-dropdown
+    <q-picker-dropdown
       ref="dropdown"
-      v-click-outside="handleOutsideClick"
       :is-shown="isPickerShown"
       :is-clear-btn-shown="clearable"
       :color="value"
       :color-format="colorFormat"
       :alpha-shown="alphaShown"
       :style="{ zIndex }"
       @click.stop
+      @close="handleClose"
       @clear="handleClear"
       @pick="handlePick"
     />
@@ -51,14 +51,14 @@ import Color from 'color';
 
 import Emitter from '../../mixins/emitter';
 import PLACEMENTS from '../../constants/popperPlacements';
-import PickerDropdown from './QPickerDropdown';
+import QPickerDropdown from './QPickerDropdown';
 
 export default {
   name: 'QColorPicker',
   componentName: 'QColorPicker',
 
   components: {
-    PickerDropdown
+    QPickerDropdown
   },
 
   mixins: [Emitter],
@@ -198,7 +198,7 @@ export default {
   },
 
   methods: {
-    handleOutsideClick() {
+    handleClose() {
       if (this.isClickIgnored) {
         this.isClickIgnored = false;
         return;