@gitlab/ui 39.1.0 → 39.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.1.0",
+  "version": "39.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -114,7 +114,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",

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/alert/alert.scss

@@ -8,6 +8,10 @@
     @include gl-pr-5;
   }
 
+  &-no-icon {
+    @include gl-pl-5;
+  }
+
   .gl-link:not(.gl-label-link) {
     @include gl-text-blue-600;
     @include gl-text-decoration-underline;

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

@@ -20,6 +20,7 @@ describe('Alert component', () => {
     });
   };
 
+  const findIcon = () => wrapper.find('.gl-alert-icon');
   const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
   const findTitle = () => wrapper.find('.gl-alert-title');
   const findBodyContainer = () => wrapper.find('.gl-alert-body');
@@ -31,6 +32,10 @@ describe('Alert component', () => {
       createComponent({ slots: { default: DummyComponent } });
     });
 
+    it('renders a variant icon', () => {
+      expect(findIcon().exists()).toBe(true);
+    });
+
     it('renders a dismiss button', () => {
       expect(findDismissButton().exists()).toBe(true);
     });
@@ -54,6 +59,12 @@ describe('Alert component', () => {
     });
   });
 
+  it('does not render a variant icon when showIcon = false', () => {
+    createComponent({ propsData: { showIcon: false } });
+
+    expect(findIcon().exists()).toBe(false);
+  });
+
   it('does not render a dismiss button when dismissible = false', () => {
     createComponent({ propsData: { dismissible: false } });
 

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

@@ -6,6 +6,7 @@ const template = `
   <gl-alert
     :title="title"
     :dismissible="dismissible"
+    :show-icon="showIcon"
     :dismiss-label="dismissLabel"
     :variant="variant"
     :primary-button-text="primaryButtonText"
@@ -21,6 +22,7 @@ const generateProps = ({
   title = defaultValue('title'),
   variant = defaultValue('variant'),
   dismissible = defaultValue('dismissible'),
+  showIcon = defaultValue('showIcon'),
   dismissLabel = defaultValue('dismissLabel'),
   primaryButtonText = defaultValue('primaryButtonText'),
   primaryButtonLink = defaultValue('primaryButtonLink'),
@@ -32,6 +34,7 @@ const generateProps = ({
   message: 'Lorem ipsum dolor sit amet',
   variant,
   dismissible,
+  showIcon,
   dismissLabel,
   primaryButtonText,
   primaryButtonLink,
@@ -92,6 +95,17 @@ TextLinks.parameters = {
   storyshots: { disable: true },
 };
 
+export const NoIcon = () => ({
+  components: { GlAlert },
+  template: `
+    <gl-alert :show-icon="false">
+      Lorem ipsum dolor sit amet
+    </gl-alert>`,
+});
+NoIcon.parameters = {
+  storyshots: { disable: true },
+};
+
 export const Variants = () => ({
   components: { GlAlert },
   variants: alertVariantOptions,

package/src/components/base/alert/alert.vue

@@ -28,6 +28,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Shows icon based on variant.
+     */
+    showIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     /**
      * Dismiss button's aria-label.
      */
@@ -165,10 +173,12 @@ export default {
       'gl-alert',
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
+      { 'gl-alert-no-icon': !showIcon },
       variantClass,
     ]"
   >
     <gl-icon
+      v-if="showIcon"
       :name="iconName"
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />

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