Add 'torchlight' effect to cards in dark mode #468

rezrah · 2023-10-18T15:30:23Z

Summary

Adds a new default hover effect to Card components in dark mode. The torchlight color respects the current, active accent color. This effect has been adapted from its web component counterpart on github.com/home.

Light mode remains unchanged, as the 'torchlight' effect can only apply to dark pages.

🔗 Try it here

Screen.Recording.2023-10-18.at.16.28.36.mov

List of notable changes:

added new default skew animation + torchlight effect to existing card component
added examples in docs and storybook
added demonstration on how to customise the color

Steps to test:

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
New visual snapshots have been generated / updated for any UI changes
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Torch color automatically changes based on level 2 templates based on active theme:

level.2.themes.mov

changeset-bot · 2023-10-18T15:30:27Z

🦋 Changeset detected

Latest commit: 13a2e0c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…te-card-animations

github-actions · 2023-10-18T15:34:49Z

🟢 No design token changes found

github-actions · 2023-10-18T15:44:03Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

nsolerieu

Preview looks great 🚀

Nothing blocking, mostly comments/questions:

Theming with accents makes a lot of sense, can we also have a neutral color in case of no specific theme?
Can you confirm that we will allow to not active this effect as it may not be relevant everywhere it is used?
Can we trigger the CTA/link hover effect when the card is hovered?

rezrah · 2023-10-18T17:44:36Z

Thanks for the quick review @nsolerieu ⚡

Theming with accents makes a lot of sense, can we also have a neutral color in case of no specific theme?

The default css variable value for accent color is pink, and is a global setting. It can be customised to be more neutral if needed by overriding the token.

Can you confirm that we will allow to not active this effect as it may not be relevant everywhere it is used?

Right now, you can't turn it off unless you have 'reduced motion' setting enabled at OS level.

We previously spoke about this replacing the current scale up effect entirely. After you expecting that to continue being the fallback if we disable the skew+light effect?

Can we trigger the CTA/link hover effect when the card is hovered?

👍 unrelated bug, but yeah.. i'll try to fix that before we merge this or in a follow up

joseph-lozano · 2023-10-18T17:52:16Z

A few thoughts:

Since this will be the new default behavior, I think it should be flagged as a breaking change since an update will change how sites appear.
The API is quite unwieldy and required knowledge of specific design-tokens to select the correct the color.

rezrah · 2023-10-18T18:31:07Z

Thanks for taking a look @joseph-lozano ✨

A few thoughts:

Since this will be the new default behavior, I think it should be flagged as a breaking change since an update will change how sites appear.

This will appear in the change log 👍. We'll also be communicating manually to partner teams on release (they're currently waiting on it to ship 😅).

The breaking change policy in Primer Brand is that we typically reserve them for API changes, or major visual changes that will require manual user acceptance testing.

Example of the latter is the recent global typography update, which was wide reaching enough that we would be remiss to not highlight it. Visual changes generally don't always constitute a breaking change, otherwise we'll be issuing them all the time.

On this occasion, the torch effect is actually how the card should have looked originally in dark mode (See GitHub homepage). As we tend to make a lot of visual changes to our components, we should use notices for breaking changes sparingly to avoid diluting their impact. We're also pre-v1, so we can't actually spin the major version here, so assuming you mean via the change log rather than SemVer value.

The API is quite unwieldy and required knowledge of specific design-tokens to select the correct the color.

The component API is unchanged, so assume you're referring to the suggestion for color overrides? This was intentional, because the accent variable can be overridden with any color value, including hex ones. This is necessary for the upcoming Universe LP's, which feature brand pillar colors that fall outside of our base color scales.

E.g. With the current approach of using accent, we can do things like this to support our custom brand pillar colors:

(the inline style would typically be set in the stylesheet, so this is just an example...)

