[go: up one dir, main page]

Skip to content

Adding reusable new card styles

What does this MR do and why?

We introduced new card styles a while ago with slapping a bunch of gl- classes to elements. As we're continuing in slightly adjusting those styles and using it in more places it would be very helpful to have (gl-) classes available for faster adjustments and to ease maintenance.

The goal would be to update gl-card in the longtime but for the meantime we would include those updated styles directly in our product.

Structure:

.gl-new-card
  .gl-new-card-header
    .gl-new-card-title-wrapper
      .gl-new-card-title
    .gl-new-card-toggle
  .gl-new-card-body
    .gl-new-card-content
  .gl-new-card-footer

Screenshots or screen recordings

Before After
Issue issue_before Issue issue_after
Epic epic_before Epic epic_after
Branches branches_before Branches branches_after
Work items work_items_before Work items work_items_after
Work items OKR okr_before Work items OKR okr_after
Empty state empty_before Empty state empty_after

How to set up and validate locally

  1. Issue (e.g. http://gdk.test:3000/flightjs/Flight/-/issues/38)
  2. Epic (e.g. http://gdk.test:3000/groups/flightjs/-/epics/5)
  3. Branches (e.g. http://gdk.test:3000/flightjs/Flight/-/branches)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sascha Eggenberger

Merge request reports

Loading