[DRAFT] Explore refactoring KBreadcrumbs to use KListWithOverflow #857

shruti862 · 2024-12-08T13:07:30Z

Description

Updated lib/KListWithOverflow.vue and lib/KBreadcrumbs.vue files

Issue addressed

Addresses issue #693

Addresses #PR# HERE

Before/after screenshots

Changelog

Description: Summary of change(s)
Products impact: Choose from - none (for internal updates) / bugfix / new API / updated API / removed API. If it's 'none', use "-" for all items below to indicate they are not relevant.
Addresses: Link(s) to GH issue(s) addressed. Include KDS links as well as links to related issues in a consumer product repository too.
Components: Affected public KDS component. Do not include internal sub-components or documentation components.
Breaking: Will this change break something in a consumer? Choose from: yes / no
Impacts a11y: Does this change improve a11y or adds new features that can be used to improve it? Choose from: yes / no
Guidance: Why and how to introduce this update to a consumer? Required for breaking changes, appreciated for changes with a11y impact, and welcomed for non-breaking changes when relevant.

Steps to test

Step 1
Step 2
...

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical and brittle code paths are covered by unit tests
The change is described in the changelog section above

Reviewer guidance

Is the code clean and well-commented?
Are there tests for this change?
Are all UI components LTR and RTL compliant (if applicable)?
Add other things to check for here

Comments

MisRob · 2024-12-09T04:41:52Z

Converting to draft #693 (comment)

MisRob · 2024-12-09T04:43:34Z

@shruti862 Also referencing @AlexVelezLl's comments that touches on some areas you mentioned, perhaps it helps #693 (comment)

MisRob · 2024-12-09T08:55:17Z

@AlexVelezLl Hi Alex, @shruti862 continues this work and already followed some of your guidance. @shruti862 experienced some blockers and I asked to elaborate in this PR on some specific places. Would you please be available for giving a direction?

cd730f1

shruti862 · 2024-12-09T08:59:36Z

1.) Unable to get separators '>' between the items of list
2.) In the dropdown menu ,only the overflowed text is visible, link is not being applied.

AlexVelezLl · 2024-12-10T14:06:21Z

Thanks @shruti862! I will take a look later today :)

AlexVelezLl

Thank you @shruti862!! This is a great start! I have left some instructions to solve the issues you were experiencing, along with some other things I noticed. Thank you!!

AlexVelezLl · 2024-12-11T13:04:20Z

lib/KListWithOverflow.vue

  .more-button-wrapper {
-    visibility: hidden;
+    visibility: visible;
+    order: 0; /* Ensure it remains in its original position for keyboard navigation */


We cant have this solution for the position of the button, because Keyboard navigation would not be the same. We need to keep the current behaviour in KBreadcrumbs that if the more button appears at the beginning, the keyboard navigation should focus it first, before the rest items.

AlexVelezLl · 2024-12-11T13:06:42Z

lib/KListWithOverflow.vue


  .more-button-wrapper {
-    visibility: hidden;
+    visibility: visible;


Hmm interested to know why is this change needed? The more button starts as hidden because we measure its width first, before doing the next computations, so to avoid it being visible for that first render we initialize its visibility as hidden.

AlexVelezLl · 2024-12-11T13:14:37Z

lib/KListWithOverflow.vue

      setOverflowItems() {
        const { list, listWrapper, moreButtonWrapper } = this.$refs;
+
+        // Exit early if necessary refs are not available


Lets remove these comments, as the code itself is descriptive

AlexVelezLl · 2024-12-11T13:14:58Z

lib/KListWithOverflow.vue

+        directionIndexes.forEach(i => {
          const itemWidth = itemsSizes[i].width;
-
-          // If the item dont fit in the available space or if we have already


Lets get back these comments that describes a behaviour a little bit more complex

(Also, lets uncomment this part and work on top of the current implementation ;)

lib/KListWithOverflow.vue

AlexVelezLl · 2024-12-11T14:19:30Z

lib/KBreadcrumbs.vue

+        appearance="raised-button"
+      >
+        <template #menu>
+          <!-- issue :: dropdown menu shows only text of the overflowItems but not the link , I don't know whether i am doing the right way to reference link or not -->


For this you can add these lines in KDropdownMenu:

https://github.com/shruti862/kolibri-design-system/blob/cd730f1821ceef5becb428b01d392dfdf1ae546c/lib/KDropdownMenu.vue#L20-L25

<UiMenu ref="menu" :options="options" :hasIcons="hasIcons" @select="handleSelection" > <template #option="{ option }"> <slot name="option" :option="option"/> </template> </UiMenu>

And then you will be able to customize these dropdown options using this option slot in KDropdownMenu. There we can handle the link behaviour

AlexVelezLl · 2024-12-11T14:21:12Z

lib/KBreadcrumbs.vue

        }
+        // Add separators between items
+        return crumbs.flatMap((item, index) =>
+          index > 0 ? [{ type: 'separator' }, item] : [item]


The reason the dividers are not being visible is because we are passing this as type: "separator" while the correct name is type: "divider"

AlexVelezLl · 2024-12-11T14:21:52Z

lib/KBreadcrumbs.vue

+<style scoped>
+  .breadcrumbs-divider {
+    margin: 0 10px;
+    color: black; /* Adjust color for the ">" separator */


Lets standarize the name, and lets call it always "divider" instead of "separator"

Also, lets not use burned colors. Instead we can use our color tokens, we cant reference these in css, so we will need to set this color in the vue template

AlexVelezLl · 2024-12-11T14:22:41Z

lib/KBreadcrumbs.vue

+          <!-- issue :: dropdown menu shows only text of the overflowItems but not the link , I don't know whether i am doing the right way to reference link or not -->
+          <KDropdownMenu
+            :options="overflowItems
+              .filter(item => item.type !== 'separator') // Filter out separators


idem "divider" instead of separator

AlexVelezLl · 2024-12-11T14:24:58Z

lib/KListWithOverflow.vue

  .list-wrapper {
    display: flex;
-    justify-content: space-between;
+    justify-content: space-between; 


Lets add a alignItems: center instruction here, so the default behaviour is that the items are centered

…tem into new-change3

This reverts commit 4ada24c.

shruti862 · 2024-12-12T13:10:54Z

@AlexVelezLl
I have fixed the keyboard navigation problem and alignment of list items when there is no more button in KListWithOverflow .
Now I am only facing problem in KBreadcrumb , my last visible item of list is getting outside of box even if there is enough space
left in list-wrapper box. Can you please help me resolving this issue?

One more thing I noticed that list items having links differ from whats in the https://design-system.learningequality.org/kbreadcrumbs/ page ,

shruti862 · 2024-12-12T13:45:49Z

when I mounted the items array , link is present on list tems which is not in the https://design-system.learningequality.org/kbreadcrumbs/ page

AlexVelezLl

Hi @shruti862! Thanks! This is looking so much better! I have made some notes that will help to solve the issues that you are experiencing :).

Apologies for the late response 😅.

AlexVelezLl · 2025-01-03T12:33:22Z

lib/KListWithOverflow.vue

-        </slot>
-        <!-- @slot Slot responsible of rendering each item in the visible list -->
+        ></slot>
+        <!-- Item Slot -->


Lets gonna revert this change, this comment is useful for KDS docs:

Suggested change

AlexVelezLl · 2025-01-03T12:37:06Z

lib/KListWithOverflow.vue

+  }
+
+  /* When the 'start-button' class is added, position visually at the start */
+  .more-button-wrapper.start-button {


I dont think this change is needed anymore, is it?

lib/KListWithOverflow.vue

AlexVelezLl · 2025-01-03T16:49:45Z

lib/KBreadcrumbs.vue

+            :to="item.link"
+          >
+
+            <template #text="{ text }">


Be aware that KRouterLink doesnt have a #text slot. So we just need to use the default slot here instead

AlexVelezLl · 2025-01-03T17:02:42Z

lib/KListWithOverflow.vue

          itemsSizes.push(itemSize);
        }
-
+        const indexSequence = [...Array(list.children.length).keys()];


There are a couple of things that needs to be changed with this reversed behaviour:

The fixDividersVisibility method. The intention of this method is to avoid that a divider is placed as the first or last item in the list. And here we calculate this lastVisibleIdx https://github.com/shruti862/kolibri-design-system/blob/01aededc7ac60f49278ebf9ff15db89d8aec0581/lib/KListWithOverflow.vue#L248 which will need to change when we are in reversed mode because the lastVisibleIdx is not the same in both cases.

We have a couple of little bugs here and here, because we change the visibility of the item, but we need to change also the position to be position: absolute if the item is hidden, and position: unset when the item is visible. So, althoguh its not a regression of your PR, fixing this will prevent some bugs that become more apparent when we work with the overflowDirection as "start".

AlexVelezLl · 2025-01-03T17:10:10Z

lib/KBreadcrumbs.vue

+  .breadcrumbs-divider {
+    margin-right: 8px;
+    margin-left: 8px;
+    color: #000000;


Lets avoid burned color, and lets use the KDS color tokens instead https://design-system.learningequality.org/colors/#tokens-text

AlexVelezLl · 2025-01-03T17:10:24Z

lib/KBreadcrumbs.vue

+    padding: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #4368f5;


idem, lets avoid burned colors

AlexVelezLl · 2025-01-03T17:10:35Z

lib/KBreadcrumbs.vue

-    left: -1000em;
+    padding: 16px;
+    font-size: 16px;
+    color: #000000;


shruti862 · 2025-01-05T18:17:09Z

@AlexVelezLl Can you please review my current changes specially the fixDividersVisibility method ::Since the lastVisibleIdx in case of overflowdirection:'start' will always be last element of list.children because overflowIdx array is calculated after reversing the list.children for start direction so I didn't applied any checks on it.

shruti862 · 2025-01-05T18:18:24Z

@AlexVelezLl But now i am facing issue on truncating the last visible item of the list. Could you please guide me how to approach this??
Right now the output is looking something like this::

AlexVelezLl

Hey @shruti862! Apologies for the late response, this is a big change and needed to find a considerable amount of time to review it well. I have left some suggestions here to fix the problems you are facing, and also some considerations we need to take into account. Let me know if you have any question 🤗.

AlexVelezLl · 2025-02-06T20:50:49Z

lib/KBreadcrumbs.vue

-      class="breadcrumbs"
-      v-bind="$attrs"
-      :aria-label="$attrs.ariaLabel"
+  <div class="breadcrumbs">


instead of a div, we will need to have here a <nav instead, just as it was before.

AlexVelezLl · 2025-02-06T20:54:57Z

lib/KBreadcrumbs.vue

-          class="breadcrumbs-dropdown"
-          :style="{ background: $themeTokens.surface }"
        >
-          <ol class="breadcrumbs-dropdown-items">


We also need another change here. In the past, the list container was an ol`` element, so we need to modify KListWithOverflowto receive a prop, lets saylistElement` or so, so we can indicate to the KListWithOverflow that the list should be an ol, so we can have the semantic structure ol > li

Hey @AlexVelezLl , Since I have done so many recent changes in KBreadcrumb I am confused where to incorporate this change, could you please guide me regrading this in my current implementation

AlexVelezLl · 2025-02-13T14:07:24Z

lib/KListWithOverflow.vue

-        if (this.isDivider(this.items[firstOverflowedIdx])) {
-          overflowItemsIdx.shift();
-        }
+        if (this.overflowDirection === 'start') {


To fix the divider visibility of the overflowed items, we dont need any change actually 😅, so we can just have:

const [firstOverflowedIdx] = overflowItemsIdx; if (this.isDivider(this.items[firstOverflowedIdx])) { overflowItemsIdx.shift(); }

AlexVelezLl · 2025-02-13T14:16:05Z

lib/KListWithOverflow.vue

-          const dividerNode = list.children[lastVisibleIdx];
-          dividerNode.style.visibility = 'hidden';
-          return itemsSizes[lastVisibleIdx].width;
+          const lastVisibleIdx = firstOverflowedIdx - 1;


Here is where we need to do the change, because when we have an overflowDirection == start, then we will need to check the visibility of the first item instead. So we can do this instead:

if (this.overflowDirection === 'start') { const firstVisibleIdx = firstOverflowedIdx + 1; if (this.isDivider(this.items[firstVisibleIdx])) { const dividerNode = list.children[firstVisibleIdx]; dividerNode.style.visibility = 'hidden'; dividerNode.style.position = 'absolute'; return itemsSizes[firstVisibleIdx].width; } } else { const lastVisibleIdx = firstOverflowedIdx - 1; if (this.isDivider(this.items[lastVisibleIdx])) { const dividerNode = list.children[lastVisibleIdx]; dividerNode.style.visibility = 'hidden'; return itemsSizes[lastVisibleIdx].width; } }

In general this method should look like:

fixDividersVisibility(overflowItemsIdx, itemsSizes) { if (overflowItemsIdx.length === 0) { return; } const { list } = this.$refs; const [firstOverflowedIdx] = overflowItemsIdx; if (this.isDivider(this.items[firstOverflowedIdx])) { overflowItemsIdx.shift(); } if (this.overflowDirection === 'start') { const firstVisibleIdx = firstOverflowedIdx + 1; if (this.isDivider(this.items[firstVisibleIdx])) { const dividerNode = list.children[firstVisibleIdx]; dividerNode.style.visibility = 'hidden'; dividerNode.style.position = 'absolute'; return itemsSizes[firstVisibleIdx].width; } } else { const lastVisibleIdx = firstOverflowedIdx - 1; if (this.isDivider(this.items[lastVisibleIdx])) { const dividerNode = list.children[lastVisibleIdx]; dividerNode.style.visibility = 'hidden'; return itemsSizes[lastVisibleIdx].width; } } },

AlexVelezLl · 2025-02-13T14:20:23Z

lib/KBreadcrumbs.vue

-    </div>
+            </KDropdownMenu>
+          </template>
+        </KIconButton>


To avoid messing with the dividers visibility after the KIconButton, we can just add the divider besides the KIconButton from the more slot, since for this case, always that we show the more slot, will need to show the divider. So we can have just something like

<template #more="{ overflowItems }"> <div style="display: flex; align-items: center;"> <KIconButton ... > ... </KIconButton> <span :style="{ color: $themeTokens.text }" class="breadcrumbs-divider" >› </span> </div> </template>

lib/KBreadcrumbs.vue

AlexVelezLl · 2025-02-13T16:35:32Z

lib/KBreadcrumbs.vue

-      >
+      <!-- Render individual breadcrumb items -->
+      <template #item="{ item,index }">
+        <li>


We will also need to set the maxWidth that we set to the spans here to the li, for it to know what its its own max width, instead of getting it from the listOverflow container.

AlexVelezLl · 2025-02-13T16:39:26Z

lib/KBreadcrumbs.vue

+            dir="auto"
+            :title="item.text"
+          >
+            <template #default="{ text }">


doesnt have a slot with props, and it doesnt pass the text to the slot, and this is making that we dont render the span with the breadcrumbs-crumb-text class. We need to have the slot defined just as <template #default> and inside render the text using item.text

@shruti862 This havent been yet solved, please lets update this KRouterLink to this:

<KRouterLink v-if="item.link && index !== preparedCrumbs.length - 1" :to="item.link" > <span class="breadcrumbs-crumb-text" :style="{ maxWidth: index === preparedCrumbs.length - 1 ? lastBreadcrumbMaxWidth : 'none', }" dir="auto" > {{ item.text }} </span> </KRouterLink>

Hey @AlexVelezLl , updating KRouterLink as you suggested is removing underline from link text.
So,instead of using default slot ,I have used text slot in new commit.

shruti862 · 2025-02-26T04:56:41Z

Hey @MisRob , I was just letting @AlexVelezLl to know that previous sub-issue of last visible item when showSingleItem=true being truncated is solved now.
Regarding the other sub-issue I am facing ,I appreciate the guidance you provided on approaching issues more systematically. I'll take a deeper look into why this is happening and try to pinpoint the root cause.
Thanks !

MisRob · 2025-02-26T09:31:55Z

Ah I totally misunderstood this particular note @shruti862, apologies. Thanks for mentioning it. Yes it was just meant to be a [wrongly chosen] example that nevertheless applies to other issues throughout this work - I think we're on the same page. Thank you and keep up the great work here :)

shruti862 · 2025-02-26T13:10:01Z

lib/KListWithOverflow.vue

+        });
+
+        if (this.showAtLeastOne && overflowItemsIdx.length === itemsSizes.length) {
+          const lastItemIdx = directionIndexes[directionIndexes.length - 1];


Hey @AlexVelezLl ,for the prop showAtLeastOne , I thought to remove last overflowItem from overflowItems array and also set its visibility to 'visible'.
But I noticed that its visibility is still get set to 'hidden' when available space is less than last item space

The correct condition for this should be something like:

if (this.showAtLeastOne && overflowItemsIdx.length === itemsSizes.length) { const firstHiddenIdx = overflowItemsIdx.shift(); const firstHiddenItem = list.children[firstHiddenIdx]; firstHiddenItem.style.visibility = 'visible'; firstHiddenItem.style.position = 'unset'; maxWidth = availableWidth; maxHeight = Math.max(maxHeight, itemsSizes[firstHiddenIdx].height); }

This should work :)

Although we still need to figure out a better way to handle the text truncation since with this we now need to show the text truncation for widths shorter than 300px too.

shruti862 · 2025-02-26T13:14:40Z

lib/KBreadcrumbs.vue

+    <KListWithOverflow
+      overflowDirection="start"
+      :items="preparedCrumbs"
+      :showAtLeastOne="true"


passed the showAtLeastOne prop as true

shruti862 · 2025-02-26T13:24:04Z

As the container size decreases and can no longer accommodate the last visible item, all items, including the "More" button, become hidden. However, the visibility of the "More" button remains set to 'visible'.
Screencast from 26-02-25 06:52:41 PM IST.webm

MisRob · 2025-03-10T06:13:45Z

As the container size decreases and can no longer accommodate the last visible item, all items, including the "More" button, become hidden. However, the visibility of the "More" button remains set to 'visible'.

Hi @shruti862, thanks for the recording - I would expect the More button never disappear if it has any items (which is this case).

AlexVelezLl

Hi @shruti862! I have left some comments, I hope this helps :) We are very close to get it!

AlexVelezLl · 2025-03-25T17:10:06Z

lib/KBreadcrumbs.vue

+            dir="auto"
+            :title="item.text"
+          >
+            <template #default="{ text }">


@shruti862 This havent been yet solved, please lets update this KRouterLink to this:

<KRouterLink v-if="item.link && index !== preparedCrumbs.length - 1" :to="item.link" > <span class="breadcrumbs-crumb-text" :style="{ maxWidth: index === preparedCrumbs.length - 1 ? lastBreadcrumbMaxWidth : 'none', }" dir="auto" > {{ item.text }} </span> </KRouterLink>

AlexVelezLl · 2025-03-26T15:13:04Z

lib/KListWithOverflow.vue

            const item = list.children[idx];
            item.style.visibility = 'visible';
+            item.style.position = 'unset';
            maxWidth += itemsSizes[idx].width;


We also need to add this here: maxHeight = Math.max(maxHeight, itemsSizes[idx].height); to update the max height accordingly

AlexVelezLl · 2025-03-26T15:14:29Z

lib/KListWithOverflow.vue

+        });
+
+        if (this.showAtLeastOne && overflowItemsIdx.length === itemsSizes.length) {
+          const lastItemIdx = directionIndexes[directionIndexes.length - 1];


The correct condition for this should be something like:

if (this.showAtLeastOne && overflowItemsIdx.length === itemsSizes.length) { const firstHiddenIdx = overflowItemsIdx.shift(); const firstHiddenItem = list.children[firstHiddenIdx]; firstHiddenItem.style.visibility = 'visible'; firstHiddenItem.style.position = 'unset'; maxWidth = availableWidth; maxHeight = Math.max(maxHeight, itemsSizes[firstHiddenIdx].height); }

This should work :)

Although we still need to figure out a better way to handle the text truncation since with this we now need to show the text truncation for widths shorter than 300px too.

AlexVelezLl · 2025-03-26T15:15:13Z

lib/KListWithOverflow.vue

+        directionIndexes.forEach(i => {
          const itemWidth = itemsSizes[i].width;
-
-          // If the item dont fit in the available space or if we have already


(Also, lets uncomment this part and work on top of the current implementation ;)

shruti862 · 2025-03-26T21:22:20Z

Hi @shruti862! I have left some comments, I hope this helps :) We are very close to get it!

Hey @AlexVelezLl, I appreciate your guidance and support in resolving this issue. I'll go through the changes you suggested and provide an update soon.

shruti862 · 2025-04-15T16:04:23Z

Hey @AlexVelezLl, I've implemented all the suggested changes. However, I noticed one issue — the last item in the list doesn't show the '...' on text overflow.

AlexVelezLl · 2025-05-01T22:01:33Z

Hi @shruti862, It seems there are still some unresolved comments. Please take a look to all my comments in this view https://github.com/learningequality/kolibri-design-system/pull/857/files and make sure you have considered/responded/implemented all of them :). Thanks!

shruti862 · 2025-05-07T12:35:43Z

Hi @shruti862, It seems there are still some unresolved comments. Please take a look to all my comments in this view https://github.com/learningequality/kolibri-design-system/pull/857/files and make sure you have considered/responded/implemented all of them :). Thanks!

Hey @AlexVelezLl , Currently my end semester exams are going on. I will get back to this issue within 2 days :)

AlexVelezLl · 2025-05-07T13:12:19Z

Hey @shruti862! Thanks for letting us know! Please take your time, no rush! Good luck with your exams!

shruti862 · 2025-05-11T18:24:33Z

Hey @AlexVelezLl , I have tried to answer all the unresolved comments, please do have a look

MisRob · 2025-07-10T08:57:59Z

Hi @shruti862, in the course of this work, we've noticed some unexpected limitations of KListWithOverflow and there's need for some decisions before we can complete this refactor. As you're now working on your GSoC project, I thought it'd be best to let you focus on that, and re-assign this to @AlexVelezLl who will explore what would be possible next steps. Thanks a lot to both!

updated lib/KListWithOverflow.vue and lib/KBreadcrumbs.vue

cf05645

MisRob marked this pull request as draft December 9, 2024 04:41

added comments to reference issues in lib/KBreadcrumbs.vue

cd730f1

MisRob requested a review from AlexVelezLl December 9, 2024 08:54

MisRob added the TODO: needs review Waiting for review label Dec 9, 2024

AlexVelezLl requested changes Dec 11, 2024

View reviewed changes

new commits

77c86a0

shruti862 closed this Dec 12, 2024

shruti862 force-pushed the new-change3 branch from 77c86a0 to 6c6b208 Compare December 12, 2024 11:54

shruti862 added 2 commits December 12, 2024 17:50

new commit

cfa0321

Merge branch 'new-change3' of github.com:shruti862/kolibri-design-sys…

e3b1804

…tem into new-change3

shruti862 reopened this Dec 12, 2024

shruti862 added 2 commits December 12, 2024 18:18

new commit

4ada24c

Revert "new commit"

01aeded

This reverts commit 4ada24c.

AlexVelezLl requested changes Jan 3, 2025

View reviewed changes

shruti862 added 3 commits January 5, 2025 13:24

requested changes done

c59be76

new commit

2a07ab4

new commits

bd5a670

AlexVelezLl self-assigned this Jan 14, 2025

AlexVelezLl linked an issue Feb 5, 2025 that may be closed by this pull request

Refactor KBreadcrumbs to utilize KListWithOverflow #693

Open

1 task

AlexVelezLl requested changes Feb 13, 2025

View reviewed changes

new commit

b304a42

shruti862 had a problem deploying to percy_tests February 26, 2025 13:02 — with GitHub Actions Failure

shruti862 commented Feb 26, 2025

View reviewed changes

AlexVelezLl reviewed Mar 26, 2025

View reviewed changes

new commit

b0460c7

shruti862 had a problem deploying to percy_tests April 15, 2025 15:54 — with GitHub Actions Failure

new commit

0ccd7ba

shruti862 had a problem deploying to percy_tests April 15, 2025 16:12 — with GitHub Actions Failure

shruti862 added 2 commits May 11, 2025 23:48

new commit

59e2dd0

new commit

44bb9ed

shruti862 had a problem deploying to percy_tests May 11, 2025 18:20 — with GitHub Actions Failure

MisRob requested a review from AlexVelezLl June 4, 2025 02:45

MisRob mentioned this pull request Jul 10, 2025

Refactor KBreadcrumbs to utilize KListWithOverflow #693

Open

1 task

MisRob unassigned AlexVelezLl Jul 10, 2025

MisRob changed the title ~~updated lib/KListWithOverflow.vue and lib/KBreadcrumbs.vue~~ [DRAFT] Explore refactoring KBreadcrumbs to use KListWithOverflow Jul 10, 2025

MisRob removed the TODO: needs review Waiting for review label Jul 10, 2025

marcellamaki added this to the KDS Priority Triage milestone Aug 12, 2025

marcellamaki self-assigned this Sep 23, 2025

	<!-- Item Slot -->
	<!-- @slot Slot responsible of rendering each item in the visible list -->

[DRAFT] Explore refactoring KBreadcrumbs to use KListWithOverflow #857

Are you sure you want to change the base?

[DRAFT] Explore refactoring KBreadcrumbs to use KListWithOverflow #857

Uh oh!

Conversation

shruti862 commented Dec 8, 2024

Description

Issue addressed

Before/after screenshots

Changelog

Steps to test

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

Reviewer guidance

Comments

Uh oh!

MisRob commented Dec 9, 2024

Uh oh!

MisRob commented Dec 9, 2024

Uh oh!

MisRob commented Dec 9, 2024

Uh oh!

shruti862 commented Dec 9, 2024

Uh oh!

AlexVelezLl commented Dec 10, 2024

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shruti862 commented Dec 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shruti862 commented Dec 12, 2024

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

shruti862 commented Dec 12, 2024 •

edited

Loading

shruti862 commented Jan 5, 2025 •

edited

Loading

shruti862 Apr 15, 2025 •

edited

Loading