>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3492758. --> Reported by: [kristen pol](https://www.drupal.org/user/8389) Related to !1071 >>> <h3 id="overview">Overview</h3> <p>Right now, if you have a number of component properties, they all show up in the UI with no organization other than the order they show up in the yml file.</p> <p>There are reasons why it could improve the UX to allow for the categorization of the properties.</p> <p>For example, if there are properties for filling in the content of the component vs properties for styling the component, they could be separated to make this more clear, e.g. a button might have:</p> <p><strong>Content</strong></p> <pre>- icon<br>- text<br>- url</pre><p><strong>Styling</strong></p> <pre>- type (primary, secondary, tertiary)<br>- theme (light, dark)<br>- size (small, regular, large)</pre><p>but there might even be other "advanced"/"additional"/ "extra" props/settings like:</p> <p><strong>Advanced</strong></p> <pre>- is_new_window (opens in a new window)<br>- is_external (shows arrow to indicate it's linking to external site)<br>- is_disabled (disabled button)<br>- css_class (extra class that can be added)</pre><h3 id="proposed-resolution">Proposed resolution</h3> <p>Introduce a new "category"/"group" or similar classification for properties. </p> <p>Ideally, these groupings can open/close and we can also define which of these groupings are open by default. For example, we may want to close the "Styling" and "Advanced" props by default so as to not overwhelm the user.</p> <h3 id="ui-changes">User interface changes</h3> <p>Shows each category/group with all the properties under it and some mechanism to open/close.</p> > Related issue: [Issue #3462705](https://www.drupal.org/node/3462705) > Related issue: [Issue #3459088](https://www.drupal.org/node/3459088) > Related issue: [Issue #3474533](https://www.drupal.org/node/3474533)