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

… for them
surveyjs · Nov 4, 2024 · 9e1eb36 · 9e1eb36
1 parent 8094e3d
commit 9e1eb36
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/survey-creator-react/src/ActionButton.tsx b/packages/survey-creator-react/src/ActionButton.tsx
@@ -17,8 +17,8 @@ export class ActionButton extends SurveyElementBase<IActionButtonProps, any> {
     const classes = new CssClassBuilder()
       .append(this.props.classes)
       .append("svc-action-button")
-      .append("svc-action-button--selected", this.props.selected)
-      .append("svc-action-button--disabled", this.props.disabled)
+      .append("svc-action-button--selected", !!this.props.selected)
+      .append("svc-action-button--disabled", !!this.props.disabled)
       .toString();
     if (this.props.iconName) {
       return this.renderIcon(classes);

diff --git a/packages/survey-creator-vue/src/components/ActionButton.vue b/packages/survey-creator-vue/src/components/ActionButton.vue
@@ -20,14 +20,12 @@
   <template v-if="iconName">
     <span
       v-if="disabled"
-      class="svc-action-button svc-action-button--disabled"
-      :class="classes"
+      :class="getButtonCss()"
       :title="title"
       ><SvComponent :is="'sv-svg-icon'" :iconName="iconName" :size="'auto'"></SvComponent
     ></span>
     <span
       role="button"
-      class="svc-action-button"
       @click="onClick"
       v-key2click
       :class="getButtonCss()"
@@ -37,7 +35,8 @@
   </template>
 </template>
 <script lang="ts" setup>
-import { key2ClickDirective as vKey2click } from "survey-vue3-ui";
+import { key2ClickDirective as vKey2click, SvComponent } from "survey-vue3-ui";
+import { CssClassBuilder } from "survey-core";
 const props = defineProps<{
   classes?: string;
   selected?: boolean;
@@ -56,6 +55,13 @@ const onClick = (event: Event) => {
   }
 };
 const getButtonCss = () => {
-  return props.classes + (props.selected ? " svc-action-button--selected" : "");
+  const buttonClasses = new CssClassBuilder()
+      .append(props.classes || "")
+      .append("svc-action-button")
+      .append("svc-action-button--icon", !!props.iconName)
+      .append("svc-action-button--selected", !!props.selected)
+      .append("svc-action-button--disabled", !!props.disabled)
+      .toString();
+  return buttonClasses;
 };
 </script>