Apply table PF4 classname and use PF4 pagination

Not sure if you are going to love it or hate it,
I opened a PR to use the “pf-c-table” on our rails .erb tables and make them look like it’s the PF4 component which is a one-liner change: https://github.com/theforeman/foreman/pull/8828/files#diff-4cff928ae5dfd3fb850d4e1483656430b60a8431c32ce22ece18e7a348cfe22eR239

and on the same PR as the second commit, I use the PF4 Pagination component as our default,
and in case someone wants to use the old one they can pass the prop isPF4: false

Try it out and let me know what do you think about this change :slight_smile:

New ones:

Bookmarks

Architectures

Hosts

3 Likes

All that padding feels excessive. Is that really how PF4 expects things to look? For example on the hosts page I could fit 35ish rows without having to scroll. After applying this change, I can see first 14, for the rest I have to scroll.

2 Likes

Good eye! there is that pf-m-compact class we can add to make it in compact mode,
here are all of the table types: PatternFly 4 • Table

@MariSvirik should we use compact mode on all pages?

it was due to mixture of old bootstrap classes and not using the compact class,
this is how it looks atm:

New ones:

Bookmarks

Architectures

Hosts

1 Like

Update:

For a striped table, we can add a CSS rule like:

tr:nth-child(even) {
  background-color: color;
}

When removing Foreman’s center-align class name from the table rows and removing hard-coded width size to each col,
the hosts’ table looks much better:

1 Like

The column widths are now very weird. The checkbox and power columns are way too wide.

Overall I think PF4 looks worse and I’m :-1: on this proposal.

well, there is an option to adjust the columns the same way we do now with bootstrap, this is how it looks atm:

      <th class="ca" width="40px"><%= check_box_tag "check_all", "", false, { :onchange => "tfm.hosts.table.toggleCheck()", :'check-title' => _("Select all items on this page"), :'uncheck-title'=> _("items selected. Uncheck to Clear") } %></th>
      <% if power_status_visible? %>
        <th class="ca" width="80px"><%= _('Power') %></th>
      <% end %>

so that’s not a big issue.

here is a comparison of the two tables with widths adjusted,
IMO the PF4 feels better, more modern.

what do you think looks worse?
adding @MariSvirik so she can pass thoughts to improve on PF4 side

All the content in the table looks the same and it kind of blends together. There are no visual hints to distinguish lines as clearly as before. Previously there was a very clear table and I miss that in PF4.

Also the clear per page selector is now hidden. It’s probably behind the item selector but that’s not very obvious.

I’ll also note that in general I dislike “modern” UIs. Just because it’s newer doesn’t make it better.

I believe the design is always very subjective and I’d like to ask everyone to keep that in mind before quick judgement of what’s better or worse. Another point for keeping the general discussion healthy and productive, I’d like to avoid comments like it’s better because it’s modern or it’s better because this is how it always used to be.

Last but not least, I think we started the PF4 adoption already and some components are already using PF4 patterns. There’s very little value in not adopting only some PF4 patterns, because that would result in one page combining non-PF and PF4 styles. That’s probably not the state we want to end up with, since it does not look consistent. Adopting the PF4 is the current direction. While we can always rethink if that’s good or bad direction, it’s a separate conversation. I would prefer to avoid discussing general PF4 direction on every separate PF4 component. Let’s start a new thread on dropping PF4 if someone thinks that would be better.

Now specifically for the tables presented in this thread. I didn’t like the first screenshots because of the spacing, however the compact version looked as a good improvement to me. The thing that catched my eye was the spacing around checkbox and power status. That was improved in the next screenshot. I’d prefer to make the checkbox column as thin as possible but I guess that’s just a bit more of css tweaking. And then I saw the last version and bam, that’s really nice. I like the final screenshot more than the existing table. For the pagination, I actually like the fact, all pagination logic is on one place. The caret felt natural to me.

The existing tables are distracting due to many color changing. In the new one, I quickly see the structure. The values are far enough from each other so I can easily distinguish one from the other. It may be also thanks to the tables on the screenshots are different (recommendation column, resolution). On the old table, the fact we use the same background color for header, even row and the footer makes the last row kind of blurred with the footer. The new style does not suffer from that. This whole paragraph is meant as my personal subjective feeling so that we can fine tune the CSS further, but also to illustrate how initial concerns can change if we continue the discussion with an open mind, pointing out weaknesses and suggesting improvements. As far as I understand, all tweaks done in here have nothing to do with the PF4 itself. It was CSS classes or bugs caused by the mix with bootstrap that made the initial look weird.

In my opinion, the actual experience matters the most, just looking at screenshots can be misleading. I’d recommend everyone commenting on the design changes, toactually apply the patch and work with it for some time. Then switch it back and compare how it feels. I learned my lesson back in the days we converted big rounded bootstrap buttons to smaller rectangular ones with pf3. I thought back then how hard it would be to click these new buttons, well now I wouldn’t like to see screens like this anymore It does not really matter if they are rounder or sharp, smaller or bigger, it was the change itself that made me feel uncomfortable. It turned out quickly it’s not a big deal.

Back to the proposed change, I think there are still some tweaks to be made, but I like the overall experience. Adding few more screenshots for comparison. Things I found:

  • hovering the row does not highlight it anymore, that is quite important with compact tables, but I hope it’s trivial to add, I’m surprised I didn’t find it at PatternFly 4 • Table, I’d really miss that
  • check the tooltip on Hosts index above the top checkbox, that seems broken
  • the power icon or lock icon on screenshots is aligned to the left side, having it centered would feel more natural to me (in case it’s really just an icon and nothing else)
  • one dashboard widget still uses old styles, I took a picture of that because IMHO it also shows the difference in the visualization and over-distraction by colors, OTOH I admit it’s not completely fair as tables display different amount of data

Overall I feel an improvement especially with tables having a lot of data. :+1: from me.

1 Like