@gitlab/ui 39.1.0 → 39.3.0

package/src/components/base/path/path.scss

@@ -6,7 +6,8 @@ $path-chevron-dimension: px-to-rem(24px);
 $path-chevron-border-radius: px-to-rem(10px);
 $path-chevron-tip-border-radius: px-to-rem(2px);
 $path-button-right-padding: 1.25 * $grid-size;
-$path-chevron-drop-shadow: drop-shadow(0 0 px-to-rem(1px) $blue-500);
+$path-chevron-drop-shadow: drop-shadow(0 0 px-to-rem(1px) $white)
+  drop-shadow(0 0 px-to-rem(2px) $blue-500);
 $path-chevron-transformation: rotate(45deg) skew(14deg, 14deg);
 $path-chevron-right-margin: px-to-rem(14px);
 
@@ -46,14 +47,17 @@ $path-chevron-right-margin: px-to-rem(14px);
     @include gl-list-style-none;
     @include gl-display-inline-flex;
     @include gl-overflow-hidden;
+    margin-left: -1px;
   }
 
   .gl-path-nav-list-item {
-    @include gl-overflow-hidden;
     @include gl-min-w-fit-content;
+    padding-top: 1px;
+    padding-bottom: 1px;
 
-    &:focus-within {
-      filter: $path-chevron-drop-shadow;
+    // Fix for custom focus
+    &:first-of-type {
+      padding-left: 1px;
     }
   }
 
@@ -74,10 +78,21 @@ $path-chevron-right-margin: px-to-rem(14px);
     padding-right: $path-button-right-padding;
     margin-right: $path-chevron-right-margin;
 
+    &::before,
     &::after {
       @include gl-path-chevron;
     }
 
+    // Pseudo focus element
+    &::before {
+      display: none;
+      z-index: 2;
+      right: calc(-0.75rem + 1px);
+      box-shadow: 0 0 0 1px $white, 0.5px -0.5px 0 2.5px $blue-400;
+      clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%);
+      transform: rotate(45deg) skew(14deg, 14deg) scale(0.99);
+    }
+
     &[disabled] {
       @include gl-text-gray-400;
       @include gl-cursor-not-allowed;
@@ -91,7 +106,16 @@ $path-chevron-right-margin: px-to-rem(14px);
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      // Custom focus
+      border-top-right-radius: 1px;
+      border-bottom-right-radius: 1px;
+      box-shadow: 5px -3px 0 -2px $white, 5px 3px 0 -2px $white, 0 0 0 1px $white,
+        0 0 0 3px $blue-400;
+      outline: none;
+
+      &::before {
+        display: block;
+      }
     }
   }
 

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -21,7 +21,7 @@
     .gl-search-box-by-click-close-history-button {
       @include gl-absolute;
       @include gl-top-0;
-      @include gl-right-0;
+      @include gl-right-2;
       @include gl-line-height-0;
       @include gl-shadow-none;
       @include gl-w-auto;

package/src/components/base/table/table.scss

@@ -22,6 +22,12 @@ table.gl-table {
     td {
       @include gl-text-gray-700;
     }
+
+    &:focus-visible {
+      @include gl-focus;
+      position: relative;
+      z-index: 1;
+    }
   }
 
   .table-primary,

package/src/components/base/token/token.scss

@@ -41,4 +41,10 @@
   @include gl-mx-2;
   @include gl-reset-color;
   @include gl-cursor-pointer;
+  background-color: transparent !important;
+
+  &:focus,
+  &:hover:focus {
+    @include gl-focus($color: rgba($black, 0.5), $inset: true, $important: true);
+  }
 }

package/src/components/base/token_selector/token_selector.scss

@@ -1,10 +1,10 @@
 // This is overridden in the `gitlab-org/gitlab` codebase so we need to increase specificity using `gl-token-selector`
 .gl-token-selector {
   &.gl-token-selector-focus-glow {
-    @include gl-focus($gl-border-size-1, $gray-900, true);
+    @include gl-focus($color: $gray-900, $important: true);
 
     &.is-invalid {
-      @include gl-focus($gl-border-size-1, $red-500, true);
+      @include gl-focus($color: $red-500, $important: true);
     }
   }
 }

package/src/components/shared_components/close_button/close_button.scss

