primer / brand

React components and Primitives for GitHub marketing websites
https://primer.style/brand
MIT License
74 stars 33 forks source link

🐛 [BUG] - Arrow on CTAs not animating on hover #94

Closed ywenc closed 2 years ago

ywenc commented 2 years ago

Describe the bug

Expected: CTA arrow should animate on hover Current: No animation on hover

Example page: https://resources.github.com/devops/tools/compare/

the unhovered arrow starts with the classes Primer_Brand__ExpandableArrow-module__ExpandableArrow___rkfek, and on hover has the classes Primer_Brand__ExpandableArrow-module__ExpandableArrow___rkfek Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr, but looks like there's no corresponding ExpandableArrow--expanded class in the css bundle.

Reproduction steps

go to https://resources.github.com/devops/tools/compare, hover over the start a free trial CTA.

Expected behavior

Expected: CTA arrow should animate on hover

Screenshots

https://user-images.githubusercontent.com/20496719/195380869-d07bed09-5ba1-4429-93ee-4bcea0a959f1.mp4

Browsers

Chrome

OS

Mac

rezrah commented 2 years ago

@ywenc - do you happen to have css tree-shaking enabled in your production build step?

https://user-images.githubusercontent.com/13340707/195406070-14d72ac2-954f-46ed-bfd8-fdb6405b134e.mov

I can't reproduce this in dev mode (see above).. but I'm also unable to build and inspect the prod bundles due to getting this error:

> Build error occurred
[Error: ENOENT: no such file or directory, rename '.../resources-hub/.next/export/webcasts/EMEA-Security-Learning-Journey-H2.html' -> '.../resources-hub/.next/server/pages/webcasts/EMEA-Security-Learning-Journey-H2.html'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'rename',
  path: '.../resources-hub/.next/export/webcasts/EMEA-Security-Learning-Journey-H2.html',
  dest: '.../resources-hub/.next/server/pages/webcasts/EMEA-Security-Learning-Journey-H2.html'
}

Am I missing something from Contentful?

rfearing commented 2 years ago

@ywenc I pretty sure this issue is occurring due to our use of Purge CSS. I wonder if we need to add exceptions or do something like pipe in PrimerBrand's compiled CSS into /script/utils/purgecss.js?

rfearing commented 2 years ago

@ywenc I'm going to close because I believe we need to fix this in Resources Hub