Add Buttons block

[pinarol]

Add mobile equivalent of Buttons block.

[lukewalczak]

Hello @pinarol @iamthomasbishop, before starting Buttons implementation I've collected couple question referring to new block:

1. Should buttons be arranged side by side within buttons block till there is a space for that? Maybe we should then re-calculate a default button minWidth based on container width / max number of default buttons.

2. Should appender appear when Buttons block is selected and should be placed below the block as usually (like on the screenshot)?

3. That question is related to the first question - if we are going to have buttons stacked horizontally what about ADD BLOCK HERE insertion line?

4. Is it correct that both Buttons and Button have the same icon what looks a bit oddly in navigation toolbar?

5. Since in Buttons block we can add only Button component should appender automatically (on pressing it) add a button instead of opening a bottom-sheet with available components?

[iamthomasbishop]

Awesome to see this so quickly!

Should buttons be arranged side by side within buttons block till there is a space for that?

I think they should probably be displayed inline (side-by-side), yes.

Should appender appear when Buttons block is selected and should be placed below the block as usually (like on the screenshot)?

I think the appender could be displayed inline as well, right next to the buttons (assuming that's where the button is created, as mentioned above.

That question is related to the first question - if we are going to have buttons stacked horizontally what about ADD BLOCK HERE insertion line?

I wonder if we should skip the inserter flow altogether when a new button is added. What I mean is the button could be added immediately when the appender is tapped, no need for the inserter sheet and "add block here" indicator.

Is it correct that both Buttons and Button have the same icon what looks a bit oddly in navigation toolbar?

I think this is fine. We're borrowing the icon from core, so I think we should only change it if they also change the icon.

Since in Buttons block we can add only Button component should appender automatically (on pressing it) add a button instead of opening a bottom-sheet with available components?

Yes, see my note above (in the third comment).

[pinarol]

Should buttons be arranged side by side within buttons block till there is a space for that? Maybe we should then re-calculate a default button minWidth based on container width / max number of default buttons.

@lukewalczak Could you check web's behavior about this? It'd be enough if we only wrap the buttons and let them break into the next line once they don't fit the current line anymore, flex-box should handle it. I expect we won't need to make extra calculations about min or max width if I am not wrong.

[lukewalczak]

@lukewalczak Could you check web's behavior about this? It'd be enough if we only wrap the buttons and let them break into the next line once they don't fit the current line anymore, flex-box should handle it. I expect we won't need to make extra calculations about min or max width if I am not wrong.

Sure, will check it, however, it was just a quick idea.

I think the appender could be displayed inline as well, right next to the buttons (assuming that's where the button is created, as mentioned above.

@iamthomasbishop How should appender look like then? Should it take the whole free space next to the last button?

[iamthomasbishop]

How should appender look like then? Should it take the whole free space next to the last button?

It can be a square (w/ same styling as current), displayed inline w/ the list of buttons. Something like this:

[lukewalczak]

Cool, That's exactly what I had in mind 👍

[pinarol]

I was assuming this would be the best way to go with Buttons, until I start thinking about individual Button alignments. I couldn't imagine how to demonstrate alignment of each Button there. @iamthomasbishop wdyt?

The first thing that comes to my mind is stacking each button vertically instead, that way we'd be able to demonstrate horizontal alignments.

[iamthomasbishop]

I was assuming this would be the best way to go with Buttons, until I start thinking about individual Button alignments. I couldn't imagine how to demonstrate alignment of each Button there. @iamthomasbishop wdyt?

@pinarol Considering the Buttons block has a control for alignment, which aligns the "group" of blocks, I think we should exclude the alignment controls on each of the inner buttons and let the parent Buttons block control the list of buttons. It's not only clunky when you attempt to align individual buttons within a parent Buttons block, but it's also a bit confusing. With that said, here's an example of what I'm thinking in terms of child block alignments (along with the appender):

Note: this example is also showing how wrapping would work.

[pinarol]

@iamthomasbishop That looks super good 👍and I agree all. I thought since it is available on web we should look for ways to support it as well. But I agree that we'll have a better UX excluding it. Thanks!

[lukewalczak]

@iamthomasbishop I would like to ask one more question into Buttons block behaviour: what should happen when the user removed the last button from Buttons block?
I consider Buttons as a container, so in my opinion, it should behave more like Group block, so after deleting the last button it should leave the placeholder
which after pressing will add new Button.

[iamthomasbishop]

what should happen when the user removed the last button from Buttons block?
 I consider Buttons as a container, so in my opinion, it should behave more like Group block, so after deleting the last button it should leave the placeholder
 which after pressing will add new Button.

I think I would expect it to act like a group as well. In other words, after deleting the last button, the Buttons block would essentially revert to the placeholder/starter state, where the parent (Buttons) block is selected and only the appender button is shown inside.

[lukewalczak]

How should the placeholder look like when Buttons block is empty and is not selected 🤔 ?

[iamthomasbishop]

How should the placeholder look like when Buttons block is empty and is not selected 🤔 ?

Ahh, that’s a good question. After thinking about it, I think perhaps we should do one of the following two things:

• Delete the Buttons block altogether

• Don’t allow deleting of the last child Button block, instead leave it as an empty button with a placeholder label (“Add text...”). In other words, when I am down to no characters in the only block, hitting delete will do nothing.

I am leaning towards the first option, because I think it would feel more fluid and expected — if I’m tapping delete, I would expect it to delete the thing (in this case, the only child Button and the parent Buttons block).

[lukewalczak]

I've implemented the first solution! Thanks @iamthomasbishop!