airbnb / airbnb/react-sketchapp

<Text> does not support numberOfLines or ellipsizeMode

Open
#270 1 comment 0 reactions 0 assignees View on GitHub
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**

![sketch](https://user-images.githubusercontent.com/2016856/36448224-cee12c86-167e-11e8-9dd1-c30861f1982e.jpeg)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.