airbnb / airbnb/react-sketchapp
Non-uniform border mask path overlaps borderRadius
- 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:**

**Observed behavior:**
(Example with uneven `borderRadius`)


**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
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