styles updates #4104
Open
styles updates #4104
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughThis pull request refactors the menu component styling architecture by removing the Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
shesha-reactjs/src/components/menu/index.tsx(0 hunks)shesha-reactjs/src/components/menu/styles.ts(9 hunks)shesha-reactjs/src/components/menu/useHorizontalMenuDropdownStyles.ts(2 hunks)shesha-reactjs/src/designer-components/horizontalMenu/index.tsx(2 hunks)shesha-reactjs/src/designer-components/horizontalMenu/utils.ts(1 hunks)
💤 Files with no reviewable changes (1)
- shesha-reactjs/src/components/menu/index.tsx
🧰 Additional context used
🧠 Learnings (6)
📚 Learning: 2025-10-28T14:21:55.782Z
Learnt from: teboho
PR: shesha-io/shesha-framework#4084
File: shesha-reactjs/src/components/quickView/styles/styles.ts:41-94
Timestamp: 2025-10-28T14:21:55.782Z
Learning: In shesha-reactjs/src/components/quickView/styles/styles.ts, the quickViewContent styles intentionally use multiple `!important` flags and broad selectors (including spans, form items, inputs, links, and labels) to ensure proper targeting and prevent layout breakage in the quick view component.
Applied to files:
shesha-reactjs/src/components/menu/useHorizontalMenuDropdownStyles.tsshesha-reactjs/src/designer-components/horizontalMenu/index.tsxshesha-reactjs/src/components/menu/styles.tsshesha-reactjs/src/designer-components/horizontalMenu/utils.ts
📚 Learning: 2025-05-28T07:55:21.036Z
Learnt from: teboho
PR: shesha-io/shesha-framework#3312
File: shesha-reactjs/src/hooks/formComponentHooks.ts:183-192
Timestamp: 2025-05-28T07:55:21.036Z
Learning: In shesha-reactjs formComponentHooks.ts, the background style initialization deliberately sets valid values from properties panel immediately to provide better UX, rather than waiting for the useDeepCompareEffect to run. This intentional pattern prevents a flash of no background and shows the background image immediately when the component renders.
Applied to files:
shesha-reactjs/src/designer-components/horizontalMenu/index.tsxshesha-reactjs/src/components/menu/styles.tsshesha-reactjs/src/designer-components/horizontalMenu/utils.ts
📚 Learning: 2025-06-12T16:55:57.638Z
Learnt from: teboho
PR: shesha-io/shesha-framework#3397
File: shesha-reactjs/src/designer-components/charts/bar.tsx:49-52
Timestamp: 2025-06-12T16:55:57.638Z
Learning: For the chart components’ migrators (e.g., BarChartComponent in shesha-reactjs/src/designer-components/charts/bar.tsx), the version 5 step intentionally spreads `{ ...prev, ...defaultConfigFiller }` so that values from `defaultConfigFiller` override any existing properties in `prev`. This reset to new defaults is by design and should not be flagged as an issue.
Applied to files:
shesha-reactjs/src/designer-components/horizontalMenu/index.tsxshesha-reactjs/src/components/menu/styles.tsshesha-reactjs/src/designer-components/horizontalMenu/utils.ts
📚 Learning: 2025-10-02T11:25:33.370Z
Learnt from: teboho
PR: shesha-io/shesha-framework#3926
File: shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts:138-166
Timestamp: 2025-10-02T11:25:33.370Z
Learning: In the shesha-framework repository, the hint popover components (sha-quick-search-hint-popover, sha-table-view-selector-hint-popover, sha-table-pager-hint-popover) in shesha-reactjs/src/designer-components/dataTable/tableContext/styles.ts intentionally use hard-coded color `rgb(214, 214, 214)` with `!important` to impose a specific consistent color across themes, overriding theme tokens by design.
Applied to files:
shesha-reactjs/src/designer-components/horizontalMenu/index.tsxshesha-reactjs/src/components/menu/styles.ts
📚 Learning: 2025-06-26T19:59:22.872Z
Learnt from: teboho
PR: shesha-io/shesha-framework#3461
File: shesha-reactjs/src/designer-components/charts/settingsFormIndividual.ts:1280-1280
Timestamp: 2025-06-26T19:59:22.872Z
Learning: In shesha-reactjs chart settings forms, the styling panels (border, shadow, background) should not include buttonType-based hidden conditions since charts are not button components. The border configuration should follow the standard component pattern without button-specific restrictions.
Applied to files:
shesha-reactjs/src/components/menu/styles.tsshesha-reactjs/src/designer-components/horizontalMenu/utils.ts
📚 Learning: 2025-06-10T11:52:51.462Z
Learnt from: teboho
PR: shesha-io/shesha-framework#3374
File: shesha-reactjs/src/generic-pages/settings/dynamic-theme/textsExample.tsx:13-15
Timestamp: 2025-06-10T11:52:51.462Z
Learning: In the Shesha framework's dynamic theme system, the "Global text" Typography element in textsExample.tsx is intentionally left without explicit styling to demonstrate automatic global text color application through the ConfigProvider's colorText token, while the "Default text" element uses explicit theme color styling to show the difference between global and default text color approaches.
Applied to files:
shesha-reactjs/src/components/menu/styles.ts
🧬 Code graph analysis (1)
shesha-reactjs/src/designer-components/horizontalMenu/index.tsx (2)
shesha-reactjs/src/components/menu/index.tsx (1)
LayoutMenu(52-289)shesha-reactjs/src/providers/form/utils.ts (1)
getStyle(1199-1208)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-attempt
Comment on lines
+138
to
+155
| <div className="edit-mode"> | ||
| <LayoutMenu | ||
| colors={colors} | ||
| fontSize={typeof fontSize === 'string' ? fontSize : String(fontSize)} | ||
| padding={{ x: gap, y: height }} | ||
| style={{ | ||
| ...finalStyle, | ||
| ...finalFontStyles, | ||
| width: width, | ||
| } as React.CSSProperties} | ||
| styleOnHover={getStyle(model?.styleOnHover, data)} | ||
| styleOnSelected={getStyle(model?.styleOnSelected, data)} | ||
| styleOnSubMenu={getStyle(model?.styleOnSubMenu, data)} | ||
| overflow={model.overflow} | ||
| width={width} | ||
| fontStyles={finalFontStyles as React.CSSProperties} | ||
| menuId={model.id} | ||
| /> |
Contributor
There was a problem hiding this comment.
Restore runtime interactivity by gating edit-mode.
With the new global rule .edit-mode { pointer-events: none; } (see styles.ts), wrapping LayoutMenu in an unconditional <div className="edit-mode"> disables every click/hover/scroll on the menu—even outside the designer—so navigation breaks immediately. Please apply that class only when the component is actually in edit mode (or drop it entirely).
Apply this diff to gate the class on the edit state:
- <div className="edit-mode">
+ <div className={componentState.isInEditMode ? 'edit-mode' : undefined}>(Be sure to use the correct flag for your configurable renderer’s edit-state.)
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In shesha-reactjs/src/designer-components/horizontalMenu/index.tsx around lines
138 to 155, the LayoutMenu is wrapped unconditionally with a
div.className="edit-mode" which disables all pointer events due to the global
.edit-mode { pointer-events: none } rule; change this so the class is only
applied when the renderer is actually in edit state (e.g. conditionally set
className={isEditMode ? 'edit-mode' : undefined} or remove the wrapper
entirely), using the correct configurable renderer edit-state flag available in
this component so runtime interactivity (click/hover/scroll) is preserved.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Style