fix: added container wrapper component to handle styles

[vibhandikyash]

Description

Added container wrapper for styling

Fixes #2587
Fixes #4419

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested locally.

Checklist:

• 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

Test coverage results 🧪

🟢 Total coverage has increased

// Code coverage diff between base branch:release and head branch: FIX/2587-container-style-support 

Status	File	% Stmts	% Branch	% Funcs	% Lines
🟢	total	54.45 (0.02)	36.27 (-0.01)	33.59 (0.03)	55 (0.01)
✨ 🆕	app/client/src/components/designSystems/appsmith/WidgetStyleContainer.tsx	80.77	37.5	100	80.77
🔴	app/client/src/widgets/ContainerWidget/component/index.tsx	93.33 (0.23)	63.16 (-1.84)	100 (0)	93.33 (0.23)
🔴	app/client/src/widgets/FormWidget/widget/index.tsx	86.96 (-0.8)	52.63 (0)	91.67 (-0.64)	88.1 (-0.79)

[marks0351]

Great job on adding the style features!!
Pls add a docs update PR for these changes.
when border is more than a certain value the widget overflows widget boundaries. it should not be the case.

[vibhandikyash]

@marks0351 Here also updated Border styles for Text Widget for issue #4419

[marks0351]

@vibhandikyash when a container radius is set very large the container goes away which is fine and is expected but the area below container becomes unaccessible because of the div overflow.
Also when border radius is set to a large number it does not work as expected with text widget. text widget starts to overflow.

[somangshu]

Approving to run tests

[somangshu]

@vibhandikyash related test has failed, Please check

[somangshu]

Rerunning all jobs here, Draggable_PropertyPane_Widgets_spec.js failed because the property pane moved while widget is dragged down. Not related to the PR

[somangshu]

Failed again, @vibhandikyash please check this locally and let me know

[somangshu]

LGTM, @rishabhsaxena thanks for the help here.

Approving to run the tests

[somangshu]

@marks0351 @vibhandikyash here is my feedback

Container widget:

1. The old property background-colour should be above the new styles
2. All the properties (styling related) should be under the style section
3. Same for for the form widget
4. The border is always cut from the side where there is a border radius
5. For older container / creating apps from DB the new properties are undefined which other wise is 0 when initially dragged and dropped

Text widget:

1. OP requested for the margin property, which is not implemented (is this intended): Since the border can be used as the margin property, we should add this in the border width helper text.
2. Other properties were not requested in the text widget, today placing the text widget in the container widget get you the attributes you need. So in my view, these new properties are not required in the text widget

[marks0351]

@vibhandikyash the text widget and container still overflows when border width given is high.

[NandanAnantharamu]

LGTM

[YogeshJayaseelan]

@vibhandikyash Verified the container style functionality and looks good to me

[vivekverma2312]

@vibhandikyash Working fine for text widget too.