Skip to content

LabeledSelect: add size prop for medium (32px) variant #18296

Description

@rushk014

Is your feature request related to a problem? Please describe.
UX has recently standardized table control heights (bulk action buttons, group-by buttons, filter inputs) to 32px. Extensions that place custom filter controls — such as LabeledSelect dropdowns — above tables need a way to match this height. Currently LabeledSelect only renders at the default 40px unlabeled height, with no way to opt into a smaller size.

Image

Describe the solution you'd like
Add a size prop to LabeledSelect accepting 'small' | 'medium' | 'large' (default 'large'). When size="medium" is used in no-label mode, the component renders at 32px height with properly centered text and chevron. The size prop needs only apply in no-label mode to support current UX usage — labeled mode height is driven by a different layout mechanism and likely requires a full component rework.

Describe alternatives you've considered
Extensions could override the height via scoped CSS in their own components, but this is fragile — it requires deep knowledge of the internal vue-select DOM structure and duplicating the same set of overrides (toggle height, icon centering, margin resets) across every extension that needs the smaller size. Centralizing it in LabeledSelect is cleaner.

Additional context
This change was driven by the table action resize work in the dashboard (#18109). The security-ui-exts repo uses custom filter rows containing LabeledSelect above tables in the Vulnerability Scanner and needs to align with the new 32px standard.

Metadata

Metadata

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions