docs(readme): add section for configuring css - #12616
Conversation
Sorry, something went wrong.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: b2c9325b-1aa3-46a8-978f-b924ec5c3de8 📥 CommitsReviewing files that changed from the base of the PR and between 1f573b0 and 44010e7. 📒 Files selected for processing (1)
WalkthroughREADME.md documents PatternFly styling configuration with @patternfly/react-styles, including the required base stylesheet import. It warns against direct PatternFly HTML/CSS imports and moves the unchanged contribution and license sections below the new guidance. ChangesStyling documentation
Estimated code review effort: 1 (Trivial) | ~3 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. ❤️ ShareComment @coderabbitai help to get the list of available commands. |
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)README.md (1)🤖 Prompt for all review comments with AI agents89-89: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
Name the conflicting import explicitly.
Replace the broad PatternFly HTML/CSS library wording with @patternfly/patternfly/patternfly.css. This makes the duplicate stylesheet fix actionable and matches the PR objective.
🤖 Prompt for AI AgentsVerify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` at line 89, Update the README wording to explicitly identify `@patternfly/patternfly/patternfly.css` instead of referring broadly to the PatternFly HTML/CSS library, while preserving the guidance about avoiding duplicate stylesheets when using PatternFly React.
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. Inline comments: In `@README.md`: - Around line 82-89: Move the “Configure PatternFly styling” section from the repository-root README.md into packages/react-core/README.md, preserving its CSS import guidance and warning about duplicate stylesheets. Remove the section from the root README so the package-specific documentation is the single source. - Around line 85-87: Update the JavaScript code fence around the PatternFly stylesheet import in README.md to use the js language identifier, changing the opening fence from ``` to ```js while preserving the import and closing fence. --- Nitpick comments: In `@README.md`: - Line 89: Update the README wording to explicitly identify `@patternfly/patternfly/patternfly.css` instead of referring broadly to the PatternFly HTML/CSS library, while preserving the guidance about avoiding duplicate stylesheets when using PatternFly React.
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info ⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 65a928e5-0a58-49c0-abfd-7d0399c0284c
📥 CommitsReviewing files that changed from the base of the PR and between 759a598 and 1f573b0.
📒 Files selected for processing (1)- README.md
Sorry, something went wrong.
| #### Configure PatternFly styling | ||
| PatternFly uses the [`@patternfly/react-styles` package](https://www.npmjs.com/package/@patternfly/react-styles) as a translation layer to reference the styles contained in the PatternFly HTML/CSS library. When developing with Patternfly React, include the following import at the base level of your application to pull in PatternFly's styling: | ||
|
|
||
| ``` | ||
| import '@patternfly/react-core/dist/styles/base.css'; | ||
| ``` | ||
|
|
||
| Importing css directly from the PatternFly HTML/CSS library while using PatternFly React may result in duplicated stylesheets in the browser as PatternFly React already pulls in styles internally via `@patternfly/react-styles`. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Place the guidance in packages/react-core/README.md.
The PR objective requires this section in the react-core package README. The changed file is the repository-root README.md. Add or move the section to packages/react-core/README.md so users of @patternfly/react-core can find the required CSS setup instructions with the package documentation.
🧰 Tools 🪛 markdownlint-cli2 (0.23.2)[warning] 85-85: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI AgentsVerify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 82 - 89, Move the “Configure PatternFly styling” section from the repository-root README.md into packages/react-core/README.md, preserving its CSS import guidance and warning about duplicate stylesheets. Remove the section from the root README so the package-specific documentation is the single source.
Sorry, something went wrong.
| ``` | ||
| import '@patternfly/react-core/dist/styles/base.css'; | ||
| ``` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Specify the JavaScript code fence.
Use ```js instead of ` ````. This resolves markdownlint MD040 and enables correct renderer behavior.
Proposed fix-```
+```js
import '`@patternfly/react-core/dist/styles/base.css`';[warning] 85-85: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI AgentsVerify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 85 - 87, Update the JavaScript code fence around the PatternFly stylesheet import in README.md to use the js language identifier, changing the opening fence from ``` to ```js while preserving the import and closing fence.
Source: Linters/SAST tools
Sorry, something went wrong.
Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
Sorry, something went wrong.
What: Closes #12567
Summary by CodeRabbit