Evolution of the Poster CardProposa

[LucasAlbuquerque0]

Goal

Request the evolution of the Postar Card to meet a need.

• Add Subtitle field
• Add the Icon Button to the Top Actions (right of the Card)

Would you like to confirm if the Icon Button has a Loading status?

Context

Within the Smart Journey flow, there was a need for a Card that has two different interactions, one when directly clicking on it (Information Expansion) and another for a quick action that will be on and off (switch).

Impact

It will allow the user to activate and control connected smart devices in their home.

Discussion Questions

It is important that this Action Button has loading as one of the states. Guaranteeing time for functionality to access the data necessary for action.
Can you confirm this information?
And the possibility of this implementation, if necessary?

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/6Sp4S0krZaG1daAFaNh54k/Evolu%C3%A7%C3%A3o-do-Poster-Card?type=design&node-id=407-7914&mode=design&t=abdKEn1MID7QbbYw-4

[yceballost]

You can use spinner inside top actions, yes
https://tinyurl.com/ym8den4t

Why don't use Data Card to get the same result? (almost, subtitle use textPrimary and not textSecondary)
https://tinyurl.com/ylf9rvxa

the poster card has the texts in the same colour to avoid problems with the custom colour backgrounds that this component allows. You only can use black or white depending of the contrast of the background.

If you think you can solve this need with data card, we can solve this discussion and avoid the subtitle evolution in Poster Card by the moment

[LucasAlbuquerque0]

Hey @yceballost
We really need the Poster Card because the size of the Aspect Ratio with Value 1:1 meets exactly the need for the Card.

Another point, can this card run double interaction?
The icon that is currently a Top Action is clickable, will we need to change it to an Action Button or can we keep the Top Action and have it work in a clickable and interactive way?

The experience would be: When you just click on the icon, the status changes and if you click on the Card, it expands to another screen.

[yceballost]

both cards, data card and poster card have the possibility to use aspect ratios. You will have the same problem with Poster Cards
https://tinyurl.com/2xebc2sd

That's because the content is taller than the available width. When that happens, the aspect ratio is "disabled" to allow the card to grow and not to break

For the second point, if I understood you correctly, did you try the example from the last message? 😄 Try to tap on the top icon and you will see what you are requesting to me. In the example you can tap in the whole card and you will see a dialog to notify the action is done (but you can use this action to navigate to another screen, of course), and also you can click on the top icon and you will see the loading state and how the state of the icon changes

[LucasAlbuquerque0]

I believe the change is the Icon Button that we mentioned in today's meeting

[yceballost]

By the moment, top actions don't allow the possibilty to "play" with the iconButton states. I mean that you cannot change the top actions to show a Circle with brand color. We can try to take it in account in the IconButton evolution

[LucasAlbuquerque0]

This "Play" action would be very important.
Achieving ideal user interaction, do you need me to create a task or discussion?