Add footer variants to Advanced Data Card [Community]

[vitorvlopes]

Goal

Provide the flexibility to configure the Advanced Data Card footer to display more variants.

Context

Currently, the footer configuration includes predefined combinations of buttons and elements, but it lacks the isolated option of a single Primary Button and other configurations as listed below:

• Button Primary
• Button Primary + Button Secondary
• Button Primary + Button Link
• Button Secondary
• Button Secondary + Button Link
• Button Link
• Text + Tag

Impact

This enhancement increases flexibility and usability, enabling users to tailor the footer specifically to their interaction needs. It aligns the component more closely with various use cases and streamlines the visual hierarchy by simplifying footer content when needed.

Discussion Questions

Should we make all Button Group options listed below available, or prioritize certain configurations based on common usage?

• Button Primary
• Button Primary + Button Secondary
• Button Primary + Button Link
• Button Secondary
• Button Secondary + Button Link
• Button Link
• Text + Tag

Are there potential implications or conflicts with existing component usage that we should consider with this added flexibility?

Additional considerations

No response

Do you have a visual proposal?

No response

[aweell]

Hi @vitorvlopes,

Thank you for opening a discussion.

I see that the current advancedDataCard props are:

• button
• buttonLink
• footerImage
• footerText

Are you planing to support button secondary in the footer? If so, how the button secondary should behave with the rest of the buttons or footer elements when present?

We have the same questions with the text and tag, now an image and a text is supported, that means another prop to add the tag?

Can you provide us a Figma with all potentially possible combinations so we can understand the request?

When talking about the button group, are you referring to the Mística buttonGroup or the one that was created only for the advanced data card?

[vitorvlopes]

Hi @aweell ,

Thanks for your questions!

We do plan to support a secondary button in the footer. Supported variants with the secondary button will be:

• Button Primary + Button Secondary
• Button Secondary
• Button Secondary + Button Link

Here is the a Figma link with the combinations: https://www.figma.com/design/bXTt1KUIEnXAzRFPmi5qLl/Evolu%C3%A7%C3%A3o-Advanced-Data-Card?node-id=0-1&t=8OtlzDZoC3Qnqp30-1

It won’t be necessary to add another property; we will simply add variants to the footer property.

When referring to the button group, we mean the one created specifically for the advanced data card.