search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 763 forks source link

Address several tree-view element issues #6572

Closed hippee-lee closed 2 years ago

hippee-lee commented 2 years ago

This change handles several isses that were encountered when triaging usage of the cds-tree-item with angular's *ngIf structural directive.

  1. This change adds registration of for the new cds-button-expand element used in the temlate.
  2. This change adds a code comment to further describe both the automatic and manual use cases for expandable
  3. THis change adds a dynamic demo that demonstrates how to use the expandable with complex trees
  4. This change adds a test in the tree-item spec to make sure the button is in the DOM when a cds-tree-item element is expandable.

Signed-off-by: Matt Hippely mhippely@vmware.com

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

As described above this adds a demo for conditional DOM on cds-tree-item elements. (think *ngIf for Angular apps). It also adds some context for the expandable property as it has an automatic and a manual use case. Finally, It adds a test into the spec to make sure the button is in the DOM when an element is 'expandable'.

What is the current behavior?

Missing register for cds-button-expand, no dev notes for the manual use case of the expandable property and there is no test to make sure the expand button is in the DOM when a cds-tree-item is expandable. Issue Number: N/A

What is the new behavior?

Added register code, added dev context to the expandable property, added a spec for the expandable property. Finally, it adds a demo for conditional cds-tree-items in a complex tree.

Does this PR introduce a breaking change?

Other information