nimble-accordion Component

[jattasNI]

😯 Problem to Solve

We want an accordion control which allows stacking several regions and allowing the user to collapse them to save space.

Here is an example in SystemLink Server's package-viewer, which uses mat-accordion. There is a proposal to bring this component to SLE for an app to manage notebook execution.

💁 Proposed Solution

• FAST component: https://explore.fast.design/components/fast-accordion
• Visual Design: #778

📋 Tasks

• [ ] nimble-accordion interaction design issue
• [ ] nimble-accordion interaction design spec
• [ ] nimble-accordion visual design issue
• [ ] nimble-accordion visual design spec
• [ ] #784
• [ ] nimble-accordion custom element
• [ ] nimble-accordion unit tests
• [ ] nimble-accordion Storybook tests
• [ ] nimble-accordion Storybook docs
• [ ] nimble-accordion Angular wrapper
• [ ] nimble-accordion Blazor wrapper
• [ ] Add to Angular example app
• [ ] Update Component Status table in README and incubating status

[jattasNI]

I saw another app that was considering using the accordion: page 45 of the UX spec (pw=UXDesign1) for Manage Routines shows a Properties pane to show info about the selected grid item and it shows collapsible sections.

However the dev spec says they're going in a different direction from the UX spec, so while the use case is valid it doesn't increase the urgency of this component.

[jattasNI]

Another client needs this for the Steps and PDV workflow:

[jattasNI]

Linking to #1150 since it tracks generating usage documentation for when to use the accordion.

[aidendk]

Leaving notes for the prototype accordion implementation I've been working on as I'll be finishing my internship today:

I've started work on a prototype for the nimble-accordion, which can be found in this branch. I've implemented the FAST component along with functionality for searching text inside of closed accordion items, appearance values that change every accordion item to the same appearance, an error-visible state for accordion items, and a disabled state. The expand mode has not yet been removed from the component, and instead relies on a function in the accordion index.ts that keeps the expand mode as multi regardless of the text value it has in the dev tools html attribute.

The disabled state is currently on the accordion-item, although it is unclear if we should allow one accordion item to be disabled and let other items in the accordion be active.

The styling for the accordion uses cascade layers with hierarchy, and is almost completely up to date with the designs in the Figma spec. However, these designs are outdated after a discussion regarding the placement of borders for the accordion as well as if accordion header appearances should be implemented. See this comment for more info. A MultiValuePropertyStyleSheetBehavior is currently used to apply different styles to the accordion items based on the appearance, and ::before pseudoelements for the accordion header and content sections are used to apply the border functionality correctly.

Tests have not yet been written, and Blazor / Angular integration has not been done.

Extras: As of writing this, the accordion spec is still in progress. It can be found [here]().

I demoed a WIP prototype of the accordion at the Intern showcase and many people seemed interested in the ability to have only one accordion item open at a time (FAST's single expand mode). Before making a solid decision to only allow the multi expand mode, more research on use cases for the single expand mode from other websites could be beneficial.

The design spec shows different types of nimble components inside accordions having specific heights, paddings, etc., but this functionality doesn't seem possible to implement as we don’t know what components users will put inside of the accordion.

Hopefully this helps a bit, and thanks to whoever picks up the accordion! 😄

[SPathani-NI]

I also need this component to replicate https://dashboard.ni.systems/dashboard/#/systems/system-logs (Log Retrieval Controls )

[atmgrifter00]

I also need this component to replicate https://dashboard.ni.systems/dashboard/#/systems/system-logs (Log Retrieval Controls )

@SPathani-NI, could you provide a screenshot of what you are referring to? The provided link does not work for me.

[jattasNI]

@atmgrifter00 you have to be on the NI network to view that app. Here are screenshots of the Log Retrieval Controls pane expanded and collapsed.

[atmgrifter00]

Based on that, @SPathani-NI, do you have any specific concerns about what is being proposed not providing the expected capabilities present in the Logs view? From what I can see, the noted differences between what's in the Logs viewer now, and what we are proposing are the following:

• The text in the header section will not have visual link semantics (no hover state changes, like color changing or underlining, or mouse cursor change...the text is not interactive).
• The header bar will have an expand/collapse indicator
• Clicking anywhere on the header will cause the expand/collapse behavior
• The header will have hover and focus visual states
• Unclear if there will be support to place an icon in front of the header text

Docs of interest:

• Visual Design: Note that this doc still contains some options for how we expect nested accordion items to be displayed.
• IxD PR: Still being reviewed, but should give an idea on how we expect interactions to work for the Accordion.

[SPathani-NI]

My main concern is the presence of component itself as right now without it we have to either use CSS based hiding which is not visually pleasing or use material component which we want to limit as much as possible. For my use case only the basic features would be enough.