@gitlab/ui 64.12.0 → 64.13.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [64.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.13.0...v64.13.1) (2023-06-21)
+
+
+### Bug Fixes
+
+* **css:** Allow overriding gray-a variables ([04cc50e](https://gitlab.com/gitlab-org/gitlab-ui/commit/04cc50e4cb742f42029ea2ad7882d05991afc74d))
+
+# [64.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.12.0...v64.13.0) (2023-06-19)
+
+
+### Features
+
+* **GlKeysetPagination:** hides component when hasPreviousPage & hasNextPage is falsy ([93dbdfc](https://gitlab.com/gitlab-org/gitlab-ui/commit/93dbdfc3f94cfdd407e17316c3c329d1180786a0))
+
 # [64.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.11.1...v64.12.0) (2023-06-19)
 
 

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -104,6 +104,11 @@ var script = {
       required: false,
       default: false
     }
+  },
+  computed: {
+    isVisible() {
+      return this.hasPreviousPage || this.hasNextPage;
+    }
   }
 };
 
@@ -111,7 +116,7 @@ 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('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.12.0",
+  "version": "64.13.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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.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",
+    "@storybook/addon-a11y": "7.0.22",
+    "@storybook/addon-docs": "7.0.22",
+    "@storybook/addon-essentials": "7.0.22",
+    "@storybook/addon-storyshots": "7.0.22",
+    "@storybook/addon-storyshots-puppeteer": "7.0.22",
+    "@storybook/addon-viewport": "7.0.22",
+    "@storybook/builder-webpack5": "7.0.22",
+    "@storybook/theming": "7.0.22",
+    "@storybook/vue": "7.0.22",
+    "@storybook/vue-webpack5": "7.0.22",
+    "@storybook/vue3": "7.0.22",
+    "@storybook/vue3-webpack5": "7.0.22",
     "@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.21",
+    "storybook": "7.0.22",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "^9.0.5",

package/scss_to_js/scss_variables.js

@@ -238,10 +238,6 @@ export const dataVizOrange700 = '#92430a'
 export const dataVizOrange800 = '#6f3500'
 export const dataVizOrange900 = '#5e2f05'
 export const dataVizOrange950 = '#4b2707'
-export const darkenNormalFactor = '7%'
-export const darkenDarkFactor = '10%'
-export const darkenBorderFactor = '5%'
-export const darkenBorderDashedFactor = '25%'
 export const tGrayA02 = 'rgba(31, 30, 36, 0.02)'
 export const tGrayA04 = 'rgba(31, 30, 36, 0.04)'
 export const tGrayA06 = 'rgba(31, 30, 36, 0.06)'

package/scss_to_js/scss_variables.json

@@ -1227,26 +1227,6 @@
       "value": "#4b2707",
       "compiledValue": "#4b2707"
     },
-    {
-      "name": "$darken-normal-factor",
-      "value": "7%",
-      "compiledValue": "7%"
-    },
-    {
-      "name": "$darken-dark-factor",
-      "value": "10%",
-      "compiledValue": "10%"
-    },
-    {
-      "name": "$darken-border-factor",
-      "value": "5%",
-      "compiledValue": "5%"
-    },
-    {
-      "name": "$darken-border-dashed-factor",
-      "value": "25%",
-      "compiledValue": "25%"
-    },
     {
       "name": "$t-gray-a-02",
       "value": "rgba($gray-950, 0.02)",

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/scss/variables.scss

@@ -303,17 +303,12 @@ $data-viz-orange-800: #6f3500;
 $data-viz-orange-900: #5e2f05;
 $data-viz-orange-950: #4b2707;
 
-$darken-normal-factor: 7%;
-$darken-dark-factor: 10%;
-$darken-border-factor: 5%;
-$darken-border-dashed-factor: 25%;
-
-$t-gray-a-02: rgba($gray-950, 0.02);
-$t-gray-a-04: rgba($gray-950, 0.04);
-$t-gray-a-06: rgba($gray-950, 0.06);
-$t-gray-a-08: rgba($gray-950, 0.08);
-$t-gray-a-16: rgba($gray-950, 0.16);
-$t-gray-a-24: rgba($gray-950, 0.24);
+$t-gray-a-02: rgba($gray-950, 0.02) !default;
+$t-gray-a-04: rgba($gray-950, 0.04) !default;
+$t-gray-a-06: rgba($gray-950, 0.06) !default;
+$t-gray-a-08: rgba($gray-950, 0.08) !default;
+$t-gray-a-16: rgba($gray-950, 0.16) !default;
+$t-gray-a-24: rgba($gray-950, 0.24) !default;
 
 // Text
 $gl-text-color: $gray-900 !default;