Bug: calcite-flow-item shows header-trailing-content without having menu-actions

[AdelheidF]

Summary

In my field selection popover I have to use calcite-flow and calcite-flow-item. The calcite-flow-item should not show the header-trailing-content button, but it does, even though I don’t provide any menu-actions for the flow-item.

https://github.com/Esri/calcite-app-components/blob/master/src/components/calcite-flow-item/calcite-flow-item.tsx#L185

Looking at the code I noticed it looks for menu-actions on the entire component and inside that flow-item I use calcite-pick-list which has a calcite-dropdown in the header and that has a slot for menu-actions that I do use. The calcite-flow-item finds these and therefore shows the 3 dots.

Actual Behavior

Expected Behavior

Reproduction Steps

https://devext.arcgis.com/apps/mapviewer/index.html

Relevant Info

[AdelheidF]

Looks good now.

[driskull]

Reopening this issue because it doesn't work correctly in Edge.

[driskull]

We may need to introduce a breaking change to rename slot=menu-actions in the PickList & ValueList or FlowItem. querying for if the slot exists becomes problematic if these components are nested and the workaround is problematic because of the way the polyfill works vs shadowRoot. We may want to start making our slot names unique for components that may nest other components.

there’s no easy way to tell if the slot is in the place its supposed to be because Edge/shadowDom placement is different. In Edge, its lightDom so its in a different place whereas shadowDom the slot is a child of the component.

[AdelheidF]

I use it in 2 places, please let me know the morning of the release.

[driskull]

Another option is we rely on the developer telling us whether to show the menu button or not.

Instead of relying on const menuActionsNode = this.el.querySelector("[slot=menu-actions]"); we have a property show-menu-actions?

[driskull]

Here is a basic repro case to see the issue. The fix in the PR above addresses it.

<calcite-flow-item heading="What are the most popular commute alternatives?">
            <div>
              <h2>Content</h2>
              <calcite-pick-list>
                <calcite-action slot="menu-actions" indicator label="Cool" text="Cool"
                  ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 4H2V3h12zm0 4H2v1h12zm0 5H2v1h12z" />
                  </svg>
                </calcite-action>
              </calcite-pick-list>
            </div>
          </calcite-flow-item>

[AdelheidF]

Still works with 4.5.0 in Chrome