Create details component

[jholt1]

Outcome

To create a component that shows and hides content related to a heading

Scope

Properties

• type
• open

Tokens

• icon-open
• icon-close
• icon-position
• type

Slots

• heading
• anonymous

States

• hover
• focused
• active
• default open
• default closed

Events

• toggle

Mixins

• Detail Mixin

HTML Templates

• heading
• content / panel
• icon

[RobTobias123]

As discussed with DRew, here's the cues I've created for the different states and scenarios for an expander component, that could make up an accordion from multiples of the. There are default, hover and focus states, text, icon start, icon end, and RTL variants.

A couple of things to keep in mind is that some RTL languages may have issues with underlined text - such as Arabic where it might interfere with some of the lower 'dots' (I'm afraid I don't know their correct name). Also, to be aware of different line widths and line-heights due to the nature of the character set and translations. Apparantly, Arabic words cannot be shortened so FAQs would need to be written أسئلة مكررة and not FAQ.

[andij]

Hi @RobTobias123

Could the grey border on the top and bottom be removed? I ask due to the extra CSS complexity these borders introduce.

[RobTobias123]

Hi @andij, I've modified the Skecth file to be without the top and bottom separators as you mentioned to see how it might work on context – and I think it works OK as we have retained the spacing. I also took a look at the Gov design system to see how they do things (as it's B&W and simple) and they put the heading in focus state once clicked. I've taken the same idea and done it Muon style here. What do you think? Do we need to add the background colour back in or is this simpler method better?

[RobTobias123]

@andij here's an example of one with the heading wrapping. The open paragraph of text below maintains its distance from the bottom of the last line of the heading whilst 1st line of heading remains centrally aligned with icons (ie. in the same space that a single line heading would be). It wraps at 10px before the chevron icon's bounding box (36px sq).

heading is 21px on 28 line-height in this example.

[andij]

Hi @RobTobias123, with regards to the note you added above about the focus state being present when the heading is clicked. (and citing: https://design-system.service.gov.uk/components/accordion/)

I have implemented a technique to avoid the focus state being displayed when a user interacts using a mouse pointer or touch. I am leveraging a recent pseudo class :focus-visible.

The only browser that does not support this feature (at the time of writing) is Safari. But it's available behind a feature flag. (Which indicates that it will be released in the future.) Let's check the state of the browsers at the time Muon is about to be used in production to see if this has been implemented in Safari. https://caniuse.com/?search=focus-visible

This allows us to avoid the traditional :focus state and only display a focus state when the interactive element is triggered with a device other than a mouse pointer or a touch.

References:
https://matthiasott.com/notes/focus-visible-is-here
https://www.tpgi.com/focus-visible-and-backwards-compatibility/
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

[RobTobias123]

FYI - I have updated the design in the Muon Sketch Library to use the sans-serif fonts and the functional icon has the same colour behaviour as links and buttons now too. The 'question' part has been H3 from the start, but I've not underlined it in this version on hover etc as it's not a 'link' style. – This appears to be consistent with other design systems out there (eg. Carbon) although we have removed the background colour change on hover - so will this still be enough indication with just the icon at Muon level? Personally, I think so, as it has a focus state and a functional icon - these should be enough visual cues for affordance and it will most likely be modified when branding is applied by the consumer.

@50% scale to fit screenshot...