Feat: Create New Tag Theme

[TylerAPfledderer]

Description

This is a part of implementing V1 of the New Design System

This PR modifies the existing Tag component and updates it's theme to match the new DS.

Also update the filter tags in the Developer Tutorials list page to ensure they do not receive the new styling in prod for the moment.

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 28m build time

[pettinarip]

Nicely done @TylerAPfledderer. Left a few comments but overall this looks great.

[pettinarip]

I think we also need to style the closeButtons pseudo classes with the same styles that the container has. I'm talking specifically about the focus state.

Right now we are displaying the default Chakra styles here. I think we should use the same border styles and colors that we use for the container.

This is how it looks now when you focus on the close button:

Not saying that this is the code but could be something like:

closeButton: {
  _focusVisible: {
    ...statusStyles["&:any-link"]._focusWithin,
    bg: "transparent",
    boxShadow: "none",
  },
},

[TylerAPfledderer]

@pettinarip This example you gave will actually work here.

I think what I am missing here is whether or not this button will actually be visible if the tag itself is a link. That might change how I approach this to ensure the focus ring for the button has enough contrast to the background of the tag (looking at the normal tag)

@nloureiro I don't believe we received that clarity in the DS yet. 😄

Will the close button ever be used if the tag is a link?

[nloureiro]

it's a corner case, we might never have that.

For me, Tags must be prepared to be links, normally in the form of filters.
The close on the Tag is when you have a filter list and you want to remove that filter. (we currently don´t have this on ethereum.org)

if it's complex to have link + close has a possible variant I'm ok with don't adding this now and update when needed

does it help?

[TylerAPfledderer]

@nloureiro Oh! I understand.

I think it will be best to have three stories here:

1. Show all tag style variants as links with text and no icons to simply demonstrate the state changes (maybe they should include the + icon as the right-side element?).
2. Provide another set of the same tags, but not as a links and containing the close button to demonstrate the button's styling in the context of the different style variants
3. The different variants of elements that are expected to be rendered in the component.

Would this be better?

[nloureiro]

hum... I think it might work, as far as I understand.

correct me if I'm wrong:
we will have a folder in storybook with "tags" > inside there will be 3 stories

is that it?

[pettinarip]

Correct @nloureiro here you will see another entry

@TylerAPfledderer yes, make sense 👍🏼

[TylerAPfledderer]

Sweet! I'll get that added asap

[nloureiro]

look good to me, great job!!

[TylerAPfledderer]

@nloureiro @pettinarip update pushed with a third story added and found a cheap solution to get hover/focus styling for the close button.

🚨 Also for Pablo: need to update branch to develop branch to be able to rerun Chromatic.

[TylerAPfledderer]

Cheap solution to get focus/hover styling for the close button.

1. override default styling by nulling out (because I'm using a multi-selector instead)
2. Provide a more generous styling of an outline ring on hover or focus-visible (this is taking advantage of the default outlineColor value of currentColor)

Anything else preferred here?

[pettinarip]

Nice! looks great now

[pettinarip]

I don't see this as a blocker but wanted to raise the issue to see if it has a simple fix. If not, we can tweak that on a separate PR.

The multi-line tag is not growing in height as in the design:

DS:

[TylerAPfledderer]

@pettinarip I think a larger line height than 1 needs to be established and have that factored into the overall height for a single-line tag

[nloureiro]

Is there any URL where I can check this?

[nloureiro]

Is there any URL where I can check this?

got it, thank you @pettinarip

@TylerAPfledderer one detail I missed in the Design system is the hover for the close button. with the border only is weird.

so I'm adding this behavior to the Figma but my idea is to go full background like this screenshot

what to you think?

Screen.Recording.2023-05-18.at.15.43.06.mov

[TylerAPfledderer]

@nloureiro this can be done, but will add a little complexity to our large object of styles.

With the Subtle variant of the Warning tag, the white background might be too light, where the attention semantic might be better for clarity of contrast for a11y

Screenshot for subtle variant alternative when hovered

(I still need to figure out how to refactor this huge object of styles. I would come up with some easy iterator, but there are one or two styles that do not line up with the rest to take advantage of the semantic token names. This will be a WIP past this PR unless I can think of something soon!)

Also, I was unaware that there were modifications to the color palette! 😅 (The bodyLight colors changed and the addition of bodyMedium)

[nloureiro]

Sorry about the color change. I thought I mentioned it somewhere... but I should have made it more clear 😅

I'm not sure I follow, but what I got it that we will do this change on separate PR. Is that it?

If yes, I'm ok with it.

My main concern is this behavior on hover, and it's something too strong. If you have some other suggestion, I'm open to it

[pettinarip]

Ok, I think we are in a good state to merge this, great job again @TylerAPfledderer and @nloureiro for the review.

A few things I've taken note of and that we are going to fix in different PRs:

• Close button styles: Tyler is looking into how we can simplify the styling object structure to include these changes with ease [Tag] Update close button styles #10266
• Fix multi-line tag height [Tag] Fix multi-line height #10265