"Expand card" button to expand a Card #7006
-
Feature request summary"Expand card" button could be added to the bottom of a card. When added, the "Expand card" button is fixed to the bottom of a card. When clicked, it expands the card to show more relevant content within the card. Having a shared component would allow for convince and consistency. Suggestion: Hover state: UsageCurrently being used on Product pages, Customer pages and Forms (1P App). RationaleProduct and B2B Customer pages both use it but are not implemented the same way and do not have same UI interaction patterns. Specifically, hover states are not the same. Currently there isn’t a consistent button for expanding cards. The alternatives is using “Collapsible” which is a component that can be shown or hidden. The“Collapsible” component does not provide a recommendation on a visual UI to use.
Link to the video, where this button is being used: 🌟 Feature requests that are not yet planned will be closed. We then use the issue’s 👍 upvotes to track and set priorities. See the contribution guidelines for more information. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @RenataZakauske 👋 thanks for reaching out. We don't currently have plans to add this feature to the Card component. However, we welcome you to contribute this change to the system if there is a merchant need for it in multiple places across the admin. I recommend reaching out in the internal #polaris and #admin-ux slack channels, organizing a Polaris Lab with the relevant teams, and working with our team to support on any systems related topics. Please use this discussion to facilitate conversation and get feedback from other UXers |
Beta Was this translation helpful? Give feedback.
-
|
Hi @yurm04 , thanks for the reply! I am the UXer on @RenataZakauske 's team. From a UX perspective, I think it's a solid choice and makes sense to add to Polaris. We got the idea from Admin (currently 2 instances are being used, which are listed above. We will be the 3rd place in admin using it. They they both visually look the same but since they are both custom components, they do not function the same (unfortunately). @RenataZakauske built a component and we would like to contribute it to Polaris. Neither of us have contributed (Code or Figma component) to Polaris before. How should we proceed? Should @RenataZakauske do a pull request and I can then branch Polaris' Figma and add the component? |
Beta Was this translation helpful? Give feedback.
-
|
@idonahue I checked with the developers on the team and it turns out there is a way to recreate this functionality using existing Polaris components. Check out this codesandbox demo and the attached video. Screen.Recording.2022-08-30.at.2.58.25.PM.movYou can achieve this by using the Instead of making changes to the card component, you can create a global component in the shopify/web using these Polaris elements that manages the show/hide functionality. Then, that new global component can be used anywhere in the shopify/web repo |
Beta Was this translation helpful? Give feedback.
Hey @RenataZakauske 👋 thanks for reaching out. We don't currently have plans to add this feature to the Card component. However, we welcome you to contribute this change to the system if there is a merchant need for it in multiple places across the admin. I recommend reaching out in the internal #polaris and #admin-ux slack channels, organizing a Polaris Lab with the relevant teams, and working with our team to support on any systems related topics.
Please use this discussion to facilitate conversation and get feedback from other UXers