feat: add fluid button set #15843

lee-chase · 2024-02-28T17:23:05Z

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 · 2024-02-28T17:29:49Z

✅ 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 · 2024-02-28T17:35:48Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`736e259`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6740b02dc4e26600080078bf
😎 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 · 2024-03-11T14:50:39Z

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 · 2024-03-14T15:31:21Z

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 · 2024-05-01T20:01:05Z

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 · 2024-05-02T09:53:18Z

@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 · 2024-05-02T13:45:56Z

@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.

@tw15egan @guidari Do you have suggestions for this?
Nice! I checked and it seems like the problem is solved.
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 · 2024-05-02T18:11:51Z

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 · 2024-05-07T18:20:28Z

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. 🚀

lee-chase · 2024-07-02T13:14:21Z

@andreancardona I do not believe this is waiting for response from me.

netlify · 2024-07-30T20:31:08Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`736e259`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6740b02c21093900093827be
😎 Deploy Preview	https://deploy-preview-15843--carbon-elements.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.

tay1orjones · 2024-08-05T19:14:06Z

Hey, thanks again for your work here! Had a brief discussion with the team about any blockers we see preventing this from merging.

One thing that came up was the container slider. We've had users struggle to understand and use controls inside stories like this. We'd like to move away from them where possible. One idea is to instead have a new custom toolbar item in the storybook toolbar. It would contain a list of px values stepping in multiples of 160px. 160px, 320, 480, ... up to 1600. The graph bar can be used for the icon. Selecting one of these items would modify the styles on a decorator that wraps each story to set the width of that container to the selected value. Benefits here are that it standardizes controls within the storybook toolbar outside of the story frame, and it fully parameterizes these container sizes into the url. With this we could vrt components at one/many/all of these container widths.

On the code level I worry about determining if the buttons are currently stacked by imperatively evaluating the styles applied via getComputedStyle(). Is there another way we could determine this? It's not testable functionality as is because getComputedStyle() is a noop.

carbon/config/jest-config-carbon/setup/setup.js

Lines 33 to 35 in 184d1a9

    
           // https://github.com/nickcolley/jest-axe/issues/147#issuecomment-758804533 
        
           const { getComputedStyle } = window; 
        
           window.getComputedStyle = (element) => getComputedStyle(element);

Sorting the buttons feels like something we would typically leave up to the consumer. I see the intended benefit, but using Children methods immediately limits the structure of what consumers can provide there. I'm not sure the benefits outweigh that cost?

lee-chase · 2024-09-04T17:21:24Z

@tay1orjones & team

Switching from the container slider to a toolbar item is a possibility, but would need visual input as to how that is represented in the story. The viewport control has a similar behaviour and clearly marks out the usable area.

Whether or not the buttons are stacked is currently used to reposition box shadows and sorting. Even if sorting is deferred to the user they would need to monitor when stacking had occurred. In an ideal world we would provide onStack as an event. Could we not just mock window.getComputedStyle for some tests?

If there is no possibility of a tooltip (currently icon button only) then --stacked css modifier can be simplified and replaced with an overflow: hidden on the button set. This does not solve the sort/stacked detection.

netlify · 2024-11-22T16:24:25Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`736e259`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/6740b02c677e860008742ecf
😎 Deploy Preview	https://deploy-preview-15843--v11-carbon-web-components.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.

codecov · 2024-11-22T16:39:37Z

Codecov Report

Attention: Patch coverage is 45.28302% with 29 lines in your changes missing coverage. Please review.

Project coverage is 82.73%. Comparing base (626289a) to head (736e259).

Files with missing lines	Patch %	Lines
...mponents/Button/__story__/fluid-button-set-args.js	0.00%	17 Missing ⚠️
...kages/react/src/components/ButtonSet/ButtonSet.tsx	66.66%	11 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15843      +/-   ##
==========================================
- Coverage   82.87%   82.73%   -0.14%     
==========================================
  Files         404      405       +1     
  Lines       14338    14391      +53     
  Branches     4591     4624      +33     
