feat: added custom classnames to event-assignment tab atom #17527
Conversation
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (11/07/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/07/24)1 reviewer was added to this PR based on Keith Williams's automation. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 2 Skipped Deployments
|
E2E results are ready! |
|
We have: There are 2 switch containers and I don't know which one refers to what also given that there is "enableWeightsToggle". is it possible to bring top level "switchContainer" into the switch itself aka: i don't know if what i am saying makes sense, but I find |
turbo.json
Outdated
| @@ -461,6 +461,7 @@ | |||
| "NEXT_PUBLIC_POSTHOG_KEY", | |||
| "NEXT_PUBLIC_POSTHOG_HOST", | |||
| "VAPID_PRIVATE_KEY", | |||
| "HUDDLE01_API_TOKEN" | |||
| "HUDDLE01_API_TOKEN", | |||
| "REPLEXICA_API_KEY" | |||
There was a problem hiding this comment.
added to fix
171:34 error $REPLEXICA_API_KEY is not listed as a dependency in turbo.json turbo/no-undeclared-env-vars
There was a problem hiding this comment.
Fixed a TypeScript error from an empty arrow function by adding return.
There was a problem hiding this comment.
We have assingAllTeamMembersToggle that has switchContainer - we can rename it to assingAllTeamMembersSwitch to have 1 word to describe concept and then what do you think about having assingAllTeamMembersSwitch.switchContainer simply as assingAllTeamMembersSwitch.container ?
This also is for other PRs where we use toggle and switch - we just need to stick with 1 in a structure thats easy to understand.
assingAllTeamMembersToggle -> assingAllTeamMembers enableWeightsToggle -> enableWeights assingAllTeamMembersToggle -> assingAllTeamMembers
What does this PR do?
This PR introduces customizable class names (customClassnames) for the Event Type assignment page in the project. This addition allows developers to style specific elements of the Event Type assignment page
NOTE
assignment tab is only available for team events
Below is a full list of available custom class names with default styling:
{ "eventAssignmentTab": { "assignmentType": { "container": "border border-purple-200 bg-white rounded-lg p-6", "label": "text-purple-700 font-semibold", "description": "text-gray-600 text-sm", "schedulingTypeSelect": { "container": "mt-2", "label": "text-purple-700", "select": "border border-purple-300 rounded-md bg-white", "innerClassNames": { "control": "border-purple-300", "input": "text-purple-900", "option": "hover:bg-purple-100", "menu": "border border-purple-200 rounded-md", "singleValue": "text-purple-700" } } }, "hosts": { "fixedHosts": { "container": "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6", "label": "text-purple-700 font-semibold", "description": "text-purple-600 text-sm", "addMembers": { "assingAllTeamMembers": { "container": "border border-purple-200 bg-white rounded-md", "label": "text-purple-700", "description": "text-gray-600" }, "teamMemberSelect": { "hostsSelect": { "container": "mt-2", "select": "border border-purple-300 rounded-md bg-white", "label": "text-purple-700", "innerClassNames": { "input": "text-purple-900", "option": "hover:bg-purple-100", "control": "border-purple-300", "singleValue": "text-purple-700" } }, "selectedHostList": { "container": "mt-4 border border-purple-200 rounded-md bg-white", "listItem": { "container": "flex items-center gap-2 p-3 bg-white hover:bg-purple-50", "avatar": "rounded-full border border-purple-300", "name": "text-purple-800 font-semibold", "changePriorityButton": "text-purple-700 hover:bg-purple-100", "changeWeightButton": "text-purple-700 hover:bg-purple-100", "removeButton": "text-purple-600 hover:bg-purple-100" } }, "priorityDialog": { "confirmButton": "bg-purple-700 text-white rounded-md px-4 py-2", "label": "text-purple-700", "select": "border border-purple-300 rounded-md bg-white" }, "weightDialog": { "container": "w-full bg-white p-4 rounded-md border border-purple-300", "label": "text-purple-700 font-semibold", "confirmButton": "bg-purple-700 text-white rounded-md px-4 py-2", "weightInput": { "container": "w-24", "label": "text-purple-700", "input": "border border-purple-300 rounded-md bg-white text-purple-900", "addOn": "text-purple-500" } } } } }, "roundRobinHosts": { "container": "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6", "label": "text-purple-700 font-semibold", "description": "text-purple-600 text-sm", "enableWeights": { "container": "border border-purple-200 bg-white rounded-md", "label": "text-purple-700", "description": "text-gray-600" }, "addMembers": { "assingAllTeamMembers": { "container": "border border-purple-200 bg-white rounded-md", "label": "text-purple-700", "description": "text-gray-600" }, "teamMemberSelect": { "hostsSelect": { "container": "mt-2", "select": "border border-purple-300 rounded-md bg-white", "label": "text-purple-700", "innerClassNames": { "input": "text-purple-900", "option": "hover:bg-purple-100", "control": "border-purple-300", "singleValue": "text-purple-700" } }, "selectedHostList": { "container": "mt-4 border border-purple-200 rounded-md bg-white", "listItem": { "container": "flex items-center gap-2 p-3 bg-white hover:bg-purple-50", "avatar": "rounded-full border border-purple-300", "name": "text-purple-800 font-semibold", "changePriorityButton": "text-purple-700 hover:bg-purple-100", "changeWeightButton": "text-purple-700 hover:bg-purple-100", "removeButton": "text-purple-600 hover:bg-purple-100" } } } } } }, "childrenEventTypes": { "container": "mt-4 border border-purple-200 bg-purple-50 rounded-lg p-6", "assignAllTeamMembers": { "container": "border border-purple-200 bg-white rounded-md", "label": "text-purple-700", "description": "text-gray-600" }, "childrenEventTypesList": { "assignToSelect": { "container": "mt-2", "select": "border border-purple-300 rounded-md bg-white", "label": "text-purple-700", "innerClassNames": { "input": "text-purple-900", "option": "hover:bg-purple-100", "control": "border-purple-300", "singleValue": "text-purple-700" } }, "selectedChildrenList": { "container": "mt-4 border border-purple-200 rounded-md bg-white", "listItem": { "container": "flex items-center gap-2 p-3 bg-white hover:bg-purple-50", "avatar": "rounded-full border border-purple-300", "name": "text-purple-800 font-semibold", "ownerBadge": "text-purple-600 bg-purple-100 rounded-md px-2", "memberBadge": "text-purple-600 bg-purple-100 rounded-md px-2", "hiddenBadge": "text-gray-400 bg-gray-100 rounded-md px-2", "badgeContainer": "flex gap-1", "eventLink": "text-purple-700", "showOnProfileTooltip": "text-purple-600", "previewEventTypeTooltip": "text-purple-600", "previewEventTypeButton": "text-purple-700 hover:bg-purple-100", "deleteEventTypeTooltip": "text-red-500", "deleteEventTypeButton": "text-red-600 hover:bg-red-100" } } } } } }Screenshot of Changes
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
Checklist