enhancement
major
minor
major
minor
Problem
Some buttons do not have a gray background. The button icons are underlined when active. The color of the dropdown arrow is too light and therefore barely visible.
Solution
The background colors have been set correctly. In this ticket, the SelectionTextControl was also adjusted to better fit the new theme.
Test
Launch the application and examine the buttons and the SelectionTextControl.
Migration
The CSS classes for the controls, command buttons, and PageRenderer have been converted to the BEM notation (block__element--modifier) with the tl-- prefix. Applications with their own stylesheets, themes, JSPs, or control renderers that reference the old names will lose their styling without an error message and must be updated.
Command Buttons
| old | new |
| cmdButton | tl-cmd-button |
| cmdButtonDisabled | tl-cmd-button--disabled |
| cmdImg | tl-cmd-button__img |
| cmdLabel | tl-cmd-button__label |
| button_minus | tl-button-minus |
PageRenderer
| alt | new |
| fptPage | tl-form-page |
| fptHeader | tl-form-page__header |
| fptTitle | tl-form-page__title |
| fptTitleContent | tl-form-page__title-content |
| fptTitleText | tl-form-page__title-text |
| fptSubtitle | tl-form-page__subtitle |
| fptSubtitleContent | tl-form-page__subtitle-content |
| fptIconBar | tl-form-page__icon-bar |
| fptBody | tl-form-page__body |
| fptBodyContent | tl-form-page__body-content |
Controls
| alt | new |
| cTextInput | tl-text-input |
| cExpandableTextInput | tl-expandable-text-input |
| cBlockTextInput | tl-block-text-input |
| cIntegerInput | tl-integer-input |
| cDateInput | tl-date-input |
| cTimeInput | tl-time-input |
| cDatetime | tl-datetime |
| timePart | tl-datetime__time-part |
| cPopupSelect | tl-popup-select |
| cDropdownSelect | tl-dropdown-select |
| cTextSelect | tl-text-select |
| cTextPopup | tl-text-popup |
| cTextPopupView | tl-text-popup-view |
| cBooleanChoice | tl-boolean-choice |
| cCheckList | tl-checklist |
| cCheckList-counts | tl-checklist__counts |
| cDataItem | tl-data-item |
| cDownload | tl-download |
| downloadControl | tl-download--download-mode |
| cIconChooser | tl-icon-chooser |
| cIconSelect | tl-icon-select |
| searchTextField | tl-icon-chooser__search |
| displayedIcons | tl-icon-chooser__icon |
| cDecoratedCell | tl-decorated-cell |
The following, among others, have not been renamed and should therefore be used as is: the layout classes (lFlexible, lFixedLeft, lFixedRight), cDecoratedCell2, button_plus, cTextPopupEditor, as well as the state classes such as selected, disabled, and mandatory.
New classes
| Class | Meaning |
| tl-expandable-button | Container for the buttons of an ExpandableTextInputControl or BlockTextInputControl; replaces the previously used lFixedRight in those contexts |
| tl-text-select__option-text | Text of an option in a SelectTextControl |
| tl-text-select__option-clear | Clear button for an option in a SelectTextControl |
Template Customization
The templates TEXT_INPUT_WITH_BUTTONS_EDIT_TEMPLATE and TEXT_INPUT_WITH_BUTTONS_EDIT_MULTI_TEMPLATE no longer set the CSS class of the button container to lFixedRight, but instead use the new template variable {inputButtonCssClass}. Applications that override one of these templates must adopt this variable; TextInputControl continues to return lFixedRight, while ExpandableTextInputControl returns tl-expandable-button.