jekyll(css): add experimental note #15223
Conversation
✅ Deploy Preview for docsdocker ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site settings. |
crazy-max
force-pushed
the
note-experimental
branch
2 times, most recently
from
e1bfd62 to
17bc30a
Compare
|
I recall I did some testing for redesign these in #11641 as well |
Ah looks neat! I'm using admonition on personal repos and I think they look great: https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types
|
|
Yeah, my intent with that PR was to have a clear "box" for these (as some are quite lengthy), without being too much separate from the content (i.e., not a "in your face" background color, so that we also don't have to re-invent colour-schemes that "work" for each and every one of them). Also to make sure it's all just CSS, and not too much HTML markup needed. |
|
@mark-dr Could you PTAL? |
|
Thanks @crazy-max. Going forward, we need to use |
yes indeed, see docker/buildx#1236 |
|
The changes look good to me on a technical level, but we should be careful about Docs drifting away from the design system. Our existing alerts are based on the Alerts in this figma doc: https://www.figma.com/file/R0GyrsN8tRxJIbti0KY6S3/%E2%9C%A8Components-%26-Patterns?node-id=2%3A8 In there, we use green to indicate success (i.e. the thing you just attempted was successful). Maybe this should be an info alert, or maybe even a "special" purple one. WDYT, @MCallaghanDocker? |
|
See conversation here - it's currently leaning toward blue being the right colour for this. https://docker.slack.com/archives/C0324PUQMFF/p1658928599667639 |
Of course! Let me know what would work best for us.
IMO there are two patterns to take into account. There is callouts and actionable/story states. Callouts being passive like this "experimental" note and "success" for actionable ones or describing a story. But ok to switch to an info alert if it follows our best practices 👍
This one LGTM too. |
|
@crazy-max, how about blue (i.e. the "info" colour), with the vial? |
Yes sgtm! |
|
@mark-dr Here it is using the same palette as current
|
Signed-off-by: CrazyMax <[email protected]>
Signed-off-by: CrazyMax <[email protected]>
crazy-max
force-pushed
the
note-experimental
branch
from
17bc30a to
b672b28
Compare
|
Ok let's get this one in if ci ok |
While working on #15194, I found out the "note" block design was not really welcoming for new users:
This PR adds a new note type called
experimentalthat will look like this:Also needs to upgrade Font Awesome because the vial icon is missing with the current release we have.
Not that I moved the Font Awesome library to an
assetsdirectory because accessing the resources from their css moved the fonts to awebfontsfolder which is relative to their css. I didn't want to add another folder to root path of this repo as it's already bloated and I think it makes more sense to have the resources dedicated to the libraries in their respective folders so you know which css is linked to which font (same for javascript).I think we should also do the same for other "assets" we have in
css,js,favicons,fontsfolders and move these into theassetsfolder in a follow-up.Maybe also in the future use npm and a
package.jsonto manage these dependencies. (cc @mark-dr)