adobe / adobe/spectrum-web-components
[Bug]: Tooltip max-width overrides --mod variable
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] I agree to follow this project's code of conduct.
### Impacted component(s)
tooltip
### Library version
1.7.0
### Expected behavior
Tooltips should respect the mod variable `--mod-tooltip-max-inline-size` custom property when defined, allowing consumers to override the default spectrum tooltip max width.
### Actual behavior
The `max-width` property in `packages/tooltip/src/tooltip.css` was overriding the `--mod-tooltip-max-inline-size` variable, preventing custom max-width values from being applied.
### Screenshots
_No response_
### What browsers are you seeing the problem in?
Firefox, Chrome, Safari
### How can we reproduce this issue?
1. Go to https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/tooltip--default
2. Inspect the element
3. Add `--mod-tooltip-max-inline-size` to `sp-tooltip`
4. Check the width doesn't override
### Sample code or abstract reproduction which illustrates the problem
Tooltip max-width is defined in tooltip.css here: `https://github.com/adobe/spectrum-web-components/blob/main/packages/tooltip/src/tooltip.css#L23`
max-inline-size with a mod token is defined in spectrum-tooltip.css here: `https://github.com/adobe/spectrum-web-components/blob/main/packages/tooltip/src/spectrum-tooltip.css#L88`
### Severity
SEV 4
### Logs taken while reproducing problem
_No response_
### Would you like to track this issue in Jira?
- [ ] Yes, please tell me the ticket number!
Contributor guide
Assessment
This issue has not been assessed yet.