@gitlab/ui 39.2.1 → 39.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.2.1",
+  "version": "39.3.2",
   "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": {
@@ -88,7 +82,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.10.0",
+    "@gitlab/svgs": "2.11.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -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

@@ -27,6 +27,7 @@ export const limitedLayoutWidth = '990px'
 export const black = '#000'
 export const blackNormal = '#333'
 export const white = '#fff'
+export const whiteContrast = '#fff'
 export const whiteNormal = '#f0f0f0'
 export const whiteDark = '#eaeaea'
 export const whiteTransparent = 'rgba(255, 255, 255, 0.8)'
@@ -291,8 +292,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

@@ -172,6 +172,11 @@
       "value": "#fff",
       "compiledValue": "#fff"
     },
+    {
+      "name": "$white-contrast",
+      "value": "#fff",
+      "compiledValue": "#fff"
+    },
     {
       "name": "$white-normal",
       "value": "#f0f0f0",
@@ -1516,15 +1521,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_labeled/avatar_labeled.stories.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlAvatarLabeled, GlBadge } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
@@ -13,7 +14,7 @@ const generateProps = ({
   subLabel = '@gitlab',
   size = 32,
   shape = 'circle',
-  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+  src = avatarPath,
 } = {}) => ({
   label,
   subLabel,

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/avatar_link/avatar_link.stories.js

@@ -1,5 +1,6 @@
 import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../index';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './avatar_link.md';
 
 const components = { GlAvatarLink, GlAvatar, GlAvatarLabeled };
@@ -19,9 +20,7 @@ const generateLabelsProps = ({ label = 'GitLab User', subLabel = '@gitlab' } = {
   subLabel,
 });
 
-const generateImageProps = ({
-  src = 'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
-} = {}) => ({
+const generateImageProps = ({ src = avatarPath } = {}) => ({
   src,
 });
 

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.md

@@ -18,7 +18,7 @@ to draw a `/`
     <img 
       alt=""
       class="gl-breadcrumb-avatar-tile"
-      src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+      src="/path/to/image.png"
       width="16"
       height="16"
     />

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/breadcrumb/breadcrumb.stories.js

@@ -1,4 +1,5 @@
 import { GlBreadcrumb } from '../../../index';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './breadcrumb.md';
 
 const template = `
@@ -7,7 +8,7 @@ const template = `
     >
       <template #avatar>
         <img alt=""
-            class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+            class="gl-breadcrumb-avatar-tile" src="${avatarPath}"
             width="16"
             height="16" />
       </template>

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -1,5 +1,5 @@
 .gl-broadcast-message {
-  @include gl-text-white;
+  @include gl-text-contrast-light;
   @include gl-display-flex;
   @include gl-justify-content-space-between;
   @include gl-align-items-flex-start;

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;
       }
     }
 
@@ -136,7 +136,7 @@
   &.btn-success,
   &.btn-danger,
   &.btn-warning {
-    @include gl-text-white;
+    @include gl-text-contrast-light;
   }
 
   &.btn-confirm,
@@ -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_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 });