❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
In times when KListWithOverflow component didn't yet exist, we used the "duplicate markup" technique in the KBreadcrumbs component to achieve their overflow behavior when breadcrumb items were collapsed to the dropdown menu on the left:
The duplicate markup technique is based on keeping a hidden copy of visible breadcrumbs (breadcrumbs-offscreen) in the markup so that elements are available for recalculations:
|
<!-- This is a duplicate of breacrumbs-visible-items to help to reference sizes. --> |
|
<div class="breadcrumbs breadcrumbs-offscreen" aria-hidden="true"> |
|
<ol class="breadcrumbs-visible-items"> |
|
<template v-for="(crumb, index) in crumbs"> |
|
<li |
|
v-if="index !== crumbs.length - 1" |
|
:ref="`crumb${index}`" |
|
:key="index" |
|
class="breadcrumbs-visible-item breadcrumbs-visible-item-notlast" |
|
> |
|
<KRouterLink v-if="crumb.link" :text="crumb.text" :to="crumb.link" tabindex="-1"> |
|
<template #text="{ text }"> |
|
<span class="breadcrumbs-crumb-text">{{ text }}</span> |
|
</template> |
|
</KRouterLink> |
|
<span v-else>{{ crumb.text }}</span> |
|
</li> |
|
|
|
<li |
|
v-else |
|
:ref="`crumb${index}`" |
|
:key="index" |
|
class="breadcrumb-visible-item-last breadcrumbs-visible-item" |
|
> |
|
<span |
|
class="breadcrumbs-crumb-text" |
|
:style="{ maxWidth: lastBreadcrumbMaxWidth }" |
|
> |
|
{{ crumb.text }} |
|
</span> |
|
</li> |
|
</template> |
|
</ol> |
|
</div> |
|
</div> |
Now that we have KListWithOverflow that is designed to take care of overflowing items to a menu, it would be good to remove this other implementation from KBreadcrumbs and refactor them to utilize KListWithOverflow instead.
The Value Add
Easier maintenance, development efficiency.
Guidance
Note that KListWithOverflow will likely need some updates to be able to display the button on the left side, and possibly some other adjustments so that these two components can collaborate smoothly.
Acceptance criteria
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
In times when
KListWithOverflowcomponent didn't yet exist, we used the "duplicate markup" technique in theKBreadcrumbscomponent to achieve their overflow behavior when breadcrumb items were collapsed to the dropdown menu on the left:The duplicate markup technique is based on keeping a hidden copy of visible breadcrumbs (
breadcrumbs-offscreen) in the markup so that elements are available for recalculations:kolibri-design-system/lib/KBreadcrumbs.vue
Lines 84 to 118 in 9d2a147
Now that we have
KListWithOverflowthat is designed to take care of overflowing items to a menu, it would be good to remove this other implementation fromKBreadcrumbsand refactor them to utilizeKListWithOverflowinstead.The Value Add
Easier maintenance, development efficiency.
Guidance
Note that
KListWithOverflowwill likely need some updates to be able to display the button on the left side, and possibly some other adjustments so that these two components can collaborate smoothly.Acceptance criteria
KBreadcrumbsandKListWithOverfloware used: