e05313c943
12 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Abhinav Jha
|
e05313c943
|
feat: Anvil themeing and Anvil vertical alignment (#29907)
## 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 --> |
||
|
Ashok Kumar M
|
830ccaa692
|
feat: Anvil section space redistribution (#29632)
## Description Anvil Section Space distribution In this pr, we are adding a feature to sections to redistribute a sections space within its zones. you can find details of it over [here](https://www.notion.so/Sections-and-Zones-design-WIP-cbcb8b0ab2514aaf90d04aa3309ad56c) As part of it we have three parts of changes - UI components - Middleware(Redux and Sagas) - Space redistribution algorithm UI/UX: https://github.com/appsmithorg/appsmith/assets/35134347/092ba31f-d2e5-400e-80d7-45878d75ff98 Middleware changes: - have added a new state in WidgetDragResizeState `anvil` and into it have added `isDistributingSpace` to capture when space distribution is active. - added `anvilSpaceDistributionSagas` to capture all sagas wrt space redistribution Space redistribution algorithm: - Have added algorithm for redistributing space, have noted down details about it [here](https://www.notion.so/appsmith/Space-distribution-and-responsiveness-questions-517d140e83864c2287765c99dcd7c8da?pvs=4#9b33c84bcea24cfca63d7caef036f896). > #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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** - Enhanced widget resizing capabilities with space distribution handles in Anvil layout system. - Introduced preview mode support for widget size configuration. - **Enhancements** - Improved Anvil layout system with dynamic space distribution during resizing. - Added flexibility to widget size configuration by considering preview mode. - **Bug Fixes** - Corrected widget border styles to reflect space distribution and resizing states. - **Refactor** - Streamlined space distribution logic in Anvil layout sagas and selectors. - Updated `AnvilFlexComponent` to conditionally assign `flexGrow` property. - **Documentation** - Updated comments to clarify new space distribution behavior in Anvil layout. - **Style** - Adjusted styles for space distribution handles in section layouts. - **Chores** - Added new action types for Anvil space distribution process. - Enhanced Redux state structure for drag and resize operations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Preet <preetsidhu.bits@gmail.com> |
||
|
Preet Sidhu
|
fa7bd6a543
|
feat: add layouts and widgets for sections and zones. (#29713)
## Description 1. Create Section Widget. 2. Create Zone Widget. 3. Create layouts and presets for Sections and zones. 4. Upate layout for Anvil Main Canvas. 5. Refactor BaseLayoutComponent. Separate renderer for edit and view modes. 6. Add childrenMap context to avoid prop drilling through all layouts. 7. Add Anvil Config for WDS widgets. #### Type of change - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress #### Test Plan ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] 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 a new `Zone Stepper Control` component for UI interaction. - Added `AnvilCanvas` and `AnvilMainCanvas` components with improved performance and interaction features. - Implemented `LayoutProvider` and `useClickToClearSelections` for better layout management. - Launched `AnvilCanvasDraggingArena` and `AnvilHighlightingCanvas` components with enhanced drag-and-drop capabilities. - New `useZoneMinWidth` hook to calculate minimum zone width based on child widgets. - Added `SectionRow`, `Section`, `ZoneColumn`, and `Zone` components for advanced layout structuring. - New `WidgetRenderer` component for dynamic child widget rendering. - **Enhancements** - Improved canvas activation and deactivation logic with `useCanvasActivation` and `useCanvasActivationStates`. - Enhanced drag-and-drop experience with updated `useCanvasDragging` logic. - Streamlined `AnvilMainCanvas` integration with conditional rendering based on `renderMode`. - Optimized `FlexLayout` component to handle new `isContainer` and `layoutType` properties. - **Bug Fixes** - Fixed issues with widget positioning and event handling in `WidgetNamesCanvas` components. - Corrected `PageView` width property type for consistent page rendering. - **Refactor** - Consolidated Anvil layout update management with `anvilSagas` and `anvilChecksSagas`. - Refined `SectionWidget` and `ZoneWidget` configuration for improved stability and performance. - Streamlined `LayoutElementPositionsObserver` with `layoutType` enhancements. - **Documentation** - Updated comments and added clarifications for better developer understanding of canvas-related hooks and components. - **Style** - Modified `.anvil-canvas` class styles for full-width and height presentation. - **Chores** - Cleaned up import statements and removed unused code across various components and utilities. - **Tests** - Enhanced Cypress tests with additional selectors and interaction commands for `AutoDimension` feature verification. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> |
||
|
Valera Melnikov
|
ad256ed64a
|
feat: add readonly mode to input (#29778)
## Description Add readonly mode for input component and widgets #### PR fixes following issue(s) Fixes #29145 #### Media https://github.com/appsmithorg/appsmith/assets/11555074/2d42a2bf-603b-4b30-a74c-6c1edd408216  #### Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a "Read-only" mode for input fields, enabling users to view data without the ability to modify it. - **Enhancements** - Improved input components to respect both disabled and read-only states. - Updated widget properties to include read-only configurations. - **Style Updates** - Standardized padding across various components to use spacing variables for consistency. - **Documentation** - Added "Read-only" property documentation to relevant component interfaces and configurations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ashok Kumar M
|
d727ecf7c5
|
chore: register offset values as per parent drop target in Anvil (#28757)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In this PR we are making changes to layout elements position observer to capture offset values of drag parents(layouts that can have widgets) relative to their own immediate dragparents. Why? once we have these offset values of each droptarget wrt to main canvas droptarget we can clearly detect offsetvalues of widgets, since each widget's positions that are captured already are wrt to main canvas, with the calculated offset from the above process we can calculated widget positions relative to their immediate parent as well. #### PR fixes following issue(s) Fixes #28561 Fixes #28585 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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 |
||
|
Ashok Kumar M
|
a6e0c54d72
|
fix: Anvil fixes and enhancements post R0 (#28711)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In this PR we are fixing - suggested widgets feature in Anvil - implementing isVisible prop based rendering in Anvil - remove main canvas resizer in edit mode of Anvil - cleaning up sniping mode based changes for anvil since its only used via sign posting flow which is a fixed layout only feature right now. - adding buffer for main canvas DnD - fixing glitches in first time DnD #### PR fixes following issue(s) Fixes #28577 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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 |
||
|
Ashok Kumar M
|
5cb06ee6e5
|
fix: Hacky fixes to make table work in Anvil Safari (#28417)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In this PR we are making few hacky changes to WDS Table widget to make it work in safari as well as function as expected in all browsers. Table widget current version is a copied version of Fixed layout so it expects dimensions to be set unlike other WDS widgets so adding dimensions in a hacky way. In safari simple bar css doesnt see to work well, they overflow and cover all other widgets. @jsartisan and I tried to understand the issue, but for now making the wrapper position: sticky for some reason works. so adding that as well. All these fixes are hacky so that we get a usable Anvil Edito, but they are safe coz WDS widgets are not used anywhere except Anvil and Anvil is under a feature flag. #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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 |
||
|
Preet Sidhu
|
159a26fb6e
|
chore: Add MutuationObserver to track changes in positions of widgets and layouts. (#28315) | ||
|
Preet Sidhu
|
69f4a412bf
|
chore: add highlight calculation logic for layouts. (#27980)
## Description 1. Add LayoutComponent functionality. 2. Create Basic LayoutComponents. 3. Create LayoutPresets needed for Container-like widgets. 4. Add highlight calculation logic for all basic Layout Components. 5. Create dragging sagas for Anvil. 6. Create DraggingArena associated functionality to handle DnD in Anvil. #### PR fixes following issue(s) Fixes #27004 #### Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [ ] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] 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 --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com> |
||
|
Abhinav Jha
|
7da8561339
|
fix: Misc. fixes for anvil (#28204)
## Description Fixes #28203 - Borders are added to widgets separately now, as there is no resizer in Anvil - Fix main container jump when hovering over the main container resizer - Add height 100% to themeprovider so that the layout preset for main canvas can render correctly - Stop widgets from focusing in preview mode - Prevent AutoHeight Sagas from running in Anvil - Prevent Auto Layout sagas from running in Anvil |
||
|
Abhinav Jha
|
fce5524aa8
|
chore: Add observer to LayoutElements (#27993)
## Description - Create a hook based on the `LayoutElementPositionsObserver` and use it in `AnvilFlexComponent` such that all widgets in Anvil have their positions registered in the `LayoutElementPositionsReducer` - Do the same for `layouts` in Anvil. Added in the `FlexLayout` component. #### PR fixes following issue(s) Fixes #26947 Fixes #27287 #### Type of change - New feature (non-breaking change which adds functionality) |
||
|
Preet Sidhu
|
46dcf3a8f0
|
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178)
## Description
1. Add new ```appPositioningType``` : ANVIL.
2. Create new code path and folder structure for Anvil layout system.
3. Move common pieces of functionalities between autoLayout and anvil to
anvil folder structure (e.g. ```CanvasResizer```).
4. Create ```AnvilFlexComponent```.
5. Use WDS Flex component in AnvilFlexComponent.
6. Pass min max size props in a data structure that is supported by
container queries in the Flex component.
e.g. min-width: { base: "120px", "480px": "200px" }
7. Supply the following flex properties (flex-grow flex-shrink
flex-basis) to widgets depending on their ```responsiveBehvaiour```:
a) Fill: ```flex: 1 1 0%;```
b) Hug: ```flex: 0 0 auto;```
#### PR fixes following issue(s)
Fixes # (issue number)
1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987)
2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609)
3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611)
#### Type of change
- New feature (non-breaking change which adds functionality)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [x] Jest
- [ ] Cypress
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] 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
- [x] 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
- [x] 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
---------
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: rahulramesha <rahul@appsmith.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
|