maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CAL-1624: Timezone select layout improvements when typing (#8832)

This commit is contained in:
Jeroen Reumkens 2023-05-11 10:19:26 +02:00 committed by GitHub
parent a2e18ae9ba
commit 16ae19abdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/features/bookings/Booker/components/EventMeta.tsx
View File

@ -66,18 +66,20 @@ export const EventMeta = () => {
<EventDetails event={event} />
<EventMetaBlock
className="cursor-pointer [&_.current-timezone:before]:focus-within:opacity-100 [&_.current-timezone:before]:hover:opacity-100"
contentClassName="relative"
contentClassName="relative max-w-[90%]"
icon={Globe}>
{bookerState === "booking" ? (
<>{timezone}</>
) : (
<span className="current-timezone before:bg-subtle -mt-[2px] flex h-6 items-center justify-center before:absolute before:inset-0 before:left-[-30px] before:top-[-3px] before:bottom-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity">
<span className="min-w-32 current-timezone before:bg-subtle -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:left-[-30px] before:top-[-3px] before:bottom-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity">
<TimezoneSelect
menuPosition="fixed"
classNames={{
control: () => "!min-h-0 p-0 border-0 bg-transparent focus-within:ring-0",
control: () => "!min-h-0 p-0 w-full border-0 bg-transparent focus-within:ring-0",
menu: () => "!w-64 max-w-[90vw]",
singleValue: () => "text-text py-1",
indicatorsContainer: () => "ml-auto",
container: () => "max-w-full",
}}
value={timezone}
onChange={(tz) => setTimezone(tz.value)}

3
packages/ui/components/form/timezone-select/TimezoneSelect.tsx
View File

@ -52,7 +52,7 @@ export function TimezoneSelect({
classNames={{
...timezoneClassNames,
input: (state) =>
classNames("text-emphasis", timezoneClassNames?.input && timezoneClassNames.input(state)),
classNames("text-emphasis h-6", timezoneClassNames?.input && timezoneClassNames.input(state)),
option: (state) =>
classNames(
"bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-default ",
@ -106,6 +106,7 @@ export function TimezoneSelect({
timezoneClassNames?.indicatorsContainer && timezoneClassNames.indicatorsContainer(state)
),
multiValueRemove: () => "text-default py-auto ml-2",
noOptionsMessage: () => "h-12 py-2 flex items-center justify-center",
}}
/>
);