@gitlab/ui 41.3.0 → 41.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.3.0",
+  "version": "41.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,19 +83,19 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.3.0",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.15.0",
+    "@gitlab/svgs": "2.18.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.6",
-    "@storybook/addon-docs": "6.5.6",
-    "@storybook/addon-essentials": "6.5.6",
+    "@storybook/addon-a11y": "6.5.8",
+    "@storybook/addon-docs": "6.5.8",
+    "@storybook/addon-essentials": "6.5.8",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.5.6",
-    "@storybook/addon-storyshots-puppeteer": "6.5.6",
-    "@storybook/addon-viewport": "6.5.6",
-    "@storybook/theming": "6.5.6",
-    "@storybook/vue": "6.5.6",
+    "@storybook/addon-storyshots": "6.5.8",
+    "@storybook/addon-storyshots-puppeteer": "6.5.8",
+    "@storybook/addon-viewport": "6.5.8",
+    "@storybook/theming": "6.5.8",
+    "@storybook/vue": "6.5.8",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -106,7 +106,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.16.0",
+    "eslint": "8.17.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.5.12",

package/scss_to_js/scss_variables.js

@@ -17,7 +17,9 @@ export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
 export const glSpacingScale26 = '13rem'
 export const glSpacingScale28 = '14rem'
+export const glSpacingScale34 = '17rem'
 export const glSpacingScale62 = '31rem'
+export const glSpacingScale80 = '40rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'
 export const breakpointLg = '992px'

package/scss_to_js/scss_variables.json

@@ -95,11 +95,21 @@
       "value": "28 * $grid-size",
       "compiledValue": "14rem"
     },
+    {
+      "name": "$gl-spacing-scale-34",
+      "value": "34 * $grid-size",
+      "compiledValue": "17rem"
+    },
     {
       "name": "$gl-spacing-scale-62",
       "value": "62 * $grid-size",
       "compiledValue": "31rem"
     },
