pfng-list vertical alignment

[mcoker]

The image on the left of a pfng-list row should be vertically centered > 992px viewport.

For reference, here is the list component on PF core.

It's because ofdiv.pfng-list-content in list.component.html (in 2 places) that interferes with the parent classes .list-pf-content.list-pf-content-flex. Removing the .pfng-list-content element takes care of the layout issue, but looks like there are click and dblclick events added on that element that need to be resolved.

[dlabrecq]

We cannot always mimic patternfly core exactly -- core does not consider the component layouts required to work with JS frameworks.

The div container is necessary to limit where click events are supported. The pfng-list-content selector was added so the div's display would also support flex. However, it's possible that we could replace pfng-list-content with list-pf-content list-pf-content-flex? However, those same selectors would also be on the parent container, like so:

<div class="list-pf-content list-pf-content-flex">
        <div class="list-pf-content list-pf-content-flex"
             (click)="toggleSelection($event, item)"
             (dblclick)="dblClick($event, item)">
          ...
        </div>
        <!-- actions -->
        <div class="list-pf-actions">
          ...
        </div>
</div>

[dlabrecq]

Looking at the patternfly example, I don't see all icons being vertically aligned. Some are, but not the second example. Is that expected?

The snapshot is 1220px, but no icons are aligned when less than 992px.

[mcoker]

@dlabrecq that works for me!

re: the stacked example not being vertically aligned in the center, in the demo above where everything is center aligned, it looks like as soon as the items stack, it's aligned to the top (flex-start), just like the stacked example. So that looks to be by design.

[patternfly-build]

:tada: This issue has been resolved in version 4.2.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[mcoker]

@dlabrecq I really appreciate you getting this in so quickly! Today's the last day of our bug fixing sprint before releasing Fuse Online 7.1, and looks like this change will make it in the release.