feat: more atoms styles #22976
feat: more atoms styles #22976
Conversation
WalkthroughAdds nested className/classNamesObject styling hooks across atoms and UI components: CalendarSettings (selected and destination sections), DestinationCalendar, SelectedCalendars, AvailabilitySettings (dateOverride), schedule time picker (SelectInnerClassNames + timePicker classNames), AppListCard (classNameObject), and related wrappers. Documentation pages for AvailabilitySettings and CalendarSettings updated to describe the new object-based styling props. Example pages updated to pass the new class name structures. A changeset bumps the @calcom/atoms minor version. No business logic or behavioral changes. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
TODO: document new styles props |
keithwillcode
added
core
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (3)
packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (1)
24-29: Localize the fallback “Loading…” textPer guidelines, replace the hardcoded string with t("loading") and add the locale hook.
- <AtomsWrapper> - <> - {statusLoader} - {!statusLoader && <h1 className="m-5 text-xl font-semibold">Loading...</h1>} - </> - </AtomsWrapper> + <AtomsWrapper> + <> + {statusLoader} + {!statusLoader && <h1 className="m-5 text-xl font-semibold">{t("loading")}</h1>} + </> + </AtomsWrapper>Additional change needed outside this block:
+import { useLocale } from "@calcom/lib/hooks/useLocale"; ... export const DestinationCalendarSettingsPlatformWrapper = ({ statusLoader, classNames = "mx-5", classNamesObject, isDryRun = false, }: { ... }) => { + const { t } = useLocale();packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (2)
170-172: Localize “Nameless calendar” fallbackUse t() for the fallback label to comply with localization guidelines.
- title={cal.name || "Nameless calendar"} - name={cal.name || "Nameless calendar"} + title={cal.name || t("nameless_calendar")} + name={cal.name || t("nameless_calendar")}
321-325: Localize toast error messagesReplace hardcoded error strings with t() and interpolation.
- onError: (err) => { - toast({ - description: `Something went wrong while adding calendar - ${title}. ${err}`, - }); - }, + onError: (err) => { + toast({ + description: t("error_adding_calendar", { title, err: String(err) }), + }); + }, ... - onError: (err) => { - toast({ - description: `Something went wrong while removing calendar - ${title}. ${err}`, - }); - }, + onError: (err) => { + toast({ + description: t("error_removing_calendar", { title, err: String(err) }), + }); + },Also applies to: 329-335
🧹 Nitpick comments (9)
docs/platform/atoms/availability-settings.mdx (1)
134-135: Docs: Good addition; also document scheduleClassNames.timePicker for completenessThe new dateOverrideClassNames section looks clear and actionable. Given the PR adds scheduleClassNames.timePicker as a public styling hook, please add a similar object-structure section for it so consumers understand the supported keys and how they map to the time picker UI parts.
I can draft the timePicker docs (container, valueContainer, value, input, dropdown) in the same format. Want me to push a patch?
Also applies to: 136-146
packages/ui/components/app-list-card/AppListCard.tsx (2)
25-29: Make container optional to allow partial overridesRequiring container forces consumers to set it even when they only want to override title/description. Make it optional for flexibility.
-export type AppCardClassNames = { - container: string; +export type AppCardClassNames = { + container?: string; title?: string; description?: string; };
31-43: Naming consistency: classNameObject vs classNamesObjectOther components in this PR (e.g., DestinationCalendarSettings) use classNamesObject. Consider aligning naming across the codebase for consistency.
packages/platform/examples/base/src/pages/availability.tsx (1)
76-81: dateOverrideClassNames usage is correctKeys align with the new DateOverride API. Note that using Tailwind important (!) here may override theme defaults aggressively—ensure that’s intended in examples.
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (2)
19-31: Avoid passing unknown props down to DestinationCalendarSelectorUsing {...props} passes classNames and classNamesObject into DestinationCalendarSelector, which doesn’t declare them. Prefer explicit prop forwarding to avoid accidental prop leakage.
-<DestinationCalendarSelector {...props} /> +const { + classNames: _dcClassNames, + classNamesObject: _dcClassNamesObject, + ...selectorProps +} = props; +<DestinationCalendarSelector {...selectorProps} />
25-29: Naming consistency and composition look goodOuter container merges existing className string and nested container override; header classNames are applied per-part. Consider aligning naming (classNamesObject) with other components globally.
Also applies to: 43-54
docs/platform/atoms/calendar-settings.mdx (2)
73-81: Document header.container for destinationCalendarSettingsClassNamesExamples showcase destination.header.container, but the table omits it. Add it for completeness and consistency with SelectedCalendars.
Proposed addition to the object structure table:
- header.container — Styles the header container
24-31: React/MDX attribute casing for iframeUse React-compliant casing to avoid DOM property warnings in MDX.
- frameborder="0" + frameBorder="0" ... - allowfullscreen="true" + allowFullScreen={true}packages/platform/examples/base/src/pages/calendars.tsx (1)
14-14: Nit: simplify boolean propallowDelete defaults to true; if you want to pass it explicitly, prefer shorthand.
- allowDelete={true} + allowDelete
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.changeset/mighty-wings-create.md(1 hunks)docs/platform/atoms/availability-settings.mdx(1 hunks)docs/platform/atoms/calendar-settings.mdx(1 hunks)packages/features/schedules/components/Schedule.tsx(8 hunks)packages/platform/atoms/availability/AvailabilitySettings.tsx(6 hunks)packages/platform/atoms/availability/types.ts(1 hunks)packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx(2 hunks)packages/platform/atoms/destination-calendar/DestinationCalendar.tsx(2 hunks)packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx(2 hunks)packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx(7 hunks)packages/platform/examples/base/src/pages/availability.tsx(2 hunks)packages/platform/examples/base/src/pages/calendars.tsx(1 hunks)packages/ui/components/app-list-card/AppListCard.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
**/*.ts: For Prisma queries, only select data you need; never useinclude, always useselect
Ensure thecredential.keyfield is never returned from tRPC endpoints or APIs
Files:
packages/platform/atoms/availability/types.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/platform/atoms/availability/types.tspackages/platform/examples/base/src/pages/availability.tsxpackages/ui/components/app-list-card/AppListCard.tsxpackages/platform/examples/base/src/pages/calendars.tsxpackages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/availability/AvailabilitySettings.tsxpackages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/destination-calendar/DestinationCalendar.tsxpackages/features/schedules/components/Schedule.tsxpackages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/platform/examples/base/src/pages/availability.tsxpackages/ui/components/app-list-card/AppListCard.tsxpackages/platform/examples/base/src/pages/calendars.tsxpackages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/availability/AvailabilitySettings.tsxpackages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/destination-calendar/DestinationCalendar.tsxpackages/features/schedules/components/Schedule.tsxpackages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
🧬 Code Graph Analysis (7)
packages/ui/components/app-list-card/AppListCard.tsx (1)
packages/ui/components/list/List.tsx (1)
ListItemText(142-156)
packages/platform/examples/base/src/pages/calendars.tsx (1)
packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx (1)
CalendarSettings(323-398)
packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (1)
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
DestinationCalendarClassNames(14-17)
packages/platform/atoms/availability/AvailabilitySettings.tsx (1)
packages/lib/date-ranges.ts (1)
WorkingHours(12-12)
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx (2)
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (2)
SelectedCalendarsClassNames(33-56)SelectedCalendarsSettingsPlatformWrapper(66-218)packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
DestinationCalendarClassNames(14-17)
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
packages/platform/atoms/destination-calendar/DestinationCalendarSelector.tsx (1)
DestinationCalendarProps(15-24)
packages/features/schedules/components/Schedule.tsx (1)
packages/platform/atoms/availability/types.ts (1)
scheduleClassNames(24-38)
🔇 Additional comments (21)
.changeset/mighty-wings-create.md (1)
1-6: Changeset is accurate and scoped correctlyMinor bump for new styling hooks is appropriate. No issues.
packages/platform/atoms/availability/types.ts (1)
31-37: API extension LGTMAdding scheduleClassNames.timePicker with granular keys aligns with downstream usage in Schedule/TimeRangeField and examples. Type shape looks correct.
packages/ui/components/app-list-card/AppListCard.tsx (2)
63-67: Container class merge order looks correcthighlight state composes with user-provided classes, and className takes precedence over classNameObject.container. Nice.
78-81: Per-part overrides wired correctlyTitle and description merge defaults with overrides. Safe and non-breaking.
Also applies to: 87-91
packages/platform/atoms/availability/AvailabilitySettings.tsx (2)
71-76: Public hook addition LGTMdateOverrideClassNames type is concise and matches the docs table (container, title, description, button).
197-203: DateOverride styling pipeline is correctProp typing, usage of cn for merging defaults, and forwarding customClassNames?.dateOverrideClassNames are all well implemented.
Also applies to: 218-229, 253-257, 686-687
packages/platform/examples/base/src/pages/availability.tsx (1)
60-75: Example styling hooks look correctscheduleClassNames and nested timePicker keys match the public types and Schedule component mapping. Good illustrative values.
packages/features/schedules/components/Schedule.tsx (3)
39-46: SelectInnerClassNames type is appropriateKeys match internal react-select parts used by our Select wrapper. No concerns.
116-117: Prop propagation to DayRanges looks goodIncluding timePicker in classNames ensures the new styles reach TimeRangeField. Nice.
114-118: Select component already supports innerClassNames – no change required.We verified in
packages/ui/components/form/select/Select.tsxthat theSelectProps interface includesinnerClassNames(used throughout the component) and thatLazySelectis correctly forwarding it via{...props}. Styling overrides for inner elements will apply as intended.packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
8-17: Type shapes LGTMDestinationHeaderClassnames and DestinationCalendarClassNames provide good granularity and keep container optional.
packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (1)
10-16: Propagate DestinationCalendarClassNames via classNamesObject: LGTMProp addition + forwarding is consistent and non-breaking.
Also applies to: 41-41
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx (2)
15-17: New classNames shape: LGTMExtending CalendarSettingsPlatformWrapperProps.classNames with granular objects is clear and backward-compatible with existing ...CustomClassnames.
34-35: Forwarding classNamesObject to child wrappers: LGTMProps are forwarded correctly to enable nested styling.
Also applies to: 42-42
docs/platform/atoms/calendar-settings.mdx (1)
50-52: Docs mention new classNames objects: LGTMThe new rows clearly document the two props and align with the code changes.
packages/platform/examples/base/src/pages/calendars.tsx (1)
13-49: Example shows correct nested classNames usage: LGTMThe example reflects the new public API and nested structure well.
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (5)
7-7: cn import: LGTMUtility import is appropriate for merging defaults and overrides.
104-113: List container override: LGTMClean fallback to "p-6 pt-2" and supports overrides via classNamesObject.
125-136: AppListCard classNameObject mapping: LGTMSimple and flexible mapping for container/title/description. Good use of cn for merging.
150-163: Body container/description className merge: LGTMMerges defaults with overrides properly. i18n for label is already handled with t("toggle_calendars_conflict").
220-231: Header component classNames API: LGTMProp surface for container/title/description is clear and integrates well with cn().
Also applies to: 236-245
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx
Outdated
Show resolved
Hide resolved
...ages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
Show resolved
Hide resolved
...ages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
packages/platform/examples/base/src/pages/availability.tsx (1)
34-50: Localize visible UI strings in examplesPer TSX guideline, wrap static text in t(). Suggested minimal changes:
- <h1 className="mx-10 my-4 text-2xl font-semibold">Availability Settings</h1> + <h1 className="mx-10 my-4 text-2xl font-semibold">{t("availability_settings")}</h1> - Validate Form + {t("validate_form")} ... - Submit Form + {t("submit_form")}If translation keys don’t exist, I can add them or reuse existing ones (e.g., availability, save).
🧹 Nitpick comments (7)
.changeset/mighty-wings-create.md (1)
1-6: Changeset looks good; minor bump matches API surface expansion.Consider briefly enumerating the new public props (e.g., dateOverrideClassNames, scheduleClassNames.timePicker, selectedCalendarSettingsClassNames, destinationCalendarSettingsClassNames) to make the release note more scannable.
packages/platform/atoms/availability/types.ts (1)
31-37: timePicker classNames: align naming and consider reusing a shared typeThe shape matches the mapping used in Schedule.tsx (container → control, value → singleValue, valueContainer → valueContainer, input → input, dropdown → menu). Two suggestions:
- Extract this to a reusable exported type (e.g., TimePickerClassNames) to avoid drift across packages.
- Ensure docs list these keys (container, valueContainer, value, input, dropdown). Currently, Availability docs do not include timePicker under scheduleClassNames.
docs/platform/atoms/calendar-settings.mdx (1)
53-81: Verify property paths match wrapper/component props; add a minimal code exampleThe nested keys look thorough. Please double-check they align exactly with:
- packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
- packages/platform/atoms/destination-calendar/DestinationCalendar.tsx and its wrapper
A short code snippet demonstrating both selectedCalendarSettingsClassNames and destinationCalendarSettingsClassNames in use will help consumers avoid mistakes.
packages/ui/components/app-list-card/AppListCard.tsx (1)
25-29: Make container optional to improve ergonomicsRequiring container when only customizing title/description is unnecessary friction. Make it optional.
-export type AppCardClassNames = { - container: string; +export type AppCardClassNames = { + container?: string; title?: string; description?: string; };packages/features/schedules/components/Schedule.tsx (2)
39-46: SelectInnerClassNames type: good abstraction; consider centralizingThis is useful and mirrors react-select’s classNames keys. Consider exporting a shared type from @calcom/ui Select wrapper to avoid duplication and ensure consistency.
361-368: Minor: Memoize innerClassNames to avoid re-creation on every renderNot critical, but a small optimization and keeps referential stability (useful if Select does shallow props comparisons).
- const innerClassNames: SelectInnerClassNames = { - control: timePickerClassNames?.container, - singleValue: timePickerClassNames?.value, - valueContainer: timePickerClassNames?.valueContainer, - input: timePickerClassNames?.input, - menu: timePickerClassNames?.dropdown, - }; + const innerClassNames = React.useMemo<SelectInnerClassNames>( + () => ({ + control: timePickerClassNames?.container, + singleValue: timePickerClassNames?.value, + valueContainer: timePickerClassNames?.valueContainer, + input: timePickerClassNames?.input, + menu: timePickerClassNames?.dropdown, + }), + [timePickerClassNames] + );packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
26-29: Consider merging both className sources instead of using ORThe current implementation uses
props?.classNames || props?.classNamesObject?.container, which means ifclassNamesis provided,classNamesObject?.containerwill be ignored. Consider usingcn()to merge both sources for more flexibility.className={cn( "border-subtle mb-6 mt-8 rounded-lg border", - props?.classNames || props?.classNamesObject?.container + props?.classNames, + props?.classNamesObject?.container )}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.changeset/mighty-wings-create.md(1 hunks)docs/platform/atoms/availability-settings.mdx(1 hunks)docs/platform/atoms/calendar-settings.mdx(1 hunks)packages/features/schedules/components/Schedule.tsx(8 hunks)packages/platform/atoms/availability/AvailabilitySettings.tsx(6 hunks)packages/platform/atoms/availability/types.ts(1 hunks)packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx(2 hunks)packages/platform/atoms/destination-calendar/DestinationCalendar.tsx(2 hunks)packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx(2 hunks)packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx(7 hunks)packages/platform/examples/base/src/pages/availability.tsx(2 hunks)packages/platform/examples/base/src/pages/calendars.tsx(1 hunks)packages/ui/components/app-list-card/AppListCard.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/platform/examples/base/src/pages/calendars.tsxpackages/ui/components/app-list-card/AppListCard.tsxpackages/platform/examples/base/src/pages/availability.tsxpackages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/availability/AvailabilitySettings.tsxpackages/platform/atoms/destination-calendar/DestinationCalendar.tsxpackages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsxpackages/features/schedules/components/Schedule.tsxpackages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/platform/examples/base/src/pages/calendars.tsxpackages/platform/atoms/availability/types.tspackages/ui/components/app-list-card/AppListCard.tsxpackages/platform/examples/base/src/pages/availability.tsxpackages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/availability/AvailabilitySettings.tsxpackages/platform/atoms/destination-calendar/DestinationCalendar.tsxpackages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsxpackages/features/schedules/components/Schedule.tsxpackages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
**/*.ts: For Prisma queries, only select data you need; never useinclude, always useselect
Ensure thecredential.keyfield is never returned from tRPC endpoints or APIs
Files:
packages/platform/atoms/availability/types.ts
🧬 Code Graph Analysis (7)
packages/platform/examples/base/src/pages/calendars.tsx (1)
packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx (1)
CalendarSettings(323-398)
packages/ui/components/app-list-card/AppListCard.tsx (1)
packages/ui/components/list/List.tsx (1)
ListItemText(142-156)
packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (1)
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
DestinationCalendarClassNames(14-17)
packages/platform/atoms/availability/AvailabilitySettings.tsx (1)
packages/lib/date-ranges.ts (1)
WorkingHours(12-12)
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx (2)
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (2)
SelectedCalendarsClassNames(33-56)SelectedCalendarsSettingsPlatformWrapper(66-218)packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
DestinationCalendarClassNames(14-17)
packages/features/schedules/components/Schedule.tsx (1)
packages/platform/atoms/availability/types.ts (1)
scheduleClassNames(24-38)
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (1)
packages/ui/components/list/List.tsx (1)
List(15-31)
🔇 Additional comments (15)
packages/platform/atoms/availability/AvailabilitySettings.tsx (3)
71-76: New dateOverrideClassNames surface looks goodThe shape matches docs (container, title, description, button). No functional concerns.
189-203: DateOverride now accepts classNames: consistent and non-breakingThe prop shape aligns with CustomClassNames.dateOverrideClassNames. Good separation of concerns.
686-687: Wiring dateOverrideClassNames through: LGTMAvailabilitySettings forwards customClassNames?.dateOverrideClassNames to DateOverride. Good.
packages/platform/examples/base/src/pages/availability.tsx (1)
60-81: Example classNames shape matches the new API
- scheduleClassNames includes the new timePicker keys.
- dateOverrideClassNames demonstrates all supported keys.
Looks consistent with types and Schedule wiring.packages/features/schedules/components/Schedule.tsx (4)
114-118: Propagating timePicker through ScheduleDay ➜ DayRanges: LGTMThe additional classNames key is correctly passed down.
249-273: DayRanges forwards timePicker to TimeRangeField: LGTMThe Pick type keeps the surface minimal and intentional.
353-360: TimeRangeField typing for timePickerClassNames matches atoms/typesKeys: container, value, valueContainer, input, dropdown. Matches atoms/types and docs intent.
378-379: innerClassNames forwarded to LazySelect: LGTMAssuming @calcom/ui/components/form Select supports these, the mapping is consistent.
If Select doesn’t yet accept innerClassNames, we should add/align this prop at the Select wrapper layer next.
Also applies to: 397-398
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
8-17: LGTM! Well-structured type definitionsThe nested type structure for
DestinationCalendarClassNamesprovides good granularity for styling customization while maintaining clear organization.packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (1)
4-5: LGTM! Clean implementation of styling prop forwardingThe wrapper correctly imports the type and forwards the
classNamesObjectprop to the child component, maintaining consistency with the styling customization pattern.Also applies to: 10-16, 41-41
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (2)
33-56: LGTM! Comprehensive type definition for styling customizationThe
SelectedCalendarsClassNamestype provides excellent granularity for styling different parts of the component hierarchy while maintaining clear organization.
125-136: Well-implemented nested className object for AppListCardThe
classNameObjectprop properly maps the nested styling structure fromselectedCalendarsListClassNames.selectedCalendarto the AppListCard component, maintaining consistency with the type definition.packages/platform/examples/base/src/pages/calendars.tsx (1)
13-48: Good demonstration of the new styling capabilitiesThis example effectively demonstrates the granular styling control provided by the new
classNamesprop structure. The contrasting colors make it easy to identify which styles apply to which components during development.packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx (2)
11-17: LGTM! Consistent implementation of nested styling propsThe component properly extends the classNames prop with new nested properties and correctly forwards them to child components, maintaining consistency with the overall styling customization pattern.
Also applies to: 34-34, 42-42
1-2: Fix incorrect import pathThe import path is missing the relative path prefix. Based on the file structure, it should be importing from the destination-calendar directory at the same level.
-import type { DestinationCalendarClassNames } from "destination-calendar/DestinationCalendar"; +import type { DestinationCalendarClassNames } from "../../destination-calendar/DestinationCalendar";Likely an incorrect or invalid review comment.
...ages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (4)
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
25-31: Merge container classNames instead of picking oneCurrent logic prefers props.classNames over props.classNamesObject.container. Consider merging both to allow coarse and granular styles simultaneously.
- className={cn( - "border-subtle mb-6 mt-8 rounded-lg border", - props?.classNames || props?.classNamesObject?.container - )}> + className={cn( + "border-subtle mb-6 mt-8 rounded-lg border", + props?.classNames, + props?.classNamesObject?.container + )}>docs/platform/atoms/calendar-settings.mdx (1)
72-81: Document header.container for destination calendarCode supports header.container in DestinationCalendarSettingsHeading, but docs list only header.title and header.description. Add header.container for completeness.
### destinationCalendarSettingsClassNames Object Structure The `destinationCalendarSettingsClassNames` prop accepts an object with the following nested structure for granular styling of the destination calendar component: | Property Path | Description | |:--------------|:------------| | `container` | Styles the main container of the destination calendar section | +| `header.container` | Styles the header container | | `header.title` | Styles the header title text | | `header.description` | Styles the header description text |packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (2)
86-86: Merge container overrides instead of replacingUnify semantics with cn() so defaults and overrides compose.
-<SelectedCalendarsSettings classNames={classNamesObject?.container || classNames}> +<SelectedCalendarsSettings classNames={cn(classNames, classNamesObject?.container)}>Apply at both occurrences.
Also applies to: 104-104
110-113: Preserve default spacing when overriding list containerUsing OR drops the default padding when an override is provided. Compose with cn() instead.
- <List - noBorderTreatment - className={classNamesObject?.selectedCalendarsListClassNames?.container || "p-6 pt-2"}> + <List + noBorderTreatment + className={cn( + "p-6 pt-2", + classNamesObject?.selectedCalendarsListClassNames?.container + )}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.changeset/mighty-wings-create.md(1 hunks)docs/platform/atoms/availability-settings.mdx(1 hunks)docs/platform/atoms/calendar-settings.mdx(1 hunks)packages/features/schedules/components/Schedule.tsx(8 hunks)packages/platform/atoms/availability/AvailabilitySettings.tsx(6 hunks)packages/platform/atoms/availability/types.ts(1 hunks)packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx(2 hunks)packages/platform/atoms/destination-calendar/DestinationCalendar.tsx(2 hunks)packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx(2 hunks)packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx(7 hunks)packages/platform/examples/base/src/pages/availability.tsx(2 hunks)packages/platform/examples/base/src/pages/calendars.tsx(1 hunks)packages/ui/components/app-list-card/AppListCard.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
**/*.ts: For Prisma queries, only select data you need; never useinclude, always useselect
Ensure thecredential.keyfield is never returned from tRPC endpoints or APIs
Files:
packages/platform/atoms/availability/types.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/platform/atoms/availability/types.tspackages/ui/components/app-list-card/AppListCard.tsxpackages/platform/atoms/destination-calendar/DestinationCalendar.tsxpackages/platform/examples/base/src/pages/availability.tsxpackages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsxpackages/platform/examples/base/src/pages/calendars.tsxpackages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/availability/AvailabilitySettings.tsxpackages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsxpackages/features/schedules/components/Schedule.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/ui/components/app-list-card/AppListCard.tsxpackages/platform/atoms/destination-calendar/DestinationCalendar.tsxpackages/platform/examples/base/src/pages/availability.tsxpackages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsxpackages/platform/examples/base/src/pages/calendars.tsxpackages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsxpackages/platform/atoms/availability/AvailabilitySettings.tsxpackages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsxpackages/features/schedules/components/Schedule.tsx
🧬 Code Graph Analysis (8)
packages/ui/components/app-list-card/AppListCard.tsx (1)
packages/ui/components/list/List.tsx (1)
ListItemText(142-156)
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
packages/platform/atoms/destination-calendar/DestinationCalendarSelector.tsx (1)
DestinationCalendarProps(15-24)
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx (2)
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (2)
SelectedCalendarsClassNames(33-56)SelectedCalendarsSettingsPlatformWrapper(66-218)packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
DestinationCalendarClassNames(14-17)
packages/platform/examples/base/src/pages/calendars.tsx (1)
packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx (1)
CalendarSettings(323-398)
packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (1)
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (1)
DestinationCalendarClassNames(14-17)
packages/platform/atoms/availability/AvailabilitySettings.tsx (1)
packages/lib/date-ranges.ts (1)
WorkingHours(12-12)
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (1)
packages/ui/components/list/List.tsx (1)
List(15-31)
packages/features/schedules/components/Schedule.tsx (1)
packages/platform/atoms/availability/types.ts (1)
scheduleClassNames(24-38)
🔇 Additional comments (19)
.changeset/mighty-wings-create.md (1)
1-5: LGTM!The changeset correctly documents the minor version bump for the new styling features.
packages/platform/atoms/availability/types.ts (1)
31-37: Well-structured type addition for time picker stylingThe new
timePickerproperty follows the established pattern for nested classNames and provides appropriate granularity for styling the time picker components.packages/platform/atoms/availability/AvailabilitySettings.tsx (2)
71-76: Consistent styling API extensionThe
dateOverrideClassNamesaddition follows the established pattern and provides appropriate granularity for styling date override components.
189-262: Well-implemented classNames propagationThe DateOverride component correctly applies the custom classNames to each UI element while maintaining default styles as fallbacks.
packages/platform/examples/base/src/pages/availability.tsx (1)
60-80: Example effectively demonstrates the new styling capabilitiesThe example clearly shows how to use the new
scheduleClassNamesanddateOverrideClassNamesprops with distinct styling to demonstrate each customizable element.Note: As mentioned in the PR comments, documentation for these new style props is still pending.
docs/platform/atoms/availability-settings.mdx (1)
134-145: Documentation properly updated for new styling propsThe documentation clearly describes the new
dateOverrideClassNamesprop structure. This partially addresses the "TODO: document new styles props" mentioned in the PR objectives.packages/features/schedules/components/Schedule.tsx (2)
39-45: Type definition aligns with react-select's classNames structureThe
SelectInnerClassNamestype properly matches the expected structure for customizing react-select components.
456-470: innerClassNames prop is properly supported by SelectThe Select component in
packages/ui/components/form/select/Select.tsxdeclares aninnerClassNamesprop, destructures it fromprops, and merges its values into each part’s style function. It’s excluded fromrestProps, so it won’t cause unknown-prop warnings and will correctly apply custom styling. No changes required.packages/platform/examples/base/src/pages/calendars.tsx (1)
13-49: Example usage of nested classNames looks goodStructure matches the new SelectedCalendarsClassNames and DestinationCalendarClassNames. Good coverage of container/header/body overrides.
packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx (2)
10-16: New classNamesObject prop is correctly typed and optionalProp typing and defaults look good.
41-41: Propagating classNamesObject to child is correctForwarding preserves the new styling API. Good.
packages/platform/atoms/destination-calendar/DestinationCalendar.tsx (2)
8-18: Type additions look solidDestinationHeaderClassnames and DestinationCalendarClassNames are well-scoped and future-proof.
43-56: Heading i18n and className hooks are applied correctlyt() is used for all user-facing strings; header class hooks are cleanly threaded.
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx (3)
15-17: New nested classNames props on wrapper look correctPublic API augmentation aligns with downstream wrappers.
34-35: Destination classNamesObject forwarded correctlyWiring is accurate.
42-43: Selected calendars classNamesObject forwarded correctlyWiring is accurate.
packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx (3)
125-136: AppListCard classNameObject usage looks correctContainer/title/description overrides are correctly threaded via classNameObject.
150-163: Good: i18n applied to conflict toggle copyt("toggle_calendars_conflict") is used appropriately and classes are composable.
236-245: Heading i18n + composable class names are correctHeader container/title/description all use cn() with t() for text.
packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx
Outdated
Show resolved
Hide resolved
.../platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx
Show resolved
Hide resolved
...ages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
Show resolved
Hide resolved
...ages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
docs/platform/atoms/availability-settings.mdx (4)
128-130: Docs table: call out deprecation/migration from old props to new object keysAdd a short migration note immediately after this table to help consumers map old flat props to the new
scheduleClassNames/dateOverrideClassNamesstructure.Proposed insertion:
+<Note> +The previous flat styling props (e.g., `scheduleContainer`, `scheduleDay`, `dayRanges`, `timeRanges`, +`labelAndSwitchContainer`, and `overridesModalClassNames`) are now represented under +`customClassNames.scheduleClassNames` and `customClassNames.dateOverrideClassNames`. +See the object structures below for the one-to-one mapping. +</Note>
131-144: Clarify shape and optionality with a concise TypeScript typeGood addition. To remove ambiguity and aid DX, explicitly document the expected type so consumers get autocomplete and type-checking right away. Also state that every key is optional.
Proposed addition right under the paragraph:
+All keys are optional. You can pass only the selectors you need. + +```ts +type ScheduleClassNames = { + schedule?: string; + scheduleContainer?: string; + scheduleDay?: string; + dayRanges?: string; + timeRangeField?: string; + labelAndSwitchContainer?: string; + timePicker?: { + container?: string; + valueContainer?: string; + value?: string; + input?: string; + dropdown?: string; + }; +}; +```
157-166: Add a minimal usage snippet for dateOverrideClassNamesQuick example helps consumers wire it correctly via
customClassNames.dateOverrideClassNames.Proposed addition after the table:
+```tsx +<AvailabilitySettings + customClassNames={{ + dateOverrideClassNames: { + container: "rounded-md border p-4", + title: "text-sm font-medium", + description: "text-muted-foreground", + button: "btn btn-primary", + }, + }} +/> +```
168-168: Tailwind note: consider clarifying arbitrary values supportTo preempt issues, mention that arbitrary values/variants are supported as long as they survive your build pipeline (e.g., safelisted if generated dynamically).
Proposed tweak:
-<Info>Please ensure all custom classnames are valid [Tailwind CSS](https://tailwindcss.com/) classnames.</Info> +<Info> +Please ensure all custom classnames are valid [Tailwind CSS](https://tailwindcss.com/) classnames. +Arbitrary values and variants are supported as long as they are discoverable by your Tailwind build +(e.g., safelisted if composed dynamically). +</Info>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/platform/atoms/availability-settings.mdx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Install dependencies / Yarn install & cache
- GitHub Check: Atoms E2E Tests
🔇 Additional comments (1)
docs/platform/atoms/availability-settings.mdx (1)
145-156: Verified:timePickerandtimeRangeFieldkeys align with implementation
The documented nestedtimePickerproperties (container,valueContainer,value,input,dropdown) and the top-leveltimeRangeFieldexactly match thescheduleClassNamestype inpackages/platform/atoms/availability/types.ts. No drift detected—documentation is accurate.
E2E results are ready! |
No description provided.