@gitlab/ui 43.2.2 → 43.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.2.2",
+  "version": "43.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -65,7 +65,7 @@
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
-    "@gitlab/svgs": "^1.116.0 || ^2.0.0",
+    "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
     "bootstrap": "4.5.3",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.18.10",
     "@gitlab/eslint-plugin": "15.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.33.0",
+    "@gitlab/svgs": "3.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -106,10 +106,10 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.20.0",
+    "eslint": "8.21.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.1",
+    "eslint-plugin-storybook": "0.6.3",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

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

@@ -27,6 +27,7 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
         :action-cancel="{text: 'Cancel'}"
         :visible="$options.viewMode !== 'docs'"
         :scrollable="scrollable"
+        :no-focus-on-show="noFocusOnShow"
         modal-id="test-modal-id"
         title="Example title"
         no-fade
@@ -54,6 +55,7 @@ const generateProps = ({
   variant = variantOptionsWithNoDefault.default,
   contentPagraphs = 1,
   scrollable = false,
+  noFocusOnShow = false,
 } = {}) => ({
   headerBgVariant: variant,
   headerBorderVariant: variant,
@@ -65,6 +67,7 @@ const generateProps = ({
   footerTextVariant: variant,
   contentParagraphs: contentPagraphs,
   scrollable,
+  noFocusOnShow,
 });
 
 export const Default = Template.bind({});
@@ -100,6 +103,11 @@ export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
 });
 WithoutAFooter.args = generateProps();
 
+export const WithoutFocus = Template.bind({});
+WithoutFocus.args = generateProps({
+  noFocusOnShow: true,
+});
+
 export default {
   title: 'base/modal',
   component: GlModal,

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

@@ -85,6 +85,11 @@ export default {
       required: false,
       default: '',
     },
+    noFocusOnShow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     shouldRenderModalOk() {
@@ -151,6 +156,8 @@ export default {
       return prop.attributes;
     },
     setFocus() {
+      if (this.noFocusOnShow) return;
+
       const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
       const modalElts = [
         ...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA)),
@@ -171,10 +178,10 @@ export default {
 </script>
 
 <template>
-  <!-- 
+  <!--
   Emitted when the modal visibility changes
   @event change
- -->
+  -->
   <b-modal
     :id="modalId"
     ref="modal"
@@ -217,7 +224,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-cancel
         @event canceled
-       -->
+        -->
         <gl-button
           v-if="actionCancel"
           class="js-modal-action-cancel"
@@ -229,7 +236,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-secondary
         @event secondary
-       -->
+        -->
         <gl-button
           v-if="actionSecondary"
           class="js-modal-action-secondary"
@@ -241,7 +248,7 @@ export default {
         <!--
         Emitted when clicked on modal-action-primary
         @event primary
-       -->
+        -->
         <gl-button
           v-if="actionPrimary"
           class="js-modal-action-primary"

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

@@ -31,7 +31,7 @@ export const Default = (_args, { argTypes }) => ({
         <gl-nav-item-dropdown text="Dropdown">
           <template #button-content>
             <gl-icon name="question" />
-            <gl-icon name="angle-down" />
+            <gl-icon name="chevron-down" />
           </template>
           <gl-dropdown-item>One</gl-dropdown-item>
           <gl-dropdown-item>Two</gl-dropdown-item>

package/src/scss/functions.scss

@@ -57,5 +57,8 @@
   $slope: ($max - $min) / ($max-width - $min-width);
   $intersection: (-$min-width * $slope) + $min;
 
-  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
+  // Use calc() inside of clamp() function to work around SassC
+  // compilation failure.
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2972
+  @return clamp(#{$min}, calc(#{$intersection} + #{$slope * 100vw}), #{$max});
 }

package/src/scss/mixins.spec.scss

@@ -10,7 +10,7 @@
       }
       @include expect {
         // prettier-ignore
-        font-size: clamp(2rem, #{-0.66667rem} + #{5.55556vw}, 3.5rem);
+        font-size: clamp(2rem, calc(#{-0.66667rem} + #{5.55556vw}), 3.5rem);
       }
     }
   }
@@ -24,7 +24,7 @@
       }
       @include expect {
         // prettier-ignore
-        line-height: clamp(2rem, #{-0.66667rem} + #{5.55556vw}, 3.5rem);
+        line-height: clamp(2rem, calc(#{-0.66667rem} + #{5.55556vw}), 3.5rem);
       }
     }
   }

package/src/scss/utilities.scss

@@ -3778,6 +3778,14 @@
   overflow-wrap: anywhere !important
 }
 
+.gl-overflow-x-scroll {
+  overflow-x: scroll
+}
+
+.gl-overflow-x-scroll\! {
+  overflow-x: scroll !important
+}
+
 .gl-overflow-scroll {
   overflow: scroll
 }
@@ -7478,9 +7486,27 @@
 .gl-text-decoration-underline {
   text-decoration: underline;
 }
+.gl-active-text-decoration-underline:active {
+  text-decoration: underline;
+}
+.gl-focus-text-decoration-underline:focus {
+  text-decoration: underline;
+}
+.gl-hover-text-decoration-underline:hover {
+  text-decoration: underline;
+}
 .gl-text-decoration-underline\! {
   text-decoration: underline !important;
 }
+.gl-active-text-decoration-underline\!:active {
+  text-decoration: underline !important;
+}
+.gl-focus-text-decoration-underline\!:focus {
+  text-decoration: underline !important;
+}
+.gl-hover-text-decoration-underline\!:hover {
+  text-decoration: underline !important;
+}
 .gl-reset-text-decoration-color {
   text-decoration-color: inherit;
 }

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

@@ -28,6 +28,10 @@
   overflow-wrap: anywhere;
 }
 
+@mixin gl-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
 @mixin gl-overflow-scroll {
   overflow: scroll;
 }

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

@@ -26,7 +26,7 @@
   text-decoration: none;
 }
 
-@mixin gl-text-decoration-underline {
+@mixin gl-text-decoration-underline($active: true, $focus: true, $hover: true) {
   text-decoration: underline;
 }