feat(QStepper): allow done/error/active-icon props to have "none" value, in which case defer to prefix or regular icon #8640 #10671

Author: rstoenescu

ui/dev/src/pages/Index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="q-layout-padding q-mx-auto" style="max-width: 500px">
       <router-link tag="a" to="/layout-quick/a" class="cursor-pointer row justify-center" style="margin-bottom: 25px">
-        <img src="https://cdn.quasar.dev/logo-v2/128/logo.png">
+        <img style="height:128px;width:128px" src="https://cdn.quasar.dev/logo-v2/128/logo.png">
       </router-link>
       <div class="text-caption text-center">
         Quasar v{{ $q.version }}

ui/dev/src/pages/components/stepper.vue

@@ -15,8 +15,9 @@
       <q-toggle label="Global Navigation" v-model="globalNav" />
       <q-toggle label="Caption" v-model="caption" />
       <q-toggle label="Prefix" v-model="prefix" />
-      <q-toggle label="Hide active icon" v-model="hideActiveIcon" />
-      <q-toggle label="Hide error icon" v-model="hideErrorIcon" />
+      <q-toggle label="No active icon" v-model="noActiveIcon" />
+      <q-toggle label="No error icon" v-model="noErrorIcon" />
+      <q-toggle label="No done icon" v-model="noDoneIcon" />
       <q-toggle label="Use 'done' prop" v-model="useDone" />
 
       <q-toggle label="Step 4 disable" v-model="stepDisable" />
@@ -37,8 +38,9 @@
         :flat="flat"
         :bordered="bordered"
         :header-nav="headerNav"
-        :hide-active-icon="hideActiveIcon"
-        :hide-error-icon="hideErrorIcon"
+        :active-icon="noActiveIcon ? 'none' : void 0"
+        :error-icon="noErrorIcon ? 'none' : void 0"
+        :done-icon="noDoneIcon ? 'none' : void 0"
         :color="color"
         ref="stepper"
         v-model="step"
@@ -225,8 +227,9 @@ export default {
       globalNav: false,
       caption: false,
       prefix: false,
-      hideActiveIcon: false,
-      hideErrorIcon: false,
+      noActiveIcon: false,
+      noErrorIcon: false,
+      noDoneIcon: false,
       useDone: false,
       headerNavStep: false,
 

ui/src/components/icon/QIcon.js

@@ -69,7 +69,7 @@ export default createComponent({
       let cls
       let icon = props.name
 
-      if (!icon) {
+      if (!icon || icon === 'none') {
         return { none: true }
       }
 
@@ -78,6 +78,9 @@ export default createComponent({
         if (res !== void 0) {
           if (res.icon !== void 0) {
             icon = res.icon
+            if (icon === 'none') {
+              return { none: true }
+            }
           }
           else {
             return {

ui/src/components/stepper/QStepper.js

@@ -39,10 +39,8 @@ export default createComponent({
     doneIcon: String,
     doneColor: String,
     activeIcon: String,
-    hideActiveIcon: Boolean,
     activeColor: String,
     errorIcon: String,
-    hideErrorIcon: Boolean,
     errorColor: String
   },
 

ui/src/components/stepper/QStepper.json

@@ -54,6 +54,7 @@
 
     "done-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -64,31 +65,21 @@
 
     "active-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
-    "hide-active-icon": {
-      "type": "Boolean",
-      "desc": "Don't show the active icon when a step is active. Instead the step 'icon' will be shown or the step 'prefix' if it is defined.",
-      "category": "header|behavior"
-    },
-
     "active-color": {
       "extends": "color",
       "category": "header"
     },
 
     "error-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
-    "hide-error-icon": {
-      "type": "Boolean",
-      "desc": "Don't show the error icon when a step has an error. Instead the step 'icon' will be shown or the step 'prefix' if it is defined.",
-      "category": "header|behavior"
-    },
-
     "error-color": {
       "extends": "color",
       "category": "header"

ui/src/components/stepper/QStepper.sass

@@ -52,11 +52,11 @@
     &--error
       color: var(--q-negative)
 
+    &--error-with-icon
       .q-stepper__dot
         background: transparent !important
         span
           color: currentColor
-        .q-icon
           font-size: 24px
 
   &__header

ui/src/components/stepper/StepHeader.js

@@ -47,23 +47,36 @@ export default createComponent({
 
     const hasPrefix = computed(() => {
       return props.step.prefix
-        && (props.stepper.hideActiveIcon || isActive.value === false)
-        && (props.stepper.hideErrorIcon || isError.value === false)
-        && (props.stepper.hideErrorIcon || isDone.value === false)
+        && (isActive.value === false || props.stepper.activeIcon === 'none')
+        && (isError.value === false || props.stepper.errorIcon === 'none')
+        && (isDone.value === false || props.stepper.doneIcon === 'none')
     })
 
     const icon = computed(() => {
-      if (!props.stepper.hideActiveIcon && isActive.value === true) {
-        return props.step.activeIcon || props.stepper.activeIcon || $q.iconSet.stepper.active
+      const defaultIcon = props.step.icon || props.stepper.inactiveIcon
+
+      if (isActive.value === true) {
+        const icon = props.step.activeIcon || props.stepper.activeIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || $q.iconSet.stepper.active
       }
-      if (!props.stepper.hideErrorIcon && isError.value === true) {
-        return props.step.errorIcon || props.stepper.errorIcon || $q.iconSet.stepper.error
+
+      if (isError.value === true) {
+        const icon = props.step.errorIcon || props.stepper.errorIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || $q.iconSet.stepper.error
       }
-      if (isDisable.value === false && isError.value === false && isDone.value === true) {
-        return props.step.doneIcon || props.stepper.doneIcon || $q.iconSet.stepper.done
+
+      if (isDisable.value === false && isDone.value === true) {
+        const icon = props.step.doneIcon || props.stepper.doneIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || $q.iconSet.stepper.done
       }
 
-      return props.step.icon || props.stepper.inactiveIcon
+      return defaultIcon
     })
 
     const color = computed(() => {
@@ -90,7 +103,9 @@ export default createComponent({
     const classes = computed(() => {
       return 'q-stepper__tab col-grow flex items-center no-wrap relative-position'
         + (color.value !== void 0 ? ` text-${ color.value }` : '')
-        + (isError.value === true ? ' q-stepper__tab--error' : '')
+        + (isError.value === true
+          ? ' q-stepper__tab--error q-stepper__tab--error-with-' + (hasPrefix.value ? 'prefix' : 'icon')
+          : '')
         + (isActive.value === true ? ' q-stepper__tab--active' : '')
         + (isDone.value === true ? ' q-stepper__tab--done' : '')
         + (headerNav.value === true ? ' q-stepper__tab--navigation q-focusable q-hoverable' : '')