feat: add fluid button set

[lee-chase]

The documentation on buttons https://carbondesignsystem.com/components/button/usage/
mentions fluid buttons and how they're handled. However, this does not appear to be implemented.

This PR adds the fluid property to the ButtonSet component.

With the fluid property set to true the button set exhibits the following behavior

• Controls the inline-size of the buttons
• Auto stacks the buttons based on $min-inline-button-size: convert.to-rem(176px)
• Re-orders buttons based on guidance
• Adds withDisplayBox to allow control of container width in storybook
• Adds SetOfButonsFluid story

Further work

• Setting a default button set in the story is not functional. NOTE: A default not functional elsewhere e.g. MenuButton Playground MenuAlignment.
• Notify users (via event handler) of stacking change.
• Allow for gaps between buttons
• Control auto stack with a property.

Changelog

New

• packages/react/.storybook/templates/WithDisplayBox/WithDisplayBox.scss
• packages/react/.storybook/templates/WithDisplayBox/index.js
• packages/react/src/components/Button/story/fluid-button-set-args.js

Changed

• packages/react/src/components/Button/Button.stories.js
• packages/react/src/components/ButtonSet/ButtonSet.tsx
• packages/styles/scss/components/button/_button.scss

Testing / Reviewing

Checked functional in storybook

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ba82d66
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65df6bfcd464160008281fad
😎 Deploy Preview	https://deploy-preview-15843--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	bffc866
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6644e88992cd26000859673a
😎 Deploy Preview	https://deploy-preview-15843--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tw15egan]

This is great, @lee-chase. Thanks for taking the time to add this in. I had a question: Should the single button max out at 320px? It seems to grow until 520px and then becomes a non-fluid variant, but I'm just trying to determine the correct spec. Similarly, what should they grow to in a 2, 3, or 4-button group? The 4 button group has them all stack at a 700px width

[lee-chase]

This is great, @lee-chase. Thanks for taking the time to add this in. I had a question: Should the single button max out at 320px? It seems to grow until 520px and then becomes a non-fluid variant, but I'm just trying to determine the correct spec. Similarly, what should they grow to in a 2, 3, or 4-button group? The 4 button group has them all stack at a 700px width

Not sure I have an answer to that. The sizes and behaviour chosen were very much a reflection of the ActionSet used in @carbon/ibm-products SidePanel. The values chosen in the case of SidePanel were judged to be aesthetically pleasing for the SidePanel rather than a fluid button set by itself.

Given that custom CSS properties cannot be used in media queries (container or otherwise) perhaps these value could be defined as SASS variables or part of a mixin call to allow a consumer could override should they need to.

[thyhmdo]

Hi, sorry for the late review. This looks great. I have a few questions and concerns:

• This experience is different from the Set of Buttons. I was confused for 5 sec not knowing what to do. It could populate an option upfront.
• From interacting with the "Stacked" prop, I'm not sure I see differences, unless I'm missing something.
• @lee-chase Can the visual change here if I provide a spec? I was a little bit confused about how this worked since we don't have this experience anywhere in the storybook.

[lee-chase]

@thyhmdo apologies for the lack of clarity.

• I did try top populate this up front, but had some difficulty with Storybook, which seems to behave differently to IBM Products. Perhaps one of the devs could advise, happy to update. The simplest thing to do would be to move the various fluid button options into a folder.
• Stacked - if I'm honest I do not recall why I left this in this story. I have removed it and can see no issues in doing so.
• Not sure what you are asking with your final query.

The wrapper around the button story is something done in IBM Products and could probably do with a UX tidy up. The intent is to show the component but provide a simple mechanism to allow the user to see how the component behaves with different container sizes.

[thyhmdo]

@thyhmdo apologies for the lack of clarity.

• I did try top populate this up front, but had some difficulty with Storybook, which seems to behave differently to IBM Products. Perhaps one of the devs could advise, happy to update. The simplest thing to do would be to move the various fluid button options into a folder.
• Stacked - if I'm honest I do not recall why I left this in this story. I have removed it and can see no issues in doing so.
• Not sure what you are asking with your final query.

The wrapper around the button story is something done in IBM Products and could probably do with a UX tidy up. The intent is to show the component but provide a simple mechanism to allow the user to see how the component behaves with different container sizes.

1. @tw15egan @guidari Do you have suggestions for this?
2. Nice! I checked and it seems like the problem is solved.
3. Similar to components with layers, Anna provided some specs to have a particular look for it. In this visual, the label is quite long, the width extension could be replaced with something else that is close to our design spec (see image-red line)

• The label could be simplified, maybe something like: "Max width (component container)
• The other label could be "Width varies based on the max width adjustment"

[guidari]

Hey @lee-chase
I did a commit on your PR to populate an option up front like @thyhmdo mentioned.

https://deploy-preview-15843--v11-carbon-react.netlify.app/?path=/story/components-button--set-of-buttons-fluid

[thyhmdo]

Hey @lee-chase I did a commit on your PR to populate an option up front like @thyhmdo mentioned.

https://deploy-preview-15843--v11-carbon-react.netlify.app/?path=/story/components-button--set-of-buttons-fluid

that looks good! thanks @guidari

[guidari]

Tested and that looks good to me. 🚀