Icon Picker clean up

[hlayisanimazuze]

• With the current implementation, remove the defaulted icon on dataTable
• Any component that supports icon picker, upon selecting the component, the size used is smaller. Can we retain the same size we had before?
• Position of the icon should be left aligned. Check the old implementation
• When rendered, the component is not aligned with the other components. We have the option to increase the size of the component, which affects its position. Shouldn't it be positioned by default in the same way as the other components
• When the edit mode is set to readOnly, 'none' text is displayed in the designer mode/renderingmode. It should be empty if there's no value
• When the component is bound to a property and the default icon JS option is used, the component does not respond according to the custom script provided upon rendering. Example: If return statement is provided to return icon based on the data received such as gender, the component does not render if (data.gender === 1) { return 'ManOutlined'; } else if (data.gender === 2) { return 'WomanOutlined'; } else { return 'CloseOutlined'; }. https://function-adminportal-test.shesha.dev/dynamic/TestModule/iconPicker-table
• Rearrange the border properties in this order: Border Width, Border Color then Border Radius

Old change

New implementation

• There's a custom Color property which is the same thing when you use Color js option. Hide the custom color property

[hlayisanimazuze]

Related Item #1183

[hlayisanimazuze]

@James-Baloyi, please check this requirement: If Custom JS defined for Icon property - Is Editable and Default value config properties should be disabled. Since with the latest changes, it does not work accordinlgy when a custom JS is defined for Icon property

Here's a URL you can use to test your latest changes: https://function-adminportal-test.shesha.dev/dynamic/TestModule/iconPicker-details?id=31bac1bb-a1cd-4bcd-92f9-184c1d3feed0

[Tshepiso-R]

@James-Baloyi Please also ensure that there is enough space to accommodate all icons by default. The current implementation cut off the edges of some icons, especially icons outlined with a circle, see the screenshot below.

[Tshepiso-R]

Hey @James-Baloyi please fix issues below

1. The icon becomes left-aligned only when you adjust its size.
2. There isn't enough space to fit all icons by default, causing some icons to have their edges cut off in the current implementation.
3. The icon displayed in the details view does not show data after it is created.
4. When an icon is selected from the properties panel, it gets removed upon saving and refreshing. The selected icon still appears when rendered, but it disappears from the properties panel.
5. The padding margin does not function correctly when the default icon is not configured.