Feat: Create New Tag Theme #10100

TylerAPfledderer · 2023-04-30T14:52:21Z

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 · 2023-04-30T15:30:31Z

✅ 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.

src/@chakra-ui/gatsby-plugin/components/Tag/index.ts

pettinarip · 2023-05-11T22:13:07Z

src/@chakra-ui/gatsby-plugin/components/Tag/index.ts

+    },
+    label: {
+      // ...warningLabelStyles
+    },


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", }, },

@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?

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?

@nloureiro Oh! I understand.

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

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?).

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

The different variants of elements that are expected to be rendered in the component.

Would this be better?

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?

Correct @nloureiro here you will see another entry

@TylerAPfledderer yes, make sense 👍🏼

Sweet! I'll get that added asap

look good to me, great job!!

src/@chakra-ui/gatsby-plugin/components/Tag/utils.ts

src/pages/developers/tutorials.tsx

TylerAPfledderer · 2023-05-17T02:45:51Z

@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 · 2023-05-17T02:47:46Z

src/@chakra-ui/gatsby-plugin/components/Tag/index.ts

+  // Clear default
+  _focusVisible: null,
+  "&:focus-visible, &:hover": {
+    outline: "3px solid",
+    outlineOffset: "-2px",
+  },


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

override default styling by nulling out (because I'm using a multi-selector instead)

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?

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 · 2023-05-17T22:34:30Z

@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 · 2023-05-18T08:48:51Z

Is there any URL where I can check this?

nloureiro · 2023-05-18T14:46:14Z

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 · 2023-05-18T16:38:16Z

@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 · 2023-05-19T08:34:13Z

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

refactor(Tag): update component and theme for new DS

489715b

TylerAPfledderer requested review from samajammin, wackerow, corwintines, pettinarip, minimalsm, jmcook1186 and nhsz as code owners April 30, 2023 14:52

github-actions bot added the review needed 👀 label Apr 30, 2023

Merge branch 'dev' into feat/new-tag-theme

5beccc3

pettinarip mentioned this pull request May 2, 2023

Implementation of the DS v1 #9548

Open

ethereum deleted a comment May 2, 2023

pettinarip requested changes May 11, 2023

View reviewed changes

TylerAPfledderer added 7 commits May 12, 2023 10:09

fix(theme/tag): give variant objects definePartsStyle

2fbbb64

style(theme/tag): collapse lineHeight for label

6ad9992

style(theme/tag): remove margin from close button

26f3db4

fix(tutorials): spread the remaining props for FilterTag

e8b01f8

style(tutorials): shrink line height for the FilterTag

b5d88aa

refactor(Tag): create story for basic style variants

3a9e5ff

refactor(theme/tag): update focus/hover styling for close button

fa5b0e2

TylerAPfledderer commented May 17, 2023

View reviewed changes

Merge branch 'dev' into pr/TylerAPfledderer/10100

db32d09

pettinarip reviewed May 17, 2023

View reviewed changes

refactor(theme): update colors

2bdde99

nloureiro approved these changes May 19, 2023

View reviewed changes

replace bodyLight with bodyMedium

18019aa

pettinarip approved these changes May 19, 2023

View reviewed changes

pettinarip assigned TylerAPfledderer May 19, 2023

pettinarip merged commit 63fd198 into ethereum:dev May 25, 2023
5 of 6 checks passed

TylerAPfledderer deleted the feat/new-tag-theme branch May 30, 2023 01:24

This was referenced May 31, 2023

Release candidate v7.12.4 #10355

Merged

Deploy v7.13.0 #10362

Merged

pettinarip removed the review needed 👀 label Sep 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Create New Tag Theme #10100

Feat: Create New Tag Theme #10100

TylerAPfledderer commented Apr 30, 2023 •

edited

gatsby-cloud bot commented Apr 30, 2023 •

edited

pettinarip left a comment

pettinarip May 11, 2023

TylerAPfledderer May 12, 2023

nloureiro May 15, 2023

TylerAPfledderer May 15, 2023 •

edited

nloureiro May 16, 2023

pettinarip May 16, 2023

TylerAPfledderer May 16, 2023

nloureiro May 17, 2023

TylerAPfledderer commented May 17, 2023 •

edited

TylerAPfledderer May 17, 2023 •

edited

pettinarip May 17, 2023

pettinarip left a comment

TylerAPfledderer commented May 17, 2023

nloureiro commented May 18, 2023

nloureiro commented May 18, 2023

TylerAPfledderer commented May 18, 2023 •

edited

nloureiro commented May 19, 2023

pettinarip left a comment •

edited

Feat: Create New Tag Theme #10100

Feat: Create New Tag Theme #10100

Conversation

TylerAPfledderer commented Apr 30, 2023 • edited

Description

gatsby-cloud bot commented Apr 30, 2023 • edited

✅ ethereum-org-website-dev deploy preview ready

pettinarip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TylerAPfledderer May 15, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TylerAPfledderer commented May 17, 2023 • edited

TylerAPfledderer May 17, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

TylerAPfledderer commented May 17, 2023

nloureiro commented May 18, 2023

nloureiro commented May 18, 2023

TylerAPfledderer commented May 18, 2023 • edited

nloureiro commented May 19, 2023

pettinarip left a comment • edited

Choose a reason for hiding this comment

TylerAPfledderer commented Apr 30, 2023 •

edited

gatsby-cloud bot commented Apr 30, 2023 •

edited

TylerAPfledderer May 15, 2023 •

edited

TylerAPfledderer commented May 17, 2023 •

edited

TylerAPfledderer May 17, 2023 •

edited

TylerAPfledderer commented May 18, 2023 •

edited

pettinarip left a comment •

edited