Merge pull request #491 from contentstack/VE-7071-apply-outline-offset-highlight-for-variant-fields-on-canvas

Author: karancs06

src/visualBuilder/eventManager/__test__/useVariantsPostMessageEvent.spec.ts

@@ -58,7 +58,7 @@ vi.mock("../../../visualBuilder", () => {
 });
 
 // Create a more realistic mock of the CSS modules
-const cssClassMock = "go655717959"; // Match the actual generated class name
+const cssClassMock = "go109692693"; // Match the actual generated class name
 
 vi.mock("../../../visualBuilder.style", () => {
     return {

src/visualBuilder/visualBuilder.style.ts

@@ -450,7 +450,7 @@ export function visualBuilderStyles() {
             .visual-builder__field-icon {
                 svg {
                     margin-right: 0px;
-                }            
+                }
             }
         `,
         "visual-builder__focused-toolbar__button-group": css`
@@ -620,6 +620,7 @@ export function visualBuilderStyles() {
         `,
         "visual-builder__variant-field": css`
             outline: 2px solid #bd59fa;
+            outline-offset: -2px;
         `,
         "visual-builder__pseudo-editable-element": css`
             z-index: 99999 !important;
@@ -758,7 +759,6 @@ export function visualBuilderStyles() {
             align-items: center;
             justify-content: center;
             margin-left: 0.25rem;
-            
         `,
         "visual-builder__field-location-icons-container__divider": css`
             height: 32px !important;
@@ -777,7 +777,7 @@ export function visualBuilderStyles() {
             background: #fff;
             border: 1px solid #e0e0e0;
             border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
             z-index: 1000;
             min-width: 230px;
             max-height: 250px;