feat(QFab): when labels are external, show it on the main QFab only when it's opened; this behavior is overridable

Author: rstoenescu

docs/src/examples/QFab/NonExpandable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md">
     <q-layout view="lhh LpR lff" container style="height: 300px" class="shadow-2 rounded-borders">
-      <q-header reveal class="bg-black">
+      <q-header class="bg-black">
         <q-toolbar>
           <q-btn flat round dense icon="menu" />
           <q-toolbar-title>Header</q-toolbar-title>

docs/src/pages/vue-components/floating-action-button.md

@@ -45,6 +45,8 @@ When the labels are internal and your QFab opens up vertically (up or down) then
 
 <q-badge label="v1.9+" />
 
+By default, when the label is external on the main QFab (not the sub-actions), it gets shown only when QFab is opened. However, you can override that by setting a Boolean value for `hide-label` prop.
+
 <doc-example title="External label" file="QFab/ExternalLabel" />
 
 <doc-example title="Custom styled external label" file="QFab/ExternalLabelStyled" />

ui/src/components/fab/QFab.js

@@ -33,6 +33,10 @@ export default Vue.extend({
     icon: String,
     activeIcon: String,
 
+    hideLabel: {
+      default: null
+    },
+
     direction: {
       type: String,
       default: 'right',

ui/src/mixins/fab.js

@@ -43,28 +43,34 @@ export default {
     },
 
     labelProps () {
-      return this.externalLabel === true
-        ? {
+      if (this.externalLabel === true) {
+        const hideLabel = this.hideLabel === null
+          ? this.showing === false
+          : this.hideLabel
+
+        return {
           action: 'push',
           data: {
             staticClass: `q-fab__label q-tooltip--style q-fab__label--external` +
               ` q-fab__label--external-${this.labelPosition}` +
-              (this.hideLabel === true ? ' q-fab__label--external-hidden' : ''),
+              (hideLabel === true ? ' q-fab__label--external-hidden' : ''),
             style: this.labelStyle,
             class: this.labelClass
           }
         }
-        : {
-          action: [ 'left', 'top' ].includes(this.labelPosition)
-            ? 'unshift'
-            : 'push',
-          data: {
-            staticClass: `q-fab__label q-fab__label--internal q-fab__label--internal-${this.labelPosition}` +
-              (this.hideLabel === true ? ' q-fab__label--internal-hidden' : ''),
-            style: this.labelStyle,
-            class: this.labelClass
-          }
+      }
+
+      return {
+        action: [ 'left', 'top' ].includes(this.labelPosition)
+          ? 'unshift'
+          : 'push',
+        data: {
+          staticClass: `q-fab__label q-fab__label--internal q-fab__label--internal-${this.labelPosition}` +
+            (this.hideLabel === true ? ' q-fab__label--internal-hidden' : ''),
+          style: this.labelStyle,
+          class: this.labelClass
         }
+      }
     }
   }
 }