maxWidth props does propagate till span of tooltip
- 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
maxWidth props which we pass in tooltip component reaches to the div an accommodating the width provided but in the span in which text is rendered stays intact to
```
.spectrum-Tooltip-label {
max-inline-size: var(--spectrum-tooltip-content-max-width);
}
```
Causing the text to wrap unexpectedly.
### 🤔 Expected Behavior?
maxWidth props should propagate till the span
### 😯 Current Behavior
maxWidth props which we pass in tooltip component reaches to the div an accommodating the width provided but in the span in which text is rendered stays intact to
```
.spectrum-Tooltip-label {
max-inline-size: var(--spectrum-tooltip-content-max-width);
}
```
### 💁 Possible Solution
_No response_
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
```
{readOnlyButtonMessage}
```
It renders as:
```
読み取り専用フィールドを表示
```
The issue: the text in the tooltip is wrapping, and it looks like the maxWidth isn't properly applied to the inner (spectrum-Tooltip-label).
That span has this style:
```
.spectrum-Tooltip-label {
max-inline-size: var(--spectrum-tooltip-content-max-width);
}
```
But --spectrum-tooltip-content-max-width doesn’t seem to inherit the value from maxWidth="size-3000".
### Version
Spectrum 2
### What browsers are you seeing the problem on?
Other
### If other, please specify.
All
### What operating system are you using?
Mac
### 🧢 Your Company/Team
Adobe
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.