-
Notifications
You must be signed in to change notification settings - Fork 385
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use autocomplete for font selection. #3155
Conversation
Notes from functional testing:
|
label: font.name, | ||
} ) ); | ||
const suggestionTemplate = ( result ) => { | ||
maybeEnqueueFontStyle( result.name ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This loads the whole font stylesheet, whereas for performance reasons it might be beneficial to only load the glyphs actually needed to display the font name.
See #3027 (comment) for an example.
Then, when the font has been selected, the whole font stylesheet could be loaded.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did some profiling here, the font is only 24kb, which is the size of a small image. As this is only loaded once the font is being displayed, it also has the benefit the preload the font before when displayed in the content of the amp page. Even 10 fonts loaded is only 240kb, which is the size of a small image.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm that sounds promising. I'll check it out myself while reviewing.
This tweak this morning broke everything. aab610e and are fixed in 6fbec70 |
Probably we could already add some e2e tests for the existing fonts, and just add some more once the Google fonts PR gets merged. |
The existing tests for I'd say the most important part to test there is the accurate preview / stylesheet enqueuing. |
assets/src/stories-editor/components/font-family-picker/index.js
Outdated
Show resolved
Hide resolved
E2E tested added. I don't know how an e2e is going to test that preview works, as this is visual. |
Testing that the stylesheets are enqueued would be good |
There is now a test to make sure that google fonts are loaded. a27364f |
assets/src/stories-editor/components/font-family-picker/index.js
Outdated
Show resolved
Hide resolved
When trying to add a 'Clear font' button, I noticed that there is no way to change the value of the autocomplete programmatically. The default value can be set but this value changing doesn't seem to redraw the input. Set is handle within the compound and can not be accessed externally. Again, I might be missing something here... |
Created an issue with the core library regarding the clear issue alphagov/accessible-autocomplete#354 |
assets/src/stories-editor/components/font-family-picker/status.js
Outdated
Show resolved
Hide resolved
assets/src/stories-editor/components/font-family-picker/status.js
Outdated
Show resolved
Hide resolved
This component serves the purpose of announcing to screen readers, that the search results have changed in the autocomplete. And it needs a small change to occur when the message of "query too short" is displayed, even as the user types more characters. Thus a number of commas were inserted, and this still happens based off query length. However, I don't think this component works at all, as it only works if it was in the DOM on the very first load of the HTML. And it clearly wasn't for a plurality of reasons. But I'm okay with keeping it for a11y reasons even though it might not actually serve that purpose.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
A Googler has manually verified that the CLAs look good. (Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.) ℹ️ Googlers: Go here for more info. |
All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the ℹ️ Googlers: Go here for more info. |
@barklund @spacedmonkey Regarding thee |
A Googler has manually verified that the CLAs look good. (Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.) ℹ️ Googlers: Go here for more info. |
Fixes #3027