[EuiSelectable] Add compressed prop

Open Beginner friendly
#9,172 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start by locating EuiSelectable and reviewing how EuiComboBox and EuiSuperSelect expose and implement their compressed prop. Confirm the expected compressed appearance and behavior from those components and the linked design context, then verify that EuiSelectable supports the same usage consistently.

Written by the indexing model from the issue text.

Description

request stale-issue

Problem Statement

some of our components, eg EuiComboBox, EuiSuperSelect have prop compressed
To be consistent in our pages, I expect that EuiSelectable also has it, but it dont

Proposed Solution

do the same as other components

Use Case

Opex autoops

Value / Impact

to be consistent

Urgency

It is urgent, some our components already compressed

It is not high priority. It's a nice-to-have for consistency. The other components have been reverted to non-compressed for consistency across pages.

Do alternatives or workarounds exist?

  • Reverting to non-compressed when EuiSelectable is used with other components that do support smaller size.

Additional context (Optional)

(https://elastic.slack.com/archives/C7QC1JV6F/p1762241288529209)

Designs or Specs (Optional)

Non-final designs: https://www.figma.com/design/wNzNpBXzNTuoOWGacTAxxd/AutoOps--Angular-%E2%86%92-React?node-id=1086-55866&t=k8SNcJO5Wvef1JYO-0

Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
76

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from elastic/eui

All issues in elastic/eui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.