search

eBay / skin

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
https://ebay.github.io/skin/
MIT License
177 stars 66 forks source link

Section-Notice: issues with CTA only variant #2146

Open ianmcburnie opened 10 months ago

ianmcburnie commented 10 months ago

CTA should be positioned under body on small screen in all cases, even when there is no dismiss button:

Screenshot 2023-09-01 at 11 30 19 AM

We can see that when there is a CTA with dismiss button, the CTA is positioned correctly.

Screenshot 2023-09-01 at 11 26 41 AM

When we replace the dismiss button with the CTA, the CTA loses the ability to go in the correct space under the body:

Screenshot 2023-09-01 at 11 26 30 AM

Even if trying to use just the section-notice__cta (not sure if this is the desired expectation - it is not clear from current docs or stories), there is a spacing issue on large screens:

Screenshot 2023-09-01 at 11 36 57 AM

This behavior can be verified in current storybook: https://opensource.ebay.com/skin/storybook/?path=/story/skin-section-notice--information-with-button

agliga commented 10 months ago

We should rework notice, this should be done for all notices. We should rework cta/footer as well as in ebayui.