Update "used by" display and tooltip styling #26262
Conversation
sgress454
had a problem deploying
to
Docker Hub
GitHub Actions
Failure
| return deviceMapping.slice(1).map((d) => ( | ||
| return deviceMapping.map((d) => ( |
There was a problem hiding this comment.
Show all emails in the tooltip, since the first one may be truncated.
| <span className="device-mapping__primary-user"> | ||
| {email}{" "} | ||
| <span className="device-mapping__source">{`(${source})`}</span> | ||
| </> | ||
| </span> |
There was a problem hiding this comment.
New class to allow for truncating the email w/ ellipses.
| color: $ui-fleet-black-50; | ||
| } | ||
| &__primary-user { | ||
| max-width: 270px; |
There was a problem hiding this comment.
This allows for up to "+ 999 more" without cutting of the "more" text.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #26262 +/- ##
==========================================
- Coverage 63.79% 63.42% -0.37%
==========================================
Files 1655 1633 -22
Lines 158962 154923 -4039
Branches 4093 4108 +15
==========================================
- Hits 101413 98266 -3147
+ Misses 49608 48851 -757
+ Partials 7941 7806 -135
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
sgress454
had a problem deploying
to
Docker Hub
GitHub Actions
Failure
| &__source { | ||
| color: $ui-fleet-black-75; | ||
| } | ||
| &__more { | ||
| color: $ui-fleet-black-50; |
There was a problem hiding this comment.
These were not being used because __data isn't a thing in this component as far as I can see. Moved them out from under __data and now the "More" link is grey as intended.
sgress454
changed the title
| let className = "device-mapping__primary-user"; | ||
| if (newDeviceMapping.length > 1) { | ||
| className += " multiple"; | ||
| } |
There was a problem hiding this comment.
We tend to namespace our class names and use the baseClass as the root of the class name. This helps flatten out the scss styles so they are less nested and easier to read. We also use the classnames package to handle conditional classes. This could replace line 132:
const classNames = classnames(`${baseClass}__device-mapping__primary-user`, {
[`${baseClass}__multiple": newDeviceMapping.length > 1
}I know it's a nitpick, and I know we're not doing it everywhere, but I do think it's better to follow the pattern that we are using across the majority of the codebase.
There was a problem hiding this comment.
Updated. The styles were nested under .info-flex but didn't need to be, so this works!
|
Putting this back in draft as we decided in standup to use |
| .about-card__device-mapping__source { | ||
| color: inherit; | ||
| } |
There was a problem hiding this comment.
so the source (e.g. (google chrome)) doesn't show up as grey on grey in the tooltip.
| &__multiple { | ||
| max-width: 270px; | ||
| padding-right: 5px; | ||
| } |
There was a problem hiding this comment.
leave room for the more... text
|
@ghernandez345 updated to use |
For #25283
Checklist for submitter
changes/,orbit/changes/oree/fleetd-chrome/changes.See Changes files for more information.
Details
This PR updates the styling on the "Used by" line of the host details page in the following ways:
Screenshots
With extra long email:
Tooltips:
With regular email:
With one email:
With one long email:
