Polish/make manage themes groups nicer #2766
Conversation
|
This reverts commit b5ad28f.
packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx
Outdated
Show resolved
Hide resolved
packages/tokens-studio-for-figma/src/app/components/TabButton/TabButton.tsx
Outdated
Show resolved
Hide resolved
| css={{ | ||
| width: '100%', | ||
| paddingBlock: '$2', | ||
| minHeight: '72px', |
There was a problem hiding this comment.
Is there another height reference we can use, a percentage, another variable, instead of this magic number? 👀
There was a problem hiding this comment.
Good idea! - combined the control sizes and padding
| <Box css={{ padding: '$1', marginBottom: '$2' }}>Note: When using multi-dimensional themes where values depend on tokens of another theme, connecting styles might not work as expected.</Box> | ||
| <ThemeStyleManagementForm id={id} /> | ||
| </Box> | ||
| )} | ||
| )} | ||
| </Stack> | ||
| </StyledForm> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Group name overflows this container (I think?) when long, causing a horizontal scroll. Restrict its width, then break it or ellipsis + tooltip?
There was a problem hiding this comment.
Love the thorough tests @cuserox ❤️
There was a problem hiding this comment.
Fixed in latest commits
Why does this PR exist?
Closes #2757
What does this pull request do?
Currently when managing multidimensional themes with long group names, there's a lack of space for long group names.
This PR moves around some of the UI elements to allow for more space, and hides disabled elements when they're not needed.
Before:
After:
Testing this change
Additional Notes (if any)