Admonitions: hide header (icon and title)

[baur]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Hide header (icon and title)

Motivation

I can pass empty icon and title, but header height not changes. I'd like to full hide header

Like this:

[Josh-Cena]

Related to: https://github.com/facebook/docusaurus/discussions/8458

For feature requests we require a detailed API design, including the syntax used. You miss those by selecting the wrong template.

[baur]

ok, thanks!

[Josh-Cena]

I do think it's fair as feature request though, just we need more design for it to be actionable.

[slorber]

Definitively something I'd like to add.

In the meantime you can probably do something like

:::tip NO_ICON

my tip

:::

And swizzle the component to not render the icon/heading if title === "NO_ICON"

[kalsky]

I think keeping the icon makes sense, otherwise, the only differentiation is the background color. But I do want to be able to set it as a one-liner admonition with/without the title and with/without the icon. Right now, when I don't need the title, I just do something like: :::note   something :::

[slorber]

I'm not here to judge if having an icon makes sense. Users should be able to decide for themselves if they want one.

We should rather use the Markdown directive syntax, since we already use remark-directive anyway.

:::note{icon=false}

content

:::

Whatever is in {} (directive attributes) should rather become available to the underlying component we use for rendering, as props. This would be generic and flexible for users to implement other use cases as well thanks to swizzle.

A little annoying thing is that directives do not seem to be typed, here we get "false" instead of false

Our remark admonition plugin is also not in an ideal form so I'll refactor all this some day when I have time.

[slorber]

Regarding this specific issue, I can reproduce when using admonitions through JSX nodes.

import Admonition from '@theme/Admonition';

<Admonition type="info" title={null} icon={null}>
  <p>Some information</p>
</Admonition>

https://stackblitz.com/edit/github-jit8sw?file=docs%2Fintro.md

This is probably just a little conditional rendering issue in our AdmonitionLayout component:

 <AdmonitionContainer type={type} className={className}>
-  <AdmonitionHeading title={title} icon={icon} />
+  {(title || icon) ? <AdmonitionHeading title={title} icon={icon} /> : null}
   <AdmonitionContent>{children}</AdmonitionContent>
 </AdmonitionContainer>

If someone wants to submit a PR for this, it should be relatively easy.

Please add a test case in this page so that we can see it working in the deploy preview:

https://docusaurus.io/tests/pages/markdown-tests-mdx#admonitions

[andrmaz]

@slorber I'll deal with this