dgreene1 / react-accessible-treeview

A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.
https://dgreene1.github.io/react-accessible-treeview
MIT License
277 stars 37 forks source link

How do add classes to the leafListItem (li element) #175

Closed davecarlson closed 5 months ago

davecarlson commented 7 months ago

Describe the bug Cannot style at the

  • level

    Code That Causes The Issue Missing option

    To Reproduce Create a default TreeView

    Expected behavior prop to liClassName

    Would it be possible to expose a prop that allows us to inject a classname into each of the

  • components ? Rational - we use tailwind for styling, and want to be able to alernate the colours of the rows. At the moment we cannot do this without writing raw css on the .tree-branch-wrapper , as the nodeRender is one level down the tree, so nth-child(odd), even etc will not work as there's only one node at that level:

    
    <ul
      class="tree"
      role="tree"
      aria-multiselectable="false"
      aria-label="location treer"
    >
      <li
        role="treeitem"
        aria-expanded="true"
        aria-setsize="2"
        aria-posinset="1"
        aria-level="1"
        aria-disabled="false"
        tabindex="0"
        class="tree-branch-wrapper"
      >
        <div
          class="tree-node tree-node--expanded tree-node__branch"
          style="padding-left: 0px"
        >
        Node
    </div>
    </li>
    </ul>
  • dgreene1 commented 7 months ago

    We’re open to a PR, but our core team doesn’t have this need so we wouldn’t be writing the PR ourselves to due internal company priority.

    stale[bot] commented 5 months ago

    This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

    stale[bot] commented 5 months ago

    This issue was closed automatically since it was marked as stale because it has not had recent activity. Thank you for your contributions.