adobe / adobe/react-spectrum

Toast's "Show all" button text is truncated on some locales

Open
#9,598 2 comments 0 reactions 0 assignees View on GitHub
spectrum design
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Button labels are being cut off in specific languages, making them unreadable

Image

### 🤔 Expected Behavior?

Text should be readable across all locales

### 😯 Current Behavior

Text is getting truncated for the following locales:
`de-DE`, `ja-JP`, `nl-NL`, `bg-BG`, `hu-HU`, `pl-PL`, `ru-RU`, `sk-SK`, `tr-TR`, `uk-UA`, `el-GR`

### 💁 Possible Solution

One of the following options might be considered as a solution:
- Reduce the column gap
- Use shorter translations
- Add a tooltip

### 🔦 Context

Cut-off text makes it unreadable for international users and ruins the UX.

### 🖥️ Steps to Reproduce

1. Open s2 storybook
2. Select `Toast` component
3. Select German locale
4. Click **"Show Long Word Toast"** button twice

### Version

Latest

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Windows

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

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.