feat(widgets): add inner padding property to container-like widgets#41625
feat(widgets): add inner padding property to container-like widgets#41625sebastianiv21 wants to merge 5 commits intoreleasefrom
Conversation
…dgets - Introduced `DEFAULT_CONTENT_PADDING` constant for default inner content padding. - Implemented `parseContentPadding` function to handle various padding input formats and return appropriate values. - Updated `ContainerWidget` and `FormWidget` to utilize the new content padding feature. - Enhanced tests for `parseContentPadding` to ensure correct parsing and default behavior. This change improves the flexibility of widget styling by allowing customizable padding options.
… options - Added `contentPaddingValidation` function to validate and parse content padding inputs for container-like widgets. - Updated `ContainerWidget` to utilize the new validation function for content padding properties. - Enhanced unit tests for `contentPaddingValidation` to cover various input scenarios, ensuring robust validation logic. This change improves the user experience by allowing more flexible and error-resistant padding configurations.
- Introduced `contentPadding` property to `JSONFormWidget`, `ListWidgetV2`, and `TabsWidget` for customizable inner padding. - Updated relevant components to utilize the new padding feature, allowing for flexible styling options. - Implemented validation for `contentPadding` input to ensure correct formatting and usability. - Enhanced documentation and property configuration for better user guidance on padding settings. This change improves the visual consistency and user experience by allowing developers to specify padding for various widgets.
- Changed section name from "Border and shadow" to "Border, shadow & padding" across multiple widgets for consistency. - Enhanced help texts for `contentPadding` in `ContainerWidget`, `JSONFormWidget`, and `ListWidgetV2` to provide clearer instructions on padding usage. These updates improve the user experience by ensuring better understanding and consistency in widget configurations.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip You can disable sequence diagrams in the walkthrough.Disable the |
github-actions
bot
added
Container Widget
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/23175709729. |
|
🔴🔴🔴 Cyclic Dependency Check: This PR has increased the number of cyclic dependencies by 6, when compared with the release branch. Refer this document to identify the cyclic dependencies introduced by this PR. You can view the dependency diff in the run log. Look for the check-cyclic-dependencies job in the run. |
|
Deploy-Preview-URL: https://ce-41625.dp.appsmith.com |
- Added `validatePaddingString` function to validate and parse content padding inputs, ensuring they consist of 1 to 4 non-negative space-separated numbers. - Removed the deprecated `contentPaddingValidation` function from `WidgetUtils` and updated relevant widgets (`ContainerWidget`, `JSONFormWidget`, `ListWidgetV2`, `TabsWidget`) to utilize the new validation function. - Enhanced property configurations to reflect the new validation logic, improving consistency and usability across widgets. This change streamlines padding validation and enhances the user experience by providing a unified approach to padding input validation.
|
🔴🔴🔴 Cyclic Dependency Check: This PR has increased the number of cyclic dependencies by 1, when compared with the release branch. Refer this document to identify the cyclic dependencies introduced by this PR. You can view the dependency diff in the run log. Look for the check-cyclic-dependencies job in the run. |
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
1 participant
Description
Tip
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).
Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.
Adds a single, consistently named inner padding property to Container, Form, Tabs, List, and JSON Form so builders can control content inset and avoid content touching the widget border or being cropped.
contentPadding(Style panel label: Padding (px)).10(all sides),10 20(vertical, horizontal),10 20 10 20(top, right, bottom, left). Invalid values are rejected by validation."4"; JSON Form defaults to"25"for backward compatibility.All five widgets use the same property name, label, validation, and value format in the Style panel.
Fixes #4790
or
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.All"
🔍 Cypress test results
Warning
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/23176283611
Commit: 6c9b354
Cypress dashboard.
Tags: @tag.All
Spec:
It seems like no tests ran 😔. We are not able to recognize it, please check workflow here.
Tue, 17 Mar 2026 03:02:51 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?