Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
16,834 Commits 1 Branch 0 Tags 507 MiB
ba6262ffe6
Commit Graph

5 Commits

Author SHA1 Message Date
Valera Melnikov
ba6262ffe6
chore: widgets alignment (#31923) 
## Description
Plenty changes related to widgets alignment 
1. Paragraph, button, inputs, single checkbox and switch widgets are
aligned along the baseline of the text content
2. The icons in the buttons and the single checkbox and switch are now
positioned absolutely so as not to affect the height of the components.
The height of the components now depends on text content.
3. All unnecessary paddings and borders in the layout have been removed:
- Canvas padding: `--outer-spacing-4`
- Gap between sections and zones: `--outer-spacing-4`
- Zone padding: `--outer-spacing-3`
- Gap between widgets: `--outer-spacing-3`
4. In widget selection styles replace `border` with `outline`, since the
`outline` one does not take space.
5. Add Changes to the flex-basis calculation method. Now the gap between
the zones is taken into account there.
6. Add a lot of small fixes related to the changes described above.


https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008

Fixes #29364

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]  
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8375537665>
> Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8375537665&attempt=2"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

<!-- end of auto-generated comment: Cypress test results  -->




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
	- Improved handling of CSS variable values in Flex components.
- Enhanced styling and layout configurations for a better user
experience.
- **Bug Fixes**
- Fixed label positioning and styling issues in Checkbox and Switch
components.
	- Adjusted padding, margin, and sizing for consistency and alignment.
- **Refactor**
- Enhanced flex layout handling and space distribution logic for
improved layout flexibility.
- **Style**
	- Updated component styles for refined user interface aesthetics.
