fix: widget overflow behaviour in anvil #33961
Conversation
WalkthroughThe recent updates address layout and styling issues in the Anvil design system. Key changes include adding a new CSS custom property for typography, modifying the width property in Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
KelvinOm
added
skip-changelog
github-actions
bot
added
Bug
KelvinOm
force-pushed
the
fix/button-widget-overflows
branch
from
32d8b50 to
837de75
Compare
KelvinOm
force-pushed
the
fix/button-widget-overflows
branch
from
837de75 to
e0f8f24
Compare
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/9386707499. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (4)
app/client/src/layoutSystems/anvil/layoutComponents/components/FlexLayout.tsx (1)
Line range hint
74-74: Correct the dependencies in useMemo hooks.- }, [widgetConfigProps, widgetSize, flexGrow]); + }, [widgetConfigProps, widgetSize, flexGrow, className]);Ensure all necessary dependencies are included for correct re-computation.
Also applies to: 117-117
app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/AlignedWidgetRowComp.tsx (1)
Line range hint
39-39: Ensure all dependencies are specified in useMemo.- }, []); + }, [canvasId, props.className, props.parentDropTarget]);Including all relevant dependencies will ensure that the component re-renders correctly when these properties change.
app/client/src/layoutSystems/anvil/layoutComponents/BaseLayoutComponent.tsx (2)
Line range hint
72-72: Avoid usingthisin a static context.The use of
thisin static methods can lead to confusion as it does not refer to an instance of the class. Consider using the class nameBaseLayoutComponentinstead to access static properties or methods.- return this.rendersWidgets ? extractWidgetIdsFromLayoutProps(props) : []; + return BaseLayoutComponent.rendersWidgets ? extractWidgetIdsFromLayoutProps(props) : [];
Line range hint
77-77: Consider using optional chaining for better safety and readability.Using optional chaining can help avoid runtime errors if
props.allowedWidgetTypesis undefined. Here's how you can refactor the code:- if (props.allowedWidgetTypes && props.allowedWidgetTypes.length) { + if (props.allowedWidgetTypes?.length) {
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (7)
- app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx (1 hunks)
- app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx (1 hunks)
- app/client/src/layoutSystems/anvil/common/styles.module.css (1 hunks)
- app/client/src/layoutSystems/anvil/layoutComponents/BaseLayoutComponent.tsx (1 hunks)
- app/client/src/layoutSystems/anvil/layoutComponents/components/FlexLayout.tsx (2 hunks)
- app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/AlignedWidgetRowComp.tsx (3 hunks)
- app/client/src/layoutSystems/anvil/layoutComponents/components/section/SectionRow.tsx (1 hunks)
Additional context used
Biome
app/client/src/layoutSystems/anvil/layoutComponents/components/FlexLayout.tsx
[error] 74-74: This hook does not specify all of its dependencies: className (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
[error] 74-74: This hook specifies more dependencies than necessary: isDropTarget (lint/correctness/useExhaustiveDependencies)
This dependency can be removed from the list.
[error] 117-117: This hook specifies more dependencies than necessary: isDropTarget (lint/correctness/useExhaustiveDependencies)
This dependency can be removed from the list.
[error] 126-126: This hook does not specify all of its dependencies: className (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/AlignedWidgetRowComp.tsx
[error] 39-39: This hook does not specify all of its dependencies: canvasId (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
[error] 39-39: This hook does not specify all of its dependencies: props.className (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
[error] 39-39: This hook does not specify all of its dependencies: props.parentDropTarget (lint/correctness/useExhaustiveDependencies)
This dependency is not specified in the hook dependency list.
Either include it or remove the dependency array
app/client/src/layoutSystems/anvil/layoutComponents/BaseLayoutComponent.tsx
[error] 72-72: Using this in a static context can be confusing. (lint/complexity/noThisInStatic)
this refers to the class.
Unsafe fix: Use the class name instead.
[error] 77-77: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
Additional comments not posted (5)
app/client/src/layoutSystems/anvil/layoutComponents/components/section/SectionRow.tsx (2)
3-3: Updated import to useisEditOnlyModeSelectorinstead ofpreviewModeSelector.
7-9: Switched conditional logic forwrapproperty based onisEditOnlyMode.This change aligns with the PR's objective to fix widget overflow by ensuring proper containment within designated areas.
app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx (1)
39-39: Introduced new CSS custom properties for typography settings.This enhancement allows dynamic adjustment of typography based on theme settings, improving flexibility and maintainability.
app/client/src/layoutSystems/anvil/common/styles.module.css (1)
30-39: Updated CSS rules forelevation="2"to include dynamic font size and block size calculations.These changes enhance the visual consistency and responsiveness of UI components at different elevation levels.
Also applies to: 42-45
app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx (1)
82-82: Changedwidthproperty from"max-content"to"fit-content".This adjustment likely aims to improve the content fitting behavior within flex containers, aligning with the PR's objectives to fix layout issues.
|
Deploy-Preview-URL: https://ce-33961.dp.appsmith.com |
marks0351
changed the title
Description
Fixed overflow operation for widgets in zones.
Fixes
#32922
#33537
Automation
/ok-to-test tags="@tag.Anvil"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/9386697113
Commit: e0f8f24
Cypress dashboard url: Click here!
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Improvements
AnvilFlexComponentto usefit-contentfor better content fitting.isEditOnlyModeSelectorfor more accurate layout wrapping behavior inSectionRow.Removals
renderModeproperty fromBaseLayoutComponent,FlexLayoutProps, and related components for streamlined functionality.AlignedWidgetRowComp.