==========================================
+ Hits        11882    11906      +24     
- Misses       2296     2323      +27     
- Partials      160      162       +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

feat: add fluid button set

ba82d66

lee-chase requested a review from a team as a code owner February 28, 2024 17:23

lee-chase requested review from tw15egan and guidari February 28, 2024 17:23

Merge branch 'main' into fluidButtonSet

d51b927

lee-chase added 2 commits February 28, 2024 17:59

fix: scss variable name

827bbb0

fix: button set test

ae8932a

lee-chase requested a review from a team as a code owner February 28, 2024 18:16

alisonjoseph added the status: visual review 🔍 label Feb 28, 2024

alisonjoseph requested review from a team and thyhmdo and removed request for a team February 28, 2024 20:37

lee-chase and others added 2 commits February 29, 2024 11:14

fix: prevent display box overflowing the story area

502bbd8

Merge branch 'main' into fluidButtonSet

f779d72

andreancardona added the status: waiting for maintainer response 💬 label Mar 13, 2024

fix: remove stacked from story

a662071

fix: populate an option up front

95e782a

Merge branch 'main' into fluidButtonSet

bffc866

lee-chase requested a review from a team as a code owner May 15, 2024 16:53

lee-chase requested a review from tay1orjones May 15, 2024 16:53

guidari approved these changes May 15, 2024

View reviewed changes

guidari added status: ready for review 👀 and removed status: waiting for maintainer response 💬 labels Jul 3, 2024

Merge branch 'main' into fluidButtonSet

a28eacc

Merge branch 'main' into fluidButtonSet

b765425

Merge branch 'main' into fluidButtonSet

736e259

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add fluid button set #15843

feat: add fluid button set #15843

lee-chase commented Feb 28, 2024 •

edited

Loading

netlify bot commented Feb 28, 2024

netlify bot commented Feb 28, 2024 •

edited

Loading

tw15egan commented Mar 11, 2024

lee-chase commented Mar 14, 2024

thyhmdo commented May 1, 2024

lee-chase commented May 2, 2024

thyhmdo commented May 2, 2024

guidari commented May 2, 2024 •

edited

Loading

thyhmdo commented May 7, 2024

guidari left a comment •

edited

Loading

lee-chase commented Jul 2, 2024

netlify bot commented Jul 30, 2024 •

edited

Loading

tay1orjones commented Aug 5, 2024

lee-chase commented Sep 4, 2024

netlify bot commented Nov 22, 2024 •

edited

Loading

codecov bot commented Nov 22, 2024 •

edited

Loading

feat: add fluid button set #15843

Are you sure you want to change the base?

feat: add fluid button set #15843

Conversation

lee-chase commented Feb 28, 2024 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Feb 28, 2024

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Feb 28, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

tw15egan commented Mar 11, 2024

lee-chase commented Mar 14, 2024

thyhmdo commented May 1, 2024

lee-chase commented May 2, 2024

thyhmdo commented May 2, 2024

guidari commented May 2, 2024 • edited Loading

thyhmdo commented May 7, 2024

guidari left a comment • edited Loading

Choose a reason for hiding this comment

lee-chase commented Jul 2, 2024

netlify bot commented Jul 30, 2024 • edited Loading

✅ Deploy Preview for carbon-elements ready!

tay1orjones commented Aug 5, 2024

lee-chase commented Sep 4, 2024

netlify bot commented Nov 22, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-web-components ready!

codecov bot commented Nov 22, 2024 • edited Loading

Codecov Report

lee-chase commented Feb 28, 2024 •

edited

Loading

netlify bot commented Feb 28, 2024 •

edited

Loading

guidari commented May 2, 2024 •

edited

Loading

guidari left a comment •

edited

Loading

netlify bot commented Jul 30, 2024 •

edited

Loading

netlify bot commented Nov 22, 2024 •

edited

Loading

codecov bot commented Nov 22, 2024 •

edited

Loading