+    {
+      "name": "$gl-spacing-scale-80",
+      "value": "80 * $grid-size",
+      "compiledValue": "40rem"
+    },
     {
       "name": "$breakpoint-sm",
       "value": "576px",

package/src/components/base/avatar_labeled/avatar_labeled.spec.js

@@ -49,6 +49,15 @@ describe('avatar labeled', () => {
     expect(wrapper.find('[data-testid="user-meta"]').exists()).toBe(true);
   });
 
+  it('displays `default` slot', () => {
+    buildWrapper(
+      { label, subLabel },
+      { default: '<span data-testid="default-slot">Foo Bar</span>' }
+    );
+
+    expect(wrapper.find('[data-testid="default-slot"]').exists()).toBe(true);
+  });
+
   describe('with label links', () => {
     beforeEach(() => {
       buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });

package/src/components/base/avatar_labeled/avatar_labeled.stories.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { GlAvatarLabeled, GlBadge } from '../../../index';
+import { GlAvatarLabeled, GlBadge, GlButton } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import avatarPath from '../../../../static/img/avatar.png';
@@ -90,6 +90,25 @@ export const WithBadges = (args, { argTypes }) => ({
 });
 WithBadges.args = generateProps();
 
+export const WithDefaultSlot = (args, { argTypes }) => ({
+  components: { GlAvatarLabeled, GlButton },
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar-labeled
+        :shape="shape"
+        :size="size"
+        :src="src"
+        :label="label"
+        :sub-label="subLabel"
+      >
+        <template>
+          <gl-button class="gl-mt-3 gl-align-self-start" size="small">Follow</gl-button>
+        </template>
+      </gl-avatar-labeled>
+    `,
+});
+WithDefaultSlot.args = generateProps({ size: 64 });
+
 export default {
   title: 'base/avatar/labeled',
   component: GlAvatarLabeled,

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -56,6 +56,8 @@ export default {
         <span class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
       </gl-link>
       <span v-else class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
+      <!-- @slot Add additional information below the avatar label. -->
+      <slot></slot>
     </div>
   </div>
 </template>

package/src/components/base/button/button.scss

@@ -60,7 +60,8 @@
     top: 1px;
   }
 
-  &.btn-default {
+  &.btn-default,
+  &.btn-dashed {
     @include gl-bg-white;
 
     &.btn-default-tertiary {

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -80,6 +80,7 @@ const generateProps = ({
   icon = '',
   multiple = defaultValue('multiple'),
   ariaLabelledby,
+  startOpened = true,
 } = {}) => ({
   items,
   category,
@@ -94,6 +95,7 @@ const generateProps = ({
   icon,
   multiple,
   ariaLabelledby,
+  startOpened,
 });
 
 function openListbox(component) {
@@ -136,7 +138,9 @@ export const Default = (args, { argTypes }) => ({
     };
   },
   mounted() {
-    openListbox(this);
+    if (this.startOpened) {
+      openListbox(this);
+    }
   },
   template: template('', `<span class="gl-my-0" id="listbox-label">Select a department</span>`),
 });
@@ -157,7 +161,9 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
     };
   },
   mounted() {
-    openListbox(this);
+    if (this.startOpened) {
+      openListbox(this);
+    }
   },
   methods: {
     selectItem(index) {
@@ -193,7 +199,9 @@ export const CustomListItem = (args, { argTypes }) => ({
     GlAvatar,
   },
   mounted() {
-    openListbox(this);
+    if (this.startOpened) {
+      openListbox(this);
+    }
   },
   computed: {
     headerText() {

package/src/scss/utilities.scss

@@ -4783,6 +4783,14 @@
   max-width: $gl-spacing-scale-26 !important;
 }
 
+.gl-max-w-34 {
+  max-width: $gl-spacing-scale-34;
+}
+
+.gl-max-w-34\! {
+  max-width: $gl-spacing-scale-34 !important;
+}
+
 .gl-max-w-62 {
   max-width: $gl-spacing-scale-62;
 }
@@ -4791,6 +4799,14 @@
   max-width: $gl-spacing-scale-62 !important;
 }
 
+.gl-max-w-80 {
+  max-width: $gl-spacing-scale-80;
+}
+
+.gl-max-w-80\! {
+  max-width: $gl-spacing-scale-80 !important;
+}
+
 .gl-max-w-none {
   max-width: none;
 }
@@ -5734,6 +5750,12 @@
 .gl-ml-3\! {
   margin-left: $gl-spacing-scale-3 !important;
 }
+.gl-ml-n3 {
+  margin-left: -$gl-spacing-scale-3;
+}
+.gl-ml-n3\! {
+  margin-left: -$gl-spacing-scale-3 !important;
+}
 .gl-ml-4 {
   margin-left: $gl-spacing-scale-4;
 }

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

@@ -341,10 +341,18 @@
   max-width: $gl-spacing-scale-26;
 }
 
+@mixin gl-max-w-34 {
+  max-width: $gl-spacing-scale-34;
+}
+
 @mixin gl-max-w-62 {
   max-width: $gl-spacing-scale-62;
 }
 
+@mixin gl-max-w-80 {
+  max-width: $gl-spacing-scale-80;
+}
+
 @mixin gl-max-w-none {
   max-width: none;
 }

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

@@ -552,6 +552,10 @@
   margin-left: $gl-spacing-scale-3;
 }
 
+@mixin gl-ml-n3 {
+  margin-left: -$gl-spacing-scale-3;
+}
+
 @mixin gl-ml-4 {
   margin-left: $gl-spacing-scale-4;
 }

package/src/scss/variables.scss

@@ -20,7 +20,9 @@ $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 $gl-spacing-scale-26: 26 * $grid-size;
 $gl-spacing-scale-28: 28 * $grid-size;
+$gl-spacing-scale-34: 34 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
+$gl-spacing-scale-80: 80 * $grid-size;
 
 // Responsive breakpoints