Investigate .p-list-tree--static compatibility with Vanilla v4.16.0

[jmuzina]

Overview

Vanilla is currently working on some changes to the list tree component, that should be released in version 4.16.0 (pending PR review).

We have noticed that maas-ui has some custom list tree styling, defined here:

maas-ui/src/scss/_patterns_list-trees.scss

Lines 1 to 11 in 7aec6ed

	@mixin maas-list-trees {
	// Display a list tree without any styling for handling opening and closing
	// items.
	.p-list-tree--static {
	display: block !important;
	.p-list-tree--static::after {
	display: none !important;
	}
	}
	}

and used here:

maas-ui/src/app/controllers/views/ControllerDetails/ControllerSummary/ServicesCard/ServicesCard.tsx

Lines 108 to 111 in 7aec6ed

	<ul
	className="p-list-tree p-list-tree--static u-no-margin--bottom"
	role="tree"
	>

We want to make sure your upgrade to Vanilla v4.16.0 does not change the functionality of the UI, so we are highlighting this to make you aware of the incoming changes so that we can collaborate on your upgrade.

What is changing?

1. We have created a new class .p-list-tree__link that is applied to <a> links inside of .p-list-tree__item. This enhances keyboard accessibility by ensuring that you can tab to every node in the tree, which you cannot do currently.
2. We have updated the list tree script to apply .is-active to .p-list-tree__link and .p-list-tree__toggle elements to give them active link styling. This improves interactivity by highlighting the active node better.
3. We have modernized the design slightly, following the design of modern OS file explorers. Chevrons are now used instead of +/- icons, and we have removed the nesting lines between levels of the tree.

• a. We have updated how the expand/collapse buttons on tree groupings behave. Previously, the collapse button was drawn on top of the expand button, hiding it with z-index (though both buttons existed on the page). Now, the expand button is not drawn when a node is expanded.

What needs to change?

As far as I currently understand MAAS UI's usage of the list tree, the only change that may be needed to maintain existing functionality is to address point (3a) above. With no action, the expand/collapse chevrons on static list trees couls toggle as the user clicks items, instead of being truly static. The below change could be used to force expand icons to be always visible:

  // MAAS UI static tree styling (`.p-list-tree--static`)
  .p-list-tree--static {
    // Force the entire tree to be visible
    display: block !important;

    // Replace expand button with collapse button
    // This is only needed if you are running a script, like react components, that changes the `aria-hidden` of the `.p-list-tree`.
    .p-list-tree--static::before {
      @extend %list-tree-collapse-icon;
    }
  }

Updates needed for the other numbered changes listed above are optional, and listed below:

1. Wrap the contents of all .p-list-tree__item elements inside an a.p-list-tree__link, like this:

<li class="p-list-tree__item" role="treeitem">
    <a class="p-list-tree__link" href="#" tabindex="0">
      {{ link_text }}
    </a>
 </li>

2. Apply .is-active class to the active tree node, using this script. Note: comment out any code that sets aria-hidden, as this will cause the expand chevron to become visible, which is not desired for the static list tree.

When does this need to change?

This update is not currently urgent, but will block upgrading to Vanilla v4.16.0 once it releases.

How should this be changed?

We should discuss the use case for .p-list-tree--static and what changes are needed. I'm not sure how to access MAAS UI or how to run it locally, so I'll need to get it running locally to investigate it further.

I have made a PR that shows how this markup and custom styling might work together to address point 3, which allows us to use this demo to demonstrate how the static list tree should look.

[jmuzina]

Will investigate this this week, as 4.16.0 has now been released.