Skip to content

Adding reusable new card styles

Sascha Eggenberger requested to merge new-card-styles into master

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