Thulasizwe/en/container container#3241
Conversation
WalkthroughThis change introduces a new overflow styling mechanism across several UI components. It adds an Changes
Sequence Diagram(s)sequenceDiagram
participant Model
participant useFormComponentStyles
participant getOverflowStyle
participant Component
Model->>useFormComponentStyles: Provides overflow, hideScrollBar, and other style props
useFormComponentStyles->>getOverflowStyle: Calls with overflow, hideScrollBar
getOverflowStyle-->>useFormComponentStyles: Returns overflowStyles object
useFormComponentStyles-->>Component: Returns allStyles including overflowStyles
Component->>UI: Applies overflowStyles via props or style hooks
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (1)
shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx (1)
56-57: Minor readability improvement inuseFormComponentStylescallThe double spread (
{ ...{ ...model.headerStyles ... } }) is redundant and slightly obscures the intent. A single-level spread is sufficient and makes the expression easier to scan.-const headerStyles = useFormComponentStyles({ ...{ ...model.headerStyles, border: ghost ? null : model.headerStyles.border } }).fullStyle; +const headerStyles = useFormComponentStyles({ + ...model.headerStyles, + border: ghost ? null : model.headerStyles.border, +}).fullStyle;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
shesha-reactjs/src/components/panel/index.tsx(2 hunks)shesha-reactjs/src/components/panel/styles/styles.ts(6 hunks)shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts(2 hunks)shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx(4 hunks)shesha-reactjs/src/designer-components/collapsiblePanel/utils.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- shesha-reactjs/src/components/panel/styles/styles.ts
- shesha-reactjs/src/components/panel/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-attempt
🔇 Additional comments (2)
shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx (1)
68-90:overflowStylemay beundefinedfor legacy models – add a safe defaultOlder models migrated before the new overflow mechanism will not have
model.allStyles.overflowStyles.
IfCollapsiblePanelblindly spreads anundefinedobject into the style props it could cause:
- A runtime error if the implementation does
...overflowStyle.- Missing styles while the user expects the panel to scroll.
Consider supplying a defensive fallback:
- overflowStyle={model.allStyles.overflowStyles} + overflowStyle={model.allStyles?.overflowStyles ?? { overflow: 'auto' }}or let
CollapsiblePanelitself handle the default internally.Double-check other call-sites (designer preview, rendered runtime) to confirm none of them pass
undefinedtoday.shesha-reactjs/src/designer-components/collapsiblePanel/utils.ts (1)
36-42: Verify thatIStyleType.backgroundaccommodatesrepeat,position, andsizekeysYou extended the background style with
repeat,position, andsize. Please confirm that:
IStyleType['background']lists those properties, otherwise TypeScript will complain or consumers will silently ignore them.- Down-stream utilities that stringify / transform style objects (e.g., CSS-in-JS converters) propagate the new keys; if they filter unknown fields, the extra props will be dropped.
If the interface is missing the fields, extend it first:
export interface IBackgroundStyle { type: 'color' | 'image'; color?: string; url?: string; repeat?: 'repeat' | 'no-repeat'; position?: string; size?: string; }Run
tsc --noEmit(or your CI) to ensure the new interface satisfies all call-sites.
shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx
Outdated
Show resolved
Hide resolved
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 (1)
shesha-reactjs/src/designer-components/tabs/styles.ts(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-attempt
🔇 Additional comments (4)
shesha-reactjs/src/designer-components/tabs/styles.ts (4)
3-3: Function signature updated to support explicit overflow controlThe useStyles function now accepts an
overflowparameter, which aligns with centralizing overflow style handling across components. This change is consistent with the overarching goal of standardizing overflow styling.
35-40: Good refactoring for explicit dimension property extractionExplicitly extracting dimension properties from the styles object improves code clarity and maintainability compared to using a generic rest operator. This change makes it clearer which specific dimension properties are being used.
81-87: Explicit dimension properties with card height adjustmentThese explicit dimension properties with
!importantensure consistent sizing and precedence. The height calculations that subtract the card height properly account for the tab header space.
113-118: Centralized overflow style applicationApplying the overflow styles directly to the
.ant-tabs-contentselector is a good approach. It centralizes overflow handling and injects the passedoverflowstyles at the appropriate level in the DOM hierarchy.
2 participants
Summary by CodeRabbit
New Features
Refactor
Chores