feat: added custom classnames for event-limits tab #17478

SomayChauhan · 2024-11-05T06:02:20Z

What does this PR do?

This PR introduces customizable class names (customClassnames) for the Event Type limits page in the project. This addition allows developers to style specific elements of the Event Type limits page

Below is a full list of available custom class names with default styling:

{
  "eventLimitsTab": {
    "bufferAndNoticeSection": {
      "container": "border border-purple-200 bg-purple-100 rounded-lg",
      "beforeBufferSelect": {
        "container": "mb-4",
        "label": "text-purple-700",
        "select": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "innerClassNames": {
          "input": "text-purple-900",
          "option": "text-purple-700 hover:bg-purple-200",
          "control": "border-purple-300",
          "singleValue": "text-purple-900",
          "valueContainer": "bg-purple-100",
          "menu": "border border-purple-200 rounded-md",
          "menuList": "bg-white"
        }
      },
      "afterBufferSelect": {
        "container": "mb-4",
        "label": "text-purple-700",
        "select": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "innerClassNames": {
          "input": "text-purple-900",
          "option": "text-purple-700 hover:bg-purple-200",
          "control": "border-purple-300",
          "singleValue": "text-purple-900",
          "valueContainer": "bg-purple-100",
          "menu": "border border-purple-200 rounded-md",
          "menuList": "bg-white"
        }
      },
      "minimumNoticeInput": {
        "container": "mb-4",
        "label": "text-purple-700",
        "input": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "select": "border border-purple-300 rounded-md text-purple-900 bg-purple-50",
        "innerClassNames": {
          "input": "text-purple-900",
          "option": "text-purple-700 hover:bg-purple-200",
          "control": "border-purple-300",
          "singleValue": "text-purple-900",
          "valueContainer": "bg-purple-100"
        }
      },
      "timeSlotIntervalSelect": {
        "container": "mb-4",
        "label": "text-purple-700",
        "select": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "innerClassNames": {
          "input": "text-purple-900",
          "option": "text-purple-700 hover:bg-purple-200",
          "control": "border-purple-300",
          "singleValue": "text-purple-900",
          "valueContainer": "bg-purple-100"
        }
      }
    },
    "bookingFrequencyLimit": {
      "container": "border border-purple-200 bg-purple-100 rounded-lg",
      "label": "text-purple-700",
      "description": "text-purple-500",
      "children": "space-y-4",
      "intervalLimitContainer": "space-y-2",
      "intervalLimitItem": {
        "addLimitButton": "text-purple-500 hover:bg-purple-200 rounded-md",
        "limitText": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "limitSelect": {
          "select": "border border-purple-300 rounded-md text-purple-900 bg-purple-50",
          "innerClassNames": {
            "input": "text-purple-900",
            "option": "text-purple-700 hover:bg-purple-200",
            "control": "border-purple-300",
            "singleValue": "text-purple-900",
            "valueContainer": "bg-purple-100"
          }
        },
        "container": "flex items-center space-x-2"
      }
    },
    "firstAvailableSlotOnly": {
      "container": "border border-purple-200 bg-purple-100 rounded-lg",
      "label": "text-purple-700",
      "description": "text-purple-500",
      "children": "space-y-4"
    },
    "totalDurationLimit": {
      "container": "border border-purple-200 bg-purple-100 rounded-lg",
      "label": "text-purple-700",
      "description": "text-purple-500",
      "children": "space-y-4",
      "intervalLimitItem": {
        "addLimitButton": "text-purple-500 hover:bg-purple-200 rounded-md",
        "limitText": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "limitSelect": {
          "select": "border border-purple-300 rounded-md text-purple-900 bg-purple-50",
          "innerClassNames": {
            "input": "text-purple-900",
            "option": "text-purple-700 hover:bg-purple-200",
            "control": "border-purple-300",
            "singleValue": "text-purple-900",
            "valueContainer": "bg-purple-100"
          }
        },
        "container": "flex items-center space-x-2"
      }
    },
    "futureBookingLimit": {
      "container": "border border-purple-200 bg-purple-100 rounded-lg",
      "label": "text-purple-700",
      "description": "text-purple-500",
      "children": "space-y-4",
      "rollingLimit": {
        "container": "flex items-center space-x-2",
        "textField": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "periodTypeSelect": {
          "select": "border border-purple-300 rounded-md text-purple-900 bg-purple-50",
          "innerClassNames": {
            "input": "text-purple-900",
            "option": "text-purple-700 hover:bg-purple-200",
            "control": "border-purple-300",
            "singleValue": "text-purple-900",
            "valueContainer": "bg-purple-100"
          }
        }
      },
      "rangeLimit": {
        "wrapper": "flex items-center space-x-2",
        "datePickerWraper": "border border-purple-300 rounded-md bg-white",
        "datePicker": "text-purple-900 bg-white"
      }
    },
    "offsetStartTimes": {
      "container": "border border-purple-200 bg-purple-100 rounded-lg",
      "label": "text-purple-700",
      "description": "text-purple-500",
      "children": "space-y-4",
      "offsetInput": {
        "container": "flex items-center space-x-2",
        "label": "text-purple-700",
        "input": "border border-purple-300 rounded-md text-purple-900 bg-white",
        "addOn": "text-purple-500"
      }
    }
  }
}

