Replace the icon size with 'auto' and write css styles for them

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";
 
@@ -137,8 +137,8 @@ test("Add New Question with sub type", async t => {
     .wait(400)
     .click(getListItemByText("Stars").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("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Stars");
+    .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("Stars");
 
   let expectedJson = {
     "logoPosition": "right",
@@ -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",

functionalTests/designer/creator.ts

@@ -71,27 +71,27 @@ test("Keyboard tab navigation between questions", async (t) => {
     .click(Selector(".sv-string-editor").withText("question2"))
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("shift+tab")
     .expect(Selector(".sv-string-editor").withText("question1").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("tab")
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok();
 });

functionalTests/designer/hovers.ts

@@ -117,7 +117,7 @@ test("Question hover and events", async t => {
   await t
     .maximizeWindow();
   const questionTitle = Selector(".svc-string-editor").withText("string_editor");
-  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .sv-action-bar-item[title=Delete]");
+  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .svc-survey-element-toolbar__item[title=Delete]");
   await t
     .hover(questionTitle, { offsetX: 5, offsetY: 5 })
     .wait(300)

functionalTests/designer/question-wrapper.ts

@@ -163,13 +163,13 @@ test("Single input question wrapper action change require", async (t) => {
   let title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).notOk()
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).notOk()
 
     .click(requiredActionButton);
   title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1 *")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).ok();
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).ok();
 });
 
 test("Single input question wrapper action delete", async (t) => {
@@ -243,9 +243,9 @@ test("Rating question required property", async (t) => {
     .hover(getToolboxItemByText("Rating Scale"))
     .click(getToolboxItemByText("Rating Scale"))
     .expect(isrequiredButton.visible).ok()
-    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("sv-action-bar-item--active")
+    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("svc-survey-element-toolbar__item--active")
     .click(isrequiredButton)
-    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("sv-action-bar-item--active");
+    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("svc-survey-element-toolbar__item--active");
 });
 
 fixture`${title}`.page`${urlDropdownCollapseView}`.beforeEach(async (t) => {
@@ -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) => {

functionalTests/designer/responsiveness.ts

@@ -195,7 +195,7 @@ test("property grid for mobile devices", async (t) => {
 
     .click(Selector(".svd-grid-hide"))
     .click(getAddNewQuestionButton())
-    .click(getBarItemByTitle("Open settings").filterVisible().nth(0))
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible().nth(0))
     .expect(Selector(selectedObjectTextSelector).innerText).eql("question1")
 
     .resizeWindow(1920, 900)
@@ -245,17 +245,13 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).notOk()
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).notOk()
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()
@@ -295,10 +291,10 @@ test("Property grid editor popup", async (t) => {
     .expect(Selector(".sv-popup--modal").visible).ok()
     .click(Selector("button").withExactText("Cancel"))
     .resizeWindow(380, 600)
-    .click(Selector(".sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector(".svd-grid-hide"))
     .click(question1, { offsetX: 5, offsetY: 5 })
-    .click(Selector(".svc-question__content-actions .sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-question__content-actions .svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector("span").withExactText("Set Default Answer"))
     .expect(Selector(".sv-popup--overlay").visible).ok();
 });

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();
 });

functionalTests/designer/toolbox.ts

@@ -338,7 +338,7 @@ test("toolbar responsiveness in compact mode", async (t) => {
     .expect(Selector(".svc-toolbox__category>.svc-toolbox__tool").count).eql(22)
 
     .click(".svc-question__content--text", { offsetX: 200, offsetY: 20 })
-    .click(Selector(".sv-action-bar-item__title").withText("Save as Toolbox Item"))
+    .click(Selector(".svc-survey-element-toolbar-item__title").withText("Save as Toolbox Item"))
 
     .expect(Selector(".svc-toolbox .sv-dots__item").visible).ok()
     .expect(Selector(".svc-toolbox__container").clientHeight).lte(510)

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();
 }

packages/survey-creator-angular/src/add-question-type-selector.component.html

@@ -1,8 +1,8 @@
 <ng-template #template>
   <button type="button" [key2click] (click)="selectQuestionType($event)" [attr.title]="questionTypeSelectorModel.title"
     [attr.aria-label]="questionTypeSelectorModel.title" class="svc-element__question-type-selector">
-    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName" [size]="24"
-      sv-ng-svg-icon></svg>
+    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName"
+      [size]="'auto'" sv-ng-svg-icon></svg>
     <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
   </button>
 </ng-template>

packages/survey-creator-angular/src/add-question.component.html

@@ -3,7 +3,7 @@
     (click)="addNewQuestion($event)"
     (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
     data-bind="clickBubble: false">
-    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24" sv-ng-svg-icon></svg>
+    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
     <span class="svc-add-new-item-button__text">
       {{ adorner.addNewQuestionText }}
     </span>

packages/survey-creator-angular/src/adorners/image-item-value.component.html

@@ -14,17 +14,18 @@
         <span *ngIf="adorner.isDraggable && adorner.canRenderControls"
           class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
           (pointerdown)="adorner.onPointerDown($event)" [attr.title]="undefined" [attr.aria-label]="undefined">
-          <svg [iconName]="'icon-drag-24x24'" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="'icon-drag-24x24'" [size]="'auto'" sv-ng-svg-icon></svg>
         </span>
         <div *ngIf="adorner.canRenderControls" class="svc-context-container svc-image-item-value-controls">
           <ng-container *ngIf="adorner.allowRemove && !adorner.isUploading">
             <span class="svc-context-button" (click)="adorner.chooseFile(adorner)" [key2click] [attr.title]="undefined"
               [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-choosefile'" [size]="24" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-choosefile'" [size]="'auto'" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
             </span>
             <span class="svc-context-button svc-context-button--danger" (click)="adorner.remove(adorner)" [key2click]
               [attr.title]="undefined" [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-delete'" [size]="24" [title]="adorner.removeFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-delete'" [size]="'auto'" [title]="adorner.removeFileTitle"
+                sv-ng-svg-icon></svg>
             </span>
           </ng-container>
         </div>
@@ -48,7 +49,7 @@
           <span class="svc-context-button svc-image-item-value-controls__add"
             *ngIf="adorner.allowAdd && !adorner.isUploading" [key2click] (click)="adorner.chooseNewFile(adorner)"
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-add-lg'" [size]="24" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
+            <svg [iconName]="'icon-add-lg'" [size]="'auto'" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
           </span>
         </div>
       </ng-container>

packages/survey-creator-angular/src/adorners/item-value.component.html

@@ -6,7 +6,7 @@
     <div class="svc-item-value__ghost"></div>
     <div class="svc-item-value-controls">
       <span *ngIf="adorner.isDraggable" class="svc-item-value-controls__button svc-item-value-controls__drag">
-        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="24"
+        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="'auto'"
           [attr.title]="adorner.dragTooltip" sv-ng-svg-icon></svg>
       </span>
       <span *ngIf="adorner.allowAdd" class="svc-item-value-controls__button svc-item-value-controls__add" [key2click]

packages/survey-creator-angular/src/adorners/matrix-cell.component.html

@@ -5,8 +5,9 @@
     <div class="svc-matrix-cell--selected" [class.svc-visible]="adorner.isSelected"></div>
     <ng-container *ngTemplateOutlet="contentTempl"></ng-container>
     <div *ngIf="isSupportCellEditor" class="svc-matrix-cell__question-controls">
-      <span class="svc-matrix-cell__question-controls-button" (click)="adorner.editQuestion(adorner, $event)" [key2click]>
-        <svg [iconName]="'icon-edit'" [size]="24" [size]="24" sv-ng-svg-icon></svg>
+      <span class="svc-matrix-cell__question-controls-button svc-context-button"
+        (click)="adorner.editQuestion(adorner, $event)" [key2click]>
+        <svg [iconName]="'icon-edit'" [size]="'auto'" [size]="'auto'" sv-ng-svg-icon></svg>
       </span>
     </div>
   </div>

packages/survey-creator-angular/src/adorners/question-image.component.html

@@ -4,7 +4,7 @@
       <input type="file" aria-hidden="true" tabindex="-1" [accept]="adorner.acceptedTypes"
         class="svc-choose-file-input" />
       <span class="svc-context-button" [key2click] [attr.title]="undefined" [attr.aria-label]="undefined">
-        <svg [iconName]="'icon-choosefile'" [size]="24" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
+        <svg [iconName]="'icon-choosefile'" [size]="'auto'" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
       </span>
     </ng-container>
   </div>

packages/survey-creator-angular/src/components/question-error.component.html

@@ -1,5 +1,5 @@
 <div>
-  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="24" sv-ng-svg-icon></svg>
+  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
   <span [class]="cssClasses ? cssClasses.error.item : 'panel-error-item'" [model]="error.locText" sv-ng-string>
   </span>
 </div>