@gitlab/ui 41.5.0 → 41.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.5.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.16.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/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;
 }

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/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