search

seb-oss / design-library

Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.
http://designlibrary.sebgroup.com
14 stars 1 forks source link

Chips (new component) #11

Closed ghost closed 3 years ago

ghost commented 5 years ago

Design update 2020-01-13

What is this? A new component to display a filter image

Details See the specification to get all the right details: https://designlibrary.sebgroup.com/components/chips/#specification

Component identifier component-chip

Follow up on development:

Thank you! /Ulrika

Original post from Jessi: Hey team! I am adding the Tag/Label/Category component to the Design Library. Not as easy as I thought. This component can be used in some different ways and places. Sometimes it needs to be clickable, sometimes not. Sometimes in the context of a filter choice, sometimes as article labels, in tables and so on... So we need more than one component for it.

I need to understand some of the contexts for it to be able to make the designs. How do you use it? It would really help me if you can give me some examples.

/Jessi

mzemlickis commented 5 years ago

These could be used in internet bank to filter transactions. I will poke Didzis to take a look at this. :)

ghost commented 5 years ago

Do you have any examples to show me, where you have used categories?

These could be used in internet bank to filter transactions. I will poke Didzis to take a look at this. :)

SusannaCh commented 5 years ago

We are using labels in Alison for filtering (very similar to how SEB intranet are using them). We have a filter function where the user selects (click) the filter-label to see the result in the list below.

image

HandlaSjälv are also using filters for the fundlist. The user selects a filter choice in the lefthand "menu" and the choosen filter is shown above the list and can then be removed (disapears from the top of the list). Johan and Petra will know more about the plan for them.

image

axelgarciahenriksson commented 5 years ago

In my humble opinion, they look too similar to buttons. Have you tried another shape, like pills or something?

didzisspruds commented 5 years ago

Sharing one example from Baltic Developer portal. The tabs / labels are used in two different cases - in one case as a label and in secon - as a button. tag-label-example

ghost commented 5 years ago

Sharing one example from Baltic Developer portal. The tabs / labels are used in two different cases - in one case as a label and in secon - as a button. tag-label-example

Not sure what you mean by the Get-button. 😄

/Jessi

didzisspruds commented 5 years ago

@Jessi, "GET" is not used as a button but as a label. Only the gray ones (marked in screenshot) functions as buttons. You can see live example here: https://developer.baltics.sebgroup.com/ob/apis/PAYMENTS

ghost commented 5 years ago

@jessi, "GET" is not used as a button but as a label. Only the gray ones (marked in screenshot) functions as buttons. You can see live example here: https://developer.baltics.sebgroup.com/ob/apis/PAYMENTS

Ah! Got it. So ok, how many labels are there? And all categorised in colors? Why capitals on the label? The pills - the blue one is clickable, and the grey disabled?

didzisspruds commented 5 years ago

There are three types of requests: POST, GET, DELETE. All three are in caps as that's a common pattern for developers to use CAPS for these. All three is having different colors. All pills are clickable - it's gray by default; blue with white text on mouse over and dark gray when active.

ghost commented 5 years ago

There are three types of requests: POST, GET, DELETE. All three are in caps as that's a common pattern for developers to use CAPS for these. All three is having different colors. All pills are clickable - it's gray by default; blue with white text on mouse over and dark gray when active.

The pills here, feels like they should be like toggle buttons instead? Or tabs? These are not categories? Right?

didzisspruds commented 5 years ago

No, pills are not categories. Yes, might be that toggle buttons could be better choice there. In the so called "old design system" we didn't have anything better, I guess.

conandx commented 4 years ago

Latest: Chips - use when showing filtering options, with the possibility to remove (x) Badge - use for showing a tag/category/status and highlight it from surrounding content. (content still needed)