@gitlab/ui 77.4.0 → 77.6.0

package/dist/tokens/css/tokens.css

@@ -1,9 +1,12 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:10 GMT
+ * Generated on Fri, 01 Mar 2024 18:36:36 GMT
  */
 
 :root {
+  --gl-text-tertiary: #89888d;
+  --gl-text-secondary: #737278;
+  --gl-text-primary: #333238;
   --gl-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;
@@ -234,7 +237,4 @@
   --data-viz-green-200: #b0d97b;
   --data-viz-green-100: #c6ed94;
   --data-viz-green-50: #ddfab7;
-  --gl-text-tertiary: var(--gray-400);
-  --gl-text-secondary: var(--gray-500);
-  --gl-text-primary: var(--gray-900);
 }

package/dist/tokens/css/tokens.dark.css

@@ -1,9 +1,12 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:11 GMT
+ * Generated on Fri, 01 Mar 2024 18:36:36 GMT
  */
 
 :root.gl-dark {
+  --gl-text-tertiary: #737278;
+  --gl-text-secondary: #89888d;
+  --gl-text-primary: #ececef;
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:11 GMT
+ * Generated on Fri, 01 Mar 2024 18:36:36 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";
@@ -199,3 +199,6 @@ export const RED_700 = "#fcb5aa";
 export const RED_800 = "#fdd4cd";
 export const RED_900 = "#fcf1ef";
 export const RED_950 = "#fff4f3";
+export const GL_TEXT_PRIMARY = "#ececef";
+export const GL_TEXT_SECONDARY = "#89888d";
+export const GL_TEXT_TERTIARY = "#737278";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 13:41:10 GMT
+ * Generated on Fri, 01 Mar 2024 18:36:36 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/json/tokens.dark.json

@@ -4801,10 +4801,10 @@
       "value": "#ececef",
       "$type": "color",
       "themeable": true,
-      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
-      "isSource": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+      "isSource": true,
       "original": {
-        "value": "{gray.900}",
+        "value": "#ececef",
         "$type": "color",
         "themeable": true
       },
@@ -4819,10 +4819,10 @@
       "value": "#89888d",
       "$type": "color",
       "themeable": true,
-      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
-      "isSource": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+      "isSource": true,
       "original": {
-        "value": "{gray.500}",
+        "value": "#89888d",
         "$type": "color",
         "themeable": true
       },
@@ -4837,10 +4837,10 @@
       "value": "#737278",
       "$type": "color",
       "themeable": true,
-      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
-      "isSource": false,
+      "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+      "isSource": true,
       "original": {
-        "value": "{gray.400}",
+        "value": "#737278",
         "$type": "color",
         "themeable": true
       },

package/dist/tokens/json/tokens.json

@@ -4804,7 +4804,7 @@
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
-        "value": "{gray.900}",
+        "value": "#333238",
         "$type": "color",
         "themeable": true
       },
@@ -4822,7 +4822,7 @@
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
-        "value": "{gray.500}",
+        "value": "#737278",
         "$type": "color",
         "themeable": true
       },
@@ -4840,7 +4840,7 @@
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
-        "value": "{gray.400}",
+        "value": "#89888d",
         "$type": "color",
         "themeable": true
       },

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,7 +1,10 @@
 
 // Do not edit directly
-// Generated on Wed, 28 Feb 2024 13:41:11 GMT
+// Generated on Fri, 01 Mar 2024 18:36:36 GMT
 
+$gl-text-tertiary: #737278 !default;
+$gl-text-secondary: #89888d !default;
+$gl-text-primary: #ececef !default;
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
 $red-800: #fdd4cd;

package/dist/tokens/scss/_tokens.scss

@@ -1,7 +1,10 @@
 
 // Do not edit directly
-// Generated on Wed, 28 Feb 2024 13:41:10 GMT
+// Generated on Fri, 01 Mar 2024 18:36:36 GMT
 
+$gl-text-tertiary: #89888d !default;
+$gl-text-secondary: #737278 !default;
+$gl-text-primary: #333238 !default;
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -232,6 +235,3 @@ $data-viz-green-300: #94c25e !default;
 $data-viz-green-200: #b0d97b !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-50: #ddfab7 !default;
-$gl-text-tertiary: $gray-400 !default;
-$gl-text-secondary: $gray-500 !default;
-$gl-text-primary: $gray-900 !default;

package/package.json

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

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -64,7 +64,7 @@ After closing, `GlDisclosureDropdown` emits a `hidden` event.
 ## Setting disclosure dropdown items
 
 Use the `items` prop to provide actions/links to the disclosure dropdown. Each
-item can be either an item or a group. For `Item`s, provide an `href` string to
+item can be either an item or a group. For `Item`s, provide an `href` or `to` string to
 make them render as links. Otherwise, they will be buttons. Provide an `action`
 function to items to be called when they are pressed, or, listen for the
 `action` event on the top-level component. Both will receive the given item as