@@ -1,21 +1,21 @@
 .gl-close-btn-color-inherit {
-  color: inherit !important;
   mix-blend-mode: luminosity !important;
 
-  &:hover {
-    background-color: $gray-300 !important;
-  }
-
-  &:focus {
-    background-color: $gray-400 !important;
+  &,
+  &:focus .gl-icon,
+  &:not(:hover) .gl-icon {
+    color: inherit !important;
   }
 
+  &:focus,
   &:active,
   &.active {
-    background-color: $gray-400 !important;
-  }
+    mix-blend-mode: initial !important;
+    @include gl-focus($important: true, $focus-ring: $focus-ring-dark);
 
-  .gl-icon {
-    color: inherit !important;
+    .gl-icon {
+      background-color: transparent;
+      mix-blend-mode: difference;
+    }
   }
 }

package/src/scss/components.scss

@@ -17,9 +17,10 @@
 @import '../components/base/avatars_inline/avatars_inline';
 @import '../components/base/badge/badge';
 @import '../components/base/breadcrumb/breadcrumb';
-@import '../components/base/datepicker/datepicker';
 @import '../components/base/banner/banner';
 @import '../components/base/broadcast_message/broadcast_message';
+@import '../components/base/carousel/carousel';
+@import '../components/base/datepicker/datepicker';
 @import '../components/base/daterange_picker/daterange_picker';
 @import '../components/base/drawer/drawer';
 @import '../components/base/dropdown/dropdown';
@@ -48,6 +49,7 @@
 @import '../components/base/loading_icon/loading_icon';
 @import '../components/base/markdown/markdown';
 @import '../components/base/modal/modal';
+@import '../components/base/nav/nav';
 @import '../components/base/navbar/navbar';
 @import '../components/base/button/button';
 @import '../components/base/pagination/pagination';

package/src/scss/mixins.scss

@@ -47,18 +47,40 @@
   }
 }
 
-@mixin gl-focus($size: null, $color: false, $important: false, $inset: false) {
+/**
+* Helper function for :focus
+*
+* @param $size is deprecated and should not be used anymore
+*/
+@mixin gl-focus(
+  $size: null,
+  $color: false,
+  $important: false,
+  $inset: false,
+  $focus-ring: $focus-ring,
+  $outline: false,
+  $outline-offset: $outline-offset
+) {
   @if $inset == true {
     @if $color {
-      box-shadow: inset 0 0 0 $size $color, $focus-ring-inset if-important($important);
+      box-shadow: inset 0 0 0 $outline-width $blue-400,
+        inset 0 0 0 #{$outline-width + $outline-offset} $white,
+        inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
+        $focus-ring-inset if-important($important);
       outline: none if-important($important);
+    } @else if $outline == true {
+      outline: $focus-ring-outline if-important($important);
+      outline-offset: $outline-offset;
     } @else {
-      box-shadow: $focus-ring-inset if-important($important);
+      box-shadow: inset 0 0 0 $outline-width $blue-400, $focus-ring-inset if-important($important);
       outline: none if-important($important);
     }
   } @else if $color {
-    box-shadow: inset 0 0 0 $size $color, $focus-ring if-important($important);
+    box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
     outline: none if-important($important);
+  } @else if $outline == true {
+    outline: $focus-ring-outline if-important($important);
+    outline-offset: $outline-offset;
   } @else {
     box-shadow: $focus-ring if-important($important);
     outline: none if-important($important);

package/src/scss/utilities.scss

@@ -3607,17 +3607,9 @@
   outline: none
 }
 
-.gl-focus-outline-none:focus {
-  outline: none
-}
-
 .gl-outline-none\! {
   outline: none !important
 }
-
-.gl-focus-outline-none\!:focus {
-  outline: none !important
-}
 .gl-overflow-hidden {
   overflow: hidden
 }

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

@@ -7,6 +7,6 @@
   outline: 0;
 }
 
-@mixin gl-outline-none($focus: true) {
+@mixin gl-outline-none {
   outline: none;
 }

package/src/scss/variables.scss

@@ -417,10 +417,14 @@ $gl-transition-duration-slow: 0.4s;
 $gl-transition-duration-medium: 0.2s;
 
 // Focus ring
-$focus-ring: 0 0 0 $gl-border-size-1 rgba($white, 0.4),
-  0 0 0 $gl-border-size-4 rgba($blue-500, 0.48);
-$focus-ring-inset: 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);
+$outline-offset: 1px;
+$outline-width: 2px;
+$focus-ring: 0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400;
+$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} $white,
+  inset 0 0 0 $outline-offset $white;
+$focus-ring-dark: 0 0 0 $outline-offset rgba($black, 0.6),
+  0 0 0 #{$outline-offset + $outline-width} $blue-300;
+$focus-ring-outline: $outline-width solid $blue-400;
 
 // Toasts
 $toast-max-width: px-to-rem(586px);