fix(dashboard,ui): Fix outline flash on FocusModal (#9624)

**What**
- Fixes an issue where the `outline` would flash on FocusModals when the focus was transferred to the modal.
- Fixes an issue where the selected value of the combobox component was misaligned for single value comboboxes.

Resolves CC-604
This commit is contained in:
Kasper Fabricius Kristensen
2024-10-17 08:56:08 +02:00
committed by GitHub
parent 06536e7655
commit 6a6fd6ee4c
2 changed files with 19 additions and 3 deletions

View File

@@ -256,14 +256,30 @@ const ComboboxImpl = <T extends Value = string>(
)}
<div className="relative flex size-full items-center">
{showSelected && (
<div className="pointer-events-none absolute inset-y-0 left-[calc(var(--tag-width)+8px)] flex size-full items-center">
<div
className={clx(
"pointer-events-none absolute inset-y-0 flex size-full items-center",
{
"left-[calc(var(--tag-width)+8px)]": showTag,
"left-2": !showTag,
}
)}
>
<Text size="small" leading="compact">
{t("general.selected")}
</Text>
</div>
)}
{hideInput && (
<div className="pointer-events-none absolute inset-y-0 left-[calc(var(--tag-width)+8px)] flex size-full items-center overflow-hidden">
<div
className={clx(
"pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
{
"left-[calc(var(--tag-width)+8px)]": showTag,
"left-2": !showTag,
}
)}
>
<Text size="small" leading="compact" className="truncate">
{selectedLabel}
</Text>

View File

@@ -73,7 +73,7 @@ const FocusModalContent = React.forwardRef<
<FocusModalPrimitives.Content
ref={ref}
className={clx(
"bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border focus-visible:outline-none",
"bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border outline-none",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-0 data-[state=closed]:slide-in-from-bottom-2 duration-200",
className
)}