PromucFlow_constructor/app/client/src/widgets/anvil/constants.ts
Abhinav Jha 1ea5938cef
feat: Asymmetric padding in Anvil (#30964)
## Description
To make the Anvil layout system capable of rendering dense layouts,
we're using asymmetric padding to remove paddings when not necessary. It
works as follows
- If a section doesn't have a background, it doesn't have a padding
- If all zones in a section don't have a background, they all don't have
vertical padding

Other changes:
- Moved the logic for clearing all selections on click of Canvas from
`AnvilCanvas` to `AnvilMainCanvas`, as it is only necessary in the
editor.
- Removed default `min-height` from widgets so that changes in padding
don't misalign widgets
- Changed the selection borders to use 2px borders instead of box
shadows.
- Removed borders around widget name component
- Removed elevation shadows from zones and sections
- Removed the zone widget from showing up in the widgets panel

#### PR fixes following issue(s)
Fixes #31103

#### Media
![Screenshot 2024-02-13 at 10 37
23 PM](https://github.com/appsmithorg/appsmith/assets/103687/db1aa6bb-516d-48a8-aea9-c3af9c0d8d16)

#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
## 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**
- Introduced a new click event listener in `AnvilMainCanvas` for
clearing selections when clicking outside a widget.
    - Added a new constant `AnvilCanvasClassName` in `constants.ts`.

- **Refactor**
- Simplified `AnvilCanvas` component by using `React.forwardRef` and
updating event handling.
- Updated logic in `useClickToClearSelections.ts` for more dynamic click
event handling.
- Enhanced `AnvilMainCanvas` with improved event handling using hooks.

- **Bug Fixes**
- Addressed issues with widget selection and border styles for a better
user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-02-16 17:13:37 +05:30

12 lines
227 B
TypeScript

export const anvilWidgets = {
SECTION_WIDGET: "SECTION_WIDGET",
ZONE_WIDGET: "ZONE_WIDGET",
};
export enum Elevations {
SECTION_ELEVATION = 1,
ZONE_ELEVATION = 2,
}
export const AnvilCanvasClassName = "anvil-canvas";