patternfly
patternfly copied to clipboard
Bug - Button - custom sized buttons have wrong background
Noticed in testing the latest release candidate prerelease-v6.3.0-prerelease.36. It looks like if a button has a portrait shape and is too tall, the background for the clicked/active state shows. I created this codepen to show it in a plain and primary button - https://codepen.io/mcoker/pen/LEVaRyQ
You can see the bug if you look at the draggable data-list on react staging and remove isCompact from <DataList />. Those draggable buttons have a custom size so that they will occupy the full row height.
A couple of short-term solutions off the top of my head:
- Remove the custom padding on the button for the draggable row button in data-list. This aligns with other updates we made with the v6 release. We used to have other plain buttons that were the only thing in a cell like that, and the button would occupy the entire cell to increase the clickable area, and I believe we've removed most/all of those. It would also match the draggable table - buttons in draggable table are normal sized. However it's worth noting that you can click anywhere in a draggable table row to drag it (so the click area of the button doesn't really matter). It doesn't look like you can do that with data-list - you have to click on the button itself to drag a row. If we did this, we may also consider removing the custom background style for the draggable data list button so that it just behaves like a normal button (like the table's draggable button). Currently, if you hover/focus the data list button, the background doesn't change like it should.
- Override the button styles to not show the ripple.
However, I think it's fair that a person would change the button's aspect ratio, triggering this bug, so we should probably have a long-term fix for it and allow buttons to be any size/aspect ratio and the background will not show. One thought I had that might work was to have the "ripple" color fade to transparent, so it's transparent by default. IMO it might even look better.
cc @srambach @andrew-ronaldson