@gitlab/ui 80.13.0 → 80.13.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [80.13.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.1...v80.13.2) (2024-05-24)
+
+
+### Bug Fixes
+
+* **GlExperimentBadge:** Update language of experiment badges ([82a3335](https://gitlab.com/gitlab-org/gitlab-ui/commit/82a33353c122ac6f269856f4c7f1efe0b8b58f50))
+
+## [80.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.13.0...v80.13.1) (2024-05-24)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** set initial state when value is updated to empty array ([19eb8fa](https://gitlab.com/gitlab-org/gitlab-ui/commit/19eb8fa4fe075597a6b938d1f8f019ae9a10e70b))
+
 # [80.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.12.0...v80.13.0) (2024-05-22)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -226,8 +226,9 @@ var script = {
     },
     value: {
       handler(newValue, oldValue) {
-        if (newValue.length && !isEqual(newValue, oldValue)) {
-          this.applyNewValue(cloneDeep(newValue));
+        if (!isEqual(newValue, oldValue)) {
+          const value = newValue.length ? newValue : initialState();
+          this.applyNewValue(cloneDeep(value));
         }
       },
       deep: true,

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -9,15 +9,15 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an Experiment?",
-    POPOVER_CONTENT: "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
-    POPOVER_BULLETS: ['May be unstable', 'Has no support and might not be documented', 'Can be removed at any time']
+    POPOVER_TITLE: "What's an experiment?",
+    POPOVER_CONTENT: 'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.\nExperiments: %{bullets}',
+    POPOVER_BULLETS: ['Might be unstable or cause data loss.', 'Are not supported and might not be documented.', 'Could be changed or removed at any time.', 'Are subject to the GitLab Testing Agreement.']
   },
   beta: {
     BADGE: 'Beta',
-    POPOVER_TITLE: "What's a Beta?",
-    POPOVER_CONTENT: "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
-    POPOVER_BULLETS: ['May be unstable', 'Should not cause data loss', 'Is supported by a commercially reasonable effort', 'Is complete or near completion']
+    POPOVER_TITLE: "What's a beta?",
+    POPOVER_CONTENT: "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.\nBeta features: %{bullets}",
+    POPOVER_BULLETS: ['Have a low risk of data loss, but might still be unstable.', 'Are supported on a commercially-reasonable effort basis.', 'Have a near complete user experience.', 'Are subject to the GitLab Testing Agreement.']
   }
 };
 var script = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.13.0",
+  "version": "80.13.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -18,7 +18,10 @@
     "src",
     "dist",
     "translations.json",
-    "tailwind.defaults.js"
+    "tailwind.defaults.js",
+    "!*.stories.js",
+    "!*.snap",
+    "!*.spec.{js,scss}"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -31,15 +34,18 @@
     "clean": "rm -r dist storybook src/scss/utilities.scss",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
     "cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
-    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities",
-    "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
+    "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook:prepare": "run-s copy-fonts build-tokens generate-utilities",
+    "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
+    "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
+    "storybook:run": "npx http-server -bgs -p 9001 ./storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
+    "test:integration": "yarn run test:integration:server 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
+    "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -47,11 +53,10 @@
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
-    "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
-    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
-    "prettier": "prettier --check '**/*.{js,vue}'",
-    "prettier:fix": "prettier --write '**/*.{js,vue}'",
+    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
+    "prettier": "prettier --check '**/*.{js,ts,vue}'",
+    "prettier:fix": "prettier --write '**/*.{js,ts,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "preeslint": "yarn generate-utilities",
     "eslint:fix": "yarn eslint --fix",
@@ -103,6 +108,7 @@
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
     "@gitlab/svgs": "3.99.0",
+    "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -113,7 +119,7 @@
     "@storybook/addon-viewport": "^7.6.19",
     "@storybook/builder-webpack5": "^7.6.19",
     "@storybook/test": "^7.6.19",
-    "@storybook/test-runner": "0.18.0",
+    "@storybook/test-runner": "0.18.1",
     "@storybook/theming": "^7.6.19",
     "@storybook/vue": "^7.6.17",
     "@storybook/vue-webpack5": "^7.6.17",

package/src/components/base/filtered_search/filtered_search.vue

@@ -237,8 +237,9 @@ export default {
     },
     value: {
       handler(newValue, oldValue) {
-        if (newValue.length && !isEqual(newValue, oldValue)) {
-          this.applyNewValue(cloneDeep(newValue));
+        if (!isEqual(newValue, oldValue)) {
+          const value = newValue.length ? newValue : initialState();
+          this.applyNewValue(cloneDeep(value));
         }
       },
       deep: true,

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

@@ -9,25 +9,26 @@ import { badgeTypes, badgeTypeValidator } from './constants';
 export const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an Experiment?",
+    POPOVER_TITLE: "What's an experiment?",
     POPOVER_CONTENT:
-      "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+      'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.\nExperiments: %{bullets}',
     POPOVER_BULLETS: [
-      'May be unstable',
-      'Has no support and might not be documented',
-      'Can be removed at any time',
+      'Might be unstable or cause data loss.',
+      'Are not supported and might not be documented.',
+      'Could be changed or removed at any time.',
+      'Are subject to the GitLab Testing Agreement.',
     ],
   },
   beta: {
     BADGE: 'Beta',
-    POPOVER_TITLE: "What's a Beta?",
+    POPOVER_TITLE: "What's a beta?",
     POPOVER_CONTENT:
-      "A %{linkStart}Beta%{linkEnd} feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.\nA Beta feature: %{bullets}",
+      "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.\nBeta features: %{bullets}",
     POPOVER_BULLETS: [
-      'May be unstable',
-      'Should not cause data loss',
-      'Is supported by a commercially reasonable effort',
-      'Is complete or near completion',
+      'Have a low risk of data loss, but might still be unstable.',
+      'Are supported on a commercially-reasonable effort basis.',
+      'Have a near complete user experience.',
+      'Are subject to the GitLab Testing Agreement.',
     ],
   },
 };

package/src/components/base/accordion/accordion.spec.js

@@ -1,58 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import GlAccordion from './accordion.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-describe('GlAccordion', () => {
-  let wrapper;
-
-  const createComponent = ({ headerLevel = 3, autoCollapse = false } = {}) => {
-    wrapper = mount(
-      Vue.extend({
-        components: { GlAccordion, GlAccordionItem },
-        data() {
-          return { headerLevel, autoCollapse };
-        },
-        // eslint-disable-next-line @gitlab/no-runtime-template-compiler
-        template: `
-          <gl-accordion :header-level="headerLevel" :auto-collapse="autoCollapse">
-            <gl-accordion-item title="Item 1">
-              Foo
-            </gl-accordion-item>
-            <gl-accordion-item title="Item 2">
-              Bar
-            </gl-accordion-item>
-            <gl-accordion-item title="Item 3">
-              Bin
-            </gl-accordion-item>
-          </gl-accordion>`,
-      })
-    );
-  };
-
-  const findAccordionItems = () => wrapper.findAllComponents(GlAccordionItem);
-
-  it('does not populate the accordion prop by default', () => {
-    createComponent();
-    const accordionSetId = findAccordionItems().at(0).vm.accordion;
-
-    // accordion should not be set
-    expect(accordionSetId).toBeUndefined();
-  });
-
-  it('populates the accordion prop when autoCollapse is true', () => {
-    createComponent({ autoCollapse: true });
-    const accordionSetId = findAccordionItems().at(0).vm.accordion;
-
-    // accordion should be set
-    expect(accordionSetId).not.toBeUndefined();
-
-    // accordion should be the same across glAccordionItem children
-    expect(findAccordionItems().at(1).vm.accordion).toEqual(accordionSetId);
-  });
-
-  it('passes a default headerLevel to children', () => {
-    createComponent({ headerLevel: 4 });
-    expect(wrapper.findAll('h4')).toHaveLength(findAccordionItems().length);
-  });
-});

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

@@ -1,59 +0,0 @@
-import readme from './accordion.md';
-import GlAccordion from './accordion.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-const template = `
-    <gl-accordion :auto-collapse="autoCollapse" :header-level="headerLevel">
-      <gl-accordion-item title="Item 1" :header-level="headerLevel">
-        Each accordion can be expanded or collapsed independently of others.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 2" :header-level="headerLevel" :visible="true">
-        If you want to have an accordion item to be initially visible, please see
-        <code>Initially Expanded</code> example for the <code>GLAccordionItem</code>.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 3" :header-level="headerLevel" :visible="autoCollapse">
-        If you want the other accordion items to collapse when one is open, please see
-        <code>Auto Collapse</code> example.
-      </gl-accordion-item>
-    </gl-accordion>
-    `;
-
-const defaultValue = (prop) => GlAccordion.props[prop].default;
-
-const generateProps = ({ autoCollapse = defaultValue('autoCollapse'), headerLevel = 3 } = {}) => ({
-  autoCollapse,
-  headerLevel,
-});
-
-const Template = (args) => ({
-  components: {
-    GlAccordion,
-    GlAccordionItem,
-  },
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/accordion',
-  component: GlAccordion,
-  parameters: {
-    bootstrapComponent: 'b-collapse',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerLevel: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: 'select',
-    },
-  },
-};

package/src/components/base/accordion/accordion_item.spec.js

@@ -1,131 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { BCollapse } from 'bootstrap-vue';
-import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
-import { waitForAnimationFrame } from '../../../utils/test_utils';
-import GlButton from '../button/button.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-describe('GlAccordionItem', () => {
-  let wrapper;
-  const defaultTitle = 'Item 1';
-  const titleVisible = 'Item 1 visible';
-  const defaultSlot = 'Hello';
-
-  const createComponent = (props = {}, { defaultHeaderLevel = 3, accordionSetId = false } = {}) => {
-    wrapper = mount(GlAccordionItem, {
-      directives: {
-        GlCollapseToggle: GlCollapseToggleDirective,
-      },
-      provide: {
-        defaultHeaderLevel: () => defaultHeaderLevel,
-        accordionSetId: () => accordionSetId,
-      },
-      propsData: {
-        title: defaultTitle,
-        ...props,
-      },
-      slots: {
-        default: defaultSlot,
-      },
-    });
-  };
-
-  const findButton = () => wrapper.findComponent(GlButton);
-  const findCollapse = () => wrapper.findComponent(BCollapse);
-  const findHeader = () => wrapper.find('.gl-accordion-item-header');
-
-  it('renders button text', () => {
-    createComponent();
-
-    expect(findButton().find('span').text()).toBe(defaultTitle);
-  });
-
-  it('renders alternative button text when the content is visible and the titleVisible property is set', async () => {
-    createComponent({ titleVisible });
-
-    expect(findButton().find('span').text()).toBe(defaultTitle);
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(findButton().find('span').text()).toBe(titleVisible);
-  });
-
-  it('renders the appropriate header element', () => {
-    createComponent({}, { defaultHeaderLevel: 3 });
-
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(true);
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(false);
-  });
-
-  it('renders the appropriate header element when overridden', () => {
-    createComponent({ headerLevel: 4 }, { defaultHeaderLevel: 3 });
-
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(false);
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(true);
-  });
-
-  it.each(['custom-header-class', ['custom-header-class'], { 'custom-header-class': true }])(
-    'applies custom classes to the header',
-    (customClassProp) => {
-      createComponent({ headerClass: customClassProp }, { defaultHeaderLevel: 3 });
-
-      expect(findHeader().classes()).toContain('custom-header-class');
-    }
-  );
-
-  it('renders slot text', () => {
-    createComponent();
-
-    expect(findCollapse().text()).toBe(defaultSlot);
-  });
-
-  it('is not expanded by default', () => {
-    createComponent();
-
-    expect(findButton().props('icon')).toBe('chevron-right');
-    expect(findCollapse().props('visible')).toBe(false);
-  });
-
-  it('is expanded on button click', async () => {
-    createComponent();
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(findButton().props('icon')).toBe('chevron-down');
-    expect(findCollapse().props('visible')).toBe(true);
-  });
-
-  it('passes accordion identifier to BCollapse', () => {
-    const accordionId = 'my-accordion';
-
-    createComponent({}, { accordionSetId: accordionId });
-
-    expect(findCollapse().props('accordion')).toBe(accordionId);
-  });
-
-  it('expands initially when visible prop is passed', async () => {
-    createComponent({ visible: true });
-
-    await wrapper.vm.$nextTick();
-
-    expect(findButton().props('icon')).toBe('chevron-down');
-    expect(findCollapse().props('visible')).toBe(true);
-  });
-
-  it('emits the initial visible state', () => {
-    createComponent({ visible: true });
-
-    expect(wrapper.emitted('input')).toEqual([[true]]);
-  });
-
-  it('emits the visible state when toggled', async () => {
-    createComponent({ visible: true });
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(wrapper.emitted('input')).toEqual([[true], [false]]);
-  });
-});

package/src/components/base/accordion/accordion_item.stories.js

@@ -1,57 +0,0 @@
-import readme from './accordion_item.md';
-import GlAccordionItem from './accordion_item.vue';
-
-const template = `
-    <gl-accordion-item :title="title" :titleVisible="titleVisible" :visible="visible" :header-level="headerLevel">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, maiores.
-    </gl-accordion-item>
-    `;
-
-const defaultValue = (prop) => GlAccordionItem.props[prop].default;
-
-const generateProps = ({
-  visible = defaultValue('visible'),
-  headerLevel = 3,
-  title = 'Accordion Item Title',
-  titleVisible = undefined,
-} = {}) => ({
-  visible,
-  headerLevel,
-  title,
-  titleVisible,
-});
-
-const Template = (args) => ({
-  components: {
-    GlAccordionItem,
-  },
-  props: Object.keys(args),
-  template,
-  provide: {
-    defaultHeaderLevel: () => defaultValue('headerLevel'),
-    accordionSetId: () => '1',
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps({ visible: true, titleVisible: 'Accordion Item Title Expanded' });
-
-export default {
-  title: 'base/accordion/accordion-item',
-  component: GlAccordionItem,
-  bootstrapComponent: 'b-collapse',
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerLevel: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: 'select',
-    },
-  },
-};