[Docs] Updating Text page and Sass guidelines and upgrading to variable font #5078
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
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
added 2 commits
August 30, 2021 11:04
# Conflicts: # src-docs/src/views/guidelines/sass.js
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
cchaos
changed the title
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
cchaos
commented
Aug 31, 2021
cchaos
commented
Aug 31, 2021
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
thompsongl
approved these changes
Sep 8, 2021
miukimiu
approved these changes
Sep 8, 2021
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5078/ |
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.
Closes #3964 as this PR confirms that
font-featuresettings are working and we're serving the full variable font in our docs (in Amsterdam).Utility addition
Added
.eui-textNumberutility classWe already had
euiNumberFormatas a utility mixin, so I created a quick utility class as well. I named the class though more aligned to our other utility classes instead of the mixin name that already existed.Docs
Replaced Text Sizing example with the contents from Text Scaling
These were doing essentially the same thing (comparing two sizes of EuiText blocks). But the tab was called "Guidelines", which is incorrect for what it was demonstrating. So I've just put that contents (showing the baseline grid) into the text sizing and made it adjustable so you can compare ANY two sizes.
The somewhat irony is that the line-heights don't always actually line up on the baseline grid because of the way browsers handle rounding of decimals.
Refactored Sass guidelines page and updated the font-weight section for variable fonts (Amsterdam)
This is the main reason this PR touched a lot of files.
This file had a lot going on and was hard to manage when I was updating it, so I broke it apart into respective files per section. I also moved the "Writing Sass Guidelines" section to the top instead of the bottom because I think this is what most consumers get wrong/don't see.
This also enabled the subsections to finally show up in the side nav. And wherever we were indicating how to import or link references to actual files, I made sure we were pointing to the right one/way for the current theme selected.
I also updated the Typography section to showcase the font-weight options and how to import the fonts based on the current theme selection. Which also meant changing the import for docs to use the spread notation to get all the in-between font weights.
Network check
I did a quick check about how this affected the size of the font file that was being fetched and it looks like there was very minimal change. In fact, the main increase is because of the update to include the
oblique (-10 slant)(italic) version which wasn't included before. Especially when compared to the overall bundle size.Updated "Getting Started" with more guidance on importing fonts
This section I updated with portions about variable fonts and local fonts.
Checklist
- [ ] Props have proper autodocs and playground toggles- [ ] Added or updated jest tests- [ ] Checked for breaking changes and labeled appropriately