UX - Grouping of widget options

A grouping of widget options refers to organising and categorising interactive elements (widgets) within a user interface (UI) into logical, coherent sections. This structure helps users navigate and find options more efficiently, enhancing the overall user experience (UX)

How to specify it on widgets:

1. Let's consider the Previous Next Widget as an example:

   1. groupName should be the same when we combine options into one group.

      1. 

   2. Frontend admin view

      1. 

   3. groupTitle and groupDescription should be added once for one group.

      1. groupTitle : Group titles serve as clear, concise labels that help users quickly understand the purpose and content of each group of options

      2. groupDescription :

         1. 

         2. Frontend admin view

            1. 

   4. If there are localized options OR options are in the util file in that case, follow the step:

      1. Use the spread operator and add a variable

         1. 

      2. 

2. How it works in code:

Group Wrapping with Dynamic className:

• The code implements the grouping by wrapping each set of related options in a div that uses the group name as its class name. This allows for specific styling and handling of different groups. Options that do not have a specified group name are added to a defaultGroup. This ensures that all options are included and allows for consistent handling of ungrouped options within the same structure.