carbon-components-svelte
Version:
Svelte implementation of the Carbon Design System
52 lines (47 loc) • 1.62 kB
JavaScript
/**
* Max height values for listbox/dropdown menus by size.
* @type {Readonly<{ xs: string; sm: string; md: string; lg: string; xl: string }>}
*/
export const MENU_MAX_HEIGHT = Object.freeze({
xs: "8.25rem",
sm: "11rem",
md: "13.75rem",
lg: "16.5rem",
xl: "16.5rem",
});
/**
* Get the max height for a listbox/dropdown menu based on size.
* @param {"xs" | "sm" | "md" | "lg" | "xl"} [size] - The size variant
* @returns {string} The max height in rem units
*/
export function getMenuMaxHeight(size = "md") {
return MENU_MAX_HEIGHT[size];
}
/**
* Menu item heights (px) by size. Matches `.bx--list-box__menu-item` in
* carbon-components (xs 1.5rem, sm 2rem, md 2.5rem, lg/xl 3rem).
* @type {Readonly<{ xs: number; sm: number; md: number; lg: number; xl: number }>}
*/
export const MENU_ITEM_HEIGHT = Object.freeze({
xs: 24,
sm: 32,
md: 40,
lg: 48,
xl: 48,
});
/**
* Fluid menu item height (px). Matches `$spacing-10` (4rem) on
* `.bx--list-box__menu-item` in css/_fluid-list-box.scss. Same height for every
* size; condensed fluid uses the size-based heights in MENU_ITEM_HEIGHT.
*/
export const FLUID_MENU_ITEM_HEIGHT = 64;
/**
* Get the menu item height in pixels for a listbox/dropdown.
* @param {"xs" | "sm" | "md" | "lg" | "xl"} [size] - The size variant
* @param {{ fluid?: boolean }} [options] - Pass `fluid: true` for FLUID_MENU_ITEM_HEIGHT
* @returns {number} The item height in pixels
*/
export function getMenuItemHeight(size = "md", { fluid = false } = {}) {
if (fluid) return FLUID_MENU_ITEM_HEIGHT;
return MENU_ITEM_HEIGHT[size] ?? MENU_ITEM_HEIGHT.md;
}