@gitlab/ui 71.3.0 → 71.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [71.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.3.0...v71.4.0) (2023-12-04)
+
+
+### Features
+
+* **GlTruncateText:** add `toggleButtonProps` prop ([25a6577](https://gitlab.com/gitlab-org/gitlab-ui/commit/25a6577ba7061ce82d040ad5cda6977477e04f41))
+
 # [71.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.2.0...v71.3.0) (2023-12-04)
 
 

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

@@ -311,7 +311,6 @@ var script = {
       // Do nothing if there was no active token, or if idx > this.activeTokenIdx,
       // to preserve the active state of the remaining tokens.
     },
-
     replaceToken(idx, token) {
       this.$set(this.tokens, idx, ensureTokenId({
         ...token,

package/dist/components/base/loading_icon/loading_icon.js

@@ -8,7 +8,6 @@ const sizes = ['sm',
 // -> 32px
 'xl' // -> 64px
 ];
-
 const colors = {
   dark: 'dark',
   light: 'light'

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -207,7 +207,6 @@ var script = {
   created() {
     this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
   },
-
   mounted() {
     this.scrollToBottom();
   },

package/dist/components/utilities/truncate_text/truncate_text.js

@@ -43,6 +43,16 @@ var script = {
       type: Number,
       required: false,
       default: 10
+    },
+    /**
+     * Props that are passed to the toggle button
+     */
+    toggleButtonProps: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      }
     }
   },
   data() {
@@ -101,7 +111,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('section',[_c('article',{directives:[{name:"gl-resize-observer",rawName:"v-gl-resize-observer",value:(_vm.onResize),expression:"onResize"}],class:_vm.truncationClasses,style:(_vm.cssVariables),attrs:{"aria-expanded":_vm.ariaExpanded}},[_vm._t("default")],2),_vm._v(" "),(_vm.showTruncationToggle)?_c('gl-button',{attrs:{"variant":"link"},on:{"click":_vm.toggleTruncation}},[_vm._v(_vm._s(_vm.truncationToggleText))]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('article',{directives:[{name:"gl-resize-observer",rawName:"v-gl-resize-observer",value:(_vm.onResize),expression:"onResize"}],class:_vm.truncationClasses,style:(_vm.cssVariables),attrs:{"aria-expanded":_vm.ariaExpanded}},[_vm._t("default")],2),_vm._v(" "),(_vm.showTruncationToggle)?_c('gl-button',_vm._b({attrs:{"variant":"link"},on:{"click":_vm.toggleTruncation}},'gl-button',_vm.toggleButtonProps,false),[_vm._v(_vm._s(_vm.truncationToggleText))]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/config.js

@@ -78,7 +78,6 @@ const setConfigs = function () {
         /* eslint-enable no-console */
       }
     }
-
     Object.assign(i18n, translations);
   }
 };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 02:31:35 GMT
+ * Generated on Mon, 04 Dec 2023 16:16:35 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 02:31:35 GMT
+ * Generated on Mon, 04 Dec 2023 16:16:35 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 02:31:35 GMT
+ * Generated on Mon, 04 Dec 2023 16:16:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 02:31:35 GMT
+ * Generated on Mon, 04 Dec 2023 16:16:35 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 Mon, 04 Dec 2023 02:31:35 GMT
+// Generated on Mon, 04 Dec 2023 16:16:35 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 04 Dec 2023 02:31:35 GMT
+// Generated on Mon, 04 Dec 2023 16:16:35 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.3.0",
+  "version": "71.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,8 +87,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",

package/src/components/utilities/truncate_text/truncate_text.spec.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
 import GlButton from '../../base/button/button.vue';
@@ -133,4 +134,17 @@ describe('GlTruncateText', () => {
       });
     });
   });
+
+  it('passes `toggleButtonProps` to toggle button', async () => {
+    const buttonTextClasses = 'foo-bar';
+
+    createComponent({ toggleButtonProps: { buttonTextClasses } });
+
+    getBinding(findContentEl(), 'gl-resize-observer').value({
+      target: { scrollHeight: 20, offsetHeight: 10 },
+    });
+    await nextTick();
+
+    expect(findButton().props('buttonTextClasses')).toBe(buttonTextClasses);
+  });
 });

package/src/components/utilities/truncate_text/truncate_text.stories.js

@@ -6,11 +6,13 @@ const generateProps = ({
   showLessText = 'Show less',
   lines = 3,
   mobileLines = 10,
+  toggleButtonProps = {},
 } = {}) => ({
   showMoreText,
   showLessText,
   lines,
   mobileLines,
+  toggleButtonProps,
 });
 
 const content = () => [...Array(15)].map((_, i) => `line ${i + 1}`).join('\n');

package/src/components/utilities/truncate_text/truncate_text.vue

@@ -44,6 +44,16 @@ export default {
       required: false,
       default: 10,
     },
+    /**
+     * Props that are passed to the toggle button
+     */
+    toggleButtonProps: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -103,8 +113,12 @@ export default {
       <!-- @slot Text content -->
       <slot></slot>
     </article>
-    <gl-button v-if="showTruncationToggle" variant="link" @click="toggleTruncation">{{
-      truncationToggleText
-    }}</gl-button>
+    <gl-button
+      v-if="showTruncationToggle"
+      v-bind="toggleButtonProps"
+      variant="link"
+      @click="toggleTruncation"
+      >{{ truncationToggleText }}</gl-button
+    >
   </section>
 </template>