We should check all the before and after pseudo-classes. When we scaled the CTA on press, we put the text content in there so it would not scale. We walked away from that design element, but I'm not sure this has all been cleaned up. We still use the pseudo-classes for slashouts for OOS. There are also no longer a tags in the buttons, can we remove these from the SCSS?
Primary
Need to update :: The error state and focus states have double borders. Look for before and afters and how to handle these.
Default
Hover/Touchstart
Selected
Inactive
Loading (TBD)
Error (TBD)
Focus
<button class="button button--primary">Add To Cart</button>
Primary Inverse
Need to update :: what does a button error state mean? focus states.
Default
Hover/Touchstart
Selected
Inactive
Loading
Error
Focus
<button class="button button--primary-inverse">Shop Now</button>
Secondary
Need to update :: There is no focus state in figma
Default
Hover/Touchstart
Inactive
Loading
<button class="button button--secondary">Shop Now</button>
Secondary Inverse
Need to update :: There is no focus state in figma
Default
Hover/Touchstart
Inactive
Loading
<button class="button button--secondary-inverse">Shop Now</button>
Tertiary A
Need to update :: The line-height here was overridden for one instance, the PDP variant btn. This button style was also inline-block. These 2 aspects were changing the OOS state slashout.
Emily 03/11 I updated the display style but am leaving the line-height for it's own ticket to ensure proper QA
Default
Hover/Touchstart
Active/In Stock
Inactive
Default/OOS
Hover/OOS
Active/OOS
Loading
<button class="button button--tertiary-a">Shop Now</button>
Tertiary A Inverse
Default
Hover/Touchstart
Active/In Stock
Inactive
Default/OOS
Hover/OOS
Active/OOS
Loading
<button class="button button--tertiary-a-inverse">Shop Now</button>
Tertiary B
Default
Hover/Touchstart
Focus
Inactive
Loading
<button class="button button--tertiary-b">Shop Now</button>
Tertiary B Inverse
Default
Hover/Touchstart
Focus
Inactive
Loading
<button class="button button--tertiary-b-inverse">Shop Now</button>
Text Link
<p class="link">Learn More</p>
Bold Link
<p class="link link--bold">Learn More</p>
Underline Link
<p class="link link--underline">Learn More</p>
Inline Text Link
Default
View our privacy policy and let us know
Hover/Touchstart
View our privacy policy and let us know
Pressed
View our privacy policy and let us know
Focus
View our privacy policy and let us know
<p class="link link--inline">Learn More</p>