<Section style={{['--brand-color-accent-primary']: '#8E47FE'}>
  {/* color will automatically be inherited across all child cards */}
  <Card />
  <Card />
  <Card />
</Section>

Hope this makes sense!

nsolerieu · 2023-10-18T20:53:38Z

Can you confirm that we will allow to not active this effect as it may not be relevant everywhere it is used?

Right now, you can't turn it off unless you have 'reduced motion' setting enabled at OS level.

We previously spoke about this replacing the current scale up effect entirely. After you expecting that to continue being the fallback if we disable the skew+light effect?

@rezrah I checked a similar situation in a previous accessibility review and relying on OS level user setting is the safest, so I think we are good here,

If we want to support and on/off toggle of this effect, my suggestion would be to have a non-motion based hover state - like a border color/opacity or internal link hover trigger only.

auareyou

I agree with the comments from @nsolerieu and I think the torchlight effect looks great on its own. 👍

tobiasahlin

Effect looks good 👍 unrelated, but also related: did we accidentally regress on the arrow animation for these cards, or did we remove it intentionally? (Arrow have always animated out to the right on hover and on focus, with the stem of the arrow appearing with that animation)

arrow-animation.mov

rezrah · 2023-10-19T11:50:56Z

Update:

Arrow hover animation has been fixed... cc. @tobiasahlin @nsolerieu 👇

Screen.Recording.2023-10-19.at.12.46.18.mov

If we want to support and on/off toggle of this effect, my suggestion would be to have a non-motion based hover state - like a border color/opacity or internal link hover trigger only.

New prop added to optionally disable the hover effect. Now just underlines the heading and expands the arrow.

Screen.Recording.2023-10-19.at.12.44.42.mov	Screen.Recording.2023-10-19.at.12.45.41.mov

add torchlight effect to cards in dark mode

66debc9

rezrah added 2 commits October 18, 2023 16:32

fix narrow

5edf3b2

Merge branch 'main' of github.com:primer/react-brand into rezrah/upda…

bc7537b

…te-card-animations

torch naming

39ff37e

rezrah temporarily deployed to github-pages October 18, 2023 15:46 — with GitHub Actions Inactive

rezrah marked this pull request as ready for review October 18, 2023 15:51

rezrah requested review from tobiasahlin, auareyou, nsolerieu, ajashams, joseph-lozano and natalie-iv October 18, 2023 15:51

nsolerieu approved these changes Oct 18, 2023

View reviewed changes

auareyou approved these changes Oct 19, 2023

View reviewed changes

tobiasahlin approved these changes Oct 19, 2023

View reviewed changes

fix arrow hover effect

0e932f3

rezrah temporarily deployed to github-pages October 19, 2023 11:37 — with GitHub Actions Inactive

add disable / toggle of animation effect and fix arrow

13a2e0c

rezrah temporarily deployed to github-pages October 19, 2023 12:01 — with GitHub Actions Inactive

rezrah merged commit a6251df into main Oct 19, 2023
14 checks passed

rezrah deleted the rezrah/update-card-animations branch October 19, 2023 13:31

primer-css mentioned this pull request Oct 19, 2023

Release tracking #471

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add 'torchlight' effect to cards in dark mode #468

Add 'torchlight' effect to cards in dark mode #468

rezrah commented Oct 18, 2023 •

edited

Loading

changeset-bot bot commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Oct 18, 2023 •

edited

Loading

nsolerieu left a comment

rezrah commented Oct 18, 2023

joseph-lozano commented Oct 18, 2023

rezrah commented Oct 18, 2023

nsolerieu commented Oct 18, 2023

auareyou left a comment

tobiasahlin left a comment

rezrah commented Oct 19, 2023

Add 'torchlight' effect to cards in dark mode #468

Add 'torchlight' effect to cards in dark mode #468

Conversation

rezrah commented Oct 18, 2023 • edited Loading

Summary

List of notable changes:

Steps to test:

Contributor checklist:

Reviewer checklist:

Screenshots:

changeset-bot bot commented Oct 18, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Oct 18, 2023 • edited Loading

🟢 No design token changes found

github-actions bot commented Oct 18, 2023 • edited Loading

🟢 No visual differences found

nsolerieu left a comment

Choose a reason for hiding this comment

rezrah commented Oct 18, 2023

joseph-lozano commented Oct 18, 2023

rezrah commented Oct 18, 2023

nsolerieu commented Oct 18, 2023

auareyou left a comment

Choose a reason for hiding this comment

tobiasahlin left a comment

Choose a reason for hiding this comment

rezrah commented Oct 19, 2023

rezrah commented Oct 18, 2023 •

edited

Loading

changeset-bot bot commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Oct 18, 2023 •

edited

Loading