@gitlab/ui 42.1.0 → 42.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.1.0",
+  "version": "42.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.3.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.20.0",
+    "@gitlab/svgs": "2.21.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/scss_to_js/scss_variables.js

@@ -89,7 +89,7 @@ export const purple700 = '#5943b6'
 export const purple800 = '#453894'
 export const purple900 = '#2f2a6b'
 export const purple950 = '#232150'
-export const gray10 = '#fafafa'
+export const gray10 = '#f5f5f5'
 export const gray50 = '#f0f0f0'
 export const gray100 = '#dbdbdb'
 export const gray200 = '#bfbfbf'
@@ -342,7 +342,7 @@ export const spacer = '0.5rem'
 export const spacers = '(1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2rem, 6: 2.5rem, 7: 3rem, 8: 3.5rem, 9: 4rem)'
 export const tableAccentBg = '#f0f0f0'
 export const cardBorderColor = '#dbdbdb'
-export const cardCapBg = '#fafafa'
+export const cardCapBg = '#f5f5f5'
 export const glFormInputSizes = '(xs: 5rem, sm: 10rem, md: 15rem, lg: 20rem, xl: 35rem)'
 export const popoverBg = '#fff'
 export const popoverArrowWidth = '0.5rem'

package/scss_to_js/scss_variables.json

@@ -484,8 +484,8 @@
     },
     {
       "name": "$gray-10",
-      "value": "#fafafa",
-      "compiledValue": "#fafafa"
+      "value": "#f5f5f5",
+      "compiledValue": "#f5f5f5"
     },
     {
       "name": "$gray-50",
@@ -1795,7 +1795,7 @@
     {
       "name": "$card-cap-bg",
       "value": "$gray-10",
-      "compiledValue": "#fafafa"
+      "compiledValue": "#f5f5f5"
     },
     {
       "name": "$gl-form-input-sizes",

package/src/components/base/accordion/accordion_item.spec.js

@@ -103,4 +103,19 @@ describe('GlAccordionItem', () => {
     expect(findButton().props('icon')).toBe('chevron-down');
     expect(findCollapse().props('visible')).toBe(true);
   });
+
+  it('emits the initial visible state', () => {
+    createComponent({ visible: true });
+
+    expect(wrapper.emitted('input')).toEqual([[true]]);
+  });
+
+  it('emits the visible state when toggled', async () => {
+    createComponent({ visible: true });
+
+    await waitForAnimationFrame();
+    await findButton().trigger('click');
+
+    expect(wrapper.emitted('input')).toEqual([[true], [false]]);
+  });
 });

package/src/components/base/accordion/accordion_item.vue

@@ -15,6 +15,10 @@ export default {
   },
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,
+  model: {
+    prop: 'visible',
+    event: 'input',
+  },
   props: {
     /*
     Used to set the title of accordion link
@@ -72,6 +76,14 @@ When set, it will ensure the accordion item is initially visible
       return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     },
   },
+  watch: {
+    isVisible: {
+      immediate: true,
+      handler(isVisible) {
+        this.$emit('input', isVisible);
+      },
+    },
+  },
 };
 </script>
 

package/src/components/base/token_selector/token_container.spec.js

@@ -257,7 +257,7 @@ describe('GlTokenContainer', () => {
         expect(expectedFocusedToken.element).toHaveFocus();
       });
 
-      it('emits the `cancel-focus` event when tab key is pressed', async () => {
+      it('emits the `cancel-focus` event when tab key is pressed without modifiers', async () => {
         createComponent({});
 
         const focusedToken = findTokenByName(tokens[0].name);
@@ -267,6 +267,17 @@ describe('GlTokenContainer', () => {
 
         expect(wrapper.emitted('cancel-focus')).toEqual([[]]);
       });
+
+      it('does not emit the `cancel-focus` event when tab key is pressed with modifiers', async () => {
+        createComponent({});
+
+        const focusedToken = findTokenByName(tokens[0].name);
+
+        await focusedToken.trigger('focus');
+        await focusedToken.trigger('keydown', { key: keyboard.tab, shiftKey: true });
+
+        expect(wrapper.emitted('cancel-focus')).toBeUndefined();
+      });
     });
   });
 });

package/src/components/base/token_selector/token_container.vue

@@ -135,7 +135,7 @@ export default {
     @keydown.end="handleEnd"
     @keydown.delete="handleDelete"
     @keydown.esc="handleEscape"
-    @keydown.tab.prevent="handleTab"
+    @keydown.tab.exact.prevent="handleTab"
   >
     <div
       v-for="(token, index) in tokens"

package/src/scss/variables.scss

@@ -136,7 +136,7 @@ Before        After (reflected below)
 * Passes 4.5:1 contrast ratio on $gray-10
 */
 
-$gray-10: #fafafa !default;
+$gray-10: #f5f5f5 !default;
 $gray-50: #f0f0f0 !default;
 $gray-100: #dbdbdb !default;
 $gray-200: #bfbfbf !default;