[Slider] Experiments for base component #4
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
mnajdova
commented
Aug 8, 2020
| // TODO: add definition files and tests | ||
| // <Slider color="orimary"> | ||
| // <span className="MuiSlider__root--color-primary"> | ||
| export const useValueAndKey = (value, key, prefix) => { |
There was a problem hiding this comment.
mnajdova
pushed a commit
that referenced
this pull request
Nov 10, 2020
Move picker sources into lab (#4) Update README.md [DatePicker] Refactor pickers tests to testing-library and mocha (#5) [TimePicker] Migrate tests to testing library (#8) [DateTimePicker] Migrate tests (#9) Fix all pickers linter errors (#10) Fix all circular dependencies (#11) * Fix all circular dependencies * Enable mocha eslint rules for typescript tests [test] The last step to a green CI (#15) Migrate pickers docs (#12) Downgrade to withStyles for pickers sources (#16) Add public api exports for pickers components (#17) Consolidate component namespace and theme augmentation (#18) Describe conformance for pickers sub-components (#19) Autogenerate proptypes for typescript sources (#20) Proper build output (#21) Clear migration artifacts (#23) Eslint rule for lower-case test name convention (#24) DateRangePicker (#25) yarn deduplicate Remove GridListTile [DateTimePicker] Fix migration unit tests Fix types Fix typescript types migration issues Fix yarn lerna build (#33) Fix karma tests use window.Touch for CI karma tests Remove more outdated diff noise (#34) Replace not valid formats with valid ISO strings Try to fix CI touch tests Skip tests if Touch events are not supported Fix merge conflicts Actually type-check Fix safari tests Remove lowercase test name rule The casing is up to the test author. We're not the grammar police in tests. Fix lint Format Remove overzealous eslint-disable* Debug failing tests Better debugging Timezones are fun was isoString th efix? Let's find out what's failing and then skip it Branch for safari Skip DateRangePicker in browsers review Matt's review Co-authored-by: Matt <[email protected]> format docs:i18n
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.
This PR is experimenting with extracting the styling from the base component. In order for this to work, the base component has to somehow know which classes should go where. We can have two different approaches on this.
Relaying on slots (inner components) structure inside the classes as a contract. This means that the styled components will organize the classes into object containing the different parts of the component, for example root, thumb, rail, track etc. It will take care of appending the correct classes based on the props provided. The base component will only know that each classes should be append to the correct inner component.
Relaying on
componentsprop, where the styled components can configure each of the components to be already styled, so that the base component will just render whatever is inside the components prop. This could go well with utilities likestyledwhere each component can be styled separately. One downside is that the styled HOC will need to know which components should be used internally in the base component.