Issue/6329 rename show one category in property grid (#6346)

* #6329 Rename showOneCategoryInPropertyGrid Fixes #6329 * Add a description * Merge remote-tracking branch 'origin/master' into issue/6329-Rename-showOneCategoryInPropertyGrid --------- Co-authored-by: RomanTsukanov <[email protected]>
surveyjs · Dec 27, 2024 · 4455417 · 4455417
1 parent 8bf9561
commit 4455417
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 12 deletions.
diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -202,6 +202,23 @@ export class SurveyCreatorModel extends Base
       }
     });
   }
+  /**
+   * Specifies how users navigate categories in the Property Grid.
+   * 
+   * Accepted values:
+   * 
+   * - `"accordion"` (default)        
+   * The Property Grid displays a stacked list of categories that users can expand or collapse to reveal nested properties.
+   * 
+   * - `"buttons"`      
+   * The Property Grid displays the properties of a currently selected category. Users can switch between categories using buttons on the right side of the Property Grid. 
+   */
+  get propertyGridNavigationMode(): "buttons" | "accordion" {
+    return this.showOneCategoryInPropertyGrid ? "buttons" : "accordion";
+  }
+  set propertyGridNavigationMode(newValue: "buttons" | "accordion") {
+    this.showOneCategoryInPropertyGrid = newValue === "buttons";
+  }
 
   get allowEditSurveyTitle(): boolean {
     return this.getPropertyValue("allowEditSurveyTitle", true);
@@ -250,7 +267,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Specifies a default device for survey preview in the Preview tab.
    *
-   * Possible values:
+   * Accepted values:
    * 
    * - `"desktop"` (default)
    * - `"iPhoneSE"`
@@ -266,7 +283,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Specifies the orientation of the selected device in the Preview tab.
    *
-   * Possible values:
+   * Accepted values:
    * 
    * - `"landscape"` (default)
    * - `"portrait"`
@@ -1189,7 +1206,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Gets or sets the currently displayed tab.
    * 
-   * Possible values:
+   * Accepted values:
    * 
    * - [`"designer"`](#showDesignerTab)
    * - [`"test"`](#showPreviewTab)
@@ -2319,7 +2336,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Indicates the state of Survey Creator.
    * 
-   * Possible values:
+   * Accepted values:
    * 
    * - `""` - Survey Creator doesn't have unsaved changes.
    * - `"modified"` - Survey Creator has unsaved changes.
@@ -3896,7 +3913,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Specifies the Toolbox location.
    * 
-   * Possible values:
+   * Accepted values:
    * 
    * - `"left"` (default) - Displays the Toolbox on the left side of the design surface.
    * - `"right"` - Displays the Toolbox on the right side of the design surface.
@@ -3916,7 +3933,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Specifies the position of the sidebar that displays the Property Grid. Applies only when [`showSidebar`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#showSidebar) is `true`.
    * 
-   * Possible values:
+   * Accepted values:
    * 
    * - `"right"` (default) - Displays the sidebar on the right side of the design surface.
    * - `"left"` - Displays the sidebar on the left side of the design surface.
@@ -3927,7 +3944,7 @@ export class SurveyCreatorModel extends Base
   /**
    * Specifies the visibility of the buttons that expand and collapse survey elements on the design surface.
    * 
-   * Possible values:
+   * Accepted values:
    * 
    * - `"onhover"` (default) - Displays an expand/collapse button when a survey element is hovered over or selected.
    * - `"always"` - Displays the expand/collapse buttons permanently.

diff --git a/packages/survey-creator-core/src/creator-options.ts b/packages/survey-creator-core/src/creator-options.ts
@@ -233,7 +233,7 @@ export interface ICreatorOptions {
   /**
    * Specifies a default device for survey preview in the Preview tab.
    *
-   * Possible values:
+   * Accepted values:
    * 
    * - `"desktop"` (default)
    * - `"iPhoneSE"`
@@ -249,7 +249,7 @@ export interface ICreatorOptions {
   /**
    * Specifies the orientation of the selected device in the Preview tab.
    * 
-   * Possible values:
+   * Accepted values:
    * - `"landscape"` (default)
    * - `"portrait"`
    */
@@ -291,7 +291,7 @@ export interface ICreatorOptions {
   /**
    * Specifies the visibility of the buttons that expand and collapse survey elements on the design surface.
    * 
-   * Possible values:
+   * Accepted values:
    * 
    * - `"onhover"` (default) - Displays an expand/collapse button when a survey element is hovered over or selected.
    * - `"always"` - Displays the expand/collapse buttons permanently.
@@ -327,4 +327,16 @@ export interface ICreatorOptions {
    * @see expandCollapseButtonVisibility
    */
   collapseQuestions?: boolean;
+  /**
+   * Specifies how users navigate categories in the Property Grid.
+   * 
+   * Accepted values:
+   * 
+   * - `"accordion"` (default)        
+   * The Property Grid displays a stacked list of categories that users can expand or collapse to reveal nested properties.
+   * 
+   * - `"buttons"`      
+   * The Property Grid displays the properties of a currently selected category. Users can switch between categories using buttons on the right side of the Property Grid. 
+   */
+  propertyGridNavigationMode?: "buttons" | "accordion";
 }
diff --git a/packages/survey-creator-core/tests/creator-base.tests.ts b/packages/survey-creator-core/tests/creator-base.tests.ts
@@ -845,8 +845,16 @@ test("Create new page on changing title/description in ghost & creator.onModifie
   });
   newPage.description = "desc1";
   newPage.title = "title1";
-  expect(logs).toStrictEqual([{ type: "PROPERTY_CHANGED", name: "description" },
-    { type: "PROPERTY_CHANGED", name: "title" }]);
+  expect(logs).toStrictEqual([
+    {
+      type: "PROPERTY_CHANGED",
+      name: "description"
+    },
+    {
+      type: "PROPERTY_CHANGED",
+      name: "title"
+    }
+  ]);
 });
 test("Don't add extra subscriptions and fully unsubscribe title/description changes in ghost page", (): any => {
   const creator = new CreatorTester();
@@ -4808,6 +4816,18 @@ test("ZoomIn/ZoomOut actions limits", (): any => {
   expect(creator.survey.widthScale).toBe(100);
 });
 
+test("propertyGridNavigationMode property", (): any => {
+  const creator = new CreatorTester();
+  creator.propertyGridNavigationMode = "buttons";
+  expect(creator.showOneCategoryInPropertyGrid).toBeTruthy();
+  creator.propertyGridNavigationMode = "accordion";
+  expect(creator.showOneCategoryInPropertyGrid).toBeFalsy();
+
+  creator.showOneCategoryInPropertyGrid = true;
+  expect(creator.propertyGridNavigationMode).toBe("buttons");
+  creator.showOneCategoryInPropertyGrid = false;
+  expect(creator.propertyGridNavigationMode).toBe("accordion");
+});
 test("showSurfaceTools", (): any => {
   const creator = new CreatorTester();
   const designerTabModel = creator.getPlugin("designer").model as TabDesignerViewModel;