Skip to content

feat(GlEmptyState): add svgHeight preventing content reflow

Derek Knox requested to merge 1001-gl-empty-state-svg-aspect-ratio into master

What does this MR do?

It prevents content reflow (image "pop") for the SVG in the GlEmptyState component.

I initially considered svgAspectRatio vs. svgHeight but opted for the this boring solution. In time, if we actually opt for the enum or bucketed constraints discussed here then we'd want to iterate this svgHeight solution to svgAspectRatio and likely use the padding-bottom hack.

Before: content-reflow-before

After: content-reflow-after

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Closes #1001 (closed)

Edited by Derek Knox

Merge request reports