[DEMO]: MAAS UI List Tree Fix

[jmuzina]

Done

This PR includes the changes from #5270, as well as updates to the custom styling from MAAS UI so that their .p-list-tree--static can be made compatible with our changes to the list tree.

This PR should NOT be merged into Vanilla - it is purely for demonstrative purposes for MAAS UI devs.

Note: this is based on #5270, so includes its changes. The interesting stuff is this:

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

    // Always show the 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;
    }
    // Hide the default expand button
    .p-list-tree__toggle::before {
      display: none;
    }
  }

and the lack of toggling aria-hidden on .p-list-tree elements with JS for the maas tree example.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

@jmuzina Is this still needed?

[jmuzina]

@jmuzina Is this still needed?

Yes, I haven't had the time yet to make this fix on maas-ui side and they are still on a rather old version of Vanilla, so it hasn't been a priority yet. Also, I've been having issues running maas-ui locally that I haven't resolved. But, it may be easier to get the ball rolling this way:

@ndv99 can you let me know what the priority is on updating maas UI to Vanilla 4.16.0, and try out the updates to .p-list-tree--static shown in this PR while changing your version of Vanilla to 4.16.0? It should update your static list trees to the new visuals without altering their behavior.

[ndv99]

@jmuzina Is this still needed?

Yes, I haven't had the time yet to make this fix on maas-ui side and they are still on a rather old version of Vanilla, so it hasn't been a priority yet. Also, I've been having issues running maas-ui locally that I haven't resolved. But, it may be easier to get the ball rolling this way:

@ndv99 can you let me know what the priority is on updating maas UI to Vanilla 4.16.0, and try out the updates to .p-list-tree--static shown in this PR while changing your version of Vanilla to 4.16.0? It should update your static list trees to the new visuals without altering their behavior.

I've just put up a draft PR to upgrade Vanilla on maas-ui from 4.13 to 4.16: https://github.com/canonical/maas-ui/pull/5541Just waiting to get some CI results back and then I can give you a more accurate idea of how long it'll be. Happy to test this change in the mean time though!

And if you're struggling to get maas-ui running locally, we've recently updated our docs for how to get it running!

[ndv99]

Also, for reference - we have one list tree in MAAS UI (to my knowledge), this is what it looks like before the fix is added (and vanilla upgraded):

And this is what it looks like after:

And if I comment out this line:

  .p-list-tree--static::before {
    @extend %list-tree-collapse-icon;
  }

I'll probably leave this line out in MAAS UI since we don't need to collapse this list tree, it's purely for controller status information. CI is looking good on the Vanilla upgrade PR, so we should be able to get that merged soon!

[jmuzina]

Closing as not needed since the changes here aren't really needed to get the MAAS UI list tree to work.