feat(Tree): add Component

[priyankar205]

• Implemented the Tree component including the Teams theme
• Work Left: Support for other themes. Implement accessibility props.

[levithomason]

@layershifter could you please take a look at this component structure and API?

[kuzhelov]

have couple of questions that I would like to clarify:

• could you, please, suggest how it would be possible to pass some arbitrary content as tree's child (other than just plain string), like in the following case:

items: [
  <span dir='auto'>Hello from component!</span>,
  <span>for more info, click <button>here</button>
]

The only way how it could be achieved now seems to be the following:

items: [
  {
    title: <span dir='auto'>Hello from component!</span>
  },
  {
     title: <span>for more info, click <button>here</button>
  }

This syntax is quite verbose for achieving this simple task. Note that this problem might be alleviated by passing title property as a default one for TreeItem component:

TreeItem.create = createShorthandFactory(TreeItem, 'title')

---

• second question is about this line (and related comment): https://github.com/stardust-ui/react/pull/479/files#diff-560cfd0141d58538f8a5e7845f4ab0aeR84 (about the fact that there is no content prop defined for Tree component, but this one is used in a shorthand). Could you, please, suggest what is a resolution suggested for it?

Thank you!

[priyankar205]

@kuzhelov : I agree to your first point. I will update the code to TreeItem.create = createShorthandFactory(TreeItem, 'title')
For the second question: As the tree is represented by an 'ul' element which cannot have any child except 'li' no property can be mapped. I will update the code for that.

[kuzhelov]

this prop seems to be not used anywhere - am I missing something (please, just reference the line in code in that case)? Thank you

[priyankar205]

I had added a class. Got deleted in refactoring perhaps. Also it might be needed for accessibility props.

[kuzhelov]

so, if it is not used anywhere now, lets delete it - even if it will be used for accessibility later, we will add it. Lets limit the API to only those things that are necessary

[kuzhelov]

@priyankar205
thanks a lot for hour response. One moment that I still would like to clarify, though - the one that is related to the question of using content other than plain string for tree leafs.

While I totally agree that <ul> should contain only <li> elements, at the same time it is still valid that we could, at least in theory, provide some content that is more complex than plain string to this <li> element, right? Like in the following example:

<ul>
  <li> <span>I am not just a string</span> <li>
  <li> Me neither, click here if you disagree: <button>Disagree!</button> </li>
</ul>

So, to me it seems that current implementation is unable to handle these cases - in a sense, as I've already mentioned before, client will need to provide this content as a value for title prop, that is completely non-obvious (why header if semantics of this is a content). Please, just verify or object my assumptions, so that we would be able to have mutual understanding of where we are and what are the next steps that should be planned.

Thank you!

[priyankar205]

@kuzhelov We can handle these cases with the renderItemTitle function for now as in the second example. Also I see that other components like List also fail to handle these cases directly.