Estado "Selected" en las Data Cards

[SrondonM]

A surgido la necesitad de tener el estado selected para las cards, ya que en los casos en los que tenemos 2 interacciones simultáneas, como es el caso de "crear cita en tienda" en web, en donde tenemos la selección de la tienda y al mismo tiempo la visualización en el mapa, necesitamos que sea evidente que seleccionas una card y en consecuencia se te refleja en el mapa o viceversa, que selecciones en el mapa y que la card se muestre como seleccionada.

Aquí les dejo un ejemplo: https://www.figma.com/file/8yi6qL0c45rS1Pqxl4ozB8/Appointment-Booking_Moves?node-id=1158%3A25857&t=xQLuRnt0waTYySgm-4

[yceballost]

Hola!

Como a día de hoy no existe la solución que planteas, he dejado dos alternativas debajo de la pantalla que enlazas.

Lo del border selected es algo que ya ha salido en otra ocasión y estamos valorando la manera de introducirlo. Gracias por pasar este caso! nos viene super bien para poder evolucionar las selecciones en cards.

[aweell]

Dejo por aquí algunas dudas que han ido saliendo sobre cómo debería funcionar esta feature:

• Debería aplicar solo a las highlighted cards? O a cualquier tipo de card? Podría ser útil que otros componentes funcionaran de esta manera? Por ejemplo una boxedRow?
• Debería existir además de la posibilidad de una selección excluyente, una selección múltiple?
• Deberían mostrar los elementos seleccionados algún tipo de hint adicional más allá de un borde? Como sabe el usuario antes de seleccionar ese elemento que va a hacer por ejemplo una selección y no a navegar?
• Como convive el borde con el estado :focus?
• Debería convivir la selección con algún otro tipo de interacción? Por ejemplo buttonLinks que lleven a detalles en una card?

[SrondonM]

Perfecto, revisaré las dos alternativas que dices. Gracias!

[aweell]

Buenas @SrondonM!

Hemos estado viendo esto al detalle y creemos que se puede solucionar este problema sin recurrir a un nuevo estado selected para las cards.

Creemos que existe una linea muy fina entre esa propuesta y el rol que juegan actualmente las boxed row de selección exclusiva dentro del sistema y que actualmente sería el mejor approach para resolver esa pantalla.

Adjunto aquí link con la propuesta:

https://www.figma.com/file/NYjIJATT9B43OLUyCfFTkT/Appointment-booking-%7C-Proposal?node-id=0%3A1&t=d0i5VYIVWOtUFfwI-1

[SrondonM]

Perfecto, por mi bien! ya lo he revisado :)

[aweell]

Ejemplo en playroom de una posible solución