[docs] Merge dates range component docs into regular components docs

Wurielle · Mar 28, 2022 · f434d7b · f434d7b
1 parent 3084d5c
commit f434d7b
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 125 deletions.
diff --git a/docs/src/docs/changelog/2-0-0.mdx b/docs/src/docs/changelog/2-0-0.mdx
@@ -46,7 +46,7 @@ used in forms:
 
 <Demo data={DatePickerDemos.usage} demoProps={{ toggle: true, zIndex: 5 }} />
 
-[DateRangePicker](/dates/date-range-picker/) allows you to capture dates range
+[DateRangePicker](/dates/date-picker/) allows you to capture dates range
 from user:
 
 <Demo data={DateRangePickerDemos.usage} demoProps={{ toggle: true, zIndex: 4 }} />
@@ -61,7 +61,7 @@ user or display events:
 
 <Demo data={CalendarDemos.usage} demoProps={{ toggle: true }} />
 
-Capture dates range input with [RangeCalendar](/dates/range-calendar/) component:
+Capture dates range input with [RangeCalendar](/dates/calendar/) component:
 
 <Demo data={RangeCalendarDemos.usage} demoProps={{ toggle: true }} />
 

diff --git a/docs/src/docs/changelog/2-3-0.mdx b/docs/src/docs/changelog/2-3-0.mdx
@@ -21,7 +21,7 @@ Components that use any kind of overlay are now powered by [popper.js](https://p
 - [Tooltip](https://mantine.dev/core/tooltip/)
 - [Popover](https://mantine.dev/core/popover/)
 - [DatePicker](https://mantine.dev/dates/date-picker/)
-- [DateRangePicker](https://mantine.dev/dates/date-range-picker/)
+- [DateRangePicker](https://mantine.dev/dates/date-picker/)
 
 ## New components
 

diff --git a/docs/src/docs/changelog/2-5-0.mdx b/docs/src/docs/changelog/2-5-0.mdx
@@ -85,7 +85,7 @@ With [Dialog](https://mantine.dev/core/dialog/) component you can display fixed
 
 <Demo data={ListDemos.icon} demoProps={{ toggle: true }} />
 
-[TimeRangeInput](https://mantine.dev/dates/time-range-input/) component allows to capture time range from user:
+[TimeRangeInput](https://mantine.dev/dates/time-input/) component allows to capture time range from user:
 
 <Demo data={TimeRangeInputDemos.usage} demoProps={{ toggle: true }} />
 

diff --git a/docs/src/docs/changelog/3-1-0.mdx b/docs/src/docs/changelog/3-1-0.mdx
@@ -145,7 +145,7 @@ New [use-scroll-into-view](https://mantine.dev/hooks/use-scroll-into-view/) hook
 
 ## Bug fixes
 
-- Fix incorrect focus handling in [Menu](https://mantine.dev/core/menu/), [DatePicker](https://mantine.dev/dates/date-picker/) and [DateRangePicker](https://mantine.dev/dates/date-range-picker/) which resulted in focus not being shifted to control/input when dropdown was closed
+- Fix incorrect focus handling in [Menu](https://mantine.dev/core/menu/), [DatePicker](https://mantine.dev/dates/date-picker/) and [DateRangePicker](https://mantine.dev/dates/date-picker/) which resulted in focus not being shifted to control/input when dropdown was closed
 - Fix incorrect [MultiSelect](https://mantine.dev/core/multi-select/) creatable filtering logic when the same item can be created multiple times
 - Fix layout jumping on Windows and Linux when overlay components with scroll lock are opened ([Modal](https://mantine.dev/core/modal/) and [Drawer](https://mantine.dev/core/drawer)), see [use-scroll-lock](https://mantine.dev/hooks/use-scroll-lock/) documentation to learn how to offset elements with fixed position
 - Fix [DatePicker](https://mantine.dev/dates/date-picker/) dropdown not updating position when used near bottom edge of viewport

diff --git a/docs/src/docs/changelog/3-2-0.mdx b/docs/src/docs/changelog/3-2-0.mdx
@@ -164,7 +164,7 @@ setState((current) => ({ age: current.age + 7 })); // -> { name: 'Jane', age: 32
 
 <Demo data={DatePickerDemos.freeInput} />
 
-[DatePicker](https://mantine.dev/dates/date-picker/), [DateRangePicker](https://mantine.dev/dates/date-range-picker/), [Calendar](https://mantine.dev/dates/calendar/) and [RangeCalendar](https://mantine.dev/dates/range-calendar/)
+[DatePicker](https://mantine.dev/dates/date-picker/), [DateRangePicker](https://mantine.dev/dates/date-picker/), [Calendar](https://mantine.dev/dates/calendar/) and [RangeCalendar](https://mantine.dev/dates/calendar/)
 components now support multiple months rendering:
 
 <Demo data={DateRangePickerDemos.multipleMonths} />
@@ -187,7 +187,7 @@ components now support multiple months rendering:
 - [Autocomplete](https://mantine.dev/core/autocomplete/), [Select](https://mantine.dev/core/select/) and [MultiSelect](https://mantine.dev/core/multi-select/) dropdowns are now rendered within [Popper](https://mantine.dev/core/popper/). This means that dropdown element is now aware of its position on screen and will change placement based on container scroll position. You should also experience less issues with z-index configuration.
 - [Col](https://mantine.dev/core/grid/) component now supports responsive offset props: `offsetXs={5}`, `offsetMd={10}`, etc.
 - [NumberInput](https://mantine.dev/core/number-input/) component now supports empty value
-- You can now set default date format on [MantineProvider](https://mantine.dev/theming/mantine-provider/), it will be used to format [DatePicker](https://mantine.dev/dates/date-picker/) and [DateRangePicker](https://mantine.dev/dates/date-range-picker/) inputs values
+- You can now set default date format on [MantineProvider](https://mantine.dev/theming/mantine-provider/), it will be used to format [DatePicker](https://mantine.dev/dates/date-picker/) and [DateRangePicker](https://mantine.dev/dates/date-picker/) inputs values
 - [Checkbox](https://mantine.dev/core/checkbox/#replace-icon) component now supports default icons replacement
 - [use-list-state](https://mantine.dev/hooks/use-list-state/) hook now supports `pop` and `shift` handlers
 - [use-idle](https://mantine.dev/hooks/use-idle/) hook now supports setting initial state

diff --git a/docs/src/docs/changelog/3-3-0.mdx b/docs/src/docs/changelog/3-3-0.mdx
@@ -85,4 +85,4 @@ form.errors;
 - Fix incorrect opened dropdown state in [Select](https://mantine.dev/core/select/) component when search results are empty and nothing found message is not provided
 - Fix incorrect enter key handling in [Autocomplete](https://mantine.dev/core/autocomplete/), [Select](https://mantine.dev/core/select/), [MultiSelect](https://mantine.dev/core/multi-select/) and [DatePicker](https://mantine.dev/core/date-picker/) components which resulted in unexpected form submits
 - Fix incorrect space key handling in [Select](https://mantine.dev/core/select/) and [MultiSelect](https://mantine.dev/core/multi-select/) components
-- Fix focus shifting to input when date is selected with keyboard in [DateRangePicker](https://mantine.dev/dates/date-range-picker/)
+- Fix focus shifting to input when date is selected with keyboard in [DateRangePicker](https://mantine.dev/dates/date-picker/)
diff --git a/docs/src/docs/changelog/3-4-0.mdx b/docs/src/docs/changelog/3-4-0.mdx
@@ -16,7 +16,7 @@ Now user can change level by clicking label between next and previous controls:
 
 <Demo data={CalendarDemos.usage} demoProps={{ toggle: true }} />
 
-This change is applied to all components that use Calendar: [DatePicker](https://mantine.dev/dates/date-picker/), [DateRangePicker](https://mantine.dev/dates/date-range-picker/) and [RangeCalendar](https://mantine.dev/dates/range-calendar/).
+This change is applied to all components that use Calendar: [DatePicker](https://mantine.dev/dates/date-picker/), [DateRangePicker](https://mantine.dev/dates/date-picker/) and [RangeCalendar](https://mantine.dev/dates/calendar/).
 There are several **breaking changes** associated with this improvement:
 
 - All @mantine/dates components that use Calendar no longer support `withSelect` and `yearsRange` props

diff --git a/docs/src/docs/changelog/3-5-0.mdx b/docs/src/docs/changelog/3-5-0.mdx
@@ -91,6 +91,6 @@ import {
 - Fix `onChange` function called with incorrect precision in [NumberInput](https://mantine.dev/core/number-input/) component
 - Fix Linux detected as undetermined is [use-os](https://mantine.dev/hooks/use-os/) hook
 - Fix incorrect [MediaQuery](https://mantine.dev/core/media-query/) component `largerThan` and `smallerThan` props handling (**breaking bug fix**)
-- Fix incorrect [DateRangePicker](https://mantine.dev/dates/date-range-picker/) types for strict TypeScript mode
+- Fix incorrect [DateRangePicker](https://mantine.dev/dates/date-picker/) types for strict TypeScript mode
 - Fix unexpected vertical scrollbars in [TransferList](https://mantine.dev/core/transfer-list/) component
 - Fix unexpected onChange function called onBlur in [DatePicker](https://mantine.dev/dates/date-picker/) component
diff --git a/docs/src/docs/changelog/4-0-0.mdx b/docs/src/docs/changelog/4-0-0.mdx
@@ -304,8 +304,8 @@ New [BackgroundImage](https://mantine.dev/core/image/#backgroundimage-component)
 - [Text](https://mantine.dev/core/text/) component now inherits color from parent element
 - [Input](https://mantine.dev/core/input/) component now handles `required` prop differently to support native browser validation
 - [RichTextEditor](https://mantine.dev/others/rte/) now supports providing extra quill modules via `modules` prop
-- [DateRangePicker](https://mantine.dev/dates/date-range-picker/) now displays first selected date
-- [RangeCalendar](https://mantine.dev/dates/range-calendar/) now calls onChange with first selected date
+- [DateRangePicker](https://mantine.dev/dates/date-picker/) now displays first selected date
+- [RangeCalendar](https://mantine.dev/dates/calendar/) now calls onChange with first selected date
 - [SegmentedControl](https://mantine.dev/core/segmented-control/) component now supports vertical orientation and disabled state
 - [ThemeIcon](https://mantine.dev/core/theme-icon/) component now supports outline variant
 - [Text](https://mantine.dev/core/text/), [Anchor](https://mantine.dev/core/anchor/) and [Highlight](https://mantine.dev/core/highlight/) components now support `underline` prop
@@ -328,8 +328,8 @@ New [BackgroundImage](https://mantine.dev/core/image/#backgroundimage-component)
 - [Improve TypeScript performance](https://github.com/mantinedev/mantine/issues/812) for polymorphic components (~ 2x increase in compilation time)
 - Fix incorrect [RichTextEditor](https://mantine.dev/others/rte/) white space handling in Firefox
 - Add additional filtering to [Group](https://mantine.dev/core/group/) and [MediaQuery](https://mantine.dev/core/media-query/) children to avoid error when components are used with elements that do not support props (numbers, string, fragments)
-- Fix incorrect modal size for multiple months in [DatePicker](https://mantine.dev/dates/date-picker/) and [DateRangePicker](https://mantine.dev/dates/date-range-picker/) components
+- Fix incorrect modal size for multiple months in [DatePicker](https://mantine.dev/dates/date-picker/) and [DateRangePicker](https://mantine.dev/dates/date-picker/) components
 - Add missing right and bottom padding to [AppShell](https://mantine.dev/core/app-shell/) component
-- Fix `initialLevel` prop not working in [DateRangePicker](https://mantine.dev/dates/date-range-picker/) component
+- Fix `initialLevel` prop not working in [DateRangePicker](https://mantine.dev/dates/date-picker/) component
 - Add correct input mode to [NumberInput](https://mantine.dev/core/number-input/) – mobile devices will display correct keyboard now
 - Fix `findDomNode` warning in [@mantine/notifications](https://mantine.dev/others/notifications/) while using strict react mode
diff --git a/docs/src/docs/dates/calendar.mdx b/docs/src/docs/dates/calendar.mdx
@@ -4,20 +4,26 @@ package: '@mantine/dates'
 title: Calendar
 order: 1
 slug: /dates/calendar/
-description: 'Display calendar with selected date'
-props: ['Calendar']
-import: "import { Calendar } from '@mantine/dates';"
+description: 'Display inline calendar to pick single date or dates range'
+props: ['Calendar', 'RangeCalendar']
+import: "import { Calendar, RangeCalendar } from '@mantine/dates';"
 source: 'mantine-dates/src/components/Calendar/Calendar.tsx'
 docs: 'dates/Calendar.mdx'
-styles: ['Calendar']
+styles: ['Calendar', 'RangeCalendar']
 ---
 
-import { CalendarDemos } from '@mantine/demos';
+import { CalendarDemos, RangeCalendarDemos } from '@mantine/demos';
 
 ## Usage
 
+Calendar component:
+
 <Demo data={CalendarDemos.usage} />
 
+RangeCalendar component (supports the same props as Calendar component):
+
+<Demo data={RangeCalendarDemos.usage} />
+
 ## Controlled month
 
 Control month that is currently displayed with `month` and `onMonthChange` props:

diff --git a/docs/src/docs/dates/date-picker.mdx b/docs/src/docs/dates/date-picker.mdx
@@ -4,20 +4,26 @@ package: '@mantine/dates'
 title: DatePicker
 order: 1
 slug: /dates/date-picker/
-description: 'Capture date input from user'
-props: ['DatePicker']
-import: "import { DatePicker } from '@mantine/dates';"
+description: 'Capture date or dates range from user'
+props: ['DatePicker', 'DateRangePicker']
+import: "import { DatePicker, DateRangePicker } from '@mantine/dates';"
 source: 'mantine-dates/src/components/DatePicker/DatePicker.tsx'
 docs: 'dates/DatePicker.mdx'
-styles: ['DatePicker']
+styles: ['DatePicker', 'DateRangePicker']
 ---
 
-import { DatePickerDemos } from '@mantine/demos';
+import { DatePickerDemos, DateRangePickerDemos } from '@mantine/demos';
 
 ## Usage
 
+DatePicker component:
+
 <Demo data={DatePickerDemos.usage} />
 
+DateRangePicker component (supports the same props as DatePicker component):
+
+<Demo data={DateRangePickerDemos.usage} />
+
 ## Controlled
 
 ```tsx

diff --git a/docs/src/docs/dates/date-range-picker.mdx b/docs/src/docs/dates/date-range-picker.mdx
diff --git a/docs/src/docs/dates/getting-started.mdx b/docs/src/docs/dates/getting-started.mdx
@@ -74,8 +74,6 @@ function Demo() {
 
 <Demo data={DatePickerDemos.usage} demoProps={{ toggle: true, zIndex: 5 }} />
 
-[DateRangePicker](/dates/date-range-picker/)
-
 <Demo data={DateRangePickerDemos.usage} demoProps={{ toggle: true, zIndex: 4 }} />
 
 [TimeInput](/dates/time-input/)
@@ -86,8 +84,6 @@ function Demo() {
 
 <Demo data={CalendarDemos.usage} demoProps={{ toggle: true }} />
 
-[RangeCalendar](/dates/range-calendar/)
-
 <Demo data={RangeCalendarDemos.usage} demoProps={{ toggle: true }} />
 
 [Month](/dates/month/)

diff --git a/docs/src/docs/dates/range-calendar.mdx b/docs/src/docs/dates/range-calendar.mdx
diff --git a/docs/src/docs/dates/time-input.mdx b/docs/src/docs/dates/time-input.mdx
@@ -4,20 +4,26 @@ package: '@mantine/dates'
 title: TimeInput
 order: 1
 slug: /dates/time-input/
-description: 'Capture time input from user'
-props: ['TimeInput']
-import: "import { TimeInput } from '@mantine/dates';"
+description: 'Capture time or time range from user'
+props: ['TimeInput', 'TimeRangeInput']
+import: "import { TimeInput, TimeRangeInput } from '@mantine/dates';"
 source: 'mantine-dates/src/components/TimeInput/TimeInput.tsx'
 docs: 'dates/TimeInput.mdx'
-styles: ['TimeInput']
+styles: ['TimeInput', 'TimeRangeInput']
 ---
 
-import { TimeInputDemos } from '@mantine/demos';
+import { TimeInputDemos, TimeRangeInputDemos } from '@mantine/demos';
 
 ## Usage
 
+TimeInput component:
+
 <Demo data={TimeInputDemos.usage} />
 
+TimeRangeInput component (supports the same props as TimeInput component):
+
+<Demo data={TimeRangeInputDemos.usage} />
+
 ## Controlled
 
 ```tsx

diff --git a/docs/src/docs/dates/time-range-input.mdx b/docs/src/docs/dates/time-range-input.mdx