Product
Studio
Expected behavior
Studio should use KComponents where available to ensure compliance with our team's design principles.
Actual behavior
Studio currently uses <router-link> but we provide a KRouterLink (source) component which abides our design system's conventions.
Additional information
The search results linked here show the few places where <router-link> is used.
The API for <KRouterLink> should map basically 1-to-1 and handle all slots seamlessly.
KRouterLink & Icons
Note that the <KRouterLink> also has the icon and iconAfter slots and props (only use one) which accept a token from the Icons listed in our Design System.
So - for example - when you work on the item in @/frontend/channelList/views/Channel/ChannelItem.vue - you'll notice that there is a slot accepting an IconButton.
You may find it easier to apply the infoPrimary icon (which will be available in the 0.2.x branch if #217 is merged) roughly as <KRouterLink icon="infoPrimary" ... />.
Alternatively, you can put a <KIcon icon="info" color="$themeTokens.primary" slot="icon" /> between <KRouterLink> ... </KRouterLink> as a slot.
You're a button KRouterLink!
<KRouterLink> may also be styled as any of our Button styles (related: KRouterLink props & slots) - so if you see that the thing using the <router-link> in Studio looks like a proper button - or an IconButton - then you can insert a KDS flavored button with the props provided by that mixin.
I don't suspect that this will affect any tests as long as you apply any data-test attributes that are affixed to the router-link to the replacement KRouterLink (there is at least one in the .../treeView/index.vue component.
Product
Studio
Expected behavior
Studio should use KComponents where available to ensure compliance with our team's design principles.
Actual behavior
Studio currently uses
<router-link>but we provide a KRouterLink (source) component which abides our design system's conventions.Additional information
The search results linked here show the few places where
<router-link>is used.The API for
<KRouterLink>should map basically 1-to-1 and handle all slots seamlessly.KRouterLink & Icons
Note that the
<KRouterLink>also has theiconandiconAfterslots and props (only use one) which accept a token from the Icons listed in our Design System.So - for example - when you work on the item in
@/frontend/channelList/views/Channel/ChannelItem.vue- you'll notice that there is a slot accepting anIconButton.You may find it easier to apply the
infoPrimaryicon (which will be available in the 0.2.x branch if #217 is merged) roughly as<KRouterLink icon="infoPrimary" ... />.Alternatively, you can put a
<KIcon icon="info" color="$themeTokens.primary" slot="icon" />between<KRouterLink> ... </KRouterLink>as a slot.You're a button KRouterLink!
<KRouterLink>may also be styled as any of our Button styles (related: KRouterLink props & slots) - so if you see that the thing using the<router-link>in Studio looks like a proper button - or an IconButton - then you can insert a KDS flavored button with the props provided by that mixin.I don't suspect that this will affect any tests as long as you apply any
data-testattributes that are affixed to therouter-linkto the replacementKRouterLink(there is at least one in the.../treeView/index.vuecomponent.