Skip to content

fix: Add figure-img component

Scott de Jonge requested to merge figure-img-component into main

Changes

  • Update README
  • Add <figure-img> component
  • Update spacing on <figure> to margin
  • Update <figure> usage to <figure-img>
  • Remove custom usage of gl-p-5 class on <img> in <figure> to align image content to viewport width on mobile

Outcome

  • Remove duplicate alt, aria-label, <figcaption> needing to be manually set
  • Remove role="img" needing to be manually set
  • Single source of truth for content images to update as aria/role="img" support improves for <figure>
  • Consistent spacing
  • Remove custom styles and compute max-width from width prop
  • Remove img-50 etc. classes which reduce images on mobile to 50% of viewport width, too small for small screens

Screenshots

Before After
design.gitlab.com_brand-logo_core-logo 192.168.0.239_2018_brand-logo_core-logo
design.gitlab.com_product-foundations_color 192.168.0.239_2018_components_button
Edited by Scott de Jonge

Merge request reports