Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor ActionSet to use container queries #4164

Open
elycheea opened this issue Jan 25, 2024 · 8 comments
Open

Refactor ActionSet to use container queries #4164

elycheea opened this issue Jan 25, 2024 · 8 comments
Assignees
Labels
needs: design opinion Design question needs opinion from designer

Comments

@elycheea
Copy link
Contributor

elycheea commented Jan 25, 2024

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 #4019 (comment)

@elycheea
Copy link
Contributor Author

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

@elycheea elycheea added the needs: design opinion Design question needs opinion from designer label Jan 25, 2024
@elycheea
Copy link
Contributor Author

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

@lee-chase
Copy link
Member

lee-chase commented Jan 26, 2024

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

create full page Filter flyout Side panel large Side panel stacked Side panel stacked Create tearsheet

@lee-chase
Copy link
Member

@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
Copy link

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

@elycheea
Copy link
Contributor Author

Should evaluate whether we can replace the ActionSet with ButtonSet.

@ljcarot
Copy link
Member

ljcarot commented Sep 16, 2024

@elycheea what is status of this work?

@elycheea
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: design opinion Design question needs opinion from designer
Projects
Status: Needs review 👋
Development

No branches or pull requests

4 participants