@gitlab/ui 41.5.0 → 41.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.5.0",
+  "version": "41.7.1",
   "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/modal/modal.md

@@ -7,7 +7,11 @@ should serve a single purpose dedicated to completing the user’s task.
 You can use the `v-model` directive to control the modal’s visibility. The `v-model`
 directive interfaces with the `visible` property and the `@change` event.
 
-## Modal footer
+## Deprecation Warning
+
+We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
+`modal-footer` slot content is populated. This is in order to align this component with the design
+system.
 
 The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
 `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will

package/src/components/base/modal/modal.vue

@@ -86,6 +86,22 @@ export default {
       default: '',
     },
   },
+  computed: {
+    shouldRenderModalOk() {
+      return Boolean(this.$slots['modal-ok']);
+    },
+    shouldRenderModalCancel() {
+      return Boolean(this.$slots['modal-cancel']);
+    },
+    shouldRenderModalFooter() {
+      return Boolean(
+        this.actionCancel ||
+          this.actionSecondary ||
+          this.actionPrimary ||
+          this.$slots['modal-footer']
+      );
+    },
+  },
   mounted() {
     if (!this.ariaLabel && !this.title) {
       logWarning(
@@ -152,7 +168,7 @@ export default {
 </script>
 
 <template>
-  <!--
+  <!-- 
   Emitted when the modal visibility changes
   @event change
  -->
@@ -186,8 +202,14 @@ export default {
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
+    <template v-if="shouldRenderModalOk" #modal-ok>
+      <slot name="modal-ok"></slot>
+    </template>
+    <template v-if="shouldRenderModalCancel" #modal-cancel>
+      <slot name="modal-cancel"></slot>
+    </template>
     <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
-    <template #modal-footer>
+    <template v-if="shouldRenderModalFooter" #modal-footer>
       <slot name="modal-footer">
         <!--
         Emitted when clicked on modal-action-cancel

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

@@ -881,6 +881,14 @@
 .gl-bg-chevron-down\! {
   background-image: url($gl-icon-chevron-down) !important
 }
+
+.gl-backdrop-filter-blur-1 {
+  backdrop-filter: blur($gl-spacing-scale-1)
+}
+
+.gl-backdrop-filter-blur-1\! {
+  backdrop-filter: blur($gl-spacing-scale-1) !important
+}
 .gl-border {
   border: solid $gl-border-size-1 $border-color;
 }
@@ -4783,6 +4791,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 +4807,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/background.scss

@@ -397,3 +397,13 @@
 @mixin gl-bg-chevron-down {
   background-image: url($gl-icon-chevron-down);
 }
+
+/**
+* Backdrop filter utilities
+*
+* naming convention: gl-filter-{filter-type}-{filter-intensity}
+*/
+
+@mixin gl-backdrop-filter-blur-1 {
+  backdrop-filter: blur($gl-spacing-scale-1);
+}

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