Tabbed property grid remarks (#5951)

* work for #5916 Tabbed property grid remarks * work for #5916 Tabbed property grid remarks --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Oct 9, 2024 · 02b4aeb · 02b4aeb
1 parent c4f8821
commit 02b4aeb
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 31 deletions.
diff --git a/packages/survey-creator-angular/src/custom-questions/boolean-switch.component.html b/packages/survey-creator-angular/src/custom-questions/boolean-switch.component.html
@@ -3,6 +3,7 @@
   [attr.aria-describedby]="model.a11y_input_ariaDescribedBy" [attr.aria-invalid]="model.a11y_input_ariaInvalid"
   [attr.aria-errormessage]="model.a11y_input_ariaErrormessage" (click)="model.value = !model.value">
   <div class="spg-boolean-switch__button" tabindex="0"
+    [key2click]="{ disableTabStop: true }"
     [class]="model.value ? 'spg-boolean-switch__button--checked' : ''">
     <div class="spg-boolean-switch__thumb">
       <div class="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left"></div>

diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss
@@ -206,6 +206,8 @@
 }
 
 .svc-item-value--ghost {
+  height: calcSize(6);
+
   .svc-item-value__ghost {
     display: block;
   }
@@ -218,8 +220,6 @@
     display: none;
   }
 
