Clay: [New] DropDown with DrillDown Support Component

[matuzalemsteles]

Lexicon covers the case of nested DropDowns using DrillDown, we should consider whether we will need to build a new component to cover just this case or if we can adapt DropDown's low-level components to support this case.

Ticket: https://issues.liferay.com/browse/LEXI-377
CSS/Markup: http://pat270.github.io/lexicon/v2.16.2/content/dropdowns-drill-down/ *

*Once we have an implementation of this case, we should migrate this documentation to clayui.com as well.

We don't have to run into this, we don't have actual use cases within the Portal yet for all I know. Then we can evaluate calmly.

API Design Overview

This is a bit of what I'm imagining to support this, we should test if this will work well.

<ClayDropDown drilldown={true}>
    <ClayDropDown.DrillDownItem>
        <ClayDropDown.ItemList>
            <ClayDropDown.Item toDrillDown={1}></ClayDropDown.Item>
        </ClayDropDown.ItemList>
    </ClayDropDown.DrillDownItem>
    <ClayDropDown.DrillDownItem>
    </ClayDropDown.DrillDownItem>
</ClayDropDown>

• The prop drilldown is responsible for adding DrillDown utility classes so that everything works fine.
• The <ClayDropDown.DrillDownItem /> component is responsible for encapsulating each DropDown content, this will make it easier to create the animations.
• The toDrillDown prop (may be another friendlier name) is responsible for linking DrillDown and running the animation.

There are other strategies here that we should try, the element reference for navigating between DrillDowns can be controlled using a state that keeps DrillDown active, so you don't need to have a toDrillDown prop.

We can test if a custom hook is needed if we don't want to add internal logic to <ClayDropDown /> so as not to bloat the component with too many responsibilities, its idea is to be simple.

const {drillDown, setDrillDown} = useDrillDown(0);

<ClayDropDown drilldown={true} currentDrillDown={drillDown}>
    <ClayDropDown.DrillDownItem default>
        <ClayDropDown.ItemList>
            <ClayDropDown.Item onClick={() => setDrillDown(1)}></ClayDropDown.Item>
        </ClayDropDown.ItemList>
    </ClayDropDown.DrillDownItem>
    <ClayDropDown.DrillDownItem>
    </ClayDropDown.DrillDownItem>
</ClayDropDown>

• useDrillDown can handle state change and browsing history, we should be able to navigate back and forth.

[jbalsas]

Added to https://github.com/liferay/clay/milestone/15 so we can move with implementation for this

[kresimir-coko]

Hey @matuzalemsteles
One thing that's unclear to me is that in the linked ticket the drilldown happens on hover, whereas on @pat270 test site the interaction happens on click.

Which interaction should the component support?

[matuzalemsteles]

Oh @kresimir-coko I didn't notice this, @drakonux can you clarify this for us?

[drakonux]

Hey guys, that ticked I made doesn't have a solid definition. It was a basic proposal I made when I was working on lima-team. In fact, in that time I was requesting a cascading menu and Lexicon decided to go for a drill-down menu instead.

Anyway, the right interaction for a drill-down menu is on click as Patrick did on the test site.

[jbalsas]

Hey @drakonux, I've created https://issues.liferay.com/browse/LEXI-871 so you can properly study and define the pattern. @kresimir-coko, @bryceosterhaus, let's hold off implementation until we have a final say on the pattern definition.

[drakonux]

👍 Thanks, @jbalsas we will work on it the next sprint.

[jbalsas]

Removing from milestone, will take it for a later tour when definition is done

[kresimir-coko]

Is this issue fixed in #3489 ? @bryceosterhaus @jbalsas @matuzalemsteles

[matuzalemsteles]

I think we can close this issue as it was directed to DropDown but we still need to add DrillDown low-level to support other cases.