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. from me.