@gitlab/ui 39.2.0 → 39.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.2.0",
+  "version": "39.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,8 +17,7 @@
   "files": [
     "src",
     "dist",
-    "scss_to_js",
-    "documentation"
+    "scss_to_js"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -56,17 +55,12 @@
     "generate:component": "plop"
   },
   "dependencies": {
-    "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
-    "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.6",
     "echarts": "^5.2.1",
-    "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
-    "js-beautify": "^1.8.8",
     "lodash": "^4.17.20",
     "portal-vue": "^2.1.6",
-    "url-search-params-polyfill": "^5.0.0",
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
@@ -114,7 +108,7 @@
     "eslint": "7.32.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.5.7",
+    "eslint-plugin-storybook": "0.5.11",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -132,7 +126,6 @@
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
-    "pug": "^2.0.3",
     "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
@@ -149,10 +142,10 @@
     "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
-    "vue": "^2.6.11",
+    "vue": "2.6.11",
     "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "2.6.11"
   },
   "release": {
     "branches": [

package/scss_to_js/scss_variables.js

@@ -291,8 +291,12 @@ export const glBorderRadius7 = '2rem'
 export const glBorderRadiusFull = '50%'
 export const glTransitionDurationSlow = '0.4s'
 export const glTransitionDurationMedium = '0.2s'
-export const focusRing = '0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48)'
-export const focusRingInset = 'inset 0 0 0 3px rgba(31, 117, 203, 0.48), inset 0 0 0 4px rgba(255, 255, 255, 0.4)'
+export const outlineOffset = '1px'
+export const outlineWidth = '2px'
+export const focusRing = '0 0 0 1px #fff, 0 0 0 3px #428fdc'
+export const focusRingInset = 'inset 0 0 0 3px #fff, inset 0 0 0 1px #fff'
+export const focusRingDark = '0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9'
+export const focusRingOutline = '2px solid #428fdc'
 export const toastMaxWidth = '36.625rem'
 export const toastPaddingRight = '2.625rem'
 export const toastBackgroundColor = '#303030'

package/scss_to_js/scss_variables.json

@@ -1516,15 +1516,35 @@
       "value": "0.2s",
       "compiledValue": "0.2s"
     },
+    {
+      "name": "$outline-offset",
+      "value": "1px",
+      "compiledValue": "1px"
+    },
+    {
+      "name": "$outline-width",
+      "value": "2px",
+      "compiledValue": "2px"
+    },
     {
       "name": "$focus-ring",
-      "value": "0 0 0 $gl-border-size-1 rgba($white, 0.4), 0 0 0 $gl-border-size-4 rgba($blue-500, 0.48)",
-      "compiledValue": "0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48)"
+      "value": "0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400",
+      "compiledValue": "0 0 0 1px #fff, 0 0 0 3px #428fdc"
     },
     {
       "name": "$focus-ring-inset",
-      "value": "inset 0 0 0 $gl-border-size-3 rgba($blue-500, 0.48), inset 0 0 0 $gl-border-size-4 rgba($white, 0.4)",
-      "compiledValue": "inset 0 0 0 3px rgba(31, 117, 203, 0.48), inset 0 0 0 4px rgba(255, 255, 255, 0.4)"
+      "value": "inset 0 0 0 #{$outline-width + $outline-offset} $white, inset 0 0 0 $outline-offset $white",
+      "compiledValue": "inset 0 0 0 3px #fff, inset 0 0 0 1px #fff"
+    },
+    {
+      "name": "$focus-ring-dark",
+      "value": "0 0 0 $outline-offset rgba($black, 0.6), 0 0 0 #{$outline-offset + $outline-width} $blue-300",
+      "compiledValue": "0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9"
+    },
+    {
+      "name": "$focus-ring-outline",
+      "value": "$outline-width solid $blue-400",
+      "compiledValue": "2px solid #428fdc"
     },
     {
       "name": "$toast-max-width",

package/src/components/base/avatar_link/avatar_link.scss

@@ -32,6 +32,7 @@
   &:focus:active {
     // allow the focus ring to be placed on the avatar image instead of parent anchor so that the focus ring takes the rounded shapes of the avatars
     box-shadow: none !important;
+    outline: none !important;
 
     .gl-avatar {
       @include gl-focus;

package/src/components/base/badge/badge.scss

@@ -36,7 +36,7 @@
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus($gl-border-size-1, $white-transparent);
+      @include gl-focus;
     }
   }
 }

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -68,7 +68,7 @@ $breadcrumb-max-width: $grid-size * 16;
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      @include gl-focus($outline: true);
     }
   }
 }

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

