feat(select): define max-height and add variable to control it (#570)

juntossomosmais · Sep 12, 2024 · 7917638 · 7917638
1 parent 90ee9b5
commit 7917638
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/packages/core/src/components/select/stories/select.args.ts b/packages/core/src/components/select/stories/select.args.ts
@@ -147,6 +147,13 @@ export const SelectStoryArgs = {
         category: Category.EVENTS,
       },
     },
+    '--select-max-height': {
+      description: 'Add a custom max-height to the select list options.',
+      defaultValue: { summary: '250px' },
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
   },
 }
 

diff --git a/packages/core/src/global/global.scss b/packages/core/src/global/global.scss
@@ -77,6 +77,8 @@ Issue: https://github.com/ionic-team/ionic-framework/issues/27500
 */
 
 .select-popover {
+  --max-height: var(--select-max-height, 250px);
+
   &.atom-select__popover {
     .select-interface-option {
       --background-hover: var(--color-neutral-light-5);