-  height: calcSize(6);
-
   .sv-string-viewer,
   .sv-string-editor {
     white-space: unset;

diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -161,7 +161,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       const pgTabs = this.propertyGrid.survey.pages.map(p => {
         const action = new MenuButton({
           id: p.name,
-          locTooltipName: "pe.tabs." + p.name,
+          tooltip: p.title,
           iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
           active: this.activePageIsPropertyGrid && p.name === this.propertyGrid.survey.currentPage.name,
           pressed: false,
@@ -185,7 +185,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
         this.propertyGridViewModel.objectSelectionAction.tooltip = options.newCurrentPage.title;
       });
 
-      this.propertyGridViewModel.objectSelectionAction.tooltip = this.propertyGrid.survey.currentPage.title;
+      this.propertyGridViewModel.objectSelectionAction.tooltip = this.propertyGrid.survey.currentPage?.title;
     }
   }
 

diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -357,7 +357,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
       const pgTabs = this.propertyGrid.survey.pages.map(p => {
         const action = new MenuButton({
           id: p.name,
-          locTooltipName: getLocString("pe.tabs." + p.name),
+          tooltip: p.title,
           iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
           active: p.name === this.propertyGrid.survey.currentPage.name,
           pressed: false,

diff --git a/packages/survey-creator-core/src/custom-questions/boolean-switch.scss b/packages/survey-creator-core/src/custom-questions/boolean-switch.scss
@@ -1,3 +1,5 @@
+@import "../variables.scss";
+
 .spg-boolean-switch,
 .spg-boolean-switch * {
   box-sizing: border-box;
@@ -17,11 +19,9 @@
   background: var(--ctr-toggle-button-background-color, #ffffff);
   outline: none;
   border-radius: var(--ctr-toggle-button-corner-radius, 1024px);
-  border-style: solid;
-  border-color: var(--ctr-toggle-button-border-color, rgba(0, 0, 0, 0.16));
-  border-width: 1px;
-  margin: 1px;
-  padding: var(--ctr-toggle-button-padding-top, 4px) var(--ctr-toggle-button-padding-right, 4px) var(--ctr-toggle-button-padding-bottom, 4px) var(--ctr-toggle-button-padding-left, 4px);
+  box-shadow: 0px 0px 0px 1px var(--ctr-toggle-button-border-color, rgba(0, 0, 0, 0.16));
+  padding: var(--ctr-toggle-button-padding-top, 4px) var(--ctr-toggle-button-padding-right, 4px)
+    var(--ctr-toggle-button-padding-bottom, 4px) var(--ctr-toggle-button-padding-left, 4px);
   display: flex;
   flex-direction: row;
   gap: var(--ctr-toggle-button-gap, 4px);
@@ -32,9 +32,7 @@
 
   &:focus,
   &:focus-visible {
-    border-color: var(--ctr-toggle-button-border-color-focused, #19b394);
-    border-width: 2px;
-    margin: 0;
+    box-shadow: 0px 0px 0px 2px var(--ctr-toggle-button-border-color-focused, #19b394);
   }
 }
 
@@ -102,9 +100,9 @@
 }
 
 .spg-boolean-switch__title {
-  color: var(--ctr-toggle-button-label-text-color, rgba(0, 0, 0, 0.91));
+  color: var(--ctr-toggle-button-label-text-color, #{$foreground-dim});
   text-align: left;
-  font-family: var(--ctr-default-font-family, "OpenSans-Regular", sans-serif);
+  font-family: var(--ctr-default-font-family, #{$font-family});
   font-size: var(--ctr-default-font-size, 16px);
   line-height: var(--ctr-default-line-height, 24px);
   font-weight: var(--ctr-default-font-weight, 400);

diff --git a/packages/survey-creator-knockout/src/custom-questions/boolean-switch.html b/packages/survey-creator-knockout/src/custom-questions/boolean-switch.html
@@ -1,7 +1,7 @@
 <div class="spg-boolean-switch" role="checkbox"
   data-bind="click: function() { question.value = !question.value; }, attr: {id: question.inputId, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage}">
   <div class="spg-boolean-switch__button" tabindex="0"
-    data-bind="css: { 'spg-boolean-switch__button--checked': question.koValue }">
+    data-bind="key2click, css: { 'spg-boolean-switch__button--checked': question.koValue }">
     <div class="spg-boolean-switch__thumb">
       <div class="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left"></div>
     </div>

diff --git a/packages/survey-creator-react/src/custom-questions/BooleanSwitch.tsx b/packages/survey-creator-react/src/custom-questions/BooleanSwitch.tsx
@@ -1,25 +1,27 @@
 import * as React from "react";
 import { RendererFactory } from "survey-core";
-import { ReactQuestionFactory, SurveyElementBase, SurveyQuestionElementBase } from "survey-react-ui";
+import { attachKey2click, ReactQuestionFactory, SurveyElementBase, SurveyQuestionElementBase } from "survey-react-ui";
 
 export class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
   protected renderElement(): JSX.Element {
+    const button = attachKey2click(<div className={"spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : "")} tabIndex={0}
+      role="checkbox"
+      aria-required={this.questionBase.ariaRequired}
+      aria-label={this.questionBase.ariaLabel}
+      aria-invalid={this.questionBase.ariaInvalid}
+      aria-errormessage={this.questionBase.ariaErrormessage}
+    >
+      <div className="spg-boolean-switch__thumb">
+        <div className="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left"></div>
+      </div>
+      <div className="spg-boolean-switch__thumb">
+        <div className="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right"></div>
+      </div>
+    </div>, this.questionBase, { processEsc: false });
+
     return (
       <div className="spg-boolean-switch" onClick={() => this.questionBase.value = !this.questionBase.value}>
-        <div className={"spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : "")} tabIndex={0}
-          role="checkbox"
-          aria-required={this.questionBase.ariaRequired}
-          aria-label={this.questionBase.ariaLabel}
-          aria-invalid={this.questionBase.ariaInvalid}
-          aria-errormessage={this.questionBase.ariaErrormessage}
-        >
-          <div className="spg-boolean-switch__thumb">
-            <div className="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left"></div>
-          </div>
-          <div className="spg-boolean-switch__thumb">
-            <div className="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right"></div>
-          </div>
-        </div>
+        {button}
         <div className="spg-boolean-switch__caption">
           <div className="spg-boolean-switch__title">
             {SurveyElementBase.renderLocString(this.questionBase.locTitle)}

diff --git a/packages/survey-creator-vue/src/custom-questions/BooleanSwitch.vue b/packages/survey-creator-vue/src/custom-questions/BooleanSwitch.vue
@@ -8,6 +8,7 @@
     >
     <div class="spg-boolean-switch__button" tabindex="0"
       :class="question.value ? 'spg-boolean-switch__button--checked' : ''"
+      v-key2click="{ disableTabStop: true }"
       >
       <div class="spg-boolean-switch__thumb">
         <div class="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left"></div>

diff --git a/...ts/designer/etalons/side-bar-tabbed-property-grid-theme-appearance-advanced.png b/...ts/designer/etalons/side-bar-tabbed-property-grid-theme-appearance-advanced.png
diff --git a/...Tests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-appearance.png b/...Tests/tests/designer/etalons/side-bar-tabbed-property-grid-theme-appearance.png