Some UI icons don't work with new v-slot syntax

[brendanmatkin]

Detailed description

FYI I'm using nuxt so this might not show up in standard vue, but I think it probably should still be addressed! There are also some changes that make it look like someone got halfway through changing this but maybe never finished?

nav-icon slots use old v-slot syntax in examples (slot="nav-icon" instead of v-slot:nav-icon or #nav-icon). This is not a big deal but when you use the new syntax, SOME icons show up fine, and others don't. I suspect that this relates to the way cv-side-nav-icon's v-if evaluates.

e.g. in cv-side-nav-menu, hasIcon is computed:

computed: {
    hasIcon() {
      return !!this.$slots['nav-icon'];
    },
  },

This component also has a hasNavIcon evaluated in mounted() and beforeUpdate() but it's not used.

However, cv-side-nav-link uses hasNavIcon which is set in mounted() and beforeUpdate(), but is not computed.

cv-side-nav-menu works as expected with either new or old syntax, but cv-side-nav-link only works with the old syntax.

Is this a feature request (new component, new icon), a bug, or a general issue?

This is a bug.

Is this issue related to a specific component?

Maybe (as above), but might be more pervasive?

What did you expect to happen? What happened instead? What would you like to see changed?

See above for description. I would like for any components that do not compute the showNavIcon boolean to compute it I think? (in order to support the new v-slot syntax)

What I expect to see in example left panel nav using new v-slot syntax:

What I actually see in example left panel nav using new v-slot syntax:

What browser are you working in?

Firefox and Chrome latest

What version of the Carbon Design System are you using?

2.27.1

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Outside of IBM.

Steps to reproduce the issue

<!-- new v-slot syntax, but works fine -->
<template v-if="areLeftPanels" #left-panels>
  <cv-side-nav id="side-nav" rail>
    <cv-side-nav-items>
      <cv-side-nav-menu title="L1 menu">
<!-- new v-slot syntax, but works fine -->
        <template #nav-icon>
          <Fade16 />
        </template>
        <cv-side-nav-menu-item href="#" active>
          L2 menu item
        </cv-side-nav-menu-item>
      </cv-side-nave-menu>
      <cv-side-nav-link href="#">
<!-- old v-slot syntax. This works -->
        <template slot="nav-icon">
          <Fade16 />
        </template>
        L1 link
      </cv-side-nav-link>
      <cv-side-nav-link href="#">
<!-- new v-slot syntax. This does not work (either using #nav-icon or v-slot:nav-icon -->
        <template #nav-icon>
          <Fade16 />
        </template>
        L1 link
      </cv-side-nav-link>
    </cv-side-nav-items>
  </cv-side-nav>
</template>

[brendanmatkin]

p.s. for now the solution is easy: just don't use the new v-slot syntax, or use the old one when the new doesn't work. Technically the old one is deprecated but will be left in until 3.x. (https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax). Not sure if there are other consequences to the way those slot booleans are being evaluated. Maybe the problem will just go away when you update to 3.x...