@gitlab/ui 80.0.0 → 80.1.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Fri, 03 May 2024 04:11:25 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Fri, 03 May 2024 04:11:25 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Fri, 03 May 2024 04:11:25 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Fri, 03 May 2024 04:11:25 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 01 May 2024 16:11:38 GMT
+// Generated on Fri, 03 May 2024 04:11:26 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 01 May 2024 16:11:38 GMT
+// Generated on Fri, 03 May 2024 04:11:25 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.0.0",
+  "version": "80.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
     "bootstrap": ">=4.5.3 <=4.6.2",
-    "dompurify": "^2.4.7 || ^3.0.5",
+    "dompurify": ">=2.5.2 <3.0.0 || >=3.1.2",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
     "tailwindcss": "^3",
@@ -93,10 +93,10 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.5.0",
@@ -131,14 +131,14 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.8.0",
+    "cypress": "13.8.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
-    "dompurify": "^3.0.0",
+    "dompurify": "^3.1.2",
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.0.0",
+    "eslint-plugin-cypress": "3.0.3",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

package/src/components/base/drawer/drawer.scss

@@ -100,6 +100,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 }
 
 .gl-drawer-close-button {
+  @include gl-align-self-start;
   @include gl-bg-none;
   @include gl-border-none;
 }

package/src/components/base/drawer/drawer.stories.js

@@ -144,7 +144,7 @@ export const WithActions = (_args, { viewMode }) => ({
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       ${createSidebarTemplate(`
           <template #title>
-          <h3>custom-network-policy</h3>
+          <h3>custom-network-policy multiple lines headline</h3>
         </template>
         <template #header>
             <div class="gl-mt-5">

package/src/components/base/form/form_select/form_select.stories.js

@@ -1,25 +1,32 @@
-import { formStateOptions, formInputWidths } from '../../../../utils/constants';
-import GlFormSelect from './form_select.vue';
+import uniqueId from 'lodash/uniqueId';
+import { formInputWidths, formStateOptions } from '../../../../utils/constants';
+import GlFormGroup from '../form_group/form_group.vue';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
+import GlFormSelect from './form_select.vue';
 
 const data = () => ({
   selected: 'Pizza',
 });
 
 const template = `
-<gl-form-select
-  v-model="selected"
-  :width="width"
-  :disabled="disabled"
-  :state="state"
-  :multiple="multiple"
-  :selectSize="selectSize"
-  :options="options">
-</gl-form-select>
+<gl-form-group :label="labelText" :label-for="inputId">
+  <gl-form-select
+    :id="inputId"
+    v-model="selected"
+    :width="width"
+    :disabled="disabled"
+    :state="state"
+    :multiple="multiple"
+    :selectSize="selectSize"
+    :options="options">
+  </gl-form-select>
+</gl-form-group>
 `;
 
 const generateProps = ({
+  inputId = uniqueId('input-'),
+  labelText = 'Label',
   width = null,
   state = null,
   disabled = false,
@@ -27,6 +34,8 @@ const generateProps = ({
   selectSize = 1,
   options = formSelectOptions,
 } = {}) => ({
+  inputId,
+  labelText,
   width,
   disabled,
   state,
@@ -36,7 +45,7 @@ const generateProps = ({
 });
 
 const Template = (args) => ({
-  components: { GlFormSelect },
+  components: { GlFormSelect, GlFormGroup },
   props: Object.keys(args),
   data,
   template,
@@ -55,7 +64,7 @@ export const InvalidState = Template.bind({});
 InvalidState.args = generateProps({ state: false });
 
 export const WithTruncation = (args, { argTypes }) => ({
-  components: { GlFormSelect },
+  components: { GlFormSelect, GlFormGroup },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -78,7 +87,7 @@ WithTruncation.args = generateProps({
 });
 
 export const Widths = (args, { argTypes }) => ({
-  components: { GlFormSelect },
+  components: { GlFormSelect, GlFormGroup },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -87,13 +96,14 @@ export const Widths = (args, { argTypes }) => ({
   },
   template: `
       <div>
-        <div v-for="(width, name) in formInputWidths" :key="width" class="gl-mb-4">
+        <gl-form-group v-for="(width, name) in formInputWidths" :key="width" :label="name" :label-for="'width-' + width">
           <gl-form-select
+            :id="'width-' + width"
             v-model="name"
             :width="width"
             :options="[{ value: name, text: name }]">
           </gl-form-select>
-        </div>
+        </gl-form-group>
       </div>`,
 });
 Widths.args = generateProps();

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

@@ -201,7 +201,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <template #list-item>
             <span class="gl-display-flex gl-flex-direction-column">
               <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
-              <span class="gl-text-gray-400">@thefox</span>
+              <span class="gl-text-gray-600">@thefox</span>
             </span>
           </template>
         </gl-disclosure-dropdown-item>

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

@@ -237,7 +237,11 @@ export default {
   },
   computed: {
     disclosureTag() {
-      if (this.items?.length || hasOnlyListItems(this.$scopedSlots)) {
+      if (
+        this.items?.length ||
+        // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+        hasOnlyListItems(this.$scopedSlots.default || this.$slots.default)
+      ) {
         return 'ul';
       }
       return 'div';

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

@@ -1,4 +1,6 @@
+import Vue from 'vue';
 import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
@@ -21,17 +23,14 @@ const isListItem = (tag) =>
 const isValidSlotTagVue2 = (vNode) =>
   Boolean(vNode) && isListItem(vNode.componentOptions?.tag || vNode.tag);
 
-const isValidSlotTag = (vNode) => {
+const isValidSlotTagVue3 = (vNode) => {
   return (
     [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(vNode.type?.name) ||
     vNode.type === 'li'
   );
 };
 
-const hasOnlyListItems = ({ default: defaultSlot }) => {
-  if (!isFunction(defaultSlot)) {
-    return false;
-  }
+const hasOnlyListItemsVue2 = (defaultSlot) => {
   const nodes = defaultSlot();
 
   if (!Array.isArray(nodes)) {
@@ -40,7 +39,32 @@ const hasOnlyListItems = ({ default: defaultSlot }) => {
 
   const tags = nodes.filter((vNode) => vNode.tag);
 
-  return tags.length && tags.every((tag) => isValidSlotTag(tag) || isValidSlotTagVue2(tag));
+  return tags.length && tags.every((tag) => isValidSlotTagVue2(tag));
+};
+
+const hasOnlyListItemsVue3 = (defaultSlot) => {
+  const nodes = defaultSlot();
+  const fragment = nodes.find((node) => Array.isArray(node.children) && node.children.length);
+  const targetNodes = fragment ? fragment.children : nodes;
+
+  return (
+    targetNodes
+      // Remove empty text vNodes
+      .filter((vNode) => !isString(vNode.text) || vNode.text.trim().length > 0)
+      .every((vNode) => isValidSlotTagVue3(vNode))
+  );
+};
+
+const hasOnlyListItems = (defaultSlot) => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+
+  if (Vue.version.startsWith('3')) {
+    return hasOnlyListItemsVue3(defaultSlot);
+  }
+
+  return hasOnlyListItemsVue2(defaultSlot);
 };
 
 export { itemsValidator, isItem, isGroup, hasOnlyListItems };

package/src/components/base/table/table.md

@@ -27,13 +27,13 @@ pagination, use `GlTableLite` which offers a subset of `GlTable` features.
     fields: [
       {
         key: 'column_one',
-        label: __('Column One'),
+        label: __('First column'),
         thClass: 'w-60p',
         tdClass: 'table-col d-flex'
       },
       {
         key: 'col_2',
-        label: __('Column 2'),
+        label: __('Second column'),
         thClass: 'w-15p',
         tdClass: 'table-col d-flex'
       },
@@ -43,7 +43,7 @@ pagination, use `GlTableLite` which offers a subset of `GlTable` features.
 <template>
   <gl-table :items="items" :fields="$options.fields">
     <template #head(column_one)>
-      <div>Column One</div>
+      <div>First column</div>
       <!-- This is the column head for the first object in `fields` -->
     </template>
 

package/src/components/base/table/table.stories.js

@@ -63,20 +63,20 @@ export const Default = (args, { argTypes }) => ({
   fields: [
     {
       key: 'column_one',
-      label: 'Column One',
+      label: 'First column',
       variant: 'secondary',
       sortable: true,
       isRowHeader: false,
     },
     {
       key: 'col_2',
-      label: 'Column 2',
+      label: 'Second column',
       formatter: (value) => value,
     },
     {
       key: 'col_three',
       sortable: true,
-      label: 'Column 2',
+      label: 'Third column',
       formatter: (value) => value,
       thClass: 'gl-text-right',
       tdClass: 'gl-text-right',

package/src/components/base/table_lite/table_lite.md

@@ -37,13 +37,13 @@ export default {
   fields: [
     {
       key: 'column_one',
-      label: __('Column One'),
+      label: __('First column'),
       thClass: 'w-60p',
       tdClass: 'table-col d-flex'
     },
     {
       key: 'col_2',
-      label: __('Column 2'),
+      label: __('Second column'),
       thClass: 'w-15p',
       tdClass: 'table-col d-flex'
     },
@@ -56,7 +56,7 @@ export default {
     :fields="$options.fields"
   >
     <template #head(column_one)>
-      <div>Column One</div><!-- This is the column head for the first object in `fields` -->
+      <div>First column</div><!-- This is the column head for the first object in `fields` -->
     </template>
 
     <template #cell(column_one)>

package/src/components/base/table_lite/table_lite.stories.js

@@ -4,13 +4,13 @@ import GlTableLite from './table_lite.vue';
 const fieldsMock = [
   {
     key: 'column_one',
-    label: 'Column One',
+    label: 'First column',
     thClass: 'w-60p',
     tdClass: 'table-col',
   },
   {
     key: 'column_two',
-    label: 'Column Two',
+    label: 'Second column',
     thClass: 'w-60p',
     tdClass: 'table-col',
   },