@gitlab/ui 85.12.1 → 85.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "85.12.1",
+  "version": "85.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,6 @@
     "prebuild": "run-s build-tokens generate-utilities",
     "prepare": "run-s build-tokens generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
-    "deprecate-gl-utils": "node ./bin/deprecate_utils.js",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook src/scss/utilities.scss",

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

@@ -15,7 +15,7 @@
 .gl-form-radio {
   @include gl-font-base;
   @include gl-line-height-normal;
-  @include gl-text-gray-900;
+  color: var(--gl-text-color-default);
 
   &.form-check {
     @include gl-display-flex;
@@ -45,9 +45,10 @@
   .form-check-input:disabled,
   .form-check-input:disabled ~ .form-check-label,
   .custom-control-input:disabled,
-  .custom-control-input:disabled ~ .custom-control-label {
+  .custom-control-input:disabled ~ .custom-control-label,
+  .custom-control-input:disabled ~ .custom-control-label > .help-text {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-400;
+    color: var(--gl-text-color-disabled);
   }
 
   &.custom-control {
@@ -65,27 +66,27 @@
       }
 
       &::before {
-        @include gl-bg-white;
-        @include gl-border-gray-400;
+        background-color: var(--gl-control-background-color-default);
+        border-color: var(--gl-control-border-color-default);
       }
     }
 
-    .custom-control-input:not(:disabled):focus ~ .custom-control-label {
-      &::before {
-        @include gl-border-gray-500;
-        @include gl-focus;
-      }
+    .custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
+      border-color: var(--gl-control-border-color-hover);
     }
 
-    .custom-control-input:checked ~ .custom-control-label {
-      &::before {
-        @include gl-bg-blue-500;
-        @include gl-border-blue-500;
+    .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
+      @include gl-focus;
+      border-color: var(--gl-control-border-color-focus);
+    }
 
-        @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:checked  ~ .custom-control-label::before {
+      background-color: var(--gl-control-background-color-selected-default);
+      border-color: var(--gl-control-border-color-selected-default);
+
+      @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
       }
     }
 
@@ -93,8 +94,8 @@
     .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
     .custom-control-input[type='radio']:checked ~ .custom-control-label {
       &::after {
-        @include gl-bg-white;
         background: 50% 50% no-repeat;
+        background-color: var(--gl-control-indicator-color-selected);
         mask-repeat: no-repeat;
         mask-position: center center;
       }
@@ -116,11 +117,22 @@
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
+    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label {
+      &::before  {
+        background-color: var(--gl-control-background-color-selected-hover);
+        border-color: var(--gl-control-border-color-selected-hover);
+      }
+    }
+
+    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label::before {
+      background-color: var(--gl-control-background-color-selected-focus);
+      border-color: var(--gl-control-border-color-selected-focus);
+    }
+
+    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
+    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label,
     .custom-control-input:not(:disabled):focus:checked ~ .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
@@ -130,8 +142,8 @@
 
     &.custom-checkbox {
       .custom-control-input:indeterminate ~ .custom-control-label::before {
-        @include gl-bg-blue-500;
-        @include gl-border-blue-500;
+        background-color: var(--gl-control-background-color-selected-default);
+        border-color: var(--gl-control-border-color-selected-default);
 
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
@@ -139,11 +151,18 @@
         }
       }
 
-      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
+      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before {
+        background-color: var(--gl-control-background-color-selected-hover);
+        border-color: var(--gl-control-border-color-selected-hover);
+      }
+
       .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
-        @include gl-bg-blue-700;
-        @include gl-border-blue-700;
+        background-color: var(--gl-control-background-color-selected-focus);
+        border-color: var(--gl-control-border-color-selected-focus);
+      }
 
+      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
+      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
         @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
@@ -155,9 +174,9 @@
       @include gl-cursor-not-allowed;
 
       &::before {
-        @include gl-bg-gray-50;
-        @include gl-border-gray-100;
         @include gl-pointer-events-auto;
+        background-color: var(--gl-control-background-color-disabled);
+        border-color: var(--gl-control-border-color-disabled);
 
         @media (forced-colors: active) {
           opacity: 0.5;
@@ -168,22 +187,22 @@
     .custom-control-input:checked:disabled ~ .custom-control-label,
     .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
       &::before {
-        @include gl-bg-gray-100;
-        @include gl-border-gray-100;
+        background-color: var(--gl-control-background-color-disabled);
+        border-color: var(--gl-control-border-color-disabled);
       }
 
       &::after {
         background-image: none;
-        @include gl-bg-gray-500;
+        background-color: var(--gl-control-indicator-color-disabled);
 
         /* Ensure state indicators (like the checkmark for checked or
-           the dash for indeterminate) are visible in Windows High
-           Contrast Mode.
+          the dash for indeterminate) are visible in Windows High
+          Contrast Mode.
         */
         @media screen and (forced-colors: active) {
           forced-color-adjust: none;
           /* system color reference for disabled text applied to
-             background here.
+            background here.
           */
           // stylelint-disable-next-line
           background-color: GrayText;
@@ -194,9 +213,9 @@
 
   .help-text {
     @include gl-mt-2;
-    @include gl-text-gray-500;
     @include gl-mb-0;
     @include gl-font-base;
     @include gl-line-height-normal;
+    color: var(--gl-text-color-subtle);
   }
 }

package/src/components/base/skeleton_loader/skeleton_loader.scss

@@ -7,11 +7,11 @@
     @include gl-opacity-10;
   }
 
-  .primary-stop {
+  .background-stop {
     stop-color: var(--gl-skeleton-loader-background-color);
   }
 
-  .secondary-stop {
+  .shimmer-stop {
     stop-color: var(--gl-skeleton-loader-shimmer-color);
   }
 }

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -169,7 +169,7 @@ export default {
                 createElement(
                   'stop',
                   {
-                    class: 'primary-stop',
+                    class: 'background-stop',
                     attrs: {
                       offset: '0%',
                     },
@@ -188,7 +188,7 @@ export default {
                 createElement(
                   'stop',
                   {
-                    class: 'secondary-stop',
+                    class: 'shimmer-stop',
                     attrs: {
                       offset: '50%',
                     },
@@ -207,7 +207,7 @@ export default {
                 createElement(
                   'stop',
                   {
-                    class: 'primary-stop',
+                    class: 'background-stop',
                     attrs: {
                       offset: '100%',
                     },

package/src/components/experimental/duo/chat/constants.js

@@ -1,5 +1,6 @@
 export const CHAT_RESET_MESSAGE = '/reset';
 export const CHAT_CLEAN_MESSAGE = '/clean';
+export const CHAT_CLEAR_MESSAGE = '/clear';
 
 export const LOADING_TRANSITION_DURATION = 7500;
 

package/src/components/experimental/duo/chat/duo_chat.md

@@ -17,6 +17,7 @@ consumer component.
   :is-chat-available="isChatAvailable"
   :predefined-prompts="predefinedPrompts"
   :badge-help-page-url="badgeHelpPageUrl"
+  :canceled-request-ids="cancelledRequestIds"
   :tool-name="toolName"
   :empty-state-title="emptyStateTitle"
   :empty-state-description="emptyStateDescription"
@@ -92,6 +93,7 @@ export default {
       error: null,
       isLoading: false,
       toolName: '',
+      cancelledRequestIds: []
     }
   },
   provide: {
@@ -113,6 +115,11 @@ export default {
     this.chatPromptPlaceholder = 'Type your question here';
   }
   methods: {
+    onChatCancel() {
+       // pushing last requestId of messages to canceled Request Ids
+      this.cancelledRequestIds.push(this.messages[this.messages.length - 1].requestId);
+      this.isLoading = false;
+    },
     onChatHidden() {
       ...
     },
@@ -125,7 +132,10 @@ export default {
       ...
     },
     onAiResponse(data) {
-      this.messages = data
+      // check if requestId was not cancelled
+      if (requestId && !this.cancelledRequestIds.includes(data.requestId)) {
+        this.messages = data
+      }
       …
       this.isLoading = false;
     },

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

@@ -16,7 +16,7 @@ import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import { CHAT_CLEAN_MESSAGE, CHAT_RESET_MESSAGE } from './constants';
+import { CHAT_CLEAN_MESSAGE, CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE } from './constants';
 
 export const i18n = {
   CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
@@ -84,6 +84,9 @@ export default {
       default: () => [],
       validator: itemsValidator,
     },
+    /**
+     * Array of RequestIds that have been canceled.
+     */
     canceledRequestIds: {
       type: Array,
       required: false,
@@ -314,7 +317,7 @@ export default {
          * @param {String} prompt The user prompt to send.
          */
 
-        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE].includes(this.prompt)) {
+        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.prompt)) {
           this.displaySubmitButton = false;
         }
         this.$emit('send-chat-prompt', this.prompt.trim());

package/src/scss/mixins.scss

@@ -54,8 +54,8 @@
 ) {
   @if $inset == true {
     @if $color {
-      box-shadow: inset 0 0 0 $outline-width $blue-400,
-        inset 0 0 0 #{$outline-width + $outline-offset} $white,
+      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
+        inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
         inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
         $focus-ring-inset if-important($important);
       outline: none if-important($important);
@@ -66,7 +66,8 @@
       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);
+      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
+        $focus-ring-inset if-important($important);
       outline: none if-important($important);
       @media (forced-colors: active) {
         outline: 2px solid LinkText if-important($important);

package/src/scss/variables.scss

@@ -221,12 +221,13 @@ $gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
 $outline-offset: 1px;
 $outline-width: 2px;
 $outline: #{$outline-offset + $outline-width};
-$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: 0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
+  0 0 0 #{$outline-offset + $outline-width} var(--gl-focus-ring-outer-color);
+$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
+  inset 0 0 0 $outline-offset var(--gl-focus-ring-inner-color);
 $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;
+$focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);
 
 // Toasts
 $toast-max-width: px-to-rem(586px);

package/src/tokens/action.tokens.json

@@ -590,6 +590,267 @@
           }
         }
       }
+    },
+    "danger": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.50}",
+              "dark": "{color.red.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.50}",
+              "dark": "{color.red.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.100}",
+              "dark": "{color.red.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the active state."
+          },
+          "subtle": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.red.100}",
+                "dark": "{color.red.800}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the active state."
+            }
+          },
+          "strong": {
+            "default": {
+              "$value": {
+                "default": "{color.red.500}",
+                "dark": "{color.red.400}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.600}",
+                "dark": "{color.red.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.red.600}",
+                "dark": "{color.red.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.red.800}",
+                "dark": "{color.red.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the active state."
+            }
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the active state."
+          },
+          "strong": {
+            "default": {
+              "$value": {
+                "default": "{color.red.600}",
+                "dark": "{color.red.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.800}",
+                "dark": "{color.red.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.red.800}",
+                "dark": "{color.red.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.red.900}",
+                "dark": "{color.red.50}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the active state."
+            }
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the active state."
+          },
+          "strong": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the text on a solid, strong danger (destructive) action background."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the active state."
+          },
+          "strong": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon on a solid, strong danger (destructive) action background."
+          }
+        }
+      }
     }
   }
 }