ACM-33135 Fix Create Cluster wizard has no margin#6102
ACM-33135 Fix Create Cluster wizard has no margin#6102oksanabaza wants to merge 1 commit intostolostron:mainfrom
Conversation
Signed-off-by: Oksana Bazylieva <obazylie@redhat.com>
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: oksanabaza The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
📝 WalkthroughWalkthroughThis PR updates CSS padding variables in the TemplateEditor control panel from PatternFly v5 to v6 naming conventions, replacing individual direction-based padding variables with logical property equivalents (BlockStart/InlineEnd/BlockEnd/InlineStart). ChangesPatternFly v6 CSS Variable Migration
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
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 `@frontend/src/components/TemplateEditor/css/control-panel.css`:
- Around line 27-32: The wizard padding variables used in the .temptifly
.showWizard .creation-view-controls and .creation-view .creation-view-controls
rules are misspelled (using --pf-v6-c-wizard__main-body--Padding*); replace them
with the correct PatternFly 6.4.0 token names without the extra underscores:
--pf-v6-c-wizardmain-body--PaddingBlockStart,
--pf-v6-c-wizardmain-body--PaddingInlineEnd,
--pf-v6-c-wizardmain-body--PaddingBlockEnd, and
--pf-v6-c-wizardmain-body--PaddingInlineStart so the padding values resolve
correctly at runtime.
🪄 Autofix (Beta)
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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Enterprise
Run ID: f00ba954-2b6d-4644-953e-1166ab4c3fe0
📒 Files selected for processing (1)
frontend/src/components/TemplateEditor/css/control-panel.css
| padding: var(--pf-t--global--spacer--lg); | ||
| } | ||
| .temptifly .showWizard .creation-view-controls, | ||
| .creation-view .creation-view-controls { | ||
| padding: var(--pf-v5-c-wizard__main-body--PaddingTop) var(--pf-v5-c-wizard__main-body--PaddingRight) | ||
| var(--pf-v5-c-wizard__main-body--PaddingBottom) var(--pf-v5-c-wizard__main-body--PaddingLeft); | ||
| padding: var(--pf-v6-c-wizard__main-body--PaddingBlockStart) var(--pf-v6-c-wizard__main-body--PaddingInlineEnd) | ||
| var(--pf-v6-c-wizard__main-body--PaddingBlockEnd) var(--pf-v6-c-wizard__main-body--PaddingInlineStart); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the installed `@patternfly/patternfly` version
fd package.json --max-depth 3 | xargs grep -l '"@patternfly/patternfly"' 2>/dev/null | head -5
# Look for the wizard CSS in node_modules to confirm variable names
fd "wizard.css" --search-path node_modules/@patternfly 2>/dev/null | head -5 | xargs grep -l "main-body" 2>/dev/null
# Check that the four PaddingBlock/Inline vars exist
fd "wizard.css" --search-path node_modules/@patternfly 2>/dev/null | head -5 | xargs grep "wizard__main-body--Padding" 2>/dev/null
# Check design token spacer--lg
fd "patternfly-tokens.css" --search-path node_modules/@patternfly 2>/dev/null | head -3 | xargs grep "spacer--lg" 2>/dev/nullRepository: stolostron/console
Length of output: 86
🏁 Script executed:
#!/bin/bash
# Check the `@patternfly/patternfly` version in frontend/package.json
echo "=== Checking PatternFly version ==="
cat frontend/package.json | grep -A 2 -B 2 '@patternfly/patternfly'
# Check if there's a patternfly CSS import or any CSS bundling
echo -e "\n=== Checking for CSS imports in the codebase ==="
rg -l "patternfly" frontend/src --type ts --type tsx --type js | head -10
# Look for references to the specific variables in the codebase
echo -e "\n=== Checking for wizard padding variable usage ==="
rg "PaddingBlock|PaddingInline|spacer--lg" frontend/src --type css
# Check the control-panel.css file to see its full structure
echo -e "\n=== Checking control-panel.css content around the modified lines ==="
wc -l frontend/src/components/TemplateEditor/css/control-panel.cssRepository: stolostron/console
Length of output: 1220
🏁 Script executed:
#!/bin/bash
# Check what CSS files are imported in the app or component
echo "=== Check for CSS imports in TemplateEditor component ==="
find frontend/src/components/TemplateEditor -name "*.ts*" -o -name "*.js*" | xargs grep -l "import.*\.css" 2>/dev/null
# Look at the TemplateEditor component structure
echo -e "\n=== TemplateEditor directory structure ==="
find frontend/src/components/TemplateEditor -type f | head -20
# Check if control-panel.css imports patternfly CSS or has any `@import` statements
echo -e "\n=== Check control-panel.css for imports ==="
head -50 frontend/src/components/TemplateEditor/css/control-panel.css
# Check where control-panel.css is imported from
echo -e "\n=== Check where control-panel.css is used ==="
rg "control-panel\.css" frontend/srcRepository: stolostron/console
Length of output: 3522
🌐 Web query:
PatternFly 6.4.0 CSS variables --pf-v6-c-wizard__main-body--Padding
💡 Result:
In PatternFly 6, the wizard main body padding is controlled by these CSS custom properties (splitting padding into block/inline sides): 1) --pf-v6-c-wizardmain-body--PaddingBlockStart 2) --pf-v6-c-wizardmain-body--PaddingInlineEnd 3) --pf-v6-c-wizardmain-body--PaddingBlockEnd 4) --pf-v6-c-wizardmain-body--PaddingInlineStart These are documented for the Wizard component as the variables that define the main container body padding [1][2]. If you are specifically looking for a single variable named --pf-v6-c-wizardmain-body--Padding (exact name), the official Wizard CSS variables documentation does not list such a single “--Padding” variable for main-body; instead it provides the four side-specific variables above [1][2]. Additionally, PatternFly provides a modifier to remove the padding entirely:.pf-m-no-padding on.pf-v6-c-wizardmain-body [2].
Citations:
- 1: https://pf6.patternfly.org/components/wizard
- 2: https://www.patternfly.org/components/wizard/html
🌐 Web query:
PatternFly 6.4.0 CSS design token --pf-t--global--spacer--lg
💡 Result:
The PatternFly 6.4.0 CSS design token --pf-t--global--spacer--lg has the value 1.5rem (24px).[1][2]
Citations:
- 1: https://www.patternfly.org/design-foundations/spacers
- 2: https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md
Correct the CSS variable names for wizard padding.
The wizard main-body padding variables in lines 31–32 are incorrectly named. PatternFly 6.4.0 defines them as --pf-v6-c-wizardmain-body--PaddingBlockStart/InlineEnd/BlockEnd/InlineStart (no underscores between wizard and main-body), but the code uses --pf-v6-c-wizard__main-body--Padding* (with __). Undefined CSS variables resolve to initial, causing padding: 0 0 0 0 at runtime—the padding fix has no effect.
The design token --pf-t--global--spacer--lg on line 27 is correct (1.5rem/24px).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/TemplateEditor/css/control-panel.css` around lines 27
- 32, The wizard padding variables used in the .temptifly .showWizard
.creation-view-controls and .creation-view .creation-view-controls rules are
misspelled (using --pf-v6-c-wizard__main-body--Padding*); replace them with the
correct PatternFly 6.4.0 token names without the extra underscores:
--pf-v6-c-wizardmain-body--PaddingBlockStart,
--pf-v6-c-wizardmain-body--PaddingInlineEnd,
--pf-v6-c-wizardmain-body--PaddingBlockEnd, and
--pf-v6-c-wizardmain-body--PaddingInlineStart so the padding values resolve
correctly at runtime.
1 participant
📝 Summary
Ticket Summary (Title):
ACM-33135 Fix Create Cluster wizard has no margin
Fixed wizard padding by updating PF5 variables to PF6
Ticket Link:
https://redhat.atlassian.net/browse/ACM-33135
Type of Change:
✅ Checklist
General
ACM-12340 Fix bug with...)If Feature
If Bugfix
🗒️ Notes for Reviewers
Before:
After:
Summary by CodeRabbit