@gitlab/ui 64.11.1 → 64.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.11.1",
+  "version": "64.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,13 +30,13 @@
     "cy:edge": "cypress run --browser edge",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && storybook dev --ci --host localhost --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host localhost --port 9001 -c .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 generate-utilities build-scss-variables copy-fonts",
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-scss-variables",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://localhost:9001/iframe.html cy:run",
+    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html cy:run",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "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",
@@ -46,7 +46,7 @@
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
-    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001/iframe.html",
+    "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}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
@@ -94,18 +94,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.20",
-    "@storybook/addon-docs": "7.0.20",
-    "@storybook/addon-essentials": "7.0.20",
-    "@storybook/addon-storyshots": "7.0.20",
-    "@storybook/addon-storyshots-puppeteer": "7.0.20",
-    "@storybook/addon-viewport": "7.0.20",
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/vue": "7.0.20",
-    "@storybook/vue-webpack5": "7.0.20",
-    "@storybook/vue3": "7.0.20",
-    "@storybook/vue3-webpack5": "7.0.20",
+    "@storybook/addon-a11y": "7.0.21",
+    "@storybook/addon-docs": "7.0.21",
+    "@storybook/addon-essentials": "7.0.21",
+    "@storybook/addon-storyshots": "7.0.21",
+    "@storybook/addon-storyshots-puppeteer": "7.0.21",
+    "@storybook/addon-viewport": "7.0.21",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/vue": "7.0.21",
+    "@storybook/vue-webpack5": "7.0.21",
+    "@storybook/vue3": "7.0.21",
+    "@storybook/vue3-webpack5": "7.0.21",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -153,7 +153,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.20",
+    "storybook": "7.0.21",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "^9.0.5",

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

@@ -12,7 +12,11 @@ describe('GlKeysetPagination', () => {
 
   const createComponent = (props = {}, scopedSlots = {}) => {
     wrapper = mount(GlKeysetPagination, {
-      propsData: props,
+      propsData: {
+        hasPreviousPage: true,
+        hasNextPage: true,
+        ...props,
+      },
       scopedSlots,
     });
   };
@@ -56,14 +60,14 @@ describe('GlKeysetPagination', () => {
     });
   });
 
-  describe('without any props', () => {
+  describe('when both hasNextPage & hasPreviousPage is false', () => {
     beforeEach(() => {
-      createComponent();
+      createComponent({ hasNextPage: false, hasPreviousPage: false });
     });
 
-    it('renders with two disabled buttons', () => {
-      expectPrevButtonToBeDisabled();
-      expectNextButtonToBeDisabled();
+    it('does not render pagination', () => {
+      expect(findPrevButton().exists()).toBe(false);
+      expect(findNextButton().exists()).toBe(false);
     });
   });
 

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -105,11 +105,16 @@ export default {
       default: false,
     },
   },
+  computed: {
+    isVisible() {
+      return this.hasPreviousPage || this.hasNextPage;
+    },
+  },
 };
 </script>
 
 <template>
-  <nav class="gl-pagination" :aria-label="navigationLabel">
+  <nav v-if="isVisible" class="gl-pagination" :aria-label="navigationLabel">
     <gl-button-group class="gl-keyset-pagination" v-bind="$attrs" v-on="$listeners">
       <gl-button
         :href="prevButtonLink"

package/src/config.js

@@ -7,6 +7,8 @@ const bFormTextGlobalConfig = {
 };
 
 const tooltipGlobalConfig = {
+  // Work around for https://github.com/bootstrap-vue/bootstrap-vue/issues/6507
+  boundaryPadding: 5,
   customClass: 'gl-tooltip',
   delay: tooltipDelay,
 };

package/src/scss/utilities.scss

@@ -5164,6 +5164,54 @@
   min-width: 0 !important;
 }
 
+.gl-min-w-1 {
+  min-width: $gl-spacing-scale-1;
+}
+
+.gl-min-w-1\! {
+  min-width: $gl-spacing-scale-1 !important;
+}
+
+.gl-min-w-2 {
+  min-width: $gl-spacing-scale-2;
+}
+
+.gl-min-w-2\! {
+  min-width: $gl-spacing-scale-2 !important;
+}
+
+.gl-min-w-3 {
+  min-width: $gl-spacing-scale-3;
+}
+
+.gl-min-w-3\! {
+  min-width: $gl-spacing-scale-3 !important;
+}
+
+.gl-min-w-4 {
+  min-width: $gl-spacing-scale-4;
+}
+
+.gl-min-w-4\! {
+  min-width: $gl-spacing-scale-4 !important;
+}
+
+.gl-min-w-5 {
+  min-width: $gl-spacing-scale-5;
+}
+
+.gl-min-w-5\! {
+  min-width: $gl-spacing-scale-5 !important;
+}
+
+.gl-min-w-6 {
+  min-width: $gl-spacing-scale-6;
+}
+
+.gl-min-w-6\! {
+  min-width: $gl-spacing-scale-6 !important;
+}
+
 .gl-min-w-7 {
   min-width: $gl-spacing-scale-7;
 }

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

@@ -344,6 +344,30 @@
   min-width: 0;
 }
 
+@mixin gl-min-w-1 {
+  min-width: $gl-spacing-scale-1;
+}
+
+@mixin gl-min-w-2 {
+  min-width: $gl-spacing-scale-2;
+}
+
+@mixin gl-min-w-3 {
+  min-width: $gl-spacing-scale-3;
+}
+
+@mixin gl-min-w-4 {
+  min-width: $gl-spacing-scale-4;
+}
+
+@mixin gl-min-w-5 {
+  min-width: $gl-spacing-scale-5;
+}
+
+@mixin gl-min-w-6 {
+  min-width: $gl-spacing-scale-6;
+}
+
 @mixin gl-min-w-7 {
   min-width: $gl-spacing-scale-7;
 }