@gitlab/ui 87.1.0 → 87.1.2

package/dist/tokens/tokens_table.js

@@ -1,7 +1,10 @@
 import GlBadge from '../components/base/badge/badge';
+import GlButton from '../components/base/button/button';
 import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox';
 import GlFormInput from '../components/base/form/form_input/form_input';
+import GlLink from '../components/base/link/link';
 import GlTable from '../components/base/table/table';
+import { GlTooltipDirective } from '../directives/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -12,10 +15,15 @@ var script = {
   TOKENS_DARK,
   components: {
     GlBadge,
+    GlButton,
     GlCollapsibleListbox,
     GlFormInput,
+    GlLink,
     GlTable
   },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
   fields: [{
     key: 'description',
     label: 'Description'
@@ -26,6 +34,19 @@ var script = {
   data() {
     return {
       filter: null,
+      platforms: [{
+        value: 'name',
+        text: 'Name'
+      }, {
+        value: 'figma',
+        text: 'Figma'
+      }, {
+        value: 'css',
+        text: 'CSS'
+      }, {
+        value: 'scss',
+        text: 'SCSS'
+      }],
       modes: [{
         value: 'default',
         text: 'Default'
@@ -33,6 +54,7 @@ var script = {
         value: 'dark',
         text: 'Dark'
       }],
+      selectedPlatform: 'name',
       selectedMode: 'default',
       tokens: {
         default: this.$options.TOKENS_DEFAULT,
@@ -75,7 +97,8 @@ var script = {
     },
     transformTokenToTableColumns(token) {
       return {
-        name: token.path.filter(Boolean).join('.'),
+        id: token.path.filter(Boolean).join('-'),
+        name: this.formatTokenName(this.selectedPlatform, token),
         type: token.$type,
         value: token.value,
         valueLabel: this.getValueLabel(token),
@@ -93,9 +116,19 @@ var script = {
           tokensArray.push(...this.transformTokensToTableRows(token));
         }
       });
-
+      tokensArray
+      // Sort tokensArray by id
+      .sort((a, b) => {
+        if (a.id < b.id) {
+          return -1;
+        }
+        if (a.id > b.id) {
+          return 1;
+        }
+        return 0;
+      })
       // Sort tokensArray so deprecated items are last
-      tokensArray.sort((a, b) => {
+      .sort((a, b) => {
         if (a.deprecated && !b.deprecated) {
           return 1;
         }
@@ -105,6 +138,32 @@ var script = {
         return 0;
       });
       return tokensArray;
+    },
+    formatTokenName(format, token) {
+      let figmaPrefix = '';
+      const prefix = token.prefix === false ? '' : 'gl';
+      switch (format) {
+        case 'figma':
+          if (token.filePath.match('contextual')) {
+            figmaPrefix = '🔒/';
+          }
+          if (token.deprecated) {
+            figmaPrefix = '⚠️ DEPRECATED/';
+          }
+          return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;
+        case 'css':
+          return `var(--${[prefix, ...token.path].filter(Boolean).join('-')})`;
+        case 'scss':
+          return `$${[prefix, ...token.path].filter(Boolean).join('-')}`;
+        default:
+          return token.path.filter(Boolean).join('.');
+      }
+    },
+    getTokenName(token) {
+      return `$${token.prefix === false ? '' : 'gl-'}${token.path.filter(Boolean).join('-')}`;
+    },
+    copyToClipboard(value) {
+      navigator.clipboard.writeText(value);
     }
   }
 };
@@ -113,12 +172,12 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-mb-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-form-input',{attrs:{"placeholder":"Type to search"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"id":"component-listbox","selected":_vm.selectedMode,"items":_vm.modes},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedMode),callback:function ($$v) {_vm.selectedMode=$$v;},expression:"selectedMode"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"filter":_vm.filter,"items":_vm.items,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.name }); },"hover":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{staticClass:"gl-text-sm gl-text-subtle"},[_vm._v("\n    For full token details, see\n    "),_c('gl-link',{attrs:{"href":"https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json","target":"_blank"}},[_vm._v("https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json")])],1),_vm._v(" "),_c('div',{staticClass:"gl-mb-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-form-input',{attrs:{"placeholder":"Type to search"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"selected":_vm.selectedPlatform,"items":_vm.platforms},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedPlatform),callback:function ($$v) {_vm.selectedPlatform=$$v;},expression:"selectedPlatform"}}),_vm._v(" "),_c('gl-collapsible-listbox',{attrs:{"selected":_vm.selectedMode,"items":_vm.modes},on:{"search":function($event){_vm.query = $event;}},model:{value:(_vm.selectedMode),callback:function ($$v) {_vm.selectedMode=$$v;},expression:"selectedMode"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"filter":_vm.filter,"items":_vm.items,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.id }); },"hover":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
 var ref_item = ref.item;
 var name = ref_item.name;
 var deprecated = ref_item.deprecated;
 var description = ref_item.description;
-return [_c('code',{staticClass:"gl-text-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n      ")]),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e(),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
+return [_c('code',{staticClass:"gl-text-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":("Copy " + _vm.selectedPlatform + " value to clipboard"),"icon":"copy-to-clipboard","aria-label":("Copy " + _vm.selectedPlatform + " value to clipboard"),"size":"small"},on:{"click":function($event){return _vm.copyToClipboard(name)}}})],1),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e(),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
 var ref_item = ref.item;
 var type = ref_item.type;
 var value = ref_item.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "87.1.0",
+  "version": "87.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -114,7 +114,7 @@
     "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.108.0",
+    "@gitlab/svgs": "3.109.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -172,8 +172,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.45.2",
-    "playwright-core": "^1.45.2",
+    "playwright": "^1.45.3",
+    "playwright-core": "^1.45.3",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

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

@@ -81,15 +81,15 @@ $badge-min-width: $gl-spacing-scale-3;
   justify-content: center;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
-  // Enable support for gl-text-truncate
-  width: 100%;
-  // Mitigate the effect of width: 100%
-  max-width: max-content;
   transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
               background-color $gl-transition-duration-medium $gl-easing-out-cubic,
               border-color $gl-transition-duration-medium $gl-easing-out-cubic,
               box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
 
+  &:has(.gl-truncate, .gl-text-truncate) {
+    max-width: 100%;
+  }
+
   @media (prefers-reduced-motion) {
     transition-duration: .01ms !important;
   }

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

@@ -241,6 +241,9 @@ export default {
       return this.lastMessage?.content === CHAT_RESET_MESSAGE;
     },
     isStreaming() {
+      if (this.canceledRequestIds.includes(this.lastMessage?.requestId)) {
+        return false;
+      }
       return Boolean(
         (this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content) ||
           typeof this.lastMessage?.chunkId === 'number'

package/src/tokens/tokens_table.vue

@@ -1,8 +1,11 @@
 <script>
 import GlBadge from '../components/base/badge/badge.vue';
+import GlButton from '../components/base/button/button.vue';
 import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox.vue';
 import GlFormInput from '../components/base/form/form_input/form_input.vue';
+import GlLink from '../components/base/link/link.vue';
 import GlTable from '../components/base/table/table.vue';
+import { GlTooltipDirective } from '../directives/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 
@@ -12,10 +15,15 @@ export default {
   TOKENS_DARK,
   components: {
     GlBadge,
+    GlButton,
     GlCollapsibleListbox,
     GlFormInput,
+    GlLink,
     GlTable,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   fields: [
     {
       key: 'description',
@@ -29,6 +37,24 @@ export default {
   data() {
     return {
       filter: null,
+      platforms: [
+        {
+          value: 'name',
+          text: 'Name',
+        },
+        {
+          value: 'figma',
+          text: 'Figma',
+        },
+        {
+          value: 'css',
+          text: 'CSS',
+        },
+        {
+          value: 'scss',
+          text: 'SCSS',
+        },
+      ],
       modes: [
         {
           value: 'default',
@@ -39,6 +65,7 @@ export default {
           text: 'Dark',
         },
       ],
+      selectedPlatform: 'name',
       selectedMode: 'default',
       tokens: {
         default: this.$options.TOKENS_DEFAULT,
@@ -81,7 +108,8 @@ export default {
     },
     transformTokenToTableColumns(token) {
       return {
-        name: token.path.filter(Boolean).join('.'),
+        id: token.path.filter(Boolean).join('-'),
+        name: this.formatTokenName(this.selectedPlatform, token),
         type: token.$type,
         value: token.value,
         valueLabel: this.getValueLabel(token),
@@ -101,29 +129,79 @@ export default {
         }
       });
 
-      // Sort tokensArray so deprecated items are last
-      tokensArray.sort((a, b) => {
-        if (a.deprecated && !b.deprecated) {
-          return 1;
-        }
-        if (!a.deprecated && b.deprecated) {
-          return -1;
-        }
-        return 0;
-      });
+      tokensArray
+        // Sort tokensArray by id
+        .sort((a, b) => {
+          if (a.id < b.id) {
+            return -1;
+          }
+          if (a.id > b.id) {
+            return 1;
+          }
+          return 0;
+        })
+        // Sort tokensArray so deprecated items are last
+        .sort((a, b) => {
+          if (a.deprecated && !b.deprecated) {
+            return 1;
+          }
+          if (!a.deprecated && b.deprecated) {
+            return -1;
+          }
+          return 0;
+        });
 
       return tokensArray;
     },
+    formatTokenName(format, token) {
+      let figmaPrefix = '';
+      const prefix = token.prefix === false ? '' : 'gl';
+      switch (format) {
+        case 'figma':
+          if (token.filePath.match('contextual')) {
+            figmaPrefix = '🔒/';
+          }
+          if (token.deprecated) {
+            figmaPrefix = '⚠️ DEPRECATED/';
+          }
+          return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;
+        case 'css':
+          return `var(--${[prefix, ...token.path].filter(Boolean).join('-')})`;
+        case 'scss':
+          return `$${[prefix, ...token.path].filter(Boolean).join('-')}`;
+        default:
+          return token.path.filter(Boolean).join('.');
+      }
+    },
+    getTokenName(token) {
+      return `$${token.prefix === false ? '' : 'gl-'}${token.path.filter(Boolean).join('-')}`;
+    },
+    copyToClipboard(value) {
+      navigator.clipboard.writeText(value);
+    },
   },
 };
 </script>
 
 <template>
   <div>
+    <p class="gl-text-sm gl-text-subtle">
+      For full token details, see
+      <gl-link
+        href="https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json"
+        target="_blank"
+        >https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json</gl-link
+      >
+    </p>
     <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"
+        v-model="selectedPlatform"
+        :selected="selectedPlatform"
+        :items="platforms"
+        @search="query = $event"
+      />
+      <gl-collapsible-listbox
         v-model="selectedMode"
         :selected="selectedMode"
         :items="modes"
@@ -134,13 +212,21 @@ export default {
       :filter="filter"
       :items="items"
       :fields="$options.fields"
-      :tbody-tr-attr="(item) => ({ id: item.name })"
+      :tbody-tr-attr="(item) => ({ id: item.id })"
       hover
       stacked="sm"
     >
       <template #cell(description)="{ item: { name, deprecated, description } }">
         <code class="gl-text-base gl-text-strong">
           {{ name }}
+          <gl-button
+            v-gl-tooltip
+            :title="`Copy ${selectedPlatform} value to clipboard`"
+            icon="copy-to-clipboard"
+            :aria-label="`Copy ${selectedPlatform} value to clipboard`"
+            size="small"
+            @click="copyToClipboard(name)"
+          />
         </code>
         <gl-badge v-if="deprecated" variant="danger">Deprecated</gl-badge>
         <div v-if="description" class="gl-mt-3 gl-text-subtle">