[Infra UI] Add and use typed styled-components theme provider #33607
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
weltenwort
added
[zube]: In Progress
v8.0.0
Team:Infra Monitoring UI - DEPRECATED
💚 Build Succeeded |
This re-exports a variant of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI.
weltenwort
force-pushed
the
enhancement-add-typed-eui-styled-components
branch
from
0b59039 to
408eadd
Compare
💚 Build Succeeded |
weltenwort
changed the title
weltenwort
added a commit
to weltenwort/kibana
that referenced
this pull request
Apr 2, 2019
…c#33607) This adds a specialization of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI (elastic/eui#1750) and made available in Kibana via elastic#33873.
weltenwort
added a commit
that referenced
this pull request
Apr 2, 2019
weltenwort
added
the
non-issue
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
This adds a specialization of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI (elastic/eui#1750) and made available in Kibana via #33873.
Type-checked EUI theme variables make it more likely that breaking changes in the EUI variable definitions are noticed, which would have prevented #33411 and similar issues. This is has been attempted before in #24425 and #25516 using different means.
Since this is only a typing change, it should not have any visible effect except for the fixes for bugs that were discovered due to these changes.
Benefits
The typed styled components API allows the TypeScript language server to provide auto-completion on all available EUI variables:
It also enables the TypeScript compiler to check for presence of accesses variables:
All the usual refactorings and auto-fixes also work, of course:
Using the new typed eui theme
Making use of the types is a simple as replacing the imports from
styled-components, e.g.,with imports from the
eui_styled_componenetsmodule located in thex-pack/commondirectory:Checklist
This was checked for cross-browser compatibility, including a check against IE11Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n supportDocumentation was added for features that require explanation or tutorialsUnit or functional tests were updated or added to match the most common scenariosThis was checked for keyboard-only and screenreader accessibilityFor maintainers
This was checked for breaking API changes and was labeled appropriatelyThis includes a feature addition or change that requires a release note and was labeled appropriately