e05313c943
## Description This PR adds the features of proper vertical alignment and themeing to Anvil. - A separate `Container` component is created for Anvil, that is used as the layer on top of which the themeing tokens are applied. - A default `min-height` is set using tokens for all widgets in Anvil. - Anvil now stops considering any `min-height` configurations provided by the widgets. It is the widgets responsibility to take care of their own heights, and Anvil will accommodate them -- no matter the height. - Table widget's default height is now set to the min height that was configured for it earlier. - `AnvilFlexComponent` now has `overflow:visible` to allow the shadows for zones and sections to not be cut-off. - All widgets are aligned center vertically by default. This will apply if they're smaller than the set `min-height` - Zones and Sections have elevation styles applied suing the `Container` component mentioned above. - Zones and Sections don't have any styling property other than `Background`, we'll add more as we understand more about the product. > Conditional vertical margin applied to widgets. > If in a row of widgets (.aligned-widget-row), one of the widgets has a label ([data-field-label-wrapper]), then > all widgets (.anvil-widget-wrapper) in the row other than the widget with the label, will shift down using the > margin-block-start property. This is to ensure that the widgets are aligned vertically. > The value of the margin-block-start property is calculated based on the spacing tokens used by the labels in input > like components > #### PR fixes following issue(s) Fixes #29073 Fixes #28591 Fixes #28592 Fixes #28593 #### Media  #### Type of change - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress #### Test Plan #### Issues raised during DP testing ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced conditional vertical margins for widgets to ensure alignment within rows. - Added a new `Container` component for thematic elevation styles in Anvil widgets. - Implemented elevation style options and semantic background settings for Section and Zone widgets. - **Enhancements** - Improved visual layout and alignment of AnvilFlexComponent with updated styling properties. - Added `className` properties to various layout components for enhanced CSS targeting. - **Style** - Updated widget styles to accommodate new background and elevation features. - **Refactor** - Simplified padding logic in WDSParagraphWidget. - Streamlined dimensions calculation in WDSTableWidget. - **Documentation** - Renamed sections in property panes to better reflect background styling options. - **Chores** - Added `Elevations` enum to manage elevation values consistently across components. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|---|---|---|
| .github | ||
| app | ||
| contributions | ||
| deploy | ||
| scripts | ||
| static | ||
| utils/observability | ||
| .deepsource.toml | ||
| .editorconfig | ||
| .env.example | ||
| .gitignore | ||
| .imgbotconfig | ||
| .nojekyll | ||
| app.json | ||
| appsmith_events.md | ||
| appsmith_templates.md | ||
| ci-debug.sh | ||
| CODE_OF_CONDUCT.md | ||
| CODEOWNERS | ||
| CONTRIBUTING.md | ||
| depot.json | ||
| Dockerfile | ||
| heroku.yml | ||
| IssuesReport.md | ||
| LICENSE | ||
| README.md | ||
| SECURITY.md | ||
Organizations build internal applications such as dashboards, database GUIs, admin panels, approval apps, customer support dashboards, and more to help their teams perform day-to-day operations. Appsmith is an open-source tool that enables the rapid development of these internal apps. Read more on our website.
Installation
There are two ways to start using Appsmith:
- Signup on Appsmith Cloud.
- Install Appsmith on your machine. See the installation guides below.
| Installation Methods | Documentation |
|---|---|
 |
Docker (Recommended) |
 |
Kubernetes |
 |
AWS AMI |
For other deployment options, see the Installation Guides documentation.
Development
To build and run Appsmith in your local dev environment, see Setup for local development.
Learning Resources
Need Help?
Contributing
We ❤️ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.
📕 We expect everyone participating in the community to abide by our Code of Conduct. Please read and follow it.
🤝 If you'd like to contribute, start by reading our Contribution Guide.
👾 Explore some good first issues.
Let's build great software together.
Top Contributors
License
Appsmith is licensed under the terms of Apache License 2.0.