Property grid new look: fix double borders (#5902)

* Property grid new look: fix double borders * Fix double borders: update etalons * Fix double borders: update etalons * Fix double borders: update etalons --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Sep 19, 2024 · 2ed2297 · 2ed2297
1 parent 9a69576
commit 2ed2297
Show file tree

Hide file tree

Showing 49 changed files with 13 additions and 15 deletions.
diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar.scss b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
@@ -13,7 +13,7 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   min-width: 370px;
   width: 450px;
   height: 100%;
-  // border-inline-start: 1px solid var(--ctr-property-grid-border-color, $border);
+  border-inline-start: 1px solid var(--ctr-property-grid-border-color, $border);
 }
 
 .svc-side-bar__wrapper {
@@ -200,8 +200,6 @@ $reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
   width: auto;
   height: 100%;
   background-color: var(--ctr-property-grid-form-background-color, $background-dim);
-  border-inline-start: 1px solid var(--ctr-property-grid-border-color, $border);
-  // border-inline-start: 1px solid transparent;
 }
 
 .svc-side-bar {

diff --git a/testCafe/designer/responsiveness.ts b/testCafe/designer/responsiveness.ts
@@ -111,21 +111,21 @@ test("Responsive creator: property grid", async (t) => {
 
     .click(questions.find(".sv-string-editor").withText("question1"))
     .expect(propertyGridSelector.visible).ok()
-    .expect(propertyGridSelector.offsetWidth).eql(450)
+    .expect(propertyGridSelector.offsetWidth).eql(451)
     .expect(flyoutPropertyGrid.exists).notOk()
     .expect(questionToolbarActions.count).eql(4)
 
     .drag(westResizer, 100, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(370)
+    .expect(propertyGridSelector.offsetWidth).eql(371)
 
     .resizeWindow(750, 700)
     .click(expandButtonSelector)
     .expect(propertyGridSelector.visible).ok()
-    .expect(propertyGridSelector.offsetWidth).eql(370)
+    .expect(propertyGridSelector.offsetWidth).eql(371)
     .expect(flyoutPropertyGrid.exists).ok()
 
     .drag(westResizer, -150, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(520)
+    .expect(propertyGridSelector.offsetWidth).eql(521)
 
     .click(collapseButtonSelector)
     .expect(propertyGridSelector.visible).notOk()
@@ -148,13 +148,13 @@ test("Responsive creator: property grid", async (t) => {
   await t
     .expect(westResizer.visible).notOk()
     .expect(eastResizer.visible).ok()
-    .expect(propertyGridSelector.offsetWidth).eql(520)
+    .expect(propertyGridSelector.offsetWidth).eql(521)
 
     .drag(eastResizer, -120, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(400)
+    .expect(propertyGridSelector.offsetWidth).eql(401)
 
     .drag(eastResizer, 100, 0)
-    .expect(propertyGridSelector.offsetWidth).eql(500);
+    .expect(propertyGridSelector.offsetWidth).eql(501);
 });
 
 test("Responsive creator: designer tab for mobile devices", async (t) => {

diff --git a/visualRegressionTests/tests/designer/etalons/convert-to-popup-panel.png b/visualRegressionTests/tests/designer/etalons/convert-to-popup-panel.png
diff --git a/visualRegressionTests/tests/designer/etalons/creator-min-height.png b/visualRegressionTests/tests/designer/etalons/creator-min-height.png
diff --git a/visualRegressionTests/tests/designer/etalons/creator-mobile-paddings.png b/visualRegressionTests/tests/designer/etalons/creator-mobile-paddings.png
diff --git a/...egressionTests/tests/designer/etalons/creator-mobile-page-selected-paddings.png b/...egressionTests/tests/designer/etalons/creator-mobile-page-selected-paddings.png
diff --git a/visualRegressionTests/tests/designer/etalons/creator-smartphone.png b/visualRegressionTests/tests/designer/etalons/creator-smartphone.png
diff --git a/visualRegressionTests/tests/designer/etalons/designer-survey-layout-mobile.png b/visualRegressionTests/tests/designer/etalons/designer-survey-layout-mobile.png
diff --git a/...alRegressionTests/tests/designer/etalons/drag-drop-inside-panel-dynamic-top.png b/...alRegressionTests/tests/designer/etalons/drag-drop-inside-panel-dynamic-top.png
diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-item-values--mobile.png b/visualRegressionTests/tests/designer/etalons/drag-drop-item-values--mobile.png
diff --git a/...gressionTests/tests/designer/etalons/drag-drop-item-values-dropdown--mobile.png b/...gressionTests/tests/designer/etalons/drag-drop-item-values-dropdown--mobile.png
diff --git a/...egressionTests/tests/designer/etalons/drag-drop-item-values-ranking--mobile.png b/...egressionTests/tests/designer/etalons/drag-drop-item-values-ranking--mobile.png
diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-scroll.png b/visualRegressionTests/tests/designer/etalons/drag-drop-scroll.png
diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-end.png b/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-end.png
diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-middle-1.png b/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-middle-1.png
diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-middle-2.png b/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-middle-2.png
diff --git a/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-start.png b/visualRegressionTests/tests/designer/etalons/drag-drop-to-multiline-start.png
diff --git a/visualRegressionTests/tests/designer/etalons/no-license-mobile.png b/visualRegressionTests/tests/designer/etalons/no-license-mobile.png
diff --git a/visualRegressionTests/tests/designer/etalons/no-license.png b/visualRegressionTests/tests/designer/etalons/no-license.png
diff --git a/visualRegressionTests/tests/designer/etalons/page-placeholder-without-elements.png b/visualRegressionTests/tests/designer/etalons/page-placeholder-without-elements.png
diff --git a/visualRegressionTests/tests/designer/etalons/panel-dynamic-in-multiline.png b/visualRegressionTests/tests/designer/etalons/panel-dynamic-in-multiline.png
diff --git a/...egressionTests/tests/designer/etalons/question-content-mobile-actions-hover.png b/...egressionTests/tests/designer/etalons/question-content-mobile-actions-hover.png
diff --git a/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions.png b/visualRegressionTests/tests/designer/etalons/question-content-mobile-actions.png
diff --git a/visualRegressionTests/tests/designer/etalons/question-type-rating-subtypes.png b/visualRegressionTests/tests/designer/etalons/question-type-rating-subtypes.png
diff --git a/visualRegressionTests/tests/designer/etalons/scrollbar-property-grid.png b/visualRegressionTests/tests/designer/etalons/scrollbar-property-grid.png
diff --git a/visualRegressionTests/tests/designer/etalons/scrollbar-property-grid_mask.png b/visualRegressionTests/tests/designer/etalons/scrollbar-property-grid_mask.png
diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-object-selector.png b/visualRegressionTests/tests/designer/etalons/side-bar-object-selector.png
diff --git a/visualRegressionTests/tests/designer/etalons/side-bar-object-selector_mask.png b/visualRegressionTests/tests/designer/etalons/side-bar-object-selector_mask.png
diff --git a/...RegressionTests/tests/designer/etalons/surface-checkbox-layout-small-screen.png b/...RegressionTests/tests/designer/etalons/surface-checkbox-layout-small-screen.png
diff --git a/visualRegressionTests/tests/designer/etalons/surface-question-title-maxLength.png b/visualRegressionTests/tests/designer/etalons/surface-question-title-maxLength.png
diff --git a/visualRegressionTests/tests/designer/etalons/surface-survey-title-maxLength.png b/visualRegressionTests/tests/designer/etalons/surface-survey-title-maxLength.png
diff --git a/...ests/tests/designer/etalons/theme-editor-property-grid-general-group-mobile.png b/...ests/tests/designer/etalons/theme-editor-property-grid-general-group-mobile.png
diff --git a/visualRegressionTests/tests/designer/etalons/theme-tab-toolbar_responsive.png b/visualRegressionTests/tests/designer/etalons/theme-tab-toolbar_responsive.png
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-right-adaptive-compact.png b/visualRegressionTests/tests/designer/etalons/toolbox-right-adaptive-compact.png
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-right-compact-hover-item.png b/visualRegressionTests/tests/designer/etalons/toolbox-right-compact-hover-item.png
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-right-popup.png b/visualRegressionTests/tests/designer/etalons/toolbox-right-popup.png
diff --git a/...alRegressionTests/tests/designer/etalons/toolbox-right-rtl-adaptive-compact.png b/...alRegressionTests/tests/designer/etalons/toolbox-right-rtl-adaptive-compact.png
diff --git a/...RegressionTests/tests/designer/etalons/toolbox-right-rtl-compact-hover-item.png b/...RegressionTests/tests/designer/etalons/toolbox-right-rtl-compact-hover-item.png
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-right-rtl-popup.png b/visualRegressionTests/tests/designer/etalons/toolbox-right-rtl-popup.png
diff --git a/...ionTests/tests/designer/etalons/toolbox-right-rtl-scroll-compact-hover-item.png b/...ionTests/tests/designer/etalons/toolbox-right-rtl-scroll-compact-hover-item.png
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-right-rtl-scroll-compact.png b/visualRegressionTests/tests/designer/etalons/toolbox-right-rtl-scroll-compact.png
diff --git a/...ressionTests/tests/designer/etalons/toolbox-right-scroll-compact-hover-item.png b/...ressionTests/tests/designer/etalons/toolbox-right-scroll-compact-hover-item.png
diff --git a/visualRegressionTests/tests/designer/etalons/toolbox-right-scroll-compact.png b/visualRegressionTests/tests/designer/etalons/toolbox-right-scroll-compact.png
diff --git a/...Tests/tests/designer/etalons/translation-auto-translate-popup-medium-screen.png b/...Tests/tests/designer/etalons/translation-auto-translate-popup-medium-screen.png
diff --git a/...nTests/tests/designer/etalons/translation-auto-translate-popup-small-screen.png b/...nTests/tests/designer/etalons/translation-auto-translate-popup-small-screen.png
diff --git a/visualRegressionTests/tests/designer/etalons/translation-tab-small-screen.png b/visualRegressionTests/tests/designer/etalons/translation-tab-small-screen.png
diff --git a/visualRegressionTests/tests/designer/etalons/translation-tab-small-screen_mask.png b/visualRegressionTests/tests/designer/etalons/translation-tab-small-screen_mask.png
diff --git a/visualRegressionTests/tests/designer/rating.ts b/visualRegressionTests/tests/designer/rating.ts
@@ -130,7 +130,7 @@ test("Multi row rating adorner", async (t) => {
     const question2 = Selector("div[data-name=question2]");
     await takeElementScreenshot("rating-multiline-text.png", question2, t, comparer);
 
-    await t.resizeWindow(550, 900);
+    await t.resizeWindow(549, 900);
     await takeElementScreenshot("rating-multiline-mobile.png", question, t, comparer);
     await takeElementScreenshot("rating-multiline-text-mobile.png", question2, t, comparer);
 
@@ -157,7 +157,7 @@ test("Multi row rating adorner smileys", async (t) => {
     const question2 = Selector("div[data-name=question2]");
     await takeElementScreenshot("rating-multiline-smileys-text.png", question2, t, comparer);
 
-    await t.resizeWindow(550, 900);
+    await t.resizeWindow(549, 900);
     await takeElementScreenshot("rating-multiline-smileys-mobile.png", question, t, comparer);
     await takeElementScreenshot("rating-multiline-smileys-text-mobile.png", question2, t, comparer);
 
@@ -184,7 +184,7 @@ test("Multi row rating adorner stars", async (t) => {
     const question2 = Selector("div[data-name=question2]");
     await takeElementScreenshot("rating-multiline-stars-text.png", question2, t, comparer);
 
-    await t.resizeWindow(550, 900);
+    await t.resizeWindow(549, 900);
     await takeElementScreenshot("rating-multiline-stars-mobile.png", question, t, comparer);
     await takeElementScreenshot("rating-multiline-stars-text-mobile.png", question2, t, comparer);
 

diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -2072,7 +2072,7 @@ test("Composite question - check no scroll", async (t) => {
         ],
       });
     })();
-    await t.resizeWindow(1152, 900);
+    await t.resizeWindow(1151, 900);
     await setJSON({
       "pages": [
         {
@@ -2245,7 +2245,7 @@ test("Page adorner - collapsed", async (t) => {
 
 test("Question adorner - collapsed mobile", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await t.resizeWindow(552, 1080);
+    await t.resizeWindow(551, 1080);
     const json = {
       elements: [
         {