airbnb / airbnb/react-sketchapp
<Text> does not support numberOfLines or ellipsizeMode
- Dominant language
- TypeScript
- Stars
- 14.9k
- Forks
- 797
- PR merge metrics
- No merged PRs in 30d
Description
👋 Hello! Thanks for contributing. Please use the template that matches your intention
_I am..._
| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| -------------------------------------------------------------------------------------------------
NB: This is more for bookmarking purposes, it took me a while to uncover that Sketchapp does not support overflow/ellipsis, and felt that creating an issue would allow other people a shortcut.
**Expected behavior:**
React Native supports text truncation using a combination of ```numberOfLines``` and ```ellipsizeMode```.
**Observed behavior:**
These properties have no effect in Sketch, because the Sketch application doesn't support them.
The `````` component supports a ```resizeConstraints``` property with booleans of top, bottom, left, right, fixedWidth and fixedHeight, and although these have an effect on the containing element, they don't prevent the text from overflowing from the element and affecting element position (when combined with style height/width).
In the screenshot, I've highlighted the long text which has been wrapped to a second line. Note also the text properties which show the resizing constraint (height) and the height of 30 specified via the ```style={{height:30}}```.
**How to reproduce:**
NB: No point in passing ```numberOfLines={1}``` or ```ellipsizeMode={'head'|'tail'|'middle'}``` as [they are not passed to the underlying text component](https://github.com/airbnb/react-sketchapp/blob/537ced5562ac67f877b53f40167a5f2148664a4a/src/components/Text.js#L40-L51).
```js
Home and away this is a very long project title
```
**Sketch version:**
48.2
**Please attach screenshots, a zip file of your project, and/or a link to your github project**

Contributor guide
Research direction
Start at src/components/Text.js lines 40-51, where the issue says numberOfLines and ellipsizeMode are not passed to the underlying text component. Check how the height and resizingConstraint example behaves in Sketch 48.2, then determine whether the requested truncation can be supported; done means the documented properties affect the rendered text without the reported overflow.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, react-native, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100