@gitlab/ui 79.4.1 → 80.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "79.4.1",
+  "version": "80.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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",
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.15.2",
+    "eslint-plugin-cypress": "3.0.0",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

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',
   },

package/src/components/charts/stacked_column/stacked_column.md

@@ -1,5 +1,5 @@
 The `presentation` property allows you to change between a stacked and tiled presentation style. It
-is only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.
+is only setup to accept `stacked` or `tiled` as values, the default value is `stacked`.
 
 The `stacked` presentation allows to view multiple series of the same stack as a single column,
 while `tiled` presents the information in multiple columns for each series of a stack.

package/src/scss/utilities.scss

@@ -6757,36 +6757,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-left: -#{$gl-spacing-scale-6} !important;
   margin-right: -#{$gl-spacing-scale-6} !important;
 }
-.gl-gap-x-3 {
-  > * + * {
-    margin-left: #{$gl-spacing-scale-3};
-  }
-}
-.gl-gap-x-3\! {
-  > * + * {
-    margin-left: #{$gl-spacing-scale-3} !important;
-  }
-}
-.gl-gap-x-5 {
-  > * + * {
-    margin-left: #{$gl-spacing-scale-5};
-  }
-}
-.gl-gap-x-5\! {
-  > * + * {
-    margin-left: #{$gl-spacing-scale-5} !important;
-  }
-}
-.gl-gap-y-3 {
-  > * + * {
-    margin-top: #{$gl-spacing-scale-3};
-  }
-}
-.gl-gap-y-3\! {
-  > * + * {
-    margin-top: #{$gl-spacing-scale-3} !important;
-  }
-}
 .gl-gap-1 {
   gap: $gl-spacing-scale-1;
 }

package/src/scss/utility-mixins/spacing.scss

@@ -864,24 +864,6 @@
 * - Utilities should be refactored to use gap after dropping Safari 13.x support
 */
 
-@mixin gl-gap-x-3 {
-  > * + * {
-    margin-left: #{$gl-spacing-scale-3};
-  }
-}
-
-@mixin gl-gap-x-5 {
-  > * + * {
-    margin-left: #{$gl-spacing-scale-5};
-  }
-}
-
-@mixin gl-gap-y-3 {
-  > * + * {
-    margin-top: #{$gl-spacing-scale-3};
-  }
-}
-
 @mixin gl-gap-1 {
   gap: $gl-spacing-scale-1;
 }

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

@@ -3,7 +3,7 @@
     "primary": {
       "$value": "#ececef",
       "$type": "color",
-      "$description": "Use text.color.strong instead",
+      "$description": "Use text.color.default instead",
       "deprecated": true,
       "themeable": true
     },

package/src/tokens/text.tokens.json

@@ -3,7 +3,7 @@
     "primary": {
       "$value": "#333238",
       "$type": "color",
-      "$description": "Use text.color.strong instead",
+      "$description": "Use text.color.default instead",
       "deprecated": true,
       "themeable": true
     },