extension icon indicating copy to clipboard operation
extension copied to clipboard

Design System: Label

Open mica000 opened this issue 1 year ago • 7 comments

mica000 avatar Feb 02 '24 13:02 mica000

@kyranjamie Also curious on your take around this component.

mica000 avatar Feb 05 '24 15:02 mica000

Looks fine to build, but a few thoughts:

  • Is CopyLabel used for anything else other than copying things? What should the default state say, if so "Copy"? It says caption right now. Would it change in certain cases or always be the same?

  • Re the Label component. Curious where this is used? How is it different than just a textStyle of label.02? When should the tick be shown?

kyranjamie avatar Feb 05 '24 16:02 kyranjamie

Is CopyLabel used for anything else other than copying things? What should the default state say, if so "Copy"? It says caption right now. Would it change in certain cases or always be the same?

@kyranjamie Here is an example of how both being used for the current UI. The idea is the have the address replace "copy" and allow the user to copy from this screen.

Image

mica000 avatar Feb 06 '24 15:02 mica000

I am still unclear here about why these need to be shared components? The checkmark next to a piece of text seems pretty minor. Typically we just add a CheckmarkIcon next to the span text. With the radix Select, the checkmark icon is placed automatically for us, this really can't be shared bc it is specific to the radix primitive.

The CopyLabel might be if it is interactive, but I'm unclear abt it atm. So, when a user hovers over the address in your example, the text changes to copy with the CopyIcon beside it?

fbwoolf avatar Feb 08 '24 14:02 fbwoolf

Typically we just add a CheckmarkIcon next to the span text. With the radix Select, the checkmark icon is placed automatically for us, this really can't be shared bc it is specific to the radix primitive.

Ah ok! this I didnt knew. We added it this component because it was needed for Radix. Then Radix primitives are not going to be shared with the rest of the design system? In this case, would make sense to move the Label to the ElevatedList page in Figma, right?


The CopyLabel might be if it is interactive, but I'm unclear abt it atm. So, when a user hovers over the address in your example, the text changes to copy with the CopyIcon beside it?

Yes, that was the intended behavior for this one. The rational behind was to allow users to copy their address quickly from the accounts modal. However, I'm thinking that since this area will be redesigned in the Wallet UX, pherhaps we can discard this functionality from this step for now. cc @markmhendrickson

mica000 avatar Feb 08 '24 14:02 mica000

Looking at Radix, they do have a Label primitive, but it is important to keep in mind that the word Label is referring to an accessible label associated with controls. I think our use of the term in designs/Figma for just text anywhere is slightly confusing.

https://www.radix-ui.com/primitives/docs/components/label

fbwoolf avatar Feb 13 '24 16:02 fbwoolf

@kyranjamie I don't think this component is nec, is it?

fbwoolf avatar Apr 20 '24 15:04 fbwoolf