Calcite-components: New Component: FlowMenu and FlowMenuItem

[asangma]

Description

Items used to indicate a list of drill-in items.
Currently, users can create this type of interaction using value-list, but there it's too easy for the UI to vary across different implementations.

This UX will likely be seen more broadly.

Also, usage of things like a single "FlowMenuItem" is already happening.

Maybe it's more generic e.g. "DrillinMenu" and "DrillinMenuItem" but you might already see on issue with that. Also, it should generally be used with Flow and FlowItem.

User Stories

Multi-level interfaces.

Acceptance Criteria

Support

• label
• description
• icon
• slot in start position (e.g. for small thumbs or whatever)

Out of Scope

Helpful Details

And example of this UX in Charts.

[macandcheese]

This would be a good addition, I know Home page editor has designs around a drill-in pattern like this, I see value in a generic one (or at least available to be used outside of a flow context).

[bstifle]

@asangma agreed this is good, but can we make the > icons 16px?

[bstifle]

also, assuming these will be able to handle summary, and a support icon, and be able to flip sides from start-to-end? or would there be no flippage?

< Text might look like the opposite of drill in

[asangma]

@bstifle

Thanks for helping clarify deets.

• summary: yes though named "description"
• icon: yes (probably only on the start side)
  
  
  
  • maybe also include a slot on the start side to put whatever in there, e.g. a 48px thumb
  
  
• flip : no, but maybe there's a use case for this?

[bstifle]

perfperfperf

[asangma]

@driskull @macandcheese @jcfranco
Should this be a wrapper for ~PickList and PickListItem~ the yet-to-be-built CalciteList and CalciteListItem?

[asangma]

This project might be dependent on #2117

[driskull]

Should this be more generic like ListMenu and ListMenuItem? Does it need to be tied to flow? I'm thinking it might have uses outside of the flow component.

[macandcheese]

Should this be more generic like ListMenu and ListMenuItem? Does it need to be tied to flow? I'm thinking it might have uses outside of the flow component.

Agreed. This kind of pattern is commonly called a drillin or drilldown:

https://get.foundation/sites/docs/drilldown-menu.html

[asangma]

Related #2117

[asangma]

@driskull

Does it need to be tied to flow?

It might be useful to have a basic FlowMenuItem wrapper around ListItem.
As we can see in the example above, we can quickly see inconsistencies in something as simple as the size of the chevron icon. Might also be useful to have a "flow" or "drill-in" event...?

[driskull]

@asangma what I mean is that it doesn't need to be called "calcite-flow-menu". It can be more generic like "calcite-drill-in"

[macandcheese]

@asangma what I mean is that it doesn't need to be called "calcite-flow-menu". It can be more generic like "calcite-drill-in"

Yes... we should take every opportunity to use human-readable / standard UX nomenclature for our components. Someone new to the system will be looking for "drill-in" not "flow-menu-item".

[driskull]

Yeah, it's one of the issues I have with ValueList/PickList => they are not standard UI terms.

[julio8a]

Yeah, it's one of the issues I have with ValueList/PickList => they are not standard UI terms.

Can we standardize these and make the names more approachable before 1.0?

Cc'ing @jcfranco

[jcfranco]

☝🏼 Yeah, we should definitely target component renames before 1.0.0 since they're trickier to maintain in a non-breaking fashion.

Can we create an issue to collects all rename candidates and try to do them in a sprint before 1.0.0?

[julio8a]

Yes, @macandcheese and @bstifle can work on it. Bryan and Adam, please create an issue for this and work on new name proposals for components that need updating.

Franco and I will triage for a sprint.