Clean up text styles and simplify text style names #21450
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for dagit-storybook ready! ✅ Preview Built with commit 5630436. |
|
Deploy preview for dagit-core-storybook ready! ✅ Preview Built with commit 5630436. |
braunjj
added a commit
that referenced
this pull request
Apr 30, 2024
nikomancy
pushed a commit
to nikomancy/dagster
that referenced
this pull request
May 1, 2024
## Summary & Motivation This PR aims to clean up all of our text styles, and introduces a new simplified naming convention that matches the style names within Figma. The old text style naming convention of `body`, `body1`, and `body2` was difficult to grok, ie: is body2 bigger or smaller than body1? When should I `CaptionBold` or `SubtitleCaption`? **Now we now have just 3 main text styles `Subtitle`, `Body`, and `Mono`.** - Each of these comes in a large and small variant, ie: `SubtitleLarge`| `Subtitle` | `SubtitleSmall` - There are 3 other less utilized styles `title`, `heading`, and `code`. The full set of styles now looks like this, and IMO is much easier to reason about.  ## Legacy styles I've renamed or removed all the previous styles except for `caption` which is used in a lot of places. `caption` is the exact same style as the new `bodySmall` style. ## In Figma This has all been updated in Figma as well. In Dev mode, selecting any text will now show it's corresponding style name in code.  ## How I Tested These Changes Loaded up the UI and clicked around.
nikomancy
pushed a commit
to nikomancy/dagster
that referenced
this pull request
May 1, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary & Motivation
This PR aims to clean up all of our text styles, and introduces a new simplified naming convention that matches the style names within Figma.
The old text style naming convention of
body,body1, andbody2was difficult to grok, ie: is body2 bigger or smaller than body1? When should ICaptionBoldorSubtitleCaption?Now we now have just 3 main text styles
Subtitle,Body, andMono.SubtitleLarge|Subtitle|SubtitleSmalltitle,heading, andcode.The full set of styles now looks like this, and IMO is much easier to reason about.
Legacy styles
I've renamed or removed all the previous styles except for
captionwhich is used in a lot of places.captionis the exact same style as the newbodySmallstyle.In Figma
This has all been updated in Figma as well. In Dev mode, selecting any text will now show it's corresponding style name in code.
How I Tested These Changes
Loaded up the UI and clicked around.