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

TS Lint Error on title prop in Accordion component #1148

Open
pedoch opened this issue Oct 18, 2024 · 2 comments
Open

TS Lint Error on title prop in Accordion component #1148

pedoch opened this issue Oct 18, 2024 · 2 comments

Comments

@pedoch
Copy link

pedoch commented Oct 18, 2024

When a ReactNode or JSXElement is passed to the title prop in the Accordion sections array, it throws an error.

Types of property 'title' are incompatible.
        Type 'ReactNode' is not assignable to type 'string | undefined'.
          Type 'null' is not assignable to type 'string | undefined'.

However, the documentation says it accepts a ReactNode for further title customisation.

@pedoch pedoch changed the title TS Error on title prop in Accordion component TS Lint Error on title prop in Accordion component Oct 18, 2024
@bartaz
Copy link
Member

bartaz commented Nov 14, 2024

Weird, the AccordionSection does accept ReactNode:

/**
* The title of the section.
*/
title?: ReactNode;

@bartaz
Copy link
Member

bartaz commented Nov 14, 2024

And we do have example where nodes are passed to the title:

export const CustomHeadings: Story = {
args: {
sections: [
{
title: (
<>
Advanced topics{" "}
<span className="u-text--muted p-text--small">optional</span>
</>
),

Could there be something else that is wrong/different?
Would you he able to try our storybook example in your env to see if that works?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants