mozilla / bedrock

Making mozilla.org awesome, one pebble at a time
https://www.mozilla.org
Mozilla Public License 2.0
1.18k stars 919 forks source link

Refresh: Refactor transition component #15524

Open craigcook opened 3 days ago

craigcook commented 3 days ago

Using an SVG mask for the pixel transition element has the drawback of requiring a solid fill color to overlap the content of the previous element. It also requires sufficient bottom padding on the previous element to allow for that overlap. In practice this has proven problematic.

So instead of it being a mask on the top edge we think it'll be more practical and flexible for it to be its own component again, still with an SVG mask, but it can sit between elements and not try to overlap them. It'll mean we need some presentational classes for different color combinations but that's fine (it's a presentational element anyway).