search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
285 stars 76 forks source link

ActionMenu: Should have a max height set #8274

Closed driskull closed 10 months ago

driskull commented 10 months ago

Check existing issues

Description

Restrict the action menu to 45vh max height to be consistent with the dropdown component.

Acceptance Criteria

Scrollbars should appear if action menu is larger.

Relevant Info

No response

Which Component

action-menu

Example Use Case

No response

Priority impact

p2 - want for current milestone

Calcite package

Esri team

ArcGIS Maps SDK for JavaScript

github-actions[bot] commented 10 months ago

Installed and assigned for verification.

geospatialem commented 10 months ago

Verified the action-menu is set to a max height of 45vh in 1.12.0-next.6 with the following:

<calcite-action-menu open>
      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
    </calcite-action-menu>