feat(QExpansionItem): New prop -> "expanded-icon" quasarframework#4699

Author: rstoenescu

ui/dev/components/components/list-expansion-item.vue

@@ -41,6 +41,8 @@
           expand-separator
           icon="perm_identity"
           label="With a model and events - decoupled"
+          expand-icon="text_rotation_down"
+          expanded-icon="text_rotate_up"
         >
           <q-card>
             <q-card-section>

ui/src/api.extends.json

@@ -21,7 +21,7 @@
 
     "text-color": {
       "type": "String",
-      "desc": "Overrides text color (if needed); color name from the Quasar Color Palette",
+      "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
       "examples": [ "primary", "teal-10" ],
       "category": "style"
     },
@@ -47,7 +47,7 @@
 
     "icon": {
       "type": "String",
-      "desc": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix",
+      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "examples": [
         "map",
         "ion-add",

ui/src/components/btn/QBtn.js

@@ -228,19 +228,15 @@ export default Vue.extend({
       }]
     }
 
-    if (this.icon !== void 0) {
-      inner.push(
-        h(QIcon, {
-          props: { name: this.icon, left: this.stack === false && this.hasLabel === true }
-        })
-      )
-    }
+    this.icon !== void 0 && inner.push(
+      h(QIcon, {
+        props: { name: this.icon, left: this.stack === false && this.hasLabel === true }
+      })
+    )
 
-    if (this.hasLabel === true) {
-      inner.push(
-        h('div', [ this.label ])
-      )
-    }
+    this.hasLabel === true && inner.push(
+      h('div', [ this.label ])
+    )
 
     const def = slot(this, 'default')
     def !== void 0 && inner.push(def)

ui/src/components/expansion-item/QExpansionItem.js

@@ -32,6 +32,7 @@ export default Vue.extend({
     dense: Boolean,
 
     expandIcon: String,
+    expandedIcon: String,
     expandIconClass: [ Array, String, Object ],
     duration: Number,
 
@@ -93,7 +94,9 @@ export default Vue.extend({
     },
 
     expansionIcon () {
-      return this.expandIcon || (this.denseToggle ? this.$q.iconSet.expansionItem.denseIcon : this.$q.iconSet.expansionItem.icon)
+      return this.expandedIcon !== void 0 && this.showing === true
+        ? this.expandedIcon
+        : this.expandIcon || this.$q.iconSet.expansionItem[this.denseToggle === true ? 'denseIcon' : 'icon']
     },
 
     activeToggleIcon () {
@@ -137,7 +140,7 @@ export default Vue.extend({
         h(QIcon, {
           staticClass: 'q-expansion-item__toggle-icon q-focusable',
           class: {
-            'rotate-180': this.showing,
+            'rotate-180': this.expandedIcon === void 0 ? this.showing : false,
             invisible: this.disable
           },
           props: {

ui/src/components/expansion-item/QExpansionItem.json

@@ -15,6 +15,12 @@
       "extends": "icon"
     },
 
+    "expanded-icon": {
+      "extends": "icon",
+      "desc": "Expand icon name (following Quasar convention) for when QExpansionItem is expanded; When used, it also disables the rotation animation of the expand icon; Make sure you have the icon library installed unless you are using 'img:' prefix",
+      "addedIn": "v1.4.5"
+    },
+
     "expand-icon-class": {
       "type": [ "Array", "String", "Object" ],
       "desc": "Apply custom class(es) to the expand icon item section",