fix(datalist): adds breakpoints for actions #1886
Conversation
|
Deploy preview for pf-next ready! Built with commit 7fe5748 |
| @@ -80,6 +80,7 @@ | |||
| --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md); | |||
| --pf-c-data-list__item-action--not-last-child--lg--MarginBottom: var(--pf-global--spacer--md); | |||
| --pf-c-data-list__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1); | |||
| --pf-c-data-list__item-action--hidden-visible--Display: flex; | |||
There was a problem hiding this comment.
how about we change this to --pf-c-data-list__item-action--Display: flex;, then use var(--pf-c-data-list__item-action--Display) for the @include on L182 and for the display property on L184 since those should always match?
| @@ -178,6 +179,8 @@ | |||
| } | |||
|
|
|||
| .pf-c-data-list__item-action { | |||
| @include pf-hidden-visible(var(--pf-c-data-list__item-action--hidden-visible--Display)); | |||
There was a problem hiding this comment.
At here, should these action buttons wrap by default?
This is set on the actions element
@media screen and (max-width: $pf-global--breakpoint--lg) {
flex-wrap: wrap;
}
I know that if we change the breakpoint to be larger, then even two action buttons will wrap. But 4 buttons like that seems like alot. We probably also want to avoid having a max-width on the action container im sure.. what if we had a modifier called pf-m-wrap that allows the actions element to wrap if the user wanted it to. Then we can remove that media query. it doesnt seem flexible enough.
|
I read the issue as not wanting a wrap in lieu of the breakpoints but @mcarrano can you clarify whether you want it to wrap or not? |
|
When you say wrap here, are you asking if we should start to stack the buttons below a certain breakpoint? That was not my intent. I think that we want to collapse the buttons into the kabob when they no longer fit. Keep in mind that the example here is not a likely one or a design I would encourage. I would not recommend including more than one or two inline action buttons in a row. Maybe we should remove that example? |
|
I can make the example whatever you want. I was showing that if you did have a lot, it could collapse earlier than if you had fewer. I assume you would never collapse 1 button, so do you just want one example with 2 buttons that collapse into a kebab? @mcarrano |
|
I don't feel strongly about whether the 4 button example should be removed or not. I'm struggling with whether you would collapse one button or not. What if you scale down to mobile? A single button could occupy half the screen. But then it's odd to have a kabob with one action. @srambach @christiemolloy what would you expect? |
|
I would not want a single button to collapse to a kebab. But it would just not be coded with the modifier saying to collapse it. Or maybe that single button would switch to an icon button. That would be possible with the changes in this PR. This PR gives you the mechanism to show/hide actions depending on a breakpoint. @mcarrano |
|
🎉 This PR is included in version 2.12.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This collapses actions into a kebab menu by using modifiers specifying what breakpoint to show/hide the menu toggle and action buttons.
Closes #1704