Background

Tables highlight individual rows or cells based on their data, such as a past-due deadline, a discrepancy, or a locked object. To do this, use ` row-class` and `cell-class` for the table or column, respectively, and `css-class` for `ResourceDisplayByExpression`. The documentation lists four standard classes provided by the theme: `tl-status-error`, `tl-status-warning`, `tl-status-success `, and `tl-status-info`. According to the documentation, these classes highlight a row or cell with the corresponding status token. The examples in the documentation also use ` tl-status-warning`.

Problem

The classes appear in the DOM, but none of the loaded stylesheets has a rule for them.

• The cell or display remains unchanged: no background, no text color, no colored icon.
• The error is silent. The configuration looks correct and follows the documentation, yet the styling is still missing.
• The status tokens themselves are present, e.g., --tl-status-warning-text and --tl-status-warning-subtle in style/tl-design-system/tokens.css. Only the classes that should use them are missing.

Version: 8.0.0-alpha12, React View Layer (tl-layout-view/tl-layout-react), Design System style/tl-design-system/.

Reproduction

1. Configure a column with ` cell-class="'tl-status-warning'"` in any table.
2. Alternatively, create a computed column using <display class="com.top_logic.layout.view.element.ResourceDisplayByExpression" css-class="'tl-status-warning'" icon="'css:bi bi-exclamation-triangle-fill'"/>.
3. In the browser, the cell or the ` span.tl-field-value ` has the class ` tl-status-warning`.
4. `getComputedStyle ` returns the same text and background colors as for a cell without a class.
5. A search via ` document.styleSheets ` does not find any rule with the selector `.tl-status-warning`; only the token definitions ` --tl-status-warning-* ` are present.

Example from an application (Prime):

• Three places use the class as documented: the lock column in documents, class deviation in projects, and the “Section no longer in the subtree” warning icon for imported sheets.
• All three markings were invisible.
• Prime therefore includes its own class with its own rule.

Analysis

• Rows and cells in the React table were styled: the client searched the class name using a regular expression for the four names and set the `data-tl-role` attribute based on that, which the design system renders. There is therefore intentionally no rule for `.tl-status-*`.
• The display (ResourceDisplayByExpression) was not aware of this mapping: there, the class had no effect.
• Underlying problem: a CSS class served as a hidden vehicle for a color role. A typo (tl-status-warn) fails just as silently, and each control would have to search the class name itself.

Solution

The meaning of a marker becomes its own script; the class remains a placeholder for the application’s stylesheet.

• New TL script properties that provide a color role:
  • row-role on <table>, <tree-table>, and <composition-table>,
  • cell-role on a column (including <dynamic-columns> and in <embedded-columns>),
  • role on ResourceDisplayByExpression.
• The result is a role from ValueColor, the model’s vocabulary of value colors: error, warning, success, info, brand, category-1 through category-8, and neutral (a role without a tint)—either as a name (“warning”) or as a value. No result means no role. Any other text is an error that specifies the value and the valid names: a typo is immediately noticeable.
• A row or cell with a role is given the role’s fill color and border (e.g., --tl-status-warning-subtle); a selected row continues to show the selection, and a cell with its own role displays that role. A display with a role is a pill of that role with an icon and label, similar to a value to which the model assigns a color; without a role, it retains the color from the model. This applies to both the light and dark themes.
• The server sends the role as a separate field (TableView#rowColor, #cellColor, Column#color; a ResourceProvider that is also a ValueColorProvider determines the role of its display). The client no longer reads class names.
• row-class, cell-class, and css-class remain unchanged but no longer have names with special meanings: their classes are defined by the application’s stylesheet.
• The classes `tl-status-error`, `-warning`, `-success`, and `-info` have been removed; all uses within the framework (administration views for permissions, effective permissions, secrets, and the control program; demo) have been updated. The tree table demo in the React demo illustrates a row, cell, and display role.

Migration

A script in `row-class`, ` cell-class `, or `css-class ` (on ` ResourceDisplayByExpression`) that returns one of the classes `tl-status-error`, tl-status-warning, tl-status-success, or tl-status-info will be converted to the corresponding role property and will return the role name without a prefix:

<table row-class="$row.get(`my:Part#amount`) > 100 ? 'tl-status-warning' : null"/>

becomes

<table row-role="$row.get(`my:Part#amount`) > 100 ? 'warning' : null"/>

Similarly, `cell-class` → `cell-role` for the column and `css-class` → `role` for `ResourceDisplayByExpression`. A script that returns additional custom classes in addition to the status class retains these in the `class` property. A display with a role appears as a pill, not as colored text.

The TL-Script functions ` securityGrantsRowClass ` and ` securityGrantsCellClass ` are called `securityGrantsRowRole ` and `securityGrantsCellRole` and return a role name; they belong in ` row-role ` and ` cell-role`, respectively.

Java: RowClassFunction is called RowFunction (RowFunction.rowClass(...), RowFunction.rowRole(...)); the Record ColumnSetup has the additional component cellRole following cellClass.