@@ -76,7 +76,7 @@
     }
 
     &:focus {
-      @include gl-focus($gl-border-size-2, $gray-400);
+      @include gl-focus($color: $gray-400);
       @include gl-bg-gray-50;
 
       .gl-icon {
@@ -86,7 +86,7 @@
 
     &:active,
     &.active {
-      @include gl-focus($gl-border-size-2, $gray-600);
+      @include gl-focus($color: $gray-600);
       @include gl-bg-gray-100;
 
       .gl-icon {
@@ -94,11 +94,11 @@
       }
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $gray-600);
+        @include gl-focus($color: $gray-600);
+      }
 
-        .gl-icon {
-          @include gl-text-gray-900;
-        }
+      &:focus .gl-icon {
+        @include gl-text-gray-900;
       }
     }
 
@@ -149,17 +149,17 @@
     }
 
     &:focus {
-      @include gl-focus($gl-border-size-2, $blue-800);
+      @include gl-focus($color: $blue-800);
       @include gl-bg-blue-600;
     }
 
     &:active,
     &.active {
-      @include gl-focus($gl-border-size-2, $blue-900);
+      @include gl-focus($color: $blue-900);
       @include gl-bg-blue-700;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $blue-900);
+        @include gl-focus($color: $blue-900);
       }
     }
   }
@@ -180,18 +180,18 @@
 
     &:focus {
       @include gl-text-blue-700;
-      @include gl-focus($gl-border-size-2, $blue-700);
+      @include gl-focus($color: $blue-700);
       @include gl-bg-blue-50;
     }
 
     &:active,
     &.active {
       @include gl-text-blue-900;
-      @include gl-focus($gl-border-size-2, $blue-900);
+      @include gl-focus($color: $blue-900);
       @include gl-bg-blue-100;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $blue-900);
+        @include gl-focus($color: $blue-900);
       }
     }
   }
@@ -205,17 +205,17 @@
     }
 
     &:focus {
-      @include gl-focus($gl-border-size-2, $green-800);
+      @include gl-focus($color: $green-800);
       @include gl-bg-green-600;
     }
 
     &:active,
     &.active {
-      @include gl-focus($gl-border-size-2, $green-900);
+      @include gl-focus($color: $green-900);
       @include gl-bg-green-700;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $green-900);
+        @include gl-focus($color: $green-900);
       }
     }
   }
@@ -234,18 +234,18 @@
 
     &:focus {
       @include gl-text-green-700;
-      @include gl-focus($gl-border-size-2, $green-700);
+      @include gl-focus($color: $green-700);
       @include gl-bg-green-50;
     }
 
     &:active,
     &.active {
       @include gl-text-green-900;
-      @include gl-focus($gl-border-size-2, $green-900);
+      @include gl-focus($color: $green-900);
       @include gl-bg-green-100;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $green-900);
+        @include gl-focus($color: $green-900);
       }
     }
   }
@@ -259,17 +259,17 @@
     }
 
     &:focus {
-      @include gl-focus($gl-border-size-2, $orange-800);
+      @include gl-focus($color: $orange-800);
       @include gl-bg-orange-600;
     }
 
     &:active,
     &.active {
-      @include gl-focus($gl-border-size-2, $orange-900);
+      @include gl-focus($color: $orange-900);
       @include gl-bg-orange-700;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $orange-900);
+        @include gl-focus($color: $orange-900);
       }
     }
   }
@@ -288,18 +288,18 @@
 
     &:focus {
       @include gl-text-orange-700;
-      @include gl-focus($gl-border-size-2, $orange-700);
+      @include gl-focus($color: $orange-700);
       @include gl-bg-orange-50;
     }
 
     &:active,
     &.active {
       @include gl-text-orange-900;
-      @include gl-focus($gl-border-size-2, $orange-900);
+      @include gl-focus($color: $orange-900);
       @include gl-bg-orange-100;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $orange-900);
+        @include gl-focus($color: $orange-900);
       }
     }
   }
@@ -313,17 +313,17 @@
     }
 
     &:focus {
-      @include gl-focus($gl-border-size-2, $red-800);
+      @include gl-focus($color: $red-800);
       @include gl-bg-red-600;
     }
 
     &:active,
     &.active {
-      @include gl-focus($gl-border-size-2, $red-900);
+      @include gl-focus($color: $red-900);
       @include gl-bg-red-700;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $red-900);
+        @include gl-focus($color: $red-900);
       }
     }
   }
@@ -342,18 +342,18 @@
 
     &:focus {
       @include gl-text-red-700;
-      @include gl-focus($gl-border-size-2, $red-700);
+      @include gl-focus($color: $red-700);
       @include gl-bg-red-50;
     }
 
     &:active,
     &.active {
       @include gl-text-red-900;
-      @include gl-focus($gl-border-size-2, $red-900);
+      @include gl-focus($color: $red-900);
       @include gl-bg-red-100;
 
       &:focus {
-        @include gl-focus($gl-border-size-2, $red-900);
+        @include gl-focus($color: $red-900);
       }
     }
   }
@@ -417,20 +417,20 @@
     }
 
     &:focus {
-      @include gl-focus($gl-border-size-1, $gray-400);
+      @include gl-focus($color: $gray-400);
       outline: 3px dotted $gray-50;
       outline-offset: (-$gl-border-size-1);
     }
 
     &:active,
     &.active {
-      @include gl-focus($gl-border-size-1, $gray-600);
+      @include gl-focus($color: $gray-600);
       outline: 3px dotted $gray-100;
       outline-offset: (-$gl-border-size-1);
       @include gl-bg-gray-100;
 
       &:focus {
-        @include gl-focus($gl-border-size-1, $gray-600);
+        @include gl-focus($color: $gray-600);
         outline: 3px dotted $gray-100;
         outline-offset: (-$gl-border-size-1);
       }
@@ -482,7 +482,7 @@
     @include gl-text-blue-500;
     @include gl-py-0;
     @include gl-px-0;
-    box-shadow: none;
+    @include gl-shadow-none;
 
     &:hover {
       @include gl-bg-transparent;

package/src/components/base/carousel/carousel.scss

@@ -0,0 +1,7 @@
+.carousel-control-prev,
+.carousel-control-next,
+.carousel-indicators li {
+  &:focus {
+    @include gl-focus;
+  }
+}

package/src/components/base/datepicker/datepicker.scss

@@ -38,6 +38,10 @@ $gl-datepicker-width: $grid-size * 30;
   @include gl-align-items-center;
   @include gl-pointer-events-none;
   @include gl-px-2;
+
+  .gl-button.gl-button {
+    border-radius: 0.0075rem;
+  }
 }
 
 .gl-datepicker-theme {

package/src/components/base/dropdown/dropdown.scss

@@ -121,6 +121,10 @@
 
     &.gl-button {
       @include gl-px-3;
+
+      &.btn-sm {
+        @include gl-px-2;
+      }
     }
   }
 
@@ -172,6 +176,10 @@
     .dropdown-icon {
       @include gl-mr-0;
     }
+
+    &.btn-sm .dropdown-chevron {
+      @include gl-mx-0;
+    }
   }
 
   .split-content-button {

package/src/components/base/dropdown/dropdown_item.scss

@@ -6,7 +6,6 @@
   @include gl-font-base;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
-  @include gl-overflow-hidden;
   @include gl-px-5;
   @include gl-py-0;
   @include gl-relative;

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -65,10 +65,10 @@
       }
     }
 
-    .custom-control-input:not(:disabled) ~ .custom-control-label:hover,
     .custom-control-input:not(:disabled):focus ~ .custom-control-label {
       &::before {
         @include gl-border-gray-500;
+        @include gl-focus;
       }
     }
 

package/src/components/base/form/form_input/form_input.scss

@@ -25,7 +25,7 @@
   }
 
   &:not(.form-control-plaintext):focus {
-    @include gl-focus($gl-border-size-1, $gray-900);
+    @include gl-focus($color: $gray-900);
     @include gl-text-gray-900;
   }
 
@@ -34,7 +34,7 @@
     background-image: none;
 
     &:focus {
-      @include gl-focus($gl-border-size-1, $red-500);
+      @include gl-focus($color: $red-500);
     }
   }
 

package/src/components/base/form/form_select/form_select.scss

