Week 2

This week I got caught out (again) by position: sticky; not working within an overflow: hidden element - this is due to the scroll context being removed from the parent element when overflow hidden is applied. I always forget this and spend 30 minutes debugging before my brain kicks in šŸ˜µā€šŸ’«šŸ¤£ I'm noting this here in an attempt to save this to memory once and for all šŸ¤ž

The issue arose as we were trying to fix a collapsing margins issues in the editor in Elements, first we thought we could just set overflow: hidden on the root element, however, that introduced the issue mentioned above.

We managed to find a clean fix for the collapsing margins; simply use display: flow-root.

UsingĀ display: flow-root;Ā in CSS is generally a clean and modern way to establish aĀ Block Formatting Context (BFC), which helps solve certain layout issues like clearfix problems.

  • Prevents margin collapse between child and parent.
  • Contains floats (no need for clearfix hacks).
  • Isolates child elementsā€™ layout from siblings outside.

Big Updates

  • Created new Page List component.
  • Added SVG optimisations with options to remove width, height, fill, stroke, and style attributes.
  • Added support for choosing the hover trigger element to SVG component meaning you can now hover over the parent to trigger the colour transitions.
  • Added "Hidden" control to all components.

Small Fixes

  • Added support for opening pages in new windows on the Menu component
  • Fixed all components to use updated themeShadow control with "drop" mode support.
  • Added additional styling controls to blog components.
  • Fixed error on blog post page when slug wasn't present.
  • Added transitions to Dropdown component.
  • Fixed bug on SVG where hover colour could be shown incorrectly.
  • Lots of other small fixes and styling improvements on the blogging components.