elastic / elastic/eui

[EuiInlineEditText] Option to not truncate text

Open
#8,781 3 comments 0 reactions 0 assignees View on GitHub
stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Problem Statement**

EuiInlineEditText always truncates text. There are cases where users want editable text, but do not want it to be truncated.

**Proposed Solution**

A potential solution is to provide a prop like `truncate=false`.

**Use Case**

Observability Solution > Management UX. Wanted to use this in the "description" field of an EuiPageHeader.

Requested by @kdelemme.

**Value / Impact**

It's not widely useful. This component is not used a lot and there's only one known location where this is needed, at this time.

**Urgency**

This is not urgent, there is a workaround for now with custom CSS overrides.

**Do alternatives or workarounds exist?**

This is the current workaround we've put together. It's a lot of overriding and likely prone to break if we tweak the styles in EuiEmptyButton in the future.

```

```

https://codesandbox.io/p/sandbox/trusting-mendeleev-cwtvrc?file=%2Fdemo.tsx

![Image](https://github.com/user-attachments/assets/87e32c1a-04e3-4e87-b5f5-f9e32edc8d34)

**Related code or customizations**

Used in https://github.com/elastic/kibana/tree/main/x-pack/platform/plugins/shared/streams_app/public/components/stream_detail_view

**Additional context (Optional)**

**Designs or Specs (Optional)**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.