diff --git a/plugins/ui/DESIGN.md b/plugins/ui/DESIGN.md index a50bc1912..232dab0f5 100644 --- a/plugins/ui/DESIGN.md +++ b/plugins/ui/DESIGN.md @@ -1247,11 +1247,13 @@ ui.list_view( *children: Item | Table, key_column: ColumnName | None = None, label_column: ColumnName | None = None, + density: Density | None = "COMPACT", description_column: ColumnName | None = None, icon_column: ColumnName | None = None, actions: ListActionGroupElement | ListActionMenuElement | None = None, default_selected_keys: Selection | None = None, selected_keys: Selection | None = None, + selection_mode: SelectionMode | None = "MULTIPLE", render_empty_state: Element | None = None, on_selection_change: Callable[[Selection], None] | None = None, on_change: Callable[[Selection], None] | None = None, diff --git a/plugins/ui/src/deephaven/ui/components/list_view.py b/plugins/ui/src/deephaven/ui/components/list_view.py index fdebf095b..a44353186 100644 --- a/plugins/ui/src/deephaven/ui/components/list_view.py +++ b/plugins/ui/src/deephaven/ui/components/list_view.py @@ -9,7 +9,7 @@ from .list_action_menu import ListActionMenuElement from ..elements import BaseElement, Element from .._internal.utils import create_props -from ..types import ColumnName, Stringable, Selection, SelectionMode +from ..types import ColumnName, Density, Stringable, Selection, SelectionMode ListViewItem = Union[Stringable, ItemElement] ListViewElement = Element @@ -19,6 +19,7 @@ def list_view( *children: ListViewItem | Table, key_column: ColumnName | None = None, label_column: ColumnName | None = None, + density: Density | None = "COMPACT", description_column: ColumnName | None = None, icon_column: ColumnName | None = None, actions: ListActionGroupElement | ListActionMenuElement | None = None, @@ -45,6 +46,8 @@ def list_view( label_column: Only valid if children are of type Table. The column of values to display as primary text. Defaults to the key_column value. + density: + Sets the amount of vertical padding within each cell. description_column: Only valid if children are of type Table. The column of values to display as descriptions. diff --git a/plugins/ui/src/deephaven/ui/types/types.py b/plugins/ui/src/deephaven/ui/types/types.py index 81d0a291d..ee6948a87 100644 --- a/plugins/ui/src/deephaven/ui/types/types.py +++ b/plugins/ui/src/deephaven/ui/types/types.py @@ -139,6 +139,6 @@ class RowDataValue(CellData): ZonedDateTimeConvertible, ] Granularity = Literal["DAY", "HOUR", "MINUTE", "SECOND"] - +Density = Literal["COMPACT", "NORMAL", "SPACIOUS"] Dependencies = Union[Tuple[Any], List[Any]] Selection = Sequence[Key] diff --git a/plugins/ui/src/js/src/elements/useListViewProps.ts b/plugins/ui/src/js/src/elements/useListViewProps.ts index 356843c0a..b2e2e76e5 100644 --- a/plugins/ui/src/js/src/elements/useListViewProps.ts +++ b/plugins/ui/src/js/src/elements/useListViewProps.ts @@ -8,14 +8,20 @@ import { useSelectionEventCallback, } from './spectrum/useSelectionEventCallback'; +type Density = Required['density']; + type WrappedDHListViewJSApiProps = Omit & { children: ReactElement; }; -type WrappedDHListViewProps = Omit & { - // The dh UI spec specifies that selectionMode should be uppercase, but the - // Spectrum prop is lowercase. We'll accept either to keep things more - // flexible. +type WrappedDHListViewProps = Omit< + DHListViewProps, + 'density' | 'selectionMode' +> & { + // The dh UI spec specifies that density and selectionMode should be uppercase, + // but the Spectrum props are lowercase. We'll accept either to keep things + // more flexible. + density?: Density | Uppercase; selectionMode?: SelectionMode | Uppercase; }; @@ -42,19 +48,21 @@ export type SerializedListViewProps = ( * @returns Wrapped props */ export function useListViewProps({ + density, selectionMode, onChange, onSelectionChange, ...otherProps }: SerializedListViewProps): DHListViewProps | WrappedDHListViewJSApiProps { - const selectionModeLc = (selectionMode?.toLowerCase() ?? - 'none') as SelectionMode; + const densityLc = density?.toLowerCase() as Density; + const selectionModeLc = selectionMode?.toLowerCase() as SelectionMode; const serializedOnChange = useSelectionEventCallback(onChange); const serializedOnSelectionChange = useSelectionEventCallback(onSelectionChange); return { + density: densityLc, selectionMode: selectionModeLc, onChange: serializedOnChange, onSelectionChange: serializedOnSelectionChange,