@gitlab/ui 95.6.0 → 96.1.0

package/package.json

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

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/components/experimental/duo/chat/constants.js

@@ -1,5 +1,4 @@
 export const CHAT_RESET_MESSAGE = '/reset';
-export const CHAT_CLEAN_MESSAGE = '/clean';
 export const CHAT_CLEAR_MESSAGE = '/clear';
 export const CHAT_INCLUDE_MESSAGE = '/include';
 

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

@@ -17,7 +17,6 @@ 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,
   CHAT_CLEAR_MESSAGE,
   CHAT_INCLUDE_MESSAGE,
@@ -393,11 +392,7 @@ export default {
           return;
         }
 
-        if (
-          ![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(
-            this.caseInsensitivePrompt
-          )
-        ) {
+        if (![CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.caseInsensitivePrompt)) {
           this.displaySubmitButton = false;
         }
 

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

@@ -2,8 +2,8 @@ import { setStoryTimeout } from '../../../../utils/test_utils';
 import {
   DOCUMENTATION_SOURCE_TYPES,
   MESSAGE_MODEL_ROLES,
+  CHAT_CLEAR_MESSAGE,
   CHAT_RESET_MESSAGE,
-  CHAT_CLEAN_MESSAGE,
   CHAT_INCLUDE_MESSAGE,
 } from './constants';
 import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
@@ -154,7 +154,7 @@ export const SLASH_COMMANDS = [
     description: 'Reset conversation, ignore the previous messages.',
   },
   {
-    name: CHAT_CLEAN_MESSAGE,
+    name: CHAT_CLEAR_MESSAGE,
     shouldSubmit: true,
     description: 'Delete all messages in this conversation.',
   },