@gitlab/ui 86.12.0 → 86.13.0

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

@@ -192,13 +192,13 @@ export default {
 </script>
 <template>
   <div
-    class="gl-p-4 gl-mb-4 gl-rounded-lg gl-line-height-20 gl-word-break-word duo-chat-message"
+    class="duo-chat-message gl-mb-4 gl-rounded-lg gl-p-4 gl-leading-20 gl-break-anywhere"
     :class="{
-      'gl-ml-auto gl-bg-blue-100 gl-rounded-bottom-right-none gl-text-blue-900': isUserMessage,
-      'gl-rounded-bottom-left-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-gray-900':
+      'gl-ml-auto gl-rounded-br-none gl-bg-blue-100 gl-text-blue-900': isUserMessage,
+      'gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-gray-900':
         isAssistantMessage,
       'gl-bg-white': isAssistantMessage && !error,
-      'gl-bg-red-50 gl-border-none!': error,
+      '!gl-border-none gl-bg-red-50': error,
     }"
     @insert-code-snippet="onInsertCodeSnippet"
   >
@@ -207,7 +207,7 @@ export default {
       :aria-label="$options.i18n.MESSAGE_ERROR"
       name="status_warning_borderless"
       :size="16"
-      class="gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon gl-border gl-text-red-600"
+      class="error-icon gl-border gl-mr-3 gl-flex-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600"
       data-testid="error"
     />
     <div ref="content-wrapper" :class="{ 'has-error': error }">
@@ -218,7 +218,7 @@ export default {
         <template v-if="isAssistantMessage">
           <documentation-sources v-if="sources" :sources="sources" />
 
-          <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
+          <div class="duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end">
             <gl-loading-icon v-if="isChunkAndNotCancelled" class="gl-pt-4" variant="dots" inline />
             <gl-duo-user-feedback
               v-if="isNotChunkOrCancelled"

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

@@ -59,20 +59,20 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mt-4 gl-mr-3 gl-text-gray-600" data-testid="duo-chat-message-sources">
+  <div class="gl-mr-3 gl-mt-4 gl-text-gray-600" data-testid="duo-chat-message-sources">
     <span v-if="sources.length">{{ sourceLabel }}:</span>
 
-    <ul class="gl-list-style-none gl-p-0 gl-m-0">
+    <ul class="gl-m-0 gl-list-none gl-p-0">
       <li
         v-for="(source, index) in sources"
         :key="index"
-        class="gl-display-flex gl-pt-3 gl-align-items-center"
+        class="gl-flex gl-items-center gl-pt-3"
         data-testid="source-list-item"
       >
         <gl-icon
           v-if="source.source_type"
           :name="getSourceIcon(source.source_type)"
-          class="gl-flex-shrink-0 gl-mr-2"
+          class="gl-mr-2 gl-flex-shrink-0"
         />
         <gl-link :href="source.source_url">{{ getSourceTitle(source) }}</gl-link>
       </li>

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

@@ -29,7 +29,7 @@ export default {
   <div class="gl-text-right">
     <div v-for="(prompt, index) in prompts" :key="`question-${index}`" class="gl-mt-3">
       <gl-button category="secondary" variant="confirm" @click="handleClick(prompt)"
-        ><span class="gl-white-space-normal">{{ prompt }}</span></gl-button
+        ><span class="gl-whitespace-normal">{{ prompt }}</span></gl-button
       >
     </div>
   </div>

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

@@ -423,19 +423,17 @@ export default {
   <aside
     v-if="!isHidden"
     id="chat-component"
-    class="markdown-code-block duo-chat-drawer gl-max-h-full gl-shadow-none duo-chat gl-border-t gl-border-l gl-bottom-0"
+    class="markdown-code-block duo-chat-drawer duo-chat gl-border-t gl-border-l gl-bottom-0 gl-max-h-full gl-shadow-none"
     role="complementary"
     data-testid="chat-component"
   >
     <header
       v-if="showHeader"
       data-testid="chat-header"
-      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"
+      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-border-b-0 !gl-p-0"
     >
-      <div
-        class="drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"
-      >
-        <h3 class="gl-my-0 gl-font-size-h2">{{ title }}</h3>
+      <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
+        <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
         <gl-experiment-badge
           v-if="badgeType"
           :help-page-url="badgeHelpPageUrl"
@@ -458,7 +456,7 @@ export default {
         :dismissible="false"
         variant="tip"
         :show-icon="false"
-        class="gl-text-center gl-p-4 gl-bg-gray-50 legal-warning gl-max-w-full gl-border-t gl-text-gray-700"
+        class="legal-warning gl-border-t gl-max-w-full gl-bg-gray-50 gl-p-4 gl-text-center gl-text-gray-700"
         role="alert"
         data-testid="chat-legal-warning"
         >{{ $options.i18n.CHAT_LEGAL_GENERATED_BY_AI }}</gl-alert
@@ -475,7 +473,7 @@ export default {
         key="error"
         :dismissible="false"
         variant="danger"
-        class="gl-pl-9!"
+        class="!gl-pl-9"
         role="alert"
         data-testid="chat-error"
       >
@@ -487,7 +485,7 @@ export default {
       <transition-group
         tag="section"
         name="message"
-        class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-bg-gray-10"
+        class="duo-chat-history gl-flex gl-flex-col gl-justify-end gl-bg-gray-10"
         :class="[
           {
             'gl-h-full': !hasMessages,
@@ -512,7 +510,7 @@ export default {
             :svg-height="145"
             :title="emptyStateTitle"
             :description="emptyStateDescription"
-            class="gl-flex-grow gl-justify-content-center"
+            class="gl-flex-grow gl-justify-center"
           />
           <gl-duo-chat-predefined-prompts
             key="predefined-prompts"
@@ -527,20 +525,20 @@ export default {
     <footer
       v-if="isChatAvailable"
       data-testid="chat-footer"
-      class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-p-5 gl-bg-gray-10 gl-border-t"
+      class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-t gl-bg-gray-10 gl-p-5"
       :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
     >
       <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
         <gl-form-input-group>
           <div
-            class="duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white"
+            class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400"
             :data-value="prompt"
           >
             <gl-card
               v-if="shouldShowSlashCommands"
               ref="commands"
-              class="slash-commands gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md !gl-absolute"
-              body-class="gl-p-2!"
+              class="slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md"
+              body-class="!gl-p-2"
             >
               <gl-dropdown-item
                 v-for="(command, index) in filteredSlashCommands"
@@ -549,9 +547,9 @@ export default {
                 @mouseenter.native="activeCommandIndex = index"
                 @click="selectSlashCommand(index)"
               >
-                <span class="gl-display-flex gl-justify-content-space-between">
-                  <span class="gl-display-block">{{ command.name }}</span>
-                  <small class="gl-font-style-italic gl-text-right gl-pl-3 gl-text-gray-500">{{
+                <span class="gl-flex gl-justify-between">
+                  <span class="gl-block">{{ command.name }}</span>
+                  <small class="gl-pl-3 gl-text-right gl-italic gl-text-gray-500">{{
                     command.description
                   }}</small>
                 </span>
@@ -562,8 +560,8 @@ export default {
               ref="prompt"
               v-model="prompt"
               data-testid="chat-prompt-input"
-              class="gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none! gl-absolute"
-              :class="{ 'gl-text-truncate': !prompt }"
+              class="gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none"
+              :class="{ 'gl-truncate': !prompt }"
               :placeholder="inputPlaceholder"
               autofocus
               @keydown.enter.exact.native.prevent
@@ -577,7 +575,7 @@ export default {
               icon="paper-airplane"
               category="primary"
               variant="confirm"
-              class="gl-rounded-base! !gl-absolute gl-bottom-2 gl-right-2"
+              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base"
               type="submit"
               data-testid="chat-prompt-submit-button"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
@@ -587,7 +585,7 @@ export default {
               icon="stop"
               category="primary"
               variant="default"
-              class="gl-rounded-base! !gl-absolute gl-bottom-2 gl-right-2"
+              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base"
               data-testid="chat-prompt-cancel-button"
               :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
               @click="cancelPrompt"
@@ -595,7 +593,7 @@ export default {
           </template>
         </gl-form-input-group>
         <gl-form-text
-          class="gl-line-height-20 gl-mt-3 gl-text-gray-400"
+          class="gl-mt-3 gl-leading-20 gl-text-gray-400"
           data-testid="chat-legal-disclaimer"
           >{{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}</gl-form-text
         >

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -61,14 +61,14 @@ export default {
 </script>
 
 <template>
-  <div class="gl-pt-4 gl-w-full">
+  <div class="gl-w-full gl-pt-4">
     <div>
       <gl-button
         v-if="!feedbackReceived"
         variant="link"
         target="_blank"
         :href="feedbackLinkUrl"
-        button-text-classes="gl-white-space-normal! gl-text-left"
+        button-text-classes="!gl-whitespace-normal gl-text-left"
         @click="shouldRenderModal && $refs.feedbackModal.show()"
         >{{ feedbackLinkText }}</gl-button
       >

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -80,19 +80,19 @@ export default {
 </script>
 
 <template>
-  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral">
+  <gl-badge :id="triggerId" class="gl-mx-4 hover:gl-cursor-pointer" variant="neutral">
     <span>{{ activeType.BADGE }}</span>
     <gl-popover
       triggers="click"
       show-close-button
       :placement="popoverPlacement"
       :target="triggerId"
-      :css-classes="['gl-z-index-9999!']"
+      :css-classes="['!gl-z-9999']"
       :title="activeType.POPOVER_TITLE"
     >
       <gl-sprintf :message="activeType.POPOVER_CONTENT">
         <template #link="{ content }">
-          <gl-link v-if="helpPageUrl" :href="helpPageUrl" target="_blank" class="gl-font-sm!">
+          <gl-link v-if="helpPageUrl" :href="helpPageUrl" target="_blank" class="!gl-text-sm">
             {{ content }}
           </gl-link>
           <span v-else>{{ content }}</span>
@@ -105,7 +105,7 @@ export default {
           </ul>
         </template>
         <template #line-break="{ content }">
-          <span class="gl-mt-5 gl-mb-0 gl-display-block">{{ content }}</span>
+          <span class="gl-mb-0 gl-mt-5 gl-block">{{ content }}</span>
         </template>
       </gl-sprintf>
     </gl-popover>

package/src/components/regions/empty_state/empty_state.vue

@@ -107,10 +107,7 @@ export default {
       return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
     },
     contentClasses() {
-      return [
-        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-m-auto gl-p-5',
-        this.contentClass,
-      ];
+      return [this.compact ? 'gl-grow gl-basis-0 gl-px-4' : 'gl-m-auto gl-p-5', this.contentClass];
     },
   },
 };
@@ -118,15 +115,13 @@ export default {
 
 <template>
   <section
-    class="gl-display-flex"
+    class="gl-flex"
     :class="{
-      'gl-empty-state gl-text-center gl-flex-direction-column': !compact,
-      'gl-flex-direction-row': compact,
+      'gl-empty-state gl-flex-col gl-text-center': !compact,
+      'gl-flex-row': compact,
     }"
   >
-    <div
-      :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
-    >
+    <div :class="{ 'gl-hidden gl-px-4 sm:gl-block': compact, 'gl-max-w-full': !compact }">
       <img
         v-if="svgPath"
         :src="svgPath"
@@ -147,13 +142,13 @@ export default {
         -->
       <slot ref="title" name="title">
         <h1
-          class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
+          class="gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36"
           :class="compact ? 'h5' : 'h4'"
         >
           {{ title }}
         </h1>
       </slot>
-      <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-4 gl-mb-0">
+      <p v-if="description || $scopedSlots.description" ref="description" class="gl-mb-0 gl-mt-4">
         <!--
           @slot Use this slot to customize the empty state's description
           area. Overrides the `description` prop.
@@ -162,10 +157,7 @@ export default {
           {{ description }}
         </slot>
       </p>
-      <div
-        class="gl-display-flex gl-flex-wrap gl-mt-5"
-        :class="{ 'gl-justify-content-center': !compact }"
-      >
+      <div class="gl-mt-5 gl-flex gl-flex-wrap" :class="{ 'gl-justify-center': !compact }">
         <!--
           @slot Use this slot to customize the empty state's actions area,
           where the buttons are. Overrides button-related props:
@@ -184,7 +176,7 @@ export default {
           <gl-button
             v-if="shouldRenderSecondaryButton"
             class="gl-mb-3 gl-mr-3"
-            :class="{ 'gl-mx-2!': !compact }"
+            :class="{ '!gl-mx-2': !compact }"
             :href="secondaryButtonLink"
             >{{ secondaryButtonText }}
           </gl-button>

package/src/components/utilities/truncate/truncate.vue

@@ -82,9 +82,7 @@ export default {
     class="gl-truncate-component"
     :title="text"
   >
-    <span ref="text" class="gl-truncate-start gl-text-overflow-ellipsis!"
-      >&lrm;{{ text }}&lrm;</span
-    >
+    <span ref="text" class="gl-truncate-start !gl-text-ellipsis">&lrm;{{ text }}&lrm;</span>
   </span>
 
   <span

package/src/internal/color_contrast/color_contrast.vue

@@ -27,8 +27,8 @@ export default {
       const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
       const textClass = contrastScore ? 'gl-text-white' : 'gl-text-gray-950';
       const failClasses = contrastScore
-        ? 'gl-inset-border-1-red-300 gl-text-red-300'
-        : 'gl-inset-border-1-red-500 gl-text-red-500';
+        ? 'gl-shadow-inner-1-red-300 gl-text-red-300'
+        : 'gl-shadow-inner-1-red-500 gl-text-red-500';
       return [isFail ? failClasses : textClass];
     },
     contrast() {
@@ -40,7 +40,7 @@ export default {
 
 <template>
   <code
-    class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2"
+    class="gl-w-10 gl-rounded-base gl-p-2 gl-text-center gl-text-xs"
     :class="classes"
     :style="{ backgroundColor: background }"
   >

package/src/scss/storybook.scss

@@ -11,9 +11,6 @@
 
 @import 'mixins';
 @import 'utility-mixins/index';
-@import 'utilities';
-
-@tailwind utilities;
 
 @import 'fonts';
 
@@ -28,3 +25,9 @@
   padding-top: $gl-spacing-scale-2 !important;
   padding-bottom: 0 !important;
 }
+
+// This imports the tailwind.css file.
+// Note that adding `.css` here would break the inline import.
+// These utilities are imported last, because that's
+// what we do in GitLab as well.
+@import 'tailwind';

package/src/scss/tailwind.css

@@ -1 +1,3 @@
+@tailwind base;
+@tailwind components;
 @tailwind utilities;

package/src/tokens/tokens_story.vue

@@ -51,22 +51,22 @@ export default {
 
 <template>
   <div :class="containerClass">
-    <ul class="gl-list-style-none gl-m-0 gl-p-0">
+    <ul class="gl-m-0 gl-list-none gl-p-0">
       <li
         v-for="token in tokens"
         :key="token.name"
-        class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
+        class="gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3"
         :class="getClasses(token.value)"
         :style="getStyle(token.value)"
       >
-        <code v-gl-tooltip :title="token.comment" class="gl-reset-color">
+        <code v-gl-tooltip :title="token.comment" class="gl-text-inherit">
           {{ getTokenName(token) }}
         </code>
-        <div class="gl-display-flex gl-align-items-center gl-gap-3">
+        <div class="gl-flex gl-items-center gl-gap-3">
           <gl-badge v-if="token.deprecated" v-gl-tooltip :title="token.comment" variant="danger">
             Deprecated
           </gl-badge>
-          <code class="gl-reset-color">{{ token.value }}</code>
+          <code class="gl-text-inherit">{{ token.value }}</code>
           <gl-color-contrast
             v-if="isHex(token.value)"
             :foreground="token.value"

package/src/tokens/tokens_table.vue

@@ -120,7 +120,7 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-flex gl-align-items-center gl-gap-3 gl-mb-5">
+    <div class="gl-mb-5 gl-flex gl-items-center gl-gap-3">
       <gl-form-input v-model="filter" placeholder="Type to search" />
       <gl-collapsible-listbox
         id="component-listbox"
@@ -139,7 +139,7 @@ export default {
       stacked="sm"
     >
       <template #cell(description)="{ item: { name, deprecated, description } }">
-        <code class="gl-font-base gl-text-strong">
+        <code class="gl-text-base gl-text-strong">
           {{ name }}
         </code>
         <gl-badge v-if="deprecated" variant="danger">Deprecated</gl-badge>
@@ -148,13 +148,13 @@ export default {
         </div>
       </template>
       <template #cell(value)="{ item: { type, value, valueLabel } }">
-        <div class="gl-display-flex gl-align-items-center gl-gap-3">
+        <div class="gl-flex gl-items-center gl-gap-3">
           <div
             v-if="isColor(type)"
-            class="gl-w-5 gl-h-5 gl-rounded-base"
+            class="gl-h-5 gl-w-5 gl-rounded-base"
             :style="{ 'background-color': value }"
           ></div>
-          <code class="gl-font-base gl-text-strong">{{ valueLabel }}</code>
+          <code class="gl-text-base gl-text-strong">{{ valueLabel }}</code>
         </div>
       </template>
     </gl-table>

package/src/utils/charts/constants.js

@@ -57,6 +57,5 @@ export const CHART_TYPE_BAR = 'bar';
 export const CHART_TYPE_LINE = 'line';
 
 // Constants for height "auto"
-export const HEIGHT_AUTO_CLASSES =
-  'gl-chart-h-auto gl-display-flex gl-flex-direction-column gl-h-full';
-export const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';
+export const HEIGHT_AUTO_CLASSES = 'gl-chart-h-auto gl-flex gl-flex-col gl-h-full';
+export const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-flex gl-h-full';

package/tailwind.defaults.js

@@ -401,6 +401,7 @@ module.exports = {
       'inner-1-gray-100': 'inset 0 0 0 1px var(--gray-100, #dcdcde)',
       'inner-1-gray-200': 'inset 0 0 0 1px var(--gray-200, #bfbfc3)',
       'inner-1-gray-400': 'inset 0 0 0 1px var(--gray-400, #89888d)',
+      'inner-1-red-300': 'inset 0 0 0 1px var(--red-300, #f57f6c)',
       'inner-1-red-400': 'inset 0 0 0 1px var(--red-400, #ec5941)',
       'inner-1-red-500': 'inset 0 0 0 1px var(--red-500, #dd2b0e)',
       'inner-2-blue-400': 'inset 0 0 0 2px var(--blue-400, #428fdc)',