@gitlab/ui 103.4.1 → 103.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [103.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.4.1...v103.5.0) (2024-11-22)
+
+
+### Features
+
+* **GlAccordion:** add chevron animation ([fee4ef4](https://gitlab.com/gitlab-org/gitlab-ui/commit/fee4ef4dac649ee09ce3f9a9a2610d68fe9a8e88))
+
 ## [103.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.4.0...v103.4.1) (2024-11-22)
 
 

package/dist/components/base/accordion/accordion_item.js

@@ -1,5 +1,6 @@
 import uniqueId from 'lodash/uniqueId';
 import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -8,7 +9,8 @@ var script = {
   name: 'GlAccordionItem',
   components: {
     BCollapse,
-    GlButton
+    GlButton,
+    GlAnimatedChevronRightDownIcon
   },
   directives: {
     GlCollapseToggle: GlCollapseToggleDirective
@@ -77,9 +79,6 @@ var script = {
     accordion() {
       return this.accordionSetId() || undefined;
     },
-    icon() {
-      return this.isVisible ? 'chevron-down' : 'chevron-right';
-    },
     buttonTitle() {
       return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     }
@@ -98,7 +97,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('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-text-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-flex"}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.isVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-text-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "103.4.1",
+  "version": "103.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/accordion/accordion_item.vue

@@ -1,6 +1,7 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
 import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon.vue';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
 
@@ -9,6 +10,7 @@ export default {
   components: {
     BCollapse,
     GlButton,
+    GlAnimatedChevronRightDownIcon,
   },
   directives: {
     GlCollapseToggle: GlCollapseToggleDirective,
@@ -77,9 +79,6 @@ export default {
     accordion() {
       return this.accordionSetId() || undefined;
     },
-    icon() {
-      return this.isVisible ? 'chevron-down' : 'chevron-right';
-    },
     buttonTitle() {
       return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     },
@@ -102,8 +101,8 @@ export default {
         v-gl-collapse-toggle="accordionItemId"
         variant="link"
         button-text-classes="gl-flex"
-        :icon="icon"
       >
+        <gl-animated-chevron-right-down-icon :is-on="isVisible" />
         {{ buttonTitle }}
       </gl-button>
     </component>