airbnb / airbnb/react-sketchapp

Non-uniform border mask path overlaps borderRadius

Open
#492 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.9k
Forks
797
PR merge metrics
No merged PRs in 30d

Description

| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| -------------------------------------------------------------------------------------------------

The border path polyfill (`Border ()` mask) for `borderLeftWidth`, `borderRightWidth`, etc, for uneven borders, doesn't match the borderRadius of a ``.

**Expected behavior:**

![image](https://user-images.githubusercontent.com/6757532/79366303-da496180-7f43-11ea-920b-08fcb953feff.png)

**Observed behavior:**

(Example with uneven `borderRadius`)

![image](https://user-images.githubusercontent.com/6757532/79366037-65762780-7f43-11ea-9af5-f2263fc30d89.png)

**How to reproduce:**

```jsx
(

)
```

**Sketch version:**

`63.1`

**GitHub Project:**

Code that's affected by this issue: https://github.com/elemental-react/primer/blob/918f8f0061e9902ac3bc09e5e28db370e603a912/src/buttons/ButtonGroup.jsx#L12

Can be run from https://github.com/elemental-react/primer/tree/master/examples/sketch

Contributor guide

Open the contributing guide

Research direction

Start with the affected src/buttons/ButtonGroup.jsx entry point and run the example from examples/sketch. Reproduce the shown JSX case with uneven border widths and borderRadius, then trace the border path polyfill used by the rendered View. Done means the non-uniform border mask follows the View's borderRadius as in the expected image.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.