banner updates #143
banner updates #143
Conversation
src/Lumi/Components2/Banner.purs
Outdated
| -- @NOTE positioning of the action button changes dependent on if there is a banner title or not | ||
| { alignItems: if (isJust props.title) | ||
| then str "flex-end" | ||
| else str "center" |
There was a problem hiding this comment.
I think this style should go in the box that contains only the actions, otherwise the banner content also gets right-aligned on mobile:
There was a problem hiding this comment.
Also, from looking at the design documentation, it seems that it's the presence of an icon that affects the positioning of the action buttons.
Anyway, I still think we don't need this special casing though, as it looks weird also from a UX perspective to have the buttons change side when an icon exists; that pattern change might confuse users. I'm discussing that with Bethany in the design document.
| $ Banner.actionBanner twoButtonActions | ||
| $ _ { content = loremIpsum_ } | ||
|
|
||
| , h2_ "action banner, round (default), spaced list, non-dismissable" |
There was a problem hiding this comment.
I think we also want an example/test with actions and the dismiss button.
| , dismissable :: Boolean | ||
| , icon :: Maybe JSX | ||
| , title :: Maybe JSX | ||
| , content :: Array JSX |
There was a problem hiding this comment.
One thing I've noticed just now is that, with these types, we don't let the user insert content in the banner that may dismiss it, including the actions. We cannot have now an action button that dismisses the banner.
Maybe we should change the type of content to Effect Unit -> Array JSX? cc @spicydonuts
There was a problem hiding this comment.
Ah yeah that's a really good point...
Also relates to your above comment (re an example with actions + the dismiss button) from what I could tell in the designs it's an either/or -- that is to say, either a banner has text + a dismiss X or has text + actions (and on those action button presses the banner will also be dismissed on completion of the action).
No description provided.