work for #5991 Replace the icon size with 'auto' and write css styles…

… for them
surveyjs · Nov 11, 2024 · 3869722 · 3869722
1 parent 802cd18
commit 3869722
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 66 deletions.
diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts
@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON } from "../helper";
+import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON, getQuestionBarItemByTitle } from "../helper";
 
 const title = "Add new question";
 
@@ -159,13 +159,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Rating Scale"))
+    .click(getQuestionBarItemByTitle("Rating Scale"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Password").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Single-Line Input")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Password");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Single-Line Input")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Password");
 
   expectedJson = <any>{
     "logoPosition": "right",
@@ -186,13 +186,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Single-Line Input"))
+    .click(getQuestionBarItemByTitle("Single-Line Input"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Rating Scale"))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Labels");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Labels");
 
   expectedJson = <any>{
     "logoPosition": "right",

diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
@@ -377,7 +377,7 @@ test("No tab stop in dynamic panel", async (t) => {
     .expect(Selector(".svc-question__content--panel .svc-action-button").withText("Add Question").focused).ok()
     .pressKey("tab")
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok();
+    .expect(Selector(".svc-question__content--panel .svc-survey-element-toolbar__item").withText("Panel").focused).ok();
 });
 
 test("Question adorner - collapse button in differen modes", async (t) => {

diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
@@ -244,14 +244,14 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(0).id).eql("svd-designer")
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(true)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(false)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(2).hasAttribute("disabled")).eql(false)
-    .expect(creatorFooterToolbarActions.find(".svc-survey-element-toolbar__item").nth(3).hasAttribute("disabled")).eql(true)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
+    .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()

diff --git a/functionalTests/designer/surface.ts b/functionalTests/designer/surface.ts
@@ -390,9 +390,9 @@ test("Check page adorner state is restored after shrink and stretch", async (t)
   };
   await setJSON(json);
   await t.click(".svc-page", { offsetX: 3, offsetY: 3 });
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
   await t.resizeWindow(500, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).notOk();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk();
   await t.resizeWindow(1920, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
 });
diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts
@@ -119,6 +119,9 @@ export function getPropertyGridCategory(categoryName) {
 export function getBarItemByTitle(text: string) {
   return Selector(".sv-action-bar-item[title=\"" + text + "\"]");
 }
+export function getQuestionBarItemByTitle(text: string) {
+  return Selector(".svc-survey-element-toolbar__item[title=\"" + text + "\"]");
+}
 export function getListItemByText(text) {
   return Selector(".sv-popup__content .sv-list .sv-list__item").withText(text).filterVisible();
 }

diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -69,13 +69,30 @@ svc-page {
 
 .svc-page-toolbar__item {
   @include defaultActionButtonSettings;
-  --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
-  margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
   justify-content: center;
   align-items: center;
 
@@ -84,11 +101,16 @@ svc-page {
 }
 
 .svc-page-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
@@ -127,22 +149,18 @@ svc-page {
 }
 
 .svc-page-toolbar-item__icon {
-  --ctr-survey-page-toolbar-item-icon-width: calc(
+  --thm-survey-page-toolbar-item-icon-width: calc(
     var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
   );
-  --ctr-survey-page-toolbar-item-icon-height: calc(
+  --thm-survey-page-toolbar-item-icon-height: calc(
     var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
       var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
   );
-  width: var(--ctr-survey-page-toolbar-item-icon-width, calcSize(2));
-  height: var(--ctr-survey-page-toolbar-item-icon-height, calcSize(2));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, 0)
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, 0);
+  width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2));
+  height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2));
 }
 
 .svc-page-toolbar-item__icon use {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -54,13 +54,30 @@ svc-question {
 
 .svc-survey-element-toolbar__item {
   @include defaultActionButtonSettings;
-  --ctr-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
-  margin: 0 var(--ctr-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
   border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25));
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
 
   justify-content: center;
   align-items: center;
@@ -72,19 +89,15 @@ svc-question {
 }
 
 .svc-survey-element-toolbar__item--with-text {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
-  gap: var(--ctr-survey-question-panel-toolbar-item-gap, 0);
-}
-
-.sv-dots__item.svc-survey-element-toolbar__item,
-.svc-survey-element-toolbar__item--icon {
-  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
 }
 
 .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
@@ -96,14 +109,25 @@ svc-question {
 }
 
 .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
   flex-direction: row-reverse;
+  padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
   padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
     var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-padding-left-with-text, calcSize(1));
-}
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
 
-.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
   .svc-survey-element-toolbar-item__icon {
     padding: 0;
     width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
@@ -159,10 +183,6 @@ svc-question {
 
   width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
   height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
-  padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-right, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, calcSize(0.5))
-    var(--ctr-survey-question-panel-toolbar-item-icon-padding-left, calcSize(0.5));
 }
 
 .svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {

diff --git a/packages/survey-creator-core/src/responsivity.scss b/packages/survey-creator-core/src/responsivity.scss
@@ -117,24 +117,24 @@
   .svc-question__content-actions {
     width: calc(100% + 3 * #{$base-unit});
 
-    .sv-action-bar-item {
+    .svc-survey-element-toolbar__item {
       border: 0;
     }
   }
 
   .svc-page__content-actions {
-    .sv-action-bar {
+    .svc-page-toolbar {
       padding-right: calcSize(1);
 
       .sv-action {
         .sv-action__content {
           padding-right: 0;
-
-          .sv-action-bar-item__title--with-icon {
-            display: none;
-          }
         }
       }
     }
   }
+
+  .svc-page-toolbar-item__title--with-icon {
+    display: none;
+  }
 }