feat(QFab): refine the hide-icon prop quasarframework#6753

Author: rstoenescu

ui/dev/src/pages/components/fab-extended.vue

@@ -41,7 +41,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -54,7 +53,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -65,7 +63,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -78,7 +75,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -89,7 +85,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -102,7 +97,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -113,7 +107,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -124,7 +117,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
             <q-fab-action
@@ -136,7 +128,6 @@
               :square="fabSquare"
               :external-label="fabExternalLabel"
               :hide-label="hideLabel"
-              :hide-icon="hideIcon"
               :label-class="labelClass"
             />
           </q-fab>

ui/src/components/fab/QFab.js

@@ -30,8 +30,10 @@ export default Vue.extend({
   },
 
   props: {
+    icon: String,
     activeIcon: String,
 
+    hideIcon: Boolean,
     hideLabel: {
       default: null
     },

ui/src/components/fab/QFab.json

@@ -7,6 +7,21 @@
       "category": "model"
     },
 
+    "icon": {
+      "extends": "icon"
+    },
+
+    "active-icon": {
+      "extends": "icon"
+    },
+
+    "hide-icon": {
+      "type": "Boolean",
+      "desc": "Hide the icon (don't use any)",
+      "category": "style|content",
+      "addedIn": "v1.9.14"
+    },
+
     "direction": {
       "type": "String",
       "desc": "Direction to expand Fab Actions to",
@@ -29,10 +44,6 @@
       "type": "Boolean",
       "desc": "By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior",
       "category": "behavior"
-    },
-
-    "active-icon": {
-      "extends": "icon"
     }
   },
 

ui/src/components/fab/QFabAction.js

@@ -21,6 +21,11 @@ export default Vue.extend({
   mixins: [ FabMixin ],
 
   props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+
     anchor: {
       type: String,
       validator: v => anchorValues.includes(v)
@@ -55,7 +60,7 @@ export default Vue.extend({
   render (h) {
     const child = []
 
-    this.hideIcon !== true && child.push(
+    this.icon !== '' && child.push(
       h(QIcon, {
         props: { name: this.icon }
       })

ui/src/components/fab/QFabAction.json

@@ -2,6 +2,10 @@
   "mixins": [ "mixins/fab" ],
 
   "props": {
+    "icon": {
+      "extends": "icon"
+    },
+
     "anchor": {
       "type": "String",
       "desc": "How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab",

ui/src/mixins/fab.js

@@ -16,9 +16,6 @@ export default {
 
     square: Boolean,
 
-    icon: String,
-    hideIcon: Boolean,
-
     label: {
       type: [ String, Number ],
       default: ''

ui/src/mixins/fab.json

@@ -57,17 +57,6 @@
       "category": "style"
     },
 
-    "icon": {
-      "extends": "icon"
-    },
-
-    "hide-icon": {
-      "type": "Boolean",
-      "desc": "Hide the icon (don't use any)",
-      "category": "style|content",
-      "addedIn": "v1.9.14"
-    },
-
     "external-label": {
       "type": "Boolean",
       "desc": "Display label besides the FABs, as external content",