@gitlab/ui 89.0.0 → 89.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "89.0.0",
+  "version": "89.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/datepicker/datepicker.vue

@@ -369,7 +369,7 @@ export default {
 
 <template>
   <div :class="datepickerClasses">
-    <div v-if="showDefaultField" class="gl-align-items-start gl-flex gl-gap-3">
+    <div v-if="showDefaultField" class="gl-flex gl-items-start gl-gap-3">
       <div class="gl-relative gl-flex gl-grow">
         <!--
       @slot (optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`

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

@@ -102,17 +102,17 @@
     }
 
     .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
-      background-image: url('#{$gl-icon-check}');
+      background-color: var(--gl-control-indicator-color-selected);
       mask-image: url('#{$gl-icon-check}');
     }
 
     .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
-      background-image: url('#{$gl-icon-indeterminate}');
+      background-color: var(--gl-control-indicator-color-selected);
       mask-image: url('#{$gl-icon-indeterminate}');
     }
 
     .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
-      background-image: url('#{$gl-icon-radio}');
+      background-color: var(--gl-control-indicator-color-selected);
       mask-image: url('#{$gl-icon-radio}');
     }
 

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

@@ -11,46 +11,87 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
 .gl-form-select {
   @include gl-font-base;
   @include gl-font-regular;
-  @include gl-text-gray-900;
   @include gl-opacity-10;
   @include gl-line-height-normal;
   @include gl-py-3;
   @include gl-pl-4;
-  padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
   @include gl-h-auto;
-  @include gl-inset-border-1-gray-400;
-  @apply gl-border-none;
-  appearance: none;
   @include gl-text-truncate;
   @include gl-bg-no-repeat;
-  background-image: url($gl-icon-select-chevron-down);
+  @apply gl-border-none;
+  appearance: none;
+  background-color: var(--gl-control-background-color-default);
+  background-image: none;
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
+  color: var(--gl-text-color-default);
+  padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
+  position: relative;
 
   @media (forced-colors: active) {
     box-shadow: none;
     border: 1px solid;
   }
 
+  &:hover {
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
+  }
+
   &:focus,
   &:focus:active {
-    @include gl-focus($color: $gray-900, $important: true);
+    @include gl-focus($color: var(--gl-control-border-color-focus), $important: true);
   }
 
   &:disabled {
-    @include gl-bg-gray-10;
-    @include gl-inset-border-1-gray-100;
-    @include gl-text-gray-500;
     @include gl-cursor-not-allowed;
+    color: var(--gl-text-color-disabled);
+    background-color: var(--gl-control-background-color-disabled);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-disabled);
   }
 
   &.is-invalid:not(:disabled) {
-    @include gl-inset-border-1-red-400;
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-error);
+    
+    &:hover {
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-error);
+    }
 
     &:focus {
-      @include gl-focus($color: $red-500, $important: true);
+      @include gl-focus($color: var(--gl-control-border-color-error), $important: true);
     }
+  }
+}
 
-    &:hover {
-      @include gl-inset-border-1-red-500;
+// Chevron dropdown icon
+// References wrapping div because select can't have pseudo elements reliably
+.gl-form-select-wrapper {
+  position: relative;
+
+  &::after {
+    content: "";
+    background-color: var(--gl-icon-color-default);
+    mask-image: url('#{$gl-icon-select-chevron-down}');
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    right: $gl-spacing-scale-4;
+    transform: translateY(-50%);
+    height: 5px;
+    width: 8px;
+
+    @media (forced-colors: active) {
+      background-color: CanvasText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+    }
+  }
+
+  &:has(>.gl-form-select:disabled) {
+    &::after {
+      background-color: var(--gl-icon-color-disabled);
+
+      @media (forced-colors: active) {
+        background-color: GrayText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+      }
     }
   }
 }

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

@@ -47,10 +47,12 @@ export default {
 };
 </script>
 <template>
-  <b-form-select class="gl-form-select" v-bind="$attrs" :class="cssClasses" v-on="$listeners">
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <template v-for="slot in Object.keys($slots)" #[slot]>
-      <slot :name="slot"></slot>
-    </template>
-  </b-form-select>
+  <div class="gl-form-select-wrapper" :class="cssClasses">
+    <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
+      <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
+      <template v-for="slot in Object.keys($slots)" #[slot]>
+        <slot :name="slot"></slot>
+      </template>
+    </b-form-select>
+  </div>
 </template>

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

@@ -126,12 +126,12 @@
     top: $gl-spacing-scale-1;
     @include gl-transition-medium;
     @include gl-justify-content-center;
-    @include gl-p-1;
+    @include gl-p-2;
 
     > svg {
-      @include gl-w-5;
-      @include gl-h-5;
-      @include gl-fill-gray-400;
+      @include gl-w-4;
+      @include gl-h-4;
+      @include gl-fill-gray-600;
       @include gl-vertical-align-baseline;
     }
   }

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

@@ -105,7 +105,7 @@ export default {
       ];
     },
     icon() {
-      return this.value ? 'mobile-issue-close' : 'close';
+      return this.value ? 'check-xs' : 'close-xs';
     },
     helpId() {
       return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
@@ -184,7 +184,7 @@ export default {
     >
       <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
       <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
-        <gl-icon :name="icon" :size="16" />
+        <gl-icon :name="icon" :size="12" />
       </span>
     </button>
     <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">