Links for all filter blocks (reset and clear all)

[vivialice]

Can we ensure all links are displayed as underlined for consistency between the blocks and other areas of the site.

[thealexandrelara]

Hello @vivialice 👋 ,
I've started working on this issue, but I'd like to check some things with you before I can proceed to a solution. I understand that the idea is to have consistency between the links inside the blocks and site. During my initial investigation, I found 3 different behaviors/stylizations for links

---

Font weight & font size

By default, the font weight and font size seem to be different between the Active Filters and Filters by Attribute block (by Size, by Price, etc) which leaves us with 2 possible scenarios

1. Active Filters block - Clear All link

The attributes for the Clear All link are the following:

• Font weight: bold
• Font size: 12px

2. Filter by Attribute block - Reset link

The attributes for the Reset link are the following:

• Font weight: normal
• Font size: 14px

---

Hover style

For the hover attribute, there are 3 possible scenarios:

1. Active Filters block - Clear All link

There is no style change when we hover over the Clear All link.

Default style:

• Font weight: bold
• Font size: 12px
• Color: #6d6d6d

Hover style:

• Font weight: bold
• Font size: 12px
• Color: #6d6d6d

2. Filter by Attribute block - Reset link

As for the Filter by Attribute block, when we hover over the Reset button, the underline appears and the text color changes (from #6d6d6d to #333333)

Default style:

• Font weight: normal
• Font size: 14px
• Color: #6d6d6d
• Text decoration: none

Hover style:

• Font weight: normal
• Font size: 14px
• Color: #333333
• Text decoration: underline

3. Other links in the site

For other links on the site like the Product Title, the behavior is almost the opposite of the Filter by Attribute block. By default, it's underlined and when hovered the underline disappears. The text color does not change.

Default style:

• Font weight: normal
• Font size: 14px
• Color: #6d6d6d
• Text decoration: underline

Hover style:

• Font weight: normal
• Font size: 14px
• Color: #6d6d6d
• Text decoration: none

---

Do you know if there is any pattern already defined that we can follow and use for components with links?

cc: @albarin @tjcafferkey

[vivialice]

Hey @thealexandrelara 👋 Thanks for conducting this review. I'll answer your queries below:

1. Clear all vs Reset link
We should go with the 12px size option. To confirm: what size is the text in the Apply button? Because that looks like 12px to me, but I could be wrong. All of these (clear, reset, apply) should be the same size.

2. Other links in the site
Thank you for considering other links on the site. You're correct, we should have a consistent experience across stores. Currently, the reset link is doing the opposite as intended.

Do you know if there is any pattern already defined that we can follow and use for components with links?

There isn't one specifically defined for WooCommerce but in this case we should continue to follow best-practices:

• underline all links by default
• hide underline on hover

[thealexandrelara]

1. Clear all vs Reset link
   @vivialice I just checked and the text size for the Apply button is 14px

Another thing that I'd like to discuss with you is about the Clear all because it is using a font weight bold, is that intentional or it should be `normal' like the other links?

Thank you for your guidance, so I'll set all links to be underlined and with 12px by default, when the user hovers over the link I'll hide the underline while maintaining the same color.

[vivialice]

It shouldn't be bold 👍