@@ -81,6 +81,8 @@ type Item = {
   text: string;
   // href link
   href?: string;
+  // or, a Vue router link with `to`
+  to?: string;
   // Item action
   action?: (item: Item) => void;
   // Set of extra attributes applied directly to the element

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

@@ -140,6 +140,7 @@ describe('GlDisclosureDropdown', () => {
     let firstItem;
     let secondItem;
     let thirdItem;
+    let fourthItem;
 
     beforeEach(() => {
       buildWrapper({ items: mockItems });
@@ -147,6 +148,7 @@ describe('GlDisclosureDropdown', () => {
       firstItem = findListItem(0);
       secondItem = findListItem(1);
       thirdItem = findListItem(2);
+      fourthItem = findListItem(3);
     });
 
     it('should move the focus from toggle and down the list of items on `ARROW_DOWN` and stop on the last item', async () => {
@@ -160,7 +162,9 @@ describe('GlDisclosureDropdown', () => {
       await secondItem.trigger('keydown', { code: ARROW_DOWN });
       expect(thirdItem.element).toHaveFocus();
       await thirdItem.trigger('keydown', { code: ARROW_DOWN });
-      expect(thirdItem.element).toHaveFocus();
+      expect(fourthItem.element).toHaveFocus();
+      await fourthItem.trigger('keydown', { code: ARROW_DOWN });
+      expect(fourthItem.element).toHaveFocus();
     });
 
     it('should move the focus up the list of items on `ARROW_UP` and stop on the first item', async () => {
@@ -182,9 +186,9 @@ describe('GlDisclosureDropdown', () => {
       );
       expect(firstItem.element).toHaveFocus();
       await firstItem.trigger('keydown', { code: END });
-      expect(thirdItem.element).toHaveFocus();
-      await thirdItem.trigger('keydown', { code: END });
-      expect(thirdItem.element).toHaveFocus();
+      expect(fourthItem.element).toHaveFocus();
+      await fourthItem.trigger('keydown', { code: END });
+      expect(fourthItem.element).toHaveFocus();
     });
 
     it('should move focus to the first item on `HOME` keydown', async () => {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { BLink } from 'bootstrap-vue';
 import { ENTER, SPACE } from '../constants';
 import { mockItems } from './mock_data';
 
@@ -47,21 +48,29 @@ describe('GlDisclosureDropdownItem', () => {
     });
   });
 
-  describe('when item has a `href`', () => {
-    const item = mockItems[0];
+  describe.each`
+    prop      | mockItem
+    ${'href'} | ${0}
+    ${'to'}   | ${3}
+  `('when item has a `$prop`', ({ prop, mockItem }) => {
+    const item = mockItems[mockItem];
 
     beforeEach(() => {
       buildWrapper({ item });
     });
 
-    const findLink = () => wrapper.find('a.gl-new-dropdown-item-content');
+    const findLink = () => wrapper.findComponent(BLink);
 
     it('should render a link', () => {
       expect(findLink().exists()).toBe(true);
     });
 
-    it('should set correct attributes', () => {
-      expect(findLink().attributes('href')).toBe(item.href);
+    it('should set correct class', () => {
+      expect(findLink().classes()).toContain('gl-new-dropdown-item-content');
+    });
+
+    it('should set correct props and attributes', () => {
+      expect(findLink().props(prop)).toBe(item[prop]);
       expect(findLink().attributes()).toEqual(expect.objectContaining(item.extraAttrs));
     });
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -1,4 +1,5 @@
 <script>
+import { BLink } from 'bootstrap-vue';
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 import { isItem } from './utils';
@@ -9,6 +10,7 @@ export const ITEM_CLASS = 'gl-new-dropdown-item';
 export default {
   name: DISCLOSURE_DROPDOWN_ITEM_NAME,
   ITEM_CLASS,
+  components: { BLink },
   props: {
     item: {
       type: Object,
@@ -19,7 +21,7 @@ export default {
   },
   computed: {
     isLink() {
-      return typeof this.item?.href === 'string';
+      return typeof this.item?.href === 'string' || typeof this.item?.to === 'string';
     },
     isCustomContent() {
       return Boolean(this.$scopedSlots.default);
@@ -29,9 +31,10 @@ export default {
 
       if (this.isLink)
         return {
-          is: 'a',
+          is: BLink,
           attrs: {
             href: item.href,
+            to: item.to,
             ...item.extraAttrs,
           },
           listeners: {
@@ -85,9 +88,12 @@ export default {
            * the `a/button` to be the target of the event as it might have additional attributes.
            * E.g. `a` might have `target` attribute.
            */
-          this.$refs.item?.dispatchEvent(
-            new MouseEvent('click', { bubbles: true, cancelable: true })
-          );
+          const e = new MouseEvent('click', { bubbles: true, cancelable: true });
+          if (this.isLink) {
+            this.$refs.item.$el.dispatchEvent(e);
+          } else {
+            this.$refs.item?.dispatchEvent(e);
+          }
         }
       }
     },

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -28,6 +28,13 @@ export const mockItems = [
       target: '_blank',
     },
   },
+  {
+    text: 'Edit merge request',
+    to: '/edit',
+    extraAttrs: {
+      'data-uuid': '1234',
+    },
+  },
 ];
 
 export const mockItemsCustomItem = [

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

@@ -17,6 +17,7 @@
     transition: none;
   }
 
+  /* TODO: Avoid mixing duo-chat styles with other GitLab UI components not intended as utilities. Refactor and remove all `gl-drawer` instances out of this file. */
   .gl-drawer-body-scrim-on-footer {
     &::before {
       background: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
@@ -26,6 +27,11 @@
   .gl-drawer-body {
     overflow-y: auto;
   }
+
+  .gl-drawer-header,
+  .gl-drawer-body > * {
+    @include gl-p-5;
+  }
 }
 
 .duo-chat-history {

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

@@ -355,7 +355,7 @@ export default {
   <aside
     v-if="!isHidden"
     id="chat-component"
-    class="markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
+    class="markdown-code-block gl-drawer gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
     role="complementary"
     data-testid="chat-component"
   >

package/src/tokens/text.dark.tokens.json

@@ -0,0 +1,19 @@
+{
+  "text": {
+    "primary": {
+      "$value": "#ececef",
+      "$type": "color",
+      "themeable": true
+    },
+    "secondary": {
+      "$value": "#89888d",
+      "$type": "color",
+      "themeable": true
+    },
+    "tertiary": {
+      "$value": "#737278",
+      "$type": "color",
+      "themeable": true
+    }
+  }
+}

package/src/tokens/text.dark.tokens.stories.js

@@ -0,0 +1,13 @@
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { createDesignTokenStory } from './common_story_options';
+
+export const Default = createDesignTokenStory({
+  containerClass: 'gl-bg-gray-950',
+  tokens: COMPILED_TOKENS.text,
+  isBackgroundColorStory: false,
+});
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/text/dark',
+};

package/src/tokens/text.tokens.json

@@ -1,17 +1,17 @@
 {
   "text": {
     "primary": {
-      "$value": "{gray.900}",
+      "$value": "#333238",
       "$type": "color",
       "themeable": true
     },
     "secondary": {
-      "$value": "{gray.500}",
+      "$value": "#737278",
       "$type": "color",
       "themeable": true
     },
     "tertiary": {
-      "$value": "{gray.400}",
+      "$value": "#89888d",
       "$type": "color",
       "themeable": true
     }

package/src/tokens/text.tokens.stories.js

@@ -8,5 +8,5 @@ export const Default = createDesignTokenStory({
 
 // eslint-disable-next-line storybook/csf-component
 export default {
-  title: 'tokens/text',
+  title: 'tokens/text/light',
 };

package/tailwind.defaults.js

@@ -1,23 +1,36 @@
-const baseColorTokens = require('./src/tokens/color.tokens.json');
-const themeColorTokens = require('./src/tokens/color.theme.tokens.json');
+const COMPILED_TOKENS = require('./dist/tokens/json/tokens.json');
+
+const cssCustomPropertyWithValue = (token) => {
+  const path = [token.prefix !== false ? 'gl' : false, ...token.path].filter(Boolean);
+  return `var(--${path.join('-')}, ${token.value})`;
+};
 
 const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
-  acc[color] = {};
-  Object.entries(baseColorTokens[color]).forEach(([shade, { $value }]) => {
-    acc[color][shade] = `var(--${color}-${shade}, ${$value})`;
+  Object.entries(COMPILED_TOKENS[color]).forEach(([, token]) => {
+    acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
   });
   return acc;
 }, {});
 
-const themeColors = Object.entries(themeColorTokens.theme).reduce((acc, [color, shades]) => {
-  const colorKey = `theme-${color}`;
-  acc[colorKey] = {};
-  Object.entries(shades).forEach(([shade, { $value }]) => {
-    acc[colorKey][shade] = `var(--${colorKey}-${shade}, ${$value})`;
+const themeColors = Object.entries(COMPILED_TOKENS.theme).reduce((acc, [, scales]) => {
+  Object.entries(scales).forEach(([, token]) => {
+    acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
   });
   return acc;
 }, {});
 
+const textColors = Object.entries(COMPILED_TOKENS.text).reduce((acc, [scale, token]) => {
+  acc[scale] = cssCustomPropertyWithValue(token);
+  return acc;
+}, {});
+
+const colors = {
+  white: cssCustomPropertyWithValue(COMPILED_TOKENS.white),
+  black: cssCustomPropertyWithValue(COMPILED_TOKENS.black),
+  ...baseColors,
+  ...themeColors,
+};
+
 const gridSize = 0.5; // rem
 const spacing = {
   0: '0',
@@ -65,12 +78,7 @@ module.exports = {
       lg: '992px',
       xl: '1200px',
     },
-    colors: {
-      white: `var(--white, ${baseColorTokens.white.$value})`,
-      black: `var(--black, ${baseColorTokens.black.$value})`,
-      ...baseColors,
-      ...themeColors,
-    },
+    colors,
     spacing,
     fontSize: {
       xs: '0.625rem',
@@ -85,5 +93,9 @@ module.exports = {
       semibold: 500,
       bold: 600,
     },
+    textColor: {
+      ...colors,
+      ...textColors,
+    },
   },
 };