Skip to content

feat(theme-common): allow passing a string for details summary #8656

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.

Sign up for GitHub

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

Merged
slorber merged 6 commits into from
Feb 16, 2023
Merged

feat(theme-common): allow passing a string for details summary #8656

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3b33469
refactor(docusaurus-theme-common): allow string prop for details summary
pReya Feb 11, 2023
d288c08
fix: remove boolean
pReya Feb 11, 2023
ef6c08c
fix: examples
pReya Feb 11, 2023
4082cc9
fix: review comments
pReya Feb 11, 2023
ea4b1a5
Format
Josh-Cena Feb 15, 2023
1cd5fc7
Merge pages
Josh-Cena Feb 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions packages/docusaurus-theme-common/src/components/Details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ function hasParent(node: HTMLElement | null, parent: HTMLElement): boolean {
}

export type DetailsProps = {
/** Summary is provided as props, including the wrapping `<summary>` tag */
summary?: ReactElement;
/** Summary is provided as props, optionally including the wrapping `<summary>` tag */
summary?: ReactElement | string;
} & ComponentProps<'details'>;

/**
Expand All @@ -54,6 +54,16 @@ export function Details({
// only after animation completes, otherwise close animations won't work
const [open, setOpen] = useState(props.open);

let SummaryElement = null;

if (React.isValidElement(summary)) {
SummaryElement = summary;
} else if (typeof summary === 'string') {
SummaryElement = <summary>{summary}</summary>;
} else {
SummaryElement = <summary>Details</summary>;
}

return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
<details
Expand Down Expand Up @@ -91,8 +101,7 @@ export function Details({
// setOpen(false);
}
}}>
{/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
{summary ?? <summary>Details</summary>}
{SummaryElement}

<Collapsible
lazy={false} // Content might matter for SEO in this case
Expand Down
12 changes: 12 additions & 0 deletions website/_dogfooding/_docs tests/details.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
slug: details.html
---

import Details from '@theme/Details';

# Testing Details component

<Details summary={'My Headline'}>Some Text</Details>
<Details summary>Some Text</Details>
<Details summary={true}>Some Text</Details>
<Details>Some Text</Details>