@gitlab/ui 42.0.0 → 42.2.0

package/dist/utils/constants.js

@@ -222,7 +222,8 @@ const keyboard = {
   right: 'Right',
   arrowRight: 'ArrowRight',
   home: 'Home',
-  end: 'End'
+  end: 'End',
+  tab: 'Tab'
 };
 const truncateOptions = POSITION;
 const formInputSizes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.0.0",
+  "version": "42.2.0",
   "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/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

@@ -256,6 +256,17 @@ describe('GlTokenContainer', () => {
         const expectedFocusedToken = findTokenByName(tokens[2].name);
         expect(expectedFocusedToken.element).toHaveFocus();
       });
+
+      it('emits the `cancel-focus` event when tab key is pressed', async () => {
+        createComponent({});
+
+        const focusedToken = findTokenByName(tokens[0].name);
+
+        await focusedToken.trigger('focus');
+        await focusedToken.trigger('keydown', { key: keyboard.tab });
+
+        expect(wrapper.emitted('cancel-focus')).toEqual([[]]);
+      });
     });
   });
 });

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

@@ -95,6 +95,9 @@ export default {
       this.focusedTokenIndex = null;
       this.$emit('cancel-focus');
     },
+    handleTab() {
+      this.$emit('cancel-focus');
+    },
     // Only called when a token is focused by a click/tap
     handleTokenFocus(index) {
       this.focusedTokenIndex = index;
@@ -132,7 +135,7 @@ export default {
     @keydown.end="handleEnd"
     @keydown.delete="handleDelete"
     @keydown.esc="handleEscape"
-    @keydown.prevent
+    @keydown.tab.prevent="handleTab"
   >
     <div
       v-for="(token, index) in tokens"

package/src/scss/utilities.scss

@@ -4687,6 +4687,30 @@
   }
 }
 
+.gl-lg-w-30p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 30%;
+  }
+}
+
+.gl-lg-w-30p\! {
+  @include gl-media-breakpoint-up(lg) {
+    width: 30% !important;
+  }
+}
+
+.gl-lg-w-40p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 40%;
+  }
+}
+
+.gl-lg-w-40p\! {
+  @include gl-media-breakpoint-up(lg) {
+    width: 40% !important;
+  }
+}
+
 .gl-lg-w-50p {
   @include gl-media-breakpoint-up(lg) {
     width: 50%;
@@ -6280,6 +6304,26 @@
   margin-right: $gl-spacing-scale-3 !important;
   }
 }
+.gl-lg-mr-10 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-10;
+  }
+}
+.gl-lg-mr-10\! {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-10 !important;
+  }
+}
+.gl-lg-mr-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-12;
+  }
+}
+.gl-lg-mr-12\! {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-12 !important;
+  }
+}
 .gl-lg-ml-2 {
   @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2;
@@ -6300,6 +6344,26 @@
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
+.gl-lg-ml-10 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-10;
+  }
+}
+.gl-lg-ml-10\! {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-10 !important;
+  }
+}
+.gl-lg-ml-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12;
+  }
+}
+.gl-lg-ml-12\! {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12 !important;
+  }
+}
 .gl-lg-mx-2 {
   @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2;
@@ -6324,6 +6388,18 @@
   margin-right: $gl-spacing-scale-3 !important;
   }
 }
+.gl-lg-mx-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12;
+    margin-right: $gl-spacing-scale-12;
+  }
+}
+.gl-lg-mx-12\! {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12 !important;
+    margin-right: $gl-spacing-scale-12 !important;
+  }
+}
 .gl-lg-my-5 {
   @include gl-media-breakpoint-up(lg) {
   margin-top: $gl-spacing-scale-5;

package/src/scss/utility-mixins/sizing.scss

@@ -276,6 +276,18 @@
   }
 }
 
+@mixin gl-lg-w-30p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 30%;
+  }
+}
+
+@mixin gl-lg-w-40p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 40%;
+  }
+}
+
 @mixin gl-lg-w-50p {
   @include gl-media-breakpoint-up(lg) {
     width: 50%;

package/src/scss/utility-mixins/spacing.scss

@@ -889,6 +889,18 @@
   }
 }
 
+@mixin gl-lg-mr-10 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-10;
+  }
+}
+
+@mixin gl-lg-mr-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-12;
+  }
+}
+
 @mixin gl-lg-ml-2 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-ml-2;
@@ -901,6 +913,18 @@
   }
 }
 
+@mixin gl-lg-ml-10 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-10;
+  }
+}
+
+@mixin gl-lg-ml-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12;
+  }
+}
+
 @mixin gl-lg-mx-2 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-mx-2;
@@ -913,6 +937,13 @@
   }
 }
 
+@mixin gl-lg-mx-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12;
+    margin-right: $gl-spacing-scale-12;
+  }
+}
+
 @mixin gl-lg-my-5 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-my-5;

package/src/utils/constants.js

@@ -264,6 +264,7 @@ export const keyboard = {
   arrowRight: 'ArrowRight',
   home: 'Home',
   end: 'End',
+  tab: 'Tab',
 };
 
 export const truncateOptions = POSITION;