Screenshot of Changes

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Are there environment variables that should be set?
What are the minimal test data to have?
What is expected (happy path) to have (input and output)?
Any other important info that could help to test that PR

Checklist

I haven't read the contributing guide
My code doesn't follow the style guidelines of this project
I haven't commented my code, particularly in hard-to-understand areas
I haven't checked if my changes generate no new warnings

graphite-app · 2024-11-05T06:10:11Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (11/05/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add platform team as reviewer" took an action on this PR • (11/05/24)

1 reviewer was added to this PR based on Keith Williams's automation.

vercel · 2024-11-06T06:50:06Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Nov 25, 2024 6:52am
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Nov 25, 2024 6:52am

github-actions · 2024-11-07T11:57:16Z

E2E results are ready!

Workflow #39093.1 latest results

supalarry · 2024-11-12T08:39:15Z

packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx

+export type EventLimitsTabCustomClassNames = {
+  bufferAndNoticeSection?: {
+    container?: string;
+    beforeBufferSelect?: SelectClassNames;


Question - what does innerClassNames mean within SelectClassNames ? These are classnames already existing in the code?

I am asking because if we have before buffer select:

"container": "mb-4", "label": "text-purple-700", "select": "border border-purple-300 rounded-md text-purple-900 bg-white", "innerClassNames": { "input": "text-purple-900", "option": "text-purple-700 hover:bg-purple-200", "control": "border-purple-300", "singleValue": "text-purple-900", "valueContainer": "bg-purple-100", "menu": "border border-purple-200 rounded-md", "menuList": "bg-white" } },

we have select key and then innerClassNames. I wonder if we should rename select to container and innerClassNames to select and then move container within the select so we would have:

"beforeBufferSelect": { "container": "mb-4", "label": "text-purple-700", "select": { "container": "border border-purple-300 rounded-md text-purple-900 bg-white", "input": "text-purple-900", "option": "text-purple-700 hover:bg-purple-200", "control": "border-purple-300", "singleValue": "text-purple-900", "valueContainer": "bg-purple-100", "menu": "border border-purple-200 rounded-md", "menuList": "bg-white" } },

and the same for others

cal.com/packages/ui/components/form/select/Select.tsx

Line 27 in 48c0676

innerClassNames?: {

yes -- these are classnames we already have in our ui/select component

supalarry · 2024-11-20T09:14:42Z

we have suffix there, but in other places we have addOn - is there a reason for that?

bookingFrequencyLimitSection-> bookingFrequencyLimit totalDurationLimitSection-> totalDurationLimit futureBookingLimitSection-> futureBookingLimit offsetStartTimesSection-> offsetStartTimes

SomayChauhan · 2024-11-21T07:06:21Z

we have suffix there, but in other places we have addOn - is there a reason for that?

this was a mistake, fixed in 51696e9

added custom classnames for event limits tab

390d9e3

dosubot bot added event-types area: event types, event-types platform Anything related to our platform plan ✨ feature New feature or request labels Nov 5, 2024

keithwillcode added the core area: core, team members only label Nov 5, 2024

graphite-app bot requested review from a team November 5, 2024 06:05

SomayChauhan changed the title ~~feat: added custom classnames for event limits tab~~ feat: added custom classnames for event-limits tab Nov 5, 2024

added classNames to common types

3ef06eb

vercel bot had a problem deploying to Preview – api November 6, 2024 06:55 Failure

updated classnames to use the common exported types

85de75d

vercel bot had a problem deploying to Preview – api November 6, 2024 07:02 Failure

vercel bot deployed to Preview – dev November 6, 2024 07:19 View deployment

undo

f94b73b

vercel bot deployed to Preview – api November 7, 2024 11:22 View deployment

Update EventTypePlatformWrapper.tsx

919aac8

SomayChauhan added the ready-for-e2e label Nov 7, 2024

Merge branch 'main' into event-limits-tab-classnames

2a350f1

vercel bot deployed to Preview – api November 7, 2024 11:47 View deployment

vercel bot deployed to Preview – dev November 7, 2024 12:10 View deployment

Merge branch 'main' into event-limits-tab-classnames

0564a21

vercel bot deployed to Preview – api November 8, 2024 11:02 View deployment

better clasnames naming

4ec6021

vercel bot deployed to Preview – dev November 8, 2024 11:09 View deployment

added example classnames for demo

a7a405e

vercel bot deployed to Preview – api November 8, 2024 11:18 View deployment

vercel bot deployed to Preview – dev November 8, 2024 11:25 View deployment

supalarry reviewed Nov 12, 2024

View reviewed changes

supalarry self-requested a review November 20, 2024 09:04

SomayChauhan added 2 commits November 21, 2024 12:15

fix: better calssnames

192e809

bookingFrequencyLimitSection-> bookingFrequencyLimit totalDurationLimitSection-> totalDurationLimit futureBookingLimitSection-> futureBookingLimit offsetStartTimesSection-> offsetStartTimes

suffix->addOn

51696e9

vercel bot deployed to Preview – api November 21, 2024 07:03 View deployment

vercel bot deployed to Preview – dev November 21, 2024 07:17 View deployment

SomayChauhan added 2 commits November 21, 2024 15:41

Merge branch 'main' into event-limits-tab-classnames

e3374e2

Update types.ts

1ab792f

vercel bot deployed to Preview – api November 21, 2024 10:29 View deployment

vercel bot deployed to Preview – dev November 21, 2024 10:45 View deployment

Merge branch 'main' into event-limits-tab-classnames

69b4ed6

vercel bot deployed to Preview – api November 22, 2024 07:18 View deployment

vercel bot deployed to Preview – dev November 22, 2024 07:32 View deployment

supalarry previously approved these changes Nov 22, 2024

View reviewed changes

Merge branch 'main' into event-limits-tab-classnames

615ca74

SomayChauhan dismissed supalarry’s stale review via 615ca74 November 25, 2024 06:51

Merge branch 'main' into event-limits-tab-classnames

2eb8710

SomayChauhan enabled auto-merge (squash) November 25, 2024 06:52

supalarry self-requested a review November 25, 2024 06:55

supalarry approved these changes Nov 25, 2024

View reviewed changes

vercel bot deployed to Preview – api November 25, 2024 07:08 View deployment

SomayChauhan merged commit 935115d into main Nov 25, 2024
37 of 39 checks passed

SomayChauhan deleted the event-limits-tab-classnames branch November 25, 2024 07:13

vercel bot deployed to Preview – dev November 25, 2024 07:23 View deployment

devin-ai-integration bot mentioned this pull request Jul 22, 2025

feat: add custom className properties to AvailabilitySettings and CalendarSettingsPlatformWrapper components #22675

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: added custom classnames for event-limits tab #17478

feat: added custom classnames for event-limits tab #17478

Uh oh!

SomayChauhan commented Nov 5, 2024 •

edited

Loading

Uh oh!

graphite-app bot commented Nov 5, 2024

Uh oh!

vercel bot commented Nov 6, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Nov 7, 2024 •

edited

Loading

Uh oh!

supalarry Nov 12, 2024

Uh oh!

supalarry Nov 12, 2024

Uh oh!

SomayChauhan Nov 12, 2024

Uh oh!

supalarry commented Nov 20, 2024

Uh oh!

SomayChauhan commented Nov 21, 2024

Uh oh!

Uh oh!

Uh oh!

feat: added custom classnames for event-limits tab #17478

feat: added custom classnames for event-limits tab #17478

Uh oh!

Conversation

SomayChauhan commented Nov 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Below is a full list of available custom class names with default styling:

Screenshot of Changes

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Checklist

Uh oh!

graphite-app bot commented Nov 5, 2024

Graphite Automations

Uh oh!

vercel bot commented Nov 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Uh oh!

supalarry Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

supalarry Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

SomayChauhan Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

supalarry commented Nov 20, 2024

Uh oh!

SomayChauhan commented Nov 21, 2024

Uh oh!

Uh oh!

Uh oh!

SomayChauhan commented Nov 5, 2024 •

edited

Loading

vercel bot commented Nov 6, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading