UI: Add new column type `Breadcrumb` for the UI Table
This PR proposes a new column Path for the data table.
This addition to the UI framework became necessary as part of the Removing of Legacy-UIComponents-Service and Table project.
@oliversamoila had asked me to provide a PR so that the new UI data table could be used in various places where paths are displayed as information.
For example, a column for mapping paths is required in the following contexts:
- Contacts/Mail : Communication > Contacts > My Courses > : Mapping of paths of courses in the system
- Statistics : Administration > Learning success > Statistics and learning progress > Statistics : Paths of objects
- Roles : Administration > Roles > e.g. local roles : Paths of contexts of roles
Hi @lscharmer,
please assign @Amstutz, @thibsy and me once this is not WIP anymore.
Kind regards!
Dear UI Coordinators, as already announced in the last Removing LegacyUI meeting, we would like to propose an extension of the column types for the UI data table and its derivatives. A path column with use of the already known breadcrumb. This should enable the conversion of further legacy tables. See above in the opening paragraph by Lukas.
We would be delighted to receive initial feedback from you and would be happy to bring the topic to the JourFixe afterwards. The PR has already received internal reviews. We have also carried out successful tests with the screen reader within examples.
Best regards and thank you. @oliversamoila
Hi @lscharmer and @oliversamoila,
we have discussed via our UI-Coordinator channels. We would kindly ask you to rename this to Breadcrumb Column (instead of Path column...) because we already have a name for that thingy we want to display there and do not need another one... =)
Please take it to the JF afterwards...
Kind regards!
Hi @lscharmer and @oliversamoila,
we have discussed via our UI-Coordinator channels. We would kindly ask you to rename this to
Breadcrumb Column(instead ofPathcolumn...) because we already have a name for that thingy we want to display there and do not need another one... =)Please take it to the JF afterwards...
Kind regards!
The component is renamed to Breadcrumb.
Hi @lscharmer,
I removed us coordinators from the assignees to get this of our immediate to do lists. Please reassign us once this is through JF and ready for the review of the implementation.
Kind regards!
Jour Fixe, 23 JUN 2025: We highly appreciate this suggestion and accept the PR for trunk.
Hi @lscharmer,
please pass back to me and ping me once changes are included.
Thanks!
Hi @klees, thank you for your review.
- [x] examples: Please remove padding-left for the breadcrumb in tables. Since both the breadcrumb and the cell contain padding, we lose space on the left. In addition, this means that the column title and the beginning of the breadcrumb are not aligned on a vertical line. My suggestion is to remove the “padding-left: 20px” from the breadcrumb in the table. This allows us to make optimal use of the space even with a narrow column.
I also removed the 6px padding around the other sides of the breadcrumbs component as it applies to them as well.
Hi @lscharmer,
thanks a lot!
Kind regards!
Hi @lscharmer,
just one additional note, which also might be interesting for everyone else:
We need to carefully consider the wording of these descriptions above the examples, as they will become testcases. We need to be specific enough to make sure that testers understand what they are supposed to look into. But we also should try to not be too specific so testcases won't need to be adapted for every change. Basically similar to out automated tests...
Interesting thing here is the explicit mentioning of > as delimiter in the breadcrumb. This feels like some design decision that could change at the whim of someone pretty quickly. So this might be something that breaks these tests soon. I will add a commit that makes this a little more generic.
Maybe something to consider next time...
Kind regards!
For future reference: ea3a51fe9322500fd23e4ab809c5cb70afa5714b