Refactor ActionSet to use container queries

[elycheea]

Move all the behavior to the ActionSet and use container queries to update the layout. This will lead to a slight head scratcher in SidePanel where the width of the use of a 1px left border and box-sizing border box (hint the width of the ActionSet on a 2xl SidePanel is 2xl - 1.

Originally posted by @lee-chase in https://github.com/carbon-design-system/ibm-products/issues/4019#issuecomment-1910605445

[elycheea]

ActionSet is used in Tearsheet, CreateFullPage, FilterFlyout, FilterPanel, SidePanel.

[elycheea]

Maybe @cameroncalder @Laura-Marshall or @My-Money29 can help with reviewing this once in deploy preview.

[lee-chase]

We have Action set used in a number of places.

The following behavior is either a inconsistent or not achievable without DOM manipulation. DOM manipulation is problematic when using LIT to construct web components.

• Buttons are re-ordered based on type e.g. ghost first unless stacked. If the buttons are DOM elements composed by the user then DOM manipulation is needed. NOTE: It is not advisable to use pure CSS to re-order as CSS does not affect tab order.
• Ghost buttons only expand (re-ordering needed?).
• Slim SidePanel stacks two or three buttons if narrower.

Use cases

• CreateFullPage https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-patterns-create-flows-createfullpage--create-full-page

  

• FilterFlyout https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid-datagrid-extensions-flyout--flyout-batch

  

• SidePanel http://localhost:3000/?path=/story/ibm-products-components-side-panel-sidepanel--slide-over&args=labelText:;size:md

  

• Tearsheet http://localhost:3000/?path=/story/ibm-products-patterns-create-flows-createfullpage--create-full-page

  

[lee-chase]

@cameroncalder @Laura-Marshall @My-Money29 I'm thinking of making the buttons in all cases stack like the SidePanel version when narrow. Any objections before I jump into coding this?

[Laura-Marshall]

From what I can gather from this thread, having the buttons stack when things become small across the board makes sense to me.

[elycheea]

Should evaluate whether we can replace the ActionSet with ButtonSet.

[ljcarot]

@elycheea what is status of this work?

[elycheea]

@ljcarot On hold. I believe @lee-chase did some exploration and prototyping for this work on the Core repo as well using ButtonSet. It might still be good to do some evaluation to see if we can fully replace ActionSet with ButtonSet to reduce duplication. (Probably track in a separate issue though.)

[oliviaflory]

@elycheea @davidmenendez should this be wrapped into the Utilities issue for action set and all the other overflow like items we identified?