Overview
Multi Activation with Submenu composable is a pre-composed and orchestrated component that unifies the semantics and behaviors of "multi selection" composable and "submenu" composable, as such most of the concerns and design choices of this composition must be inherited and expanded from the two other composables, with particular attention to how the selection behaves with the sub-menu hierarchy to maintain and guarantee semantic behavioral hierarchical interactions.
(deselecting this automatically deselect ANY selection at any depth of the sub-tree)
Design
Box Model
Resize/Reflow
[images]
Validity Criteria:
- Covers spacing and dimensions: Identifying spacing and dimensions to ensure pieces are A11Y compliant. Use min-width/min-height instead of height/width/max-height/max-width. Define padding/margins in PX, and min-width/min-height in relative measures.
- Covers responsive/adaptive layout: Given the box models, clearly identify how the layout adapts to breakpoints and responsiveness.
[Images]
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) font: b2 (typography-variant) single-checkmark-color: brand-800 (#005181) right-chevron-icon-color: brand-800 (#005181) |
| Focus |  | [vs standard idle] background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5) |
| Disabled |  | [vs standard idle] font-color: neutral-500 (#697489) cursor: disabled Single checkmark and right arrow disappears |
| Read-only | N/A (no required cases) | N/A |
| Hover |  | [vs standard idle] background: brand-200 (#EBF6FF) |
| Error | N/A (no required cases) | N/A |
Configurations
Left Decoration Icon
Configured with a left decoration icon for better understanding of various actions to be taken within the submenu.
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) font: b2 (typography-variant) single-checkmark-color: brand-800 (#005181) left-icon-color: brand-800 (#005181) right-chevron-icon-color: brand-800 (#005181) |
| (for IEs) Focus |  | [vs standard idle] background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5) |
| (for IEs) Disabled |  | [vs standard idle] font-color: neutral-500 (#697489) left-icon-color: neutral-500 (#697489) cursor: disabled Single checkmark and right arrow disappears |
| Read-only | N/A (no required cases) | N/A |
| Hover |  | [vs standard idle] background: brand-200 (#EBF6FF) |
| Error | N/A (no required cases) | N/ |
Secondary Text Label
Configured with a secondary text label.
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) font: b2 (typography-variant) secondary-label-font: b2 (typography-variant) font-color: neutral-700 (#353C46) font-style: italic single-checkmark-color: brand-800 (#005181) right-chevron-icon-color: brand-800 (#005181) |
| Focus |  | [vs standard idle] background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5) |
| Disabled |  | [vs standard idle] font-colors: neutral-500 (#697489) cursor: disabled Single checkmark and right arrow disappears |
| Read-only | N/A (no required cases) | N/A |
| Hover |  | [vs standard idle] background: brand-200 (#EBF6FF) |
| Error | N/A (no required cases) | N/A |
Left Decoration + Secondary Text Label
Configured with left decoration icon and secondary text label.
States
| State | Default Graphic | Default Styling |
|---|---|---|
| Idle |  | background: neutral-000 (#FFFFFF) font: b2 (typography-variant) secondary-label-font: b2 (typography-variant) font-color: neutral-700 (#353C46) font-style: italic single-checkmark-color: brand-800 (#005181) left-icon-color: brand-800 (#005181) right-chevron-icon-color: brand-800 (#005181) |
| Focus |  | [vs standard idle] background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5) |
| Disabled |  | [vs standard idle] font-colors: neutral-500 (#697489) left-icon-color: neutral-500 (#697489) cursor: disabled Single checkmark and right arrow disappears |
| Read-only | N/A (no required cases) | N/A |
| Hover |  | [vs standard idle] background: brand-200 (#EBF6FF) |
| Error | N/A (no required cases) | N/A |
Use Cases
[UX to fill this with KNOW OF product scenarios that motivates this specific component]
| Original Scenario | Dimsum's version |
|---|---|
| [UX to add image of product use-case] | [UX to add image of use-case proposed solution with dimsum components] |
| ... | ... |
Additional Examples
| hypothetical scenario graphic | hypothetical scenario solution | hypothetical scenario description |
|---|---|---|
| [UX to add image of hypothetical use-case that could benefit from this component/variant] | [UX to add image of hypothetical use-case valuable proposed solution] | [UX to add an text based description/guidance of the scenario] |
| ... | ... | ... |
Digital Accessibility
Objective: Outline the component's compliance with WCAG 2.1 AA accessibility standards.
Variants
Objective: Provide an exhaustive list of the expected and available graphical variations that the component can take out-of-the-box, officially supported by the Dimsum team. Each variant's will then be created as a sub document but the this document should provide the quick-resume of each variants main points.
- Variant Name 1 (Provide link)
- Variant Name 2 (Provide link)
- Variant Name 3 (Provide link)
Usage Warnings
Objective: Address common errors or misunderstandings related to the component's use or implementation.
A component may have obvious potential to be used incorrectly by UX or product. It is possible there are common implementation pitfalls for app devs as well. List these below with complete references and rationale.
Pitfalls & Misconceptions
Implementation of interactive components within the card should enhance user experience without compromising the card’s core function as a structured and clear content container. Use interactive buttons, icons, toggles and images only when necessary in order to maintain a intuitive and easy-to-use experience.
Reference
Objective:List external references, guidelines, or documentation that provide further context or information about the component.