enhancement
major
minor
major
minor
minor
#29503
TLResourceCell ships no CSS: icon and label touch wherever a resource cell shows both
Reported from the Consulting application on 8.0.0-alpha7 (react view UI, Issue #94).
ReactResourceCellControl renders the TLResourceCell component, which puts an <i class="bi bi-..."> and a <span class="tlResourceLabel"> next to each other inside <span class="tlResourceCell">. There is no stylesheet rule for .tlResourceCell anywhere in the delivered CSS:
{{{#!js Array.from(document.styleSheets).some(ss =>
Array.from(ss.cssRules).some(r => r.selectorText && r.selectorText.includes('tlResourceCell')))
// false }}}
So the element keeps display: inline with no gap and no alignment, and the icon touches the first letter of the label:
[icon]Create Discovery phase
instead of
[icon] Create Discovery phase
It shows up as soon as a cell carries both an icon and a label — for us in a <tree> whose nodeContent provider supplies a status icon per node. A cell that only ever shows a label (the common case in tables so far) hides the problem.
Suggested fix
A rule beside the component:
{{{#!css .tlResourceCell {
display: inline-flex;
align-items: center;
gap: var(--spacing-02);
} }}}
align-items: center matters as much as the gap: with display: inline the icon sits on the text baseline rather than centred on the line box, so a round icon reads as sitting slightly low.
What we did
Added exactly that rule to the application stylesheet as an interim measure, since the view is unreadable without it. It should be deleted here once the component styles itself.
Related
- #29502 — the same tree, its model-update behaviour.
Lösung
Die Komponente bringt ihre Regeln jetzt selbst mit (tlReactControls.css, Abschnitt TLResourceCell):
- .tlResourceCell ist inline-flex, vertikal zentriert, mit gap: var(--spacing-02) zwischen Icon und Beschriftung; max-width: 100% / min-width: 0, damit die Zelle in ihrem Container nachgibt.
- .tlResourceLabel trägt min-width: 0; overflow: hidden; text-overflow: ellipsis: Da die Wurzel kein Inline-Text mehr ist, greift die Ellipse des Baumknotens (.tlTreeView__content) bzw. des Pills nicht mehr auf den Text durch — die Beschriftung selbst ist jetzt der Teil, der nachgibt und mit „…“ endet.
- In einer Tabellenzelle (.tlTableView__cell > .tlResourceCell) wird die Zelle display: flex, weil die Zellregel .tlTableView__cell > span { display: block } die Komponentenregel sonst überstimmt.
Die Demo-Typen ProjectScope, Milestone und Ticket (tl.demo.projectManagement) erhalten je ein Icon (<instance-presentation icon="css:bi bi-…"/>), damit die Baum-Demo der React-Demo-App Icon und Beschriftung zusammen zeigt.