SHS-6067: Button class in view has incorrect link color for external links

[mariannuar]

Summary

Fix button class in views using incorrect link color for e…xt links

Need Review By (Date)

02/25

Urgency

high

Steps to Test

1. Go to https://hs-traditional-qc8w9bvlgeckfzmpgvhrjdmfvgwzwdlu.tugboatqa.com/
2. Check if the theme is using color pairing "Warbler"
3. To test buttons that have an external class are not affect by the styles of this external class, go to https://hs-traditional-qc8w9bvlgeckfzmpgvhrjdmfvgwzwdlu.tugboatqa.com/components/text-area-typography
4. Confirm that when all the variations of buttons have an ext class, they look good in all states (normal, hover, focus, active)
5. Couldn't find an existing view or page that replicates this view in economicsttps://economics.stanford.edu/site/paper-submission, so let's go to this page that uses a view similar to the one in economics: https://hs-traditional-qc8w9bvlgeckfzmpgvhrjdmfvgwzwdlu.tugboatqa.com/default-views/events
6. If there's isn't a button in each event card of Upcoming Events, let's go to the configuration of that view and:
   • Add a new link field that has the same configuration that the one ("Content: Paper submission link") in economics[ttps://economics.stanford.edu/site/paper-submission] has . BUT, instead of having "hs-secondary-button" let's add "hs-button".
7. Once there's a button in each event card, confirm it looks like this:

Normal status

Hover status

Review Tasks

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Are PHP functions and variables in snake_case and not camelCase?
• Does Drupal code follow Drupal Coding Standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided?

Code security

• Is all user input properly sanitized when rendered?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1209356560615280

[cienvaras]

@mariannuar This issue is warbler specific, it doesn't affect other color pairings. For that reason, let's address it in the same way than other warbler issues: overriding the color for warbler only.

In other color pairings, the color defined in .hs-button overrides the color from .ext, so lets add a definition for warbler in the hb-button mixin. Something like this:

// Warbler color pairing override.
@include hb-traditional {
  .ht-pairing-warbler & {
    color: var(--palette--white);
  }
}

Also check the following:

• Confirm that the hover and focus states have the right color
• Confirm that the styles are correct for other button variations

[mariannuar]

@cienvaras Ready for review again!

[cienvaras]

@mariannuar LGTM!

@ahughes3 This is ready for you, however there's a problem with the tugboat base preview that's causing all preview to fail. I'm checking with Joe, I'll let you know as soon as it's fixed.

[ahughes3]

Approved!