Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admonitions: hide header (icon and title) #8568

Closed
1 task done
baur opened this issue Jan 21, 2023 · 8 comments · Fixed by #10080
Closed
1 task done

Admonitions: hide header (icon and title) #8568

baur opened this issue Jan 21, 2023 · 8 comments · Fixed by #10080
Labels
apprentice Issues that are good candidates to be handled by a Docusaurus apprentice / trainee feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. good first issue If you are just getting started with Docusaurus, this issue should be a good place to begin. status: accepting pr This issue has been accepted, and we are looking for community contributors to implement this

Comments

@baur
Copy link

baur commented Jan 21, 2023

Have you read the Contributing Guidelines on issues?

Hide header (icon and title)

image

Motivation

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

Like this:

image

@baur baur added proposal This issue is a proposal, usually non-trivial change status: needs triage This issue has not been triaged by maintainers labels Jan 21, 2023
@Josh-Cena
Copy link
Collaborator

Josh-Cena commented Jan 23, 2023

Related to: #8458

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

@Josh-Cena Josh-Cena added feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. and removed proposal This issue is a proposal, usually non-trivial change status: needs triage This issue has not been triaged by maintainers labels Jan 23, 2023
@baur
Copy link
Author

baur commented Jan 23, 2023

ok, thanks!

@baur baur closed this as completed Jan 23, 2023
@Josh-Cena Josh-Cena reopened this Jan 23, 2023
@Josh-Cena
Copy link
Collaborator

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

@slorber
Copy link
Collaborator

slorber commented Jan 26, 2023

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
Copy link

kalsky commented Apr 23, 2024

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
Copy link
Collaborator

slorber commented Apr 25, 2024

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

CleanShot 2024-04-25 at 11 54 14

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

@slorber
Copy link
Collaborator

slorber commented Apr 25, 2024

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>

CleanShot 2024-04-25 at 12 01 18

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

@slorber slorber added good first issue If you are just getting started with Docusaurus, this issue should be a good place to begin. apprentice Issues that are good candidates to be handled by a Docusaurus apprentice / trainee status: accepting pr This issue has been accepted, and we are looking for community contributors to implement this labels Apr 25, 2024
@andrmaz
Copy link
Contributor

andrmaz commented Apr 26, 2024

@slorber I'll deal with this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
apprentice Issues that are good candidates to be handled by a Docusaurus apprentice / trainee feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. good first issue If you are just getting started with Docusaurus, this issue should be a good place to begin. status: accepting pr This issue has been accepted, and we are looking for community contributors to implement this
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants