From 165bac37fd361003ce7722376b6976b6a6a57db6 Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 23 Dec 2025 15:17:34 +0530 Subject: [PATCH 1/2] Update example Headers in DocSite for consistency - Use Title Case --- docs-site/src/components/Examples/config.tsx | 144 +++++++++---------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx index a559c955f..603390949 100644 --- a/docs-site/src/components/Examples/config.tsx +++ b/docs-site/src/components/Examples/config.tsx @@ -124,23 +124,23 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: CalendarIcon, }, { - title: "Calendar Icon using React Svg Component", + title: "Calendar Icon Using React SVG Component", component: CalendarIconSvgIcon, }, { - title: "Calendar Icon using External Lib", + title: "Calendar Icon Using External Lib", component: CalendarIconExternal, }, { - title: "Toggle Calendar open status on click of the calendar icon", + title: "Toggle Calendar Open Status on Click of the Calendar Icon", component: ToggleCalendarOnIconClick, }, { - title: "Calendar container", + title: "Calendar Container", component: CalendarContainer, }, { - title: "Calendar open state callbacks", + title: "Calendar Open State Callbacks", component: OnCalendarChangeStateCallbacks, }, { @@ -148,15 +148,15 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: Children, }, { - title: "Clear datepicker input", + title: "Clear Datepicker Input", component: ClearInput, }, { - title: "Close on scroll", + title: "Close on Scroll", component: CloseOnScroll, }, { - title: "Close on scroll callback", + title: "Close on Scroll Callback", component: CloseOnScrollCallback, }, { @@ -177,21 +177,21 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ ), }, { - title: "Custom input", + title: "Custom Input", component: CustomInput, }, { - title: "Custom input with popper positioning", + title: "Custom Input with Popper Positioning", component: PopperTargetRef, description: "Use popperTargetRef to position the calendar relative to a specific element within your custom input, rather than the wrapper div.", }, { - title: "Custom header", + title: "Custom Header", component: RenderCustomHeader, }, { - title: "Custom header with two months displayed", + title: "Custom Header with Two Months Displayed", component: RenderCustomHeaderTwoMonths, }, { @@ -199,7 +199,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RenderCustomDayName, }, { - title: "Month header position", + title: "Month Header Position", component: MonthHeaderPosition, }, { @@ -219,27 +219,27 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RenderCustomYear, }, { - title: "Custom calendar class name", + title: "Custom Calendar Class Name", component: CustomCalendarClassName, }, { - title: "Custom class name", + title: "Custom Class Name", component: CustomClassName, }, { - title: "Custom day class name", + title: "Custom Day Class Name", component: CustomDayClassName, }, { - title: "Custom date format", + title: "Custom Date Format", component: CustomDateFormat, }, { - title: "Custom time class name", + title: "Custom Time Class Name", component: CustomTimeClassName, }, { - title: "Custom time input", + title: "Custom Time Input", component: CustomTimeInput, }, { @@ -247,19 +247,19 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: DateRange, }, { - title: "Date range for one datepicker", + title: "Date Range for One Datepicker", component: SelectsRange, }, { - title: "Date range for one datepicker with disabled dates highlighted", + title: "Date Range for One Datepicker with Disabled Dates Highlighted", component: SelectsRangeWithDisabledDates, }, { - title: "Date Range with disabled navigation shown", + title: "Date Range with Disabled Navigation Shown", component: DateRangeWithShowDisabledNavigation, }, { - title: "Date Range using input with clear button", + title: "Date Range Using Input with Clear Button", component: DateRangeInputWithClearButton, }, { @@ -267,11 +267,11 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: DateRangeWithPortal, }, { - title: "Disable datepicker", + title: "Disable Datepicker", component: Disabled, }, { - title: "Disable keyboard navigation", + title: "Disable Keyboard Navigation", component: DisabledKeyboardNavigation, }, { @@ -279,19 +279,19 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: WeekNumbers, }, { - title: "Don't hide calendar on date selection", + title: "Don't Hide Calendar on Date Selection", component: DontCloseOnSelect, }, { - title: "Exclude dates", + title: "Exclude Dates", component: ExcludeDates, }, { - title: "Exclude dates with message", + title: "Exclude Dates with Message", component: ExcludedWithMessage, }, { - title: "Exclude date intervals", + title: "Exclude Date Intervals", component: ExcludeDateIntervals, }, { @@ -307,39 +307,39 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: ExcludeTimes, }, { - title: "Filter dates", + title: "Filter Dates", component: FilterDates, }, { - title: "Filter times", + title: "Filter Times", component: FilterTimes, }, { - title: "Fixed height of Calendar", + title: "Fixed Height of Calendar", component: FixedCalendar, }, { - title: "Get raw input value on change", + title: "Get Raw Input Value on Change", component: RawChange, }, { - title: "Highlight dates", + title: "Highlight Dates", component: HighlightDates, }, { - title: "Highlight dates with custom class names and ranges", + title: "Highlight Dates with Custom Class Names and Ranges", component: HighlightDatesRanges, }, { - title: "Holiday dates", + title: "Holiday Dates", component: HolidayDates, }, { - title: "Include dates", + title: "Include Dates", component: IncludeDates, }, { - title: "Include date intervals", + title: "Include Date Intervals", component: IncludeDateIntervals, }, { @@ -355,19 +355,19 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: InjectTimes, }, { - title: "Inline version", + title: "Inline Version", component: Inline, }, { - title: "Inline version disabled", + title: "Inline Version Disabled", component: InlineDisabled, }, { - title: "Button to show Inline version", + title: "Button to Show Inline Version", component: InlineVisible, }, { - title: "Input time", + title: "Input Time", component: TimeInput, }, { @@ -375,19 +375,19 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: Locale, }, { - title: "Locale with time", + title: "Locale with Time", component: LocaleWithTime, }, { - title: "Locale without global variables", + title: "Locale without Global Variables", component: LocaleWithoutGlobalVariable, }, { - title: "Min date", + title: "Min Date", component: MinDate, }, { - title: "Max date", + title: "Max Date", component: MaxDate, }, { @@ -407,27 +407,27 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: MonthPickerFourColumns, }, { - title: "Month dropdown", + title: "Month Dropdown", component: MonthDropdown, }, { - title: "Month dropdown short month", + title: "Month Dropdown Short Month", component: MonthDropdownShort, }, { - title: "MonthYear dropdown", + title: "MonthYear Dropdown", component: MonthYearDropdown, }, { - title: "Multiple months", + title: "Multiple Months", component: MultiMonth, }, { - title: "Multiple months with year dropdown", + title: "Multiple Months with Year Dropdown", component: MultiMonthDropdown, }, { - title: "Multiple months inline", + title: "Multiple Months Inline", component: MultiMonthInline, }, { @@ -435,29 +435,29 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: NoAnchorArrow, }, { - title: "onBlur callbacks in console", + title: "onBlur Callbacks in Console", component: OnBlurCallbacks, }, { - title: "Open to date", + title: "Open to Date", component: OpenToDate, }, { - title: "Placeholder text", + title: "Placeholder Text", component: PlaceholderText, }, { - title: "Portal version", + title: "Portal Version", component: Portal, }, { - title: "Portal by id", + title: "Portal by ID", description: "If the provided portalId cannot be found in the dom, one will be created by default with that id.", component: PortalById, }, { - title: "Portal version with portal by id", + title: "Portal Version with Portal by ID", description: "If the provided portalId cannot be found in the dom, one will be created by default with that id.", component: WithPortalById, @@ -471,7 +471,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeMonthPicker, }, { - title: "Range Month Picker for one month picker", + title: "Range Month Picker for One Month Picker", component: RangeMonthPickerSelectsRange, }, { @@ -479,7 +479,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeQuarterPicker, }, { - title: "Range Quarter Picker for one quarter picker", + title: "Range Quarter Picker for One Quarter Picker", component: RangeQuarterPickerSelectsRange, }, { @@ -489,7 +489,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeSwapRange, }, { - title: "Read only datepicker", + title: "Read Only Datepicker", component: ReadOnly, }, { @@ -505,11 +505,11 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: HideTimeCaption, }, { - title: "Show previous months", + title: "Show Previous Months", component: MultiMonthPrevious, }, { - title: "Specific date range", + title: "Specific Date Range", component: SpecificDateRange, }, { @@ -517,19 +517,19 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: ExcludeTimePeriod, }, { - title: "Select multiple dates", + title: "Select Multiple Dates", component: SelectsMultiple, }, { - title: "Select multiple dates with custom format", + title: "Select Multiple Dates with Custom Format", component: SelectsMultipleFormat, }, { - title: "Select multiple months", + title: "Select Multiple Months", component: SelectsMultipleMonths, }, { - title: "Strict parsing", + title: "Strict Parsing", description: "Enables strict format validation for manual date input. When this flag is activated, the component will only accept values that exactly match the specified date format (`dateFormat`).", component: StrictParsing, @@ -551,23 +551,23 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeYearPicker, }, { - title: "Range Year Picker for one datepicker", + title: "Range Year Picker for One Datepicker", component: RangeYearPickerSelectsRange, }, { - title: "Year dropdown", + title: "Year Dropdown", component: YearDropdown, }, { - title: "Year select dropdown", + title: "Year Select Dropdown", component: YearSelectDropdown, }, { - title: "Year item number", + title: "Year Item Number", component: YearItemNumber, }, { - title: "Calendar Start day", + title: "Calendar Start Day", component: CalendarStartDay, }, { From f0672c5d4452ce5c41dccdb8240570546b25871f Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Tue, 23 Dec 2025 16:34:18 +0530 Subject: [PATCH 2/2] Refactor example titles in DocSite for clarity and consistency - Updated titles to improve readability and maintain a uniform style across examples. --- docs-site/src/components/Examples/config.tsx | 40 ++++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx index 603390949..4baac1b7f 100644 --- a/docs-site/src/components/Examples/config.tsx +++ b/docs-site/src/components/Examples/config.tsx @@ -128,11 +128,11 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: CalendarIconSvgIcon, }, { - title: "Calendar Icon Using External Lib", + title: "Calendar Icon Using External Library", component: CalendarIconExternal, }, { - title: "Toggle Calendar Open Status on Click of the Calendar Icon", + title: "Toggle Calendar on Icon Click", component: ToggleCalendarOnIconClick, }, { @@ -140,15 +140,15 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: CalendarContainer, }, { - title: "Calendar Open State Callbacks", + title: "Calendar Open/Close Callbacks", component: OnCalendarChangeStateCallbacks, }, { - title: "Children", + title: "Render Children in Datepicker", component: Children, }, { - title: "Clear Datepicker Input", + title: "Clearable Datepicker Input", component: ClearInput, }, { @@ -247,11 +247,11 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: DateRange, }, { - title: "Date Range for One Datepicker", + title: "Date Range in a Single Datepicker", component: SelectsRange, }, { - title: "Date Range for One Datepicker with Disabled Dates Highlighted", + title: "Date Range in a Single Datepicker with Disabled Dates", component: SelectsRangeWithDisabledDates, }, { @@ -259,7 +259,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: DateRangeWithShowDisabledNavigation, }, { - title: "Date Range Using Input with Clear Button", + title: "Clearable Range Input", component: DateRangeInputWithClearButton, }, { @@ -319,7 +319,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: FixedCalendar, }, { - title: "Get Raw Input Value on Change", + title: "Read Raw Input Value on Change", component: RawChange, }, { @@ -363,7 +363,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: InlineDisabled, }, { - title: "Button to Show Inline Version", + title: "Button to Toggle Inline Datepicker Visibility", component: InlineVisible, }, { @@ -411,11 +411,11 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: MonthDropdown, }, { - title: "Month Dropdown Short Month", + title: "Month Dropdown (Short Names)", component: MonthDropdownShort, }, { - title: "MonthYear Dropdown", + title: "Month/Year Dropdown", component: MonthYearDropdown, }, { @@ -471,7 +471,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeMonthPicker, }, { - title: "Range Month Picker for One Month Picker", + title: "Range Month Picker in a Single Month Picker", component: RangeMonthPickerSelectsRange, }, { @@ -479,17 +479,17 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeQuarterPicker, }, { - title: "Range Quarter Picker for One Quarter Picker", + title: "Range Quarter Picker in a Single Quarter Picker", component: RangeQuarterPickerSelectsRange, }, { - title: "Range Swap Range", + title: "Auto-Swap Date Range", description: - "Swap the start and end date if the end date is before the start date in a pick sequence.", + "Automatically swap the start and end date if the end date is before the start date in a pick sequence.", component: RangeSwapRange, }, { - title: "Read Only Datepicker", + title: "Read-Only Datepicker", component: ReadOnly, }, { @@ -539,7 +539,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: TabIndex, }, { - title: "Today button", + title: "Today Button", component: Today, }, { @@ -551,7 +551,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: RangeYearPicker, }, { - title: "Range Year Picker for One Datepicker", + title: "Range Year Picker in a Single Year Picker", component: RangeYearPickerSelectsRange, }, { @@ -563,7 +563,7 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [ component: YearSelectDropdown, }, { - title: "Year Item Number", + title: "Year List Item Count", component: YearItemNumber, }, {