airbnb / airbnb/react-sketchapp

Symbol Master Layout options for resizing with overrides

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

Description

I'm trying to accomplish a button that resizes based on the text override. The react component works correctly when used in a react project. When imported into sketch the button widths are set based on the width of the original text that was used to create the override.

However changing the override on an instance of the symbol the doesn't resize the shape of the button. I can manually make this work in Sketch by applying "Auto Width" to the text property and editing the Symbol Layout property to "Horizontal" resizing.

![image](https://user-images.githubusercontent.com/46465771/73515598-bb0e4f80-43aa-11ea-920a-6882ecc117f0.png)

However as I work on other components (or any update, really) these selections get reset by the updated import in sketch, so I have to manually set them all again, every time, forever? Is there a way to add `autoWidth` for text (I tried resizeContstraints fixedWidth = false to no avail) and Layout mode `horizontal` during `makeSymbol`?

Contributor guide

Open the contributing guide

Research direction

Start at the makeSymbol entry point and review how text resizeConstraints and Sketch Symbol Layout settings are represented during import. Verify whether autoWidth and horizontal resizing can be preserved for symbol overrides; done means changing the text override resizes the button without manual Sketch adjustments.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design
Issue type
Feature
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.