feat(audits): Add new UI #10217
feat(audits): Add new UI #10217
Conversation
🦋 Changeset detectedLatest commit: 7a9f1d7 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
the
pkg: astro
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
| } | ||
|
|
||
| connectedCallback() { | ||
| const classes = [`badge--${this.size}`, `badge--${this.badgeStyle}`]; | ||
| this.shadowRoot.innerHTML = ` | ||
| this.shadowRoot.innerHTML += ` |
There was a problem hiding this comment.
This change will be removed by #10186, but it has the same effect
| @@ -159,6 +159,7 @@ export class AstroDevToolbar extends HTMLElement { | |||
| opacity: 0; | |||
| transition: opacity 0.2s ease-in-out 0s; | |||
| pointer-events: none; | |||
| user-select: none; | |||
There was a problem hiding this comment.
Just a small thing I noticed while working on this, it's technically possible for the tooltip on hover to get selected by users somehow.
Co-authored-by: Sarah Rainsberger <[email protected]>
|
It looks like it's not rendered right on Safari (I'm using 17.4) (works well on Firefox and Chrome): Screenshot
Seems like a fixed width needs to be set on the Also, would be nice to resolve the eslint warnings related to the dev toolbar 😬 https://github.com/withastro/astro/actions/runs/8193520483/job/22407514922?pr=10217#step:8:26 |
|
I forgot to test Safari 😔 Will fix! Thank you for checking |
|
Fixed Safari styling! As for the lints, they'll be fixed once we merge #10186 in, because it requires adding an error level to the logger, which that PR adds. |
Changes
This reworks the Audit UI in the top right to generally rework the visual aspect, and also add a detailed view
List View:
Detailed View:
No audits:
Fix #10327
Testing
Tests should pass! We don't test every single interaction between the cards and the highlights, nonetheless we still test that everything shows as expected.
Docs
N/A. In the future, this will allow for cool long descriptions for every audits, which will need a fair amount of docs work, similar to the work on errors.