- **Chores**
- Updated feature flags and configurations for widgets and components to
enable new functionalities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2024-03-22 16:53:29 +03:00
Abhinav Jha
e67f6a8f89
feat: WDS - Anvil compatible Modal Widget (#30351) 
## Description
This PR primarily adds the modal widget to WDS.
The following changes were made:
1. WidgetNameCanvas now listens to modal body scrolls to position widget
name components correctly
2. Modal Widget is rendered as a detached widget that is outside of the
layout flow of the main canvas
3. Main container resizer now has a higher z-index to show even if the
modal is open in the preview mode
4. Widget selection flow in Anvil layout system has been modified to be
handled in a central location (`AnvilMainCanvas`)
5. Modal widget's type in modal sagas are selected via a selector that
checks for the feature flag.
6. Modal widget has its own preset that (at present) is similar to the
Main container's layout preset


#### PR fixes following issue(s)
Fixes #28588 
Fixes #28328 
Fixes #27459 

#### Media


https://github.com/appsmithorg/appsmith/assets/103687/bf350be4-2202-49f3-a860-3e38681ab32e


#### Type of change

- New feature (non-breaking change which adds functionality)
- This change requires a documentation update

## Testing
>
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

## 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 Modal components with additional styling and customization
options.
  - Introduced a new event type for modal submission actions.
- Added a `--on-canvas-ui-z-index` CSS variable for improved layering
control.
  - Implemented a new method for widget focus management in the editor.

- **Improvements**
  - Modal components now use context hooks for close actions.
  - Improved the handling of detached widgets in various layout systems.
  - Simplified the drag-and-drop state management for widgets.
  - Upgraded the visual presentation of the widget drop area.
  - Enhanced widget selection with new custom event dispatching.
- Updated the modal widget configuration with default settings and
property pane structure.

- **Bug Fixes**
- Fixed an issue with modal scrolling to behave consistently with the
main container.
- Addressed a problem where the `id` was not found during layout element
position updates.

- **Style**
- Adjusted modal overlay positioning and content width with new CSS
standards.
- Updated zIndex references to use CSS variables for consistent styling.

- **Refactor**
- Reorganized the `Widgets` array into categorized groups for better
clarity.
- Simplified the `modalPreset` function's parameters and layout
declaration.

- **Documentation**
  - Added default values for feature flags in the documentation.

- **Chores**
  - Altered feature flags to enable new functionalities by default.

- **Tests**
  - No visible changes to end-users in this category.

- **Revert**
  - No visible changes to end-users in this category.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Preet Sidhu <preetsidhu.bits@gmail.com>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
 2024-01-26 09:30:57 +05:30
Ashok Kumar M
cdf2bc6cef
fix: Anvil widget borders (#29940) 
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
 - fixed border design to match existing designs in fixed and auto.
 - Added crispness to canvas renders
 - fixed cropping of zone borders.
 - fixed issues with space distribution coz of overflow css

Bug: Zone highlights cropped
<img width="854" alt="Screenshot 2023-12-29 at 1 59 20 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/8523870e-a370-44e3-877b-1d0f402617b4">

Fixed: 
<img width="896" alt="Screenshot 2023-12-29 at 1 57 09 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/d575d6c1-13bb-414e-97c2-ed2642c0d03e">

Bug: Zone borders cropped
<img width="409" alt="Screenshot 2023-12-29 at 2 00 27 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/9881ef3f-d482-461c-af0e-6e6af2f6ed86">

Fixed: 
<img width="434" alt="Screenshot 2023-12-29 at 2 00 44 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/9b7db171-4746-4349-8194-1ba4cdf67306">

Bug: Borders in Dark mode
<img width="443" alt="Screenshot 2023-12-29 at 2 01 58 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/3a5e4578-0279-408b-9f6b-a59021ad94cb">

Fixed: 
<img width="437" alt="Screenshot 2023-12-29 at 2 01 38 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/d885e7f8-43ea-415d-b1a7-f49a0637d388">

Bug: Space distribution min width animation not happening


https://github.com/appsmithorg/appsmith/assets/35134347/2c8ea694-5f5f-4d15-a5a1-6ef3d35e795c

Fixed: 


https://github.com/appsmithorg/appsmith/assets/35134347/1192a2a8-f7d1-42a0-90ca-1ea58072e287

Box shadow looks consistent:
Before:
<img width="784" alt="Screenshot 2023-12-29 at 2 08 25 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/30e7fc46-a541-422c-ba8a-58603c9d43cb">
After:
<img width="838" alt="Screenshot 2023-12-29 at 2 09 32 PM"
src="https://github.com/appsmithorg/appsmith/assets/35134347/93a98ae0-315a-4564-8f6b-7c3b0d42b5b5">

#### 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**
	- Introduced a new constant to manage widget outline offset.

- **Enhancements**
- Improved visibility and styling of internal components with updated
overflow handling.
- Enhanced widget border styling by using shadow effects for better
visual clarity.
- Ensured consistent class naming in layout components with fail-safe
defaults.

- **Bug Fixes**
- Fixed canvas rendering issues by refining pixel ratio calculations and
adjustments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2024-01-03 10:32:13 +05:30
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>
 2023-12-26 09:16:58 -05:00
rahulramesha
8a35e05923
chore: code changes for widget position observer and widget name on canvas (#27367) 
## Description
The PR contains non integrated code changes for below new features, The
changes are not integrated to work but only contains the ground work
code changes that can be added to css based layout/ Anvil once that is
available in Release.

- **Widget Position observer-** Since we are moving to css based layout,
the positions of widgets will be unknown. To solve the issue we have
introduced the above feature that stores/updates position of widgets on
Redux state whenever a widget position updates. without manually
triggering any action
- **Widget Name on Canvas-** For the New Layout the existing widget name
is inconsistent as it would cut off or visually not visible. to solve
that the widget name will now be drawn on html canvas than it being a
dom node component

#### PR fixes following issue(s)
Fixes #26945 
Fixes #26948 


#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)


## Testing
#### How Has This Been Tested?
- [ ] Manual
- [ ] JUnit
- [ ] Jest

#### 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

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Abhinav Jha <abhinav@appsmith.com>
 2023-10-06 15:37:43 +05:30