• 
      

    Add support for multi-line content for config forms list items.

    Review Request #11037 — Created May 22, 2020 and submitted

    Information

    Djblets
    release-2.0.x

    Reviewers

    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 a djblets-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
    Add support for multi-line content for config forms list items.
    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 a `djblets-c-config-forms-list__item-main` class.
    e8ee2a6cb5ad0666fb3330f77df1811e77911ff0
    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-2.0.x (471899c)