@gitlab/ui 96.0.0 → 96.2.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@gitlab/ui",
-  "version": "96.0.0",
+  "version": "96.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "jsnext:main": "dist/index.js",
   "source": "src/index.js",
+  "vueSource": "src/index.js",
   "sideEffects": [
     "*.css",
     "*.scss"

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

@@ -406,7 +406,7 @@
     @if $feature-button-border {
       border-color: $green-600;
     } @else {
-      @include gl-inset-border-1-green-600;
+      box-shadow: inset 0 0 0 1px var(--green-600, #{$green-600});
     }
 
     &:hover {
@@ -457,7 +457,7 @@
     @if $feature-button-border {
       border-color: $green-500;
     } @else {
-      @include gl-inset-border-1-green-500;
+      box-shadow: inset 0 0 0 1px var(--green-500, #{$green-500});
     }
 
     &:hover {

package/src/components/base/markdown/markdown.scss

@@ -56,13 +56,13 @@
     }
 
     &.sm {
-      @include gl-font-size-markdown-sm;
+      font-size: $gl-font-size-markdown-sm;
       @apply gl-leading-20;
     }
   }
 
   .sm {
-    @include gl-font-size-markdown-sm;
+    font-size: $gl-font-size-markdown-sm;
     @apply gl-leading-20;
   }
 
@@ -77,7 +77,7 @@
     @apply gl-pl-6;
     @apply gl-my-3;
     @apply gl-mx-0;
-    @include gl-inset-border-l-4-gray-100;
+    box-shadow: inset $gl-border-size-4 0 0 0 $gray-100;
   }
 
   .idiff {
@@ -106,7 +106,7 @@
     @apply gl-rounded-base;
     @apply gl-py-3;
     @apply gl-px-4;
-    @include gl-inset-border-1-gray-100;
+    box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
     @apply gl-my-7;
     @apply gl-overflow-auto;
 
@@ -146,12 +146,14 @@
     td {
       @apply gl-px-3;
       @apply gl-py-4;
-      @include gl-inset-border-b-1-gray-100;
+      box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
       @apply gl-align-top;
     }
 
     th {
-      @include gl-inset-border-y-1-gray-100;
+      box-shadow:
+        inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+        inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
       @apply gl-font-bold;
     }
 

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

@@ -11,7 +11,7 @@
       border-color: var(--gl-border-color-strong);
     } @else {
       @apply gl-border-none;
-      @include gl-inset-border-1-gray-400;
+      @apply gl-shadow-inner-1-gray-400;
     }
   }
 
@@ -19,7 +19,7 @@
     @if $feature-button-border {
       border-color: var(--gl-border-color-strong);
     } @else {
-      @include gl-inset-border-1-gray-400;
+      @apply gl-shadow-inner-1-gray-400;
     }
   }
 

package/src/components/base/segmented_control/segmented_control.scss

@@ -3,17 +3,23 @@
  */
 
 @mixin gl-btn-gl-segmented-button-first {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset #{$gl-border-size-1} 0 0 0 $gray-200;
+  box-shadow:
+    inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200,
+    inset #{$gl-border-size-1} 0 0 0 $gray-200;
 }
 
 @mixin gl-btn-gl-segmented-button-last {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset -#{$gl-border-size-1} 0 0 0 $gray-200;
+  box-shadow:
+    inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200,
+    inset -#{$gl-border-size-1} 0 0 0 $gray-200;
 }
 
 @mixin gl-btn-gl-segmented-button-focus($color) {
-  box-shadow: $focus-ring, inset 0 0 0 $gl-border-size-2 $color;
+  box-shadow:
+    $focus-ring,
+    inset 0 0 0 $gl-border-size-2 $color;
 }
 
 .btn-group.gl-segmented-control {
@@ -33,13 +39,13 @@
       @apply gl-cursor-pointer;
     }
 
