resolve #6005 A custom adorner action does not appear in a pressed state

surveyjs · Oct 29, 2024 · 20bcef2 · 20bcef2
1 parent 48a4071
commit 20bcef2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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);