Tip admonition block style is not applied correctly in v5

Open
#323 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
48/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with packages/module/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx at line 20 and reproduce the TIP syntax from the issue using PatternFly 5. Compare the rendered result with the Alert custom variant documentation. Done means the TIP admonition displays the expected custom styling.

Written by the indexing model from the issue text.

Description

bug P1 :star:

Description

When I use the following syntax for an admonition block with TIP variant.

[This is the tip contents]{{admonition tip}}

The block is displayed but its style is incorrect. I expect it to have "custom" variant style as in this doc: https://www.patternfly.org/components/alert#alert-variants.

What I expect to see What I saw instead
image image

Environment

Using v5.3.0 with Patternfly 5.

"@patternfly/quickstarts": "^5.3.0",
"@patternfly/react-catalog-view-extension": "^5.0.0",
"@patternfly/react-charts": "^7.3.0",
"@patternfly/react-core": "^5.3.4",
"@patternfly/react-icons": "^5.3.2",
"@patternfly/react-styles": "^5.3.1",
"@patternfly/react-table": "^5.3.4",
"@patternfly/react-topology": "^5.2.0",

Others

I think a quick fix would be to set the variant of the TIP admonition to custom or simply unset it. See below:

https://github.com/patternfly/patternfly-quickstarts/blob/1a067a4eaeb608119cb4e35c54b859370b9b84b4/packages/module/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx#L20

Reference: https://www.patternfly.org/components/alert#alert

Dominant language
TypeScript
Stars
15
Forks
47
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from patternfly/patternfly-quickstarts

All issues in patternfly/patternfly-quickstarts

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.