@gitlab/ui 80.7.1 → 80.8.0

package/package.json

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

package/src/components/base/alert/alert.scss

@@ -14,6 +14,10 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
   @include gl-py-5;
 
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
   &-not-dismissible {
     padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   }

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -24,7 +24,7 @@
   }
 
   &-sublabel {
-    @include gl-text-gray-500;
+    color: $gl-text-color-subtle;
     overflow-wrap: anywhere;
   }
 }

package/src/components/base/badge/badge.scss

@@ -72,6 +72,10 @@
   @include gl-py-2;
   @include gl-px-3;
 
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
   &.sm {
     @include gl-py-0;
   }

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

@@ -34,6 +34,10 @@
   @include gl-font-base;
   @include gl-rounded-base;
 
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
   .gl-button-text {
     @include gl-overflow-hidden;
     @include gl-text-overflow-ellipsis;
@@ -314,6 +318,20 @@
     }
   }
 
+  &.btn-default-secondary,
+  &.btn-dashed-secondary,
+  &.btn-confirm-secondary,
+  &.btn-info-secondary,
+  &.btn-success-secondary,
+  &.btn-danger-secondary,
+  &.btn-reset-secondary,
+  &.btn-reset-tertiary {
+    @media (forced-colors: active) {
+      color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+      border: 1px solid LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+    }
+  }
+
   &.btn-default,
   &.btn-dashed,
   &.btn-confirm,
@@ -324,6 +342,12 @@
       @include gl-shadow-none;
       mix-blend-mode: multiply;
 
+      @media (forced-colors: active) {
+        color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        mix-blend-mode: initial;
+        border: 0;
+      }
+
       &:hover {
         @include gl-shadow-none;
       }
@@ -336,6 +360,15 @@
     }
   }
 
+  &.btn-default-tertiary,
+  &.btn-confirm-tertiary,
+  &.btn-danger-tertiary {
+    @media (forced-colors: active) {
+      color: $black;
+      border: 0;
+    }
+  }
+
   &.btn-default-tertiary.selected {
     box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
   }

package/src/components/base/button/button.vue

@@ -87,16 +87,8 @@ export default {
     },
     buttonClasses() {
       const classes = ['gl-button'];
-      const nonCategoryVariants = [
-        buttonVariantOptions.dashed,
-        buttonVariantOptions.link,
-        buttonVariantOptions.reset,
-      ];
 
-      if (
-        !nonCategoryVariants.includes(this.variant) &&
-        this.category !== buttonCategoryOptions.primary
-      ) {
+      if (this.category !== buttonCategoryOptions.primary) {
         classes.push(`btn-${this.variant}-${this.category}`);
       }
 

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

@@ -81,6 +81,11 @@
       &::before {
         @include gl-bg-blue-500;
         @include gl-border-blue-500;
+
+        @media (forced-colors: active) {
+          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        }
       }
     }
 
@@ -115,6 +120,11 @@
       &::before {
         @include gl-bg-blue-700;
         @include gl-border-blue-700;
+
+        @media (forced-colors: active) {
+          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        }
       }
     }
 
@@ -122,12 +132,22 @@
       .custom-control-input:indeterminate ~ .custom-control-label::before {
         @include gl-bg-blue-500;
         @include gl-border-blue-500;
+
+        @media (forced-colors: active) {
+          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        }
       }
 
       .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
       .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
         @include gl-bg-blue-700;
         @include gl-border-blue-700;
+
+        @media (forced-colors: active) {
+          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        }
       }
     }
 
@@ -138,6 +158,10 @@
         @include gl-bg-gray-50;
         @include gl-border-gray-100;
         @include gl-pointer-events-auto;
+
+        @media (forced-colors: active) {
+          opacity: 0.5;
+        }
       }
     }
 
@@ -158,7 +182,7 @@
         */
         @media screen and (forced-colors: active) {
           forced-color-adjust: none;
-          /* system color reference for disabled text applied to 
+          /* system color reference for disabled text applied to
              background here.
           */
           // stylelint-disable-next-line

package/src/components/base/form/form_combobox/form_combobox.stories.js

@@ -57,7 +57,7 @@ export const WithObjectValue = (args, { argTypes }) => ({
     >
       <template #result="{ item }">
         <div class="gl-display-flex">
-          <div class="gl-text-gray-400 gl-mr-4">{{ item.id }}</div>
+          <div class="gl-text-subtle gl-mr-4">{{ item.id }}</div>
           <div>{{ item.title }}</div>
         </div>
       </template>

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

@@ -13,6 +13,10 @@
   @include form-control-focus($ignore-warning: true);
   appearance: none;
 
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
   &:disabled,
   &:not(.form-control-plaintext):not([type='color']):read-only {
     @include gl-bg-gray-10;

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

@@ -25,6 +25,11 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-bg-no-repeat;
   background-image: url($gl-icon-select-chevron-down);
 
+  @media (forced-colors: active) {
+    box-shadow: none;
+    border: 1px solid;
+  }
+
   &:focus,
   &:focus:active {
     @include gl-focus($color: $gray-900, $important: true);

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

@@ -78,7 +78,7 @@ export default {
       return this.remainingCharacterCount < 0;
     },
     characterCountTextClass() {
-      return this.isCharacterCountOverLimit ? 'gl-text-red-500' : 'gl-text-gray-500';
+      return this.isCharacterCountOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
     },
     showCharacterCount() {
       return this.characterCount !== null;
@@ -138,7 +138,7 @@ export default {
       @[keypressEvent].native="handleKeyPress"
     />
     <small :class="['form-text', characterCountTextClass]" aria-hidden="true">
-      <!-- 
+      <!--
       @slot Internationalized over character count text. Example: `<template #character-count-over-limit-text="{ count }">{{ n__('%d character over limit', '%d characters over limit', count) }}</template>`
       @binding {number} count
       -->
@@ -147,7 +147,7 @@ export default {
         name="character-count-over-limit-text"
         :count="Math.abs(remainingCharacterCount)"
       ></slot>
-      <!-- 
+      <!--
       @slot Internationalized character count text. Example: `<template #character-count-text="{ count }">{{ n__('%d character remaining', '%d characters remaining', count) }}</template>`
       @binding {number} count
       -->

package/src/components/base/label/label.scss

@@ -13,6 +13,10 @@ $label-close-button: '.gl-label-close.gl-button';
   @include gl-line-height-normal;
   box-shadow: var(--label-inset-border) !important;
 
+  @media (forced-colors: active) {
+    border: 1px solid; // stylelint-disable-line declaration-property-value-disallowed-list
+  }
+
   &:not(.gl-label-scoped) {
     background-color: var(--label-background-color);
   }
@@ -160,6 +164,10 @@ $label-close-button: '.gl-label-close.gl-button';
 
   .gl-label-text {
     background-color: var(--label-background-color);
+
+    @media (forced-colors: active) {
+      border-right: 1px solid;
+    }
   }
 
   .gl-label-text-scoped {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -201,7 +201,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <template #list-item>
             <span class="gl-display-flex gl-flex-direction-column">
               <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
-              <span class="gl-text-gray-600">@thefox</span>
+              <span class="gl-text-subtle">@thefox</span>
             </span>
           </template>
         </gl-disclosure-dropdown-item>

package/src/components/base/new_dropdowns/listbox/listbox.md

@@ -93,7 +93,7 @@ template. If you want to render a custom template for items, use the
       <gl-avatar :size="32" class-="gl-mr-3"/>
       <span class="gl-display-flex gl-flex-direction-column">
         <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
-        <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
+        <span class="gl-text-subtle"> {{ item.secondaryText }}</span>
       </span>
     </span>
   </template>

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -276,7 +276,7 @@ export const CustomListItem = (args, { argTypes }) => ({
                 <gl-avatar :size="32" :entity-name="item.value" class="gl-mr-3"/>
                   <span class="gl-display-flex gl-flex-direction-column">
                     <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
-                    <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
+                    <span class="gl-text-subtle"> {{ item.secondaryText }}</span>
                   </span>
               </span>
             </template>
@@ -325,7 +325,7 @@ export const CustomToggle = (args, { argTypes }) => ({
         <gl-avatar :size="32" :entity-name="item.value" class="gl-mr-3"/>
           <span class="gl-display-flex gl-flex-direction-column">
             <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
-            <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
+            <span class="gl-text-subtle"> {{ item.secondaryText }}</span>
           </span>
       </span>
     </template>

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -176,8 +176,9 @@ export default {
     class="gl-p-4 gl-mb-4 gl-rounded-lg gl-line-height-20 gl-word-break-word duo-chat-message"
     :class="{
       'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': isUserMessage,
-      'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
+      'gl-rounded-bottom-left-none gl-text-gray-900 gl-border-1 gl-border-solid gl-border-gray-50':
         isAssistantMessage,
+      'gl-bg-white': isAssistantMessage && !error,
       'gl-bg-red-50 gl-border-none!': error,
     }"
   >
@@ -190,7 +191,7 @@ export default {
       data-testid="error"
     />
     <div ref="content-wrapper" :class="{ 'has-error': error }">
-      <div v-if="error" ref="error-message" class="error-message">{{ error }}</div>
+      <div v-if="error" ref="error-message">{{ error }}</div>
       <div v-else>
         <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"></div>
 

package/src/internal/color_contrast/color_contrast.vue

@@ -29,7 +29,7 @@ export default {
       const failClasses = contrastScore
         ? 'gl-inset-border-1-red-300 gl-text-red-300'
         : 'gl-inset-border-1-red-500 gl-text-red-500';
-      return [textClass, isFail ? failClasses : ''];
+      return [isFail ? failClasses : textClass];
     },
     contrast() {
       return getColorContrast(this.foreground, this.background);

package/src/scss/mixins.scss

@@ -59,22 +59,34 @@
         inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
         $focus-ring-inset if-important($important);
       outline: none if-important($important);
+      @media (forced-colors: active) {
+        outline: 2px solid LinkText if-important($important);
+      }
     } @else if $outline == true {
       outline: $focus-ring-outline if-important($important);
       outline-offset: $outline-offset;
     } @else {
       box-shadow: inset 0 0 0 $outline-width $blue-400, $focus-ring-inset if-important($important);
       outline: none if-important($important);
+      @media (forced-colors: active) {
+        outline: 2px solid LinkText if-important($important);
+      }
     }
   } @else if $color {
     box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
     outline: none if-important($important);
+    @media (forced-colors: active) {
+      outline: 2px solid LinkText 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);
+    @media (forced-colors: active) {
+      outline: 2px solid LinkText if-important($important);
+    }
   }
 }
 

package/src/scss/storybook.scss

@@ -1,7 +1,5 @@
 @import 'tokens';
 
-@tailwind utilities;
-
 @import 'functions';
 @import 'variables';
 
@@ -15,6 +13,8 @@
 @import 'utility-mixins/index';
 @import 'utilities';
 
+@tailwind utilities;
+
 @import 'fonts';
 
 @import 'components';

package/src/scss/variables.scss

@@ -64,7 +64,6 @@ $transparent-rgba: rgba($white, 0);
 // Text
 $gl-text-color: $gray-900 !default;
 $gl-text-color-secondary: $gray-500 !default;
-$gl-text-color-disabled: $gray-400 !default;
 
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;