From 20bcef26692095d14f4f8ca25db572f43da614fe Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Tue, 29 Oct 2024 17:31:04 +0300
Subject: [PATCH] resolve #6005 A custom adorner action does not appear in a
 pressed state

---
 .../src/components/question.scss                   | 14 +++-----------
 .../survey-creator-core/src/components/question.ts |  2 +-
 .../tests/question-adorner.tests.ts                |  6 +++---
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index be611a3a64..f3fd4077a4 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/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 {
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index 6ef3e02f4d..cda4c2486d 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -661,6 +661,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       visibleIndex: 20,
       iconName: "icon-required",
       iconSize: 16,
+      active: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       action: () => {
         if (
           this.creator.isCanModifyProperty(
@@ -672,7 +673,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);
diff --git a/packages/survey-creator-core/tests/question-adorner.tests.ts b/packages/survey-creator-core/tests/question-adorner.tests.ts
index 88c335d4aa..08947aa12c 100644
--- a/packages/survey-creator-core/tests/question-adorner.tests.ts
+++ b/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);