@@ -25,7 +25,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-focus($gl-border-size-1, $gray-900, true);
+    @include gl-focus($color: $gray-900, $important: true);
   }
 
   &:disabled {
@@ -44,7 +44,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     @include gl-inset-border-1-red-400;
 
     &:focus {
-      @include gl-focus($gl-border-size-1, $red-500, true);
+      @include gl-focus($color: $red-500, $important: true);
     }
 
     &:hover {

package/src/components/base/label/label.scss

@@ -17,7 +17,7 @@ $label-close-button: '.gl-label-close.gl-button';
   }
 
   &:focus-within {
-    @include gl-focus($gl-border-size-2, var(--label-background-color), true);
+    @include gl-focus($color: var(--label-background-color), $important: true);
   }
 
   .gl-label-link {
@@ -33,6 +33,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:hover {
       @include gl-reset-color;
       @include gl-shadow-none;
+      @include gl-outline-none;
 
       .gl-label-text-scoped {
         @include gl-text-decoration-underline;

package/src/components/base/link/link.scss

@@ -14,6 +14,6 @@
   &:focus,
   &:focus:active {
     @include gl-text-decoration-underline;
-    @include gl-focus;
+    @include gl-focus($outline: true, $outline-offset: $outline-width);
   }
 }

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

@@ -27,6 +27,21 @@ export const DefaultLink = makeStory({
 });
 DefaultLink.args = generateProps();
 
+export const LongLink = makeStory({
+  components: { GlLink },
+  template: `
+    <gl-link
+      :href="href"
+      :target="target"
+    >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Quamquam tu hanc copiosiorem etiam soles dicere.
+    Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Claudii libidini, qui tum erat summo ne imperio, dederetur.
+    Si quicquam extra virtutem habeatur in bonis. Nunc omni virtuti vitium contrario nomine opponitur. Duo Reges: constructio interrete.
+    </gl-link>`,
+});
+LongLink.args = generateProps();
+
 export default {
   title: 'base/link',
   component: GlLink,

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

@@ -3,6 +3,7 @@ import { BModal } from 'bootstrap-vue';
 import { merge } from 'lodash';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import Button from '../button/button.vue';
+import { logWarning } from '../../../utils/utils';
 import Modal from './modal.vue';
 import { modalButtonDefaults } from '~/utils/constants';
 
@@ -21,6 +22,10 @@ const BModalStub = merge({}, BModal.options, {
   },
 });
 
+jest.mock('../../../utils/utils', () => ({
+  logWarning: jest.fn(),
+}));
+
 describe('Modal component', () => {
   let wrapperListeners;
   let wrapper;
@@ -217,6 +222,21 @@ describe('Modal component', () => {
     });
   });
 
+  describe('accessible name warning', () => {
+    it.each`
+      description                                            | title            | ariaLabel        | showWarning
+      ${'is logged when there is no title or ariaLabel'}     | ${undefined}     | ${undefined}     | ${true}
+      ${'is not logged when there is a title'}               | ${'modal title'} | ${undefined}     | ${false}
+      ${'is not logged when there is an ariaLabel'}          | ${undefined}     | ${'modal title'} | ${false}
+      ${'is not logged when there is a title and ariaLabel'} | ${'modal title'} | ${'modal title'} | ${false}
+    `('$description', ({ title, ariaLabel, showWarning }) => {
+      createComponent({ props: { title, ariaLabel } });
+
+      const calledTimes = showWarning ? 1 : 0;
+      expect(logWarning).toHaveBeenCalledTimes(calledTimes);
+    });
+  });
+
   it('it binds visible property to the BModal visible property', async () => {
     createComponent({ stubModal: false });
 

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

@@ -6,7 +6,7 @@ import {
   modalButtonDefaults,
   modalSizeOptions,
 } from '../../../utils/constants';
-import { focusFirstFocusableElement } from '../../../utils/utils';
+import { focusFirstFocusableElement, logWarning } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
 
@@ -79,6 +79,11 @@ export default {
       required: false,
       default: false,
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     shouldRenderModalOk() {
@@ -96,6 +101,13 @@ export default {
       );
     },
   },
+  mounted() {
+    if (!this.ariaLabel && !this.title) {
+      logWarning(
+        '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.'
+      );
+    }
+  },
   methods: {
     show() {
       this.$refs.modal.show();
@@ -165,6 +177,7 @@ export default {
     :title-tag="titleTag"
     :size="size"
     :visible="visible"
+    :aria-label="ariaLabel || title"
     v-bind="$attrs"
     lazy
     :modal-class="['gl-modal', modalClass]"

package/src/components/base/nav/nav.scss

@@ -0,0 +1,7 @@
+.nav {
+  &-link {
+    &:focus-visible {
+      @include gl-focus;
+    }
+  }
+}

package/src/components/base/pagination/pagination.scss

@@ -19,23 +19,25 @@
 
     &:not(.active):hover {
       @include gl-text-gray-900;
-      @include gl-tmp-button-hover($gray-400, $gray-50);
-      @include gl-z-index-0;
+      box-shadow: inset 0 0 0 1px $gray-400;
+      border-color: $gray-400;
+      background: $gray-50;
+      @include gl-z-index-1;
     }
 
     &:not(.active):focus {
-      @include gl-focus($gl-border-size-2, $gray-400);
       @include gl-bg-gray-50;
     }
 
     &:not(.active):active,
     &:not(.active).active {
-      @include gl-focus($gl-border-size-2, $gray-600);
       @include gl-bg-gray-100;
+    }
 
-      &:focus {
-        @include gl-focus($gl-border-size-2, $gray-600);
-      }
+    &:not(.active):focus,
+    &:not(.active):active,
+    &:not(.active).active {
+      @include gl-focus();
     }
   }
 
@@ -45,6 +47,11 @@
       @include gl-border-blue-600;
       @include gl-text-white;
       @include gl-z-index-2;
+      @include gl-shadow-none;
+
+      &:focus {
+        @include gl-focus();
+      }
     }
 
     &.disabled .page-link {