Design for pill needs to be more intuitive

[neerajsingh0101]

https://www.loom.com/share/ddecf15a2f584c9497299f22c10f8211

@vysaghsekharbb _a

[vysaghsekharbb]

The UI Kit has a green accent color. Let's use it to the active state.

Please find the design below

I will update the style In the UI Kit

++Praveen @praveen-murali-ind _a

[neerajsingh0101]

Looks good. Let's implement it.

[praveen-murali-ind]

@vysaghsekharbb Do we need to change the active state color in other UI components which follow similar pattern ?

[praveen-murali-ind]

@neerajdotname @vysaghsekharbb

If we update the active state color only to the Pill component, it will be weird in some scenarios. Consider a form layout, there may be components like checkboxes and radios. If we change the active color to green only for Pill, Pills may gain/lose focus which may not be good.

If we change the active state color to green for all similar components, we may lose the advantages of the monochrome design pattern.

We should consider a solution that preserves the monochrome design pattern and consistency.

@vysaghsekharbb _a

//cc @karthiknmenon

[neerajsingh0101]

@praveen-murali-ind sure. We can explore within monochrome how to make active pill look like active. My issue with current design is that I thought couple of times that active pill is disabled.

[vysaghsekharbb]

I was experimenting with different designs patterns and discovered that using alien colours complicates the monochromatic design. Instead of using the green colour, I feel it is preferable to utilise the icons that indicate the enable and disable states. Please see the design solution given below.

@praveen-murali-ind @neerajdotname

[neerajsingh0101]

@vysaghsekharbb this looks great and it gets the work done.

[praveen-murali-ind]

Let’s implement this.

@praveen-murali-ind _a