A custom adorner action does not appear in a pressed state

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("svc-required-action--active")).notOk()
+    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).notOk()
 
     .click(requiredActionButton);
   title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1 *")
-    .expect(requiredActionButton.hasClass("svc-required-action--active")).ok();
+    .expect(requiredActionButton.hasClass("sv-action-bar-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("svc-required-action--active")
+    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("sv-action-bar-item--active")
     .click(isrequiredButton)
-    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("svc-required-action--active");
+    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("sv-action-bar-item--active");
 });
 
 fixture`${title}`.page`${urlDropdownCollapseView}`.beforeEach(async (t) => {

packages/survey-creator-core/src/components/question.scss

@@ -105,9 +105,9 @@ svc-question {
     opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
   }
 
-  .sv-action-bar-item.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:hover,
-  .sv-action-bar-item.svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:focus,
-  .sv-action-bar-item.svc-required-action--active {
+  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:hover,
+  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:focus,
+  .sv-action-bar-item.sv-action-bar-item--active {
     background-color: $secondary-backcolor-semi-light;
   }
 }
@@ -1296,14 +1296,6 @@ svc-question,
   }
 }
 
-.svc-required-action {
-  .sv-svg-icon {
-    use {
-      fill: $secondary;
-    }
-  }
-}
-
 .svc-question__adorner {
   .sv-ranking:not(.sv-ranking--select-to-rank) {
     .svc-question__content--ranking {

packages/survey-creator-core/src/components/question.ts

@@ -657,10 +657,12 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       ariaChecked: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       ariaRole: "checkbox",
       css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+      innerCss: "svc-required-action",
       title: this.creator.getLocString("pe.isRequired"),
       visibleIndex: 20,
       iconName: "icon-required",
       iconSize: 16,
+      active: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       action: () => {
         if (
           this.creator.isCanModifyProperty(
@@ -672,7 +674,6 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
         }
       }
     });
-    requiredAction.innerCss = <string>(new ComputedUpdater<string>(() => new CssClassBuilder().append("svc-required-action").append("svc-required-action--active", this.isRequired).toString()) as any);
     requiredAction.innerItem.title = <string>(new ComputedUpdater<string>(() => {
       return this.isRequired ? this.creator.getLocString("pe.removeRequiredMark") : this.creator.getLocString("pe.markRequired");
     }) as any);

packages/survey-creator-core/tests/question-adorner.tests.ts

@@ -21,11 +21,11 @@ test("Check required action", (): any => {
     <any>undefined
   );
   const requiredAction = questionAdorner.actionContainer.getActionById("isrequired");
-  expect(requiredAction.innerCss).toBe("svc-required-action");
+  expect(requiredAction.active).toBe(false);
   question.isRequired = true;
-  expect(requiredAction.innerCss).toBe("svc-required-action svc-required-action--active");
+  expect(requiredAction.active).toBe(true);
   question.isRequired = false;
-  expect(requiredAction.innerCss).toBe("svc-required-action");
+  expect(requiredAction.active).toBe(false);
   expect(requiredAction.title).toBe("Required");
 
   const requiredActionInPopup = new Action(requiredAction.innerItem);