Update open/closed indicators in Hierarchy & Linked widgets to use text badge

Summary

Currently, the Hierarchy and Linked widgets use the Open/Closed icons to indicate state. This has been noted as not clear or sufficient enough prominence for users in understanding state when reviewing these listings. Additionally, users on wider screens have struggled lining up information such as the state displayed on the right with the information on the left now that the dividers between items have been removed (this is meant to be addressed in #479187 (closed)).

Additional feedback

Proposal

Update the state indicators in these widgets to instead use the text badge (similar to what we use in the detail page header). In addition, introduce some styling to deprioritize Closed items slightly from Open ones (similar to what we do on List pages). Closed items should automatically be sorted to ... (#478521 - closed) will also help in deprioritizing Closed items by moving them to the end of lists (as was the behavior in the legacy experience), along with the future option to hide Closed items (#456941 (closed)).

  • Update State indicators within Child/Linked widget items to use text badge rather than icons
  • Update Closed items to be slightly differentiated
    • Update the Title of Closed items to use .gl-text-secondary ($gray-500)
      • Hover/Active styling of Title remains the same
    • Update the Type icon of Closed items to use $gray-300

Design resources

Edited by Nick Brandt