search

HealthCatalyst / Fabric.Cashmere

Health Catalyst’s comprehensive design system.
http://cashmere.healthcatalyst.net
Apache License 2.0
66 stars 76 forks source link

Table sort icons can get really small #1635

Closed njwhc closed 3 years ago

njwhc commented 3 years ago

Summary

If the column headers in a table are long and wrap to multiple lines, the sort icons shrink.

image

Reproduction

Stackblitz reproduction

Steps to reproduce:

  1. Make a table that uses hc-sort-header
  2. Use long values for column headers

Workaround / Potential Change

In the application I work on, we have added a style override to our Cashmere tables to force the icons to be a consistent size.

/* This is added to styles.scss in the above linked Stackblitz, uncomment it to experiment. */
.hc-sort-header-icon {
  min-width: 20px !important;
  margin-left: 5px !important;
  align-self: flex-end;
  margin-bottom: 4px;
}

As we're talking CSS, there are numerous other ways to get sort icon size consistency. For instance, applying either display: table or position: fixed to .hc-sort-header-icon will both yield consistently sized icons (perhaps with some margin adjustments).

However, the above override also aligns the icons to the bottom of the column header row:

image

As far as I know, we have not observed any negative side effects from the above override. It may be worth considering this change in Cashmere itself.

corykon commented 3 years ago

I'd support the change. 👍 Size of the sorting icons should never change - and I'm sure that wasn't the original intention.

benjanderson commented 3 years ago

:tada: This issue has been resolved in version 11.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: