Tag - confirm which icon to use for close

[halocline]

v5 generally moves away from Form[IconName]. Tag still uses FormClose. Leave as is? Or use Close?

ToDos:

• Make recommendation: Use "Close" icon instead of "FormClose"
• If the decision is to use "Close" instead of "FormClose", create issues for:
  • Tag - Update Figma component to use "Close" icon.
    • Tag - Update Figma component to use "Close" icon. #3467
  • Tag - Update v5 theme to use "Close" icon.
    • Allow theme to specify Tag remove icon grommet#6870
    • Update Tag to use Close icon grommet-theme-hpe#363

[ashifalinadaf]

It is recommended to use the 'Close - Core Icon' for the tags than 'Close - Form Icon'.

• One single vector
• Visually appealing
• Matches the font weight
• More length of ~2px will help user click on the icon much easier way.
• Any changes in the core icon will be reflected on the tag component.
• As Tags can be used outside the form it's recommended to use the 'Core close icon'.

Based on this I will be creating an issue for 'Tag - Update Figma component to use "Close" icon.'

[ashifalinadaf]

@KennyAtHPE If you can give a feedback on this.

[ashifalinadaf]

Figma related ticket (Tag -Update Figma component to use "Close" icon) #3467

Grommet related ticket (Tag - Update v5 theme to use "Close" icon.) grommet/grommet#6870

[vavalos5]

@ashifalinadaf Can you include a link please of where I can find the tags.

[vavalos5]

Nvm, found it in the linked ticket above. Nice work Asif, all of the light and dark mode close buttons are using the correct close/core icon. One thing that came to mind when I was looking at these is whether we want to use the actual default button for the close button part. The only thing is that our smallest icon only button (small) is 36x36px where as the tag component in sizes xs-m are using 18x18px for the close button. Might be worth a discussion?

[ashifalinadaf]

I agree @vavalos5,
I was unaware of the predefined Icon sizes and it might have just scaled to the current sizes of icons I have replaced with.
Tag component is using two icon sizes - XS,S,M -18px and L,XL- 30px.
I did go through the research file but couldn't find any reason for using those sizes. Same Icon sizes were being used for the form Icon.
We may have to define the Icon sizes for the Tag aligning with current icon sizes.

[taysea]

The Tag remove icon sizing is currently coming from grommet's base theme. I think for the scope of this ticket, let's align with what is currently defined and represented in the theme. If we want to further discuss the sizing/changes, a follow-on ticket can be filed. Doesn't feel high priority at the moment though.

The sizing should be:

• xsmall: 18x18
• small: 18x18
• medium: 18x18
• large: 30x30
• xlarge: 36x36

[vavalos5]

@ashifalinadaf the icon sizes are correct. I was referring to the idea of having a potential conversation with a dev or the team in regards to adding smaller sizes to our current button components so we can use the correct ones and be aligned to the theme.

@taysea I agree it's not a priority at the moment, but something we might want to consider in the future.

[ashifalinadaf]

In that case all the 'form/close' icons were replaced by 'core/close' icons.
@KennyAtHPE has reviewed the file and told me to consider the Figma part of this ticket as done.

We can include all the comments related to 'using default buttons for tags' in a new ticket.

[taysea]

Closing this ticket. The initial deliverables to "Create issues" have been completed and documented in the issue description.