Skip to content
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.

Sign up for GitHub

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

[docs] Improve Responsiveness sections #1884

Merged
merged 5 commits into from
Jun 19, 2020
Merged

[docs] Improve Responsiveness sections #1884

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
41cbd89
[docs] Update responsiveness section
michael-land Jun 11, 2020
4e384e1
Update index.mdx
oliviertassinari Jun 11, 2020
e0a23d0
Update index.mdx
oliviertassinari Jun 11, 2020
602d8c9
Update docs/pages/demo/datepicker/index.mdx
dmtrKovalenko Jun 12, 2020
e58d15b
apply same description to the other components
oliviertassinari Jun 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions docs/pages/demo/datepicker/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ Will be rendered to modal dialog on mobile and textfield with popover on desktop

#### Responsiveness

Date/Time pickers experience is extremely different on mobile and desktop. Here is how components will look on different devices.
The default `Datepicker` component is responsive, which means that `Mobile` or `Desktop` mode will be rendered according to device viewport.
The date picker component is designed and optimized for the device it runs on.
The "Mobile" version works best for touch devices and small screens.
The "Desktop" version works best for mouse devices and large screens.

By default, the `DatePicker` component uses a `@media (pointer: fine)` media query to determine which version to use.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

<Example source={DatePickers} />

Expand Down