Add support for multi-line content for config forms list items.
Review Request #11037 — Created May 22, 2020 and submitted
Config form list items really don't look right when the content for the
item is more than one line. The icon, content, state indicator, and
actions are all set to vertically-align by default, and when there's
content that grows vertically, everything else looks wrong. We've had
styling in other places that tried to work around this, but each place
had to override things in their own way, and that's not good for future
maintenance.This change aims to fix this by introducing new modifiers that flag an
item (or a list of items) as having multi-line content. This has the
effect of anchoring state columns and actions to the top of the item,
laying out actions vertically instead of horizontally, and allowing a
main content area to have a reasonable line height and to wrap normally
(instead of the default of ellipsizing).To activate this, the list should use an
-all-items-are-multiline
modifier, or individual items can use-is-multiline
. The main content
area of an item containing the multi-line content should then be wrapped
in adjblets-c-config-forms-list__item-main
class.
Tested this with the new extensions UI rewrite, which makes use of
multiline content. Verified that all layout looked completely
reasonable.Tested standard lists, and saw that they continued to look correct.
Summary | ID |
---|---|
e8ee2a6cb5ad0666fb3330f77df1811e77911ff0 |