-  .btn-gl-segmented-button {
-    @apply gl-text-base;
-    @apply gl-leading-normal;
-    @apply gl-text-gray-900;
-    @apply gl-fill-current;
-    @apply gl-bg-gray-10;
-    border-color: $gray-200;
+    .btn-gl-segmented-button {
+      @apply gl-text-base;
+      @apply gl-leading-normal;
+      @apply gl-text-gray-900;
+      @apply gl-fill-current;
+      @apply gl-bg-gray-10;
+      border-color: $gray-200;
 
       &:not(:first-child) {
         border-left-color: transparent;
@@ -64,11 +70,11 @@
       &.active {
         @apply gl-z-2;
         border-color: $gray-400;
-        @include gl-inset-border-1-gray-400;
+        box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
         @apply gl-bg-white;
 
         &:hover {
-          @include gl-inset-border-1-gray-400;
+          box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
           @apply gl-bg-gray-50;
         }
 
@@ -80,9 +86,9 @@
         }
       }
 
-    &:focus-within {
-      @apply gl-focus;
-    }
+      &:focus-within {
+        @apply gl-focus;
+      }
 
       &.disabled,
       &[disabled],
@@ -115,7 +121,9 @@
       @apply gl-text-gray-900;
       @apply gl-fill-current;
       @apply gl-bg-gray-10;
-      @include gl-inset-border-y-1-gray-200;
+      box-shadow:
+        inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+        inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
 
       &:first-child {
         @include gl-btn-gl-segmented-button-first;
@@ -126,7 +134,7 @@
       }
 
       &:hover {
-        @include gl-inset-border-2-gray-400;
+        box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
         @apply gl-bg-gray-50;
       }
 
@@ -138,11 +146,11 @@
 
       &.active {
         @apply gl-z-2;
-        @include gl-inset-border-2-gray-300;
+        box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
         @apply gl-bg-white;
 
         &:hover {
-          @include gl-inset-border-2-gray-400;
+          box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
           @apply gl-bg-gray-50;
         }
 
@@ -162,7 +170,9 @@
       &.disabled:hover,
       &[disabled]:hover {
         @apply gl-text-gray-400;
-        @include gl-inset-border-y-1-gray-200;
+        box-shadow:
+          inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+          inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
         @apply gl-z-0;
         @apply gl-cursor-not-allowed;
 

package/src/components/base/toggle/toggle.scss

@@ -26,32 +26,6 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-leading-normal;
   @apply gl-font-normal;
   @apply gl-inline-flex;
-
-  &.is-disabled {
-    @apply gl-cursor-not-allowed;
-
-    .gl-toggle {
-      @apply gl-cursor-not-allowed;
-      @apply gl-bg-gray-200;
-
-      .toggle-icon > svg {
-        @apply gl-fill-gray-200;
-      }
-    }
-
-    .gl-toggle.is-checked {
-      @apply gl-bg-blue-200;
-
-      .toggle-icon > svg {
-        @apply gl-fill-blue-200;
-      }
-    }
-
-    .gl-toggle-label,
-    .gl-description-label {
-      @apply gl-text-gray-500;
-    }
-  }
 }
 
 .gl-description-label {
@@ -184,20 +158,20 @@ $toggle-height: 2.5 * $grid-size;
     }
 
     .toggle-icon {
-      transform: translateX($toggle-translate-width);
       background-color: var(--gl-action-strong-confirm-foreground-color-default);
+      transform: translateX($toggle-translate-width);
+    }
+  }
 
-      &:hover {
-        background-color: var(--gl-action-strong-confirm-foreground-color-hover);
-      }
-
-      &:focus {
-        background-color: var(--gl-action-strong-confirm-foreground-color-focus);
-      }
+  &.is-disabled,
+  &.is-checked.is-disabled {
+    @apply gl-cursor-not-allowed;
+    color: var(--gl-action-disabled-background-color);
+    background-color: var(--gl-action-disabled-background-color);
 
-      &:active {
-        background-color: var(--gl-action-strong-confirm-foreground-color-active);
-      }
+    .toggle-icon {
+      color: var(--gl-action-disabled-background-color);
+      background-color: var(--gl-action-disabled-foreground-color);
     }
   }
 }

package/src/components/base/toggle/toggle.vue

@@ -174,16 +174,15 @@ export default {
       :aria-describedby="helpId"
       :aria-disabled="disabled"
       :class="{
-        'gl-toggle': true,
         'is-checked': value,
-        'is-disabled': disabled,
+        'is-disabled': disabled || isLoading,
       }"
-      class="gl-shrink-0"
+      class="gl-toggle gl-shrink-0"
       type="button"
       @click.prevent="toggleFeature"
     >
-      <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
-      <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
+      <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
+      <span v-else class="toggle-icon">
         <gl-icon :name="icon" :size="12" />
       </span>
     </button>

package/src/scss/typescale/_index.scss

@@ -98,6 +98,6 @@
     @apply gl-pl-6;
     @apply gl-my-3;
     @apply gl-mx-0;
-    @include gl-inset-border-l-4-gray-100;
+    @apply gl-shadow-inner-l-4-gray-100;
   }
 }