admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed dropdown blur and unified components (#9062)

Browse Source 
- Removed disableBlur property from dropdown because it is no longer
needed since there's only one OverlayContainer component so there can be
only one blur at a time.
- Removed blur CSS properties from every component that used it because
one standalone OverlayContainer is able to handle all cases if placed
properly.
- Also removed disableBackgroundBlur property from SingleRecordSelect
- Removed FieldInputOverlay and FieldTextAreaOverlay components that
were a first attempt to create something like an OverlayContainer
- Used new unified OverlayContainer in RecordInlineCell and
RecordTableCell
- Fixed ScrollWrapper so that it works well both for dropdown with non
overflowing content and dropdown with overflowing content.
- Removed export default value on SearchVariablesDropdown as it is not
used in this codebase
- Refactored SearchVariablesDropdown function as component anti-pattern
- Refactored SearchVariablesDropdownFieldItems UI problems with
separator and missing ScrollWrapper behavior
- Refactored SearchVariablesDropdownObjectItems with UI problems with
separator and missing ScrollWrapper behavior
- Fixed blur bug on Firefox due to wrong placement of the element that
had the CSS property. Blur works on Firefox it it's on the container
that has the highest level in the tree.
- Fixed bug in ActivityTargetInlineCell by removing an unnecessary
container component StyledSelectContainer
- Unified problems of field height with a new common component
FieldInputContainer, instead of putting width and height at the wrong
abstraction level, width and height are a field's concern not a
dropdown, overlay or low-level input concern.
- Fixed block editor dropdown with new OverlayContainer
- Aligning field dropdown with their anchor on inline and table cells,
there are still many small pixel misalignments that give a low quality
impression.
- Fixed FormDateFieldInput that was missing OverlayContainer
This commit is contained in:
Lucas Bordeau
2024-12-17 15:28:26 +01:00
committed by GitHub
parent 4aabe9e224
commit 860dec3428
66 changed files with 427 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
View File

@ -15,11 +15,6 @@ import { useRecoilValue } from 'recoil';
import { isDefined, MOBILE_VIEWPORT } from 'twenty-ui';
const StyledAddressContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
padding: 4px 8px;
width: 344px;
@ -27,11 +22,6 @@ const StyledAddressContainer = styled.div`
margin-bottom: 6px;
}
input {
background-color: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
}
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: auto;
min-width: 100px;

4
packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
View File

@ -21,10 +21,6 @@ export const StyledIMaskInput = styled(IMaskInput)<StyledInputProps>`
const StyledContainer = styled.div`
align-items: center;
border: none;
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
justify-content: center;
`;

35
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
View File

@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { useRef, useState } from 'react';
import { Nullable } from 'twenty-ui';
import {
@ -9,15 +9,6 @@ import {
} from '@/ui/input/components/internal/date/components/InternalDatePicker';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRef, useState } from 'react';
export const StyledCalendarContainer = styled.div`
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
`;
export type DateInputProps = {
value: Nullable<Date>;
@ -89,19 +80,17 @@ export const DateInput = ({
return (
<div ref={wrapperRef}>
<StyledCalendarContainer>
<InternalDatePicker
date={internalValue ?? new Date()}
onChange={handleChange}
onMouseSelect={handleMouseSelect}
clearable={clearable ? clearable : false}
isDateTimeInput={isDateTimeInput}
onEnter={onEnter}
onEscape={onEscape}
onClear={handleClear}
hideHeaderInput={hideHeaderInput}
/>
</StyledCalendarContainer>
<InternalDatePicker
date={internalValue ?? new Date()}
onChange={handleChange}
onMouseSelect={handleMouseSelect}
clearable={clearable ? clearable : false}
isDateTimeInput={isDateTimeInput}
onEnter={onEnter}
onEscape={onEscape}
onClear={handleClear}
hideHeaderInput={hideHeaderInput}
/>
</div>
);
};

78
packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
View File

@ -12,22 +12,18 @@ import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleT
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isDefined } from '~/utils/isDefined';
import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { splitFullName } from '~/utils/format/spiltFullName';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { StyledTextInput } from './TextInput';
const StyledContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
input {
width: 100%;
}
& > input:last-child {
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
border-left: 1px solid ${({ theme }) => theme.border.color.strong};
padding-left: ${({ theme }) => theme.spacing(2)};
}
`;
@ -186,39 +182,41 @@ export const DoubleTextInput = ({
};
return (
<StyledContainer ref={containerRef}>
<StyledTextInput
autoComplete="off"
autoFocus
onFocus={() => setFocusPosition('left')}
ref={firstValueInputRef}
placeholder={firstValuePlaceholder}
value={firstInternalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
handleChange(
turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
secondInternalValue,
);
}}
onPaste={(event: ClipboardEvent<HTMLInputElement>) =>
handleOnPaste(event)
}
onClick={handleClickToPreventParentClickEvents}
/>
<StyledTextInput
autoComplete="off"
onFocus={() => setFocusPosition('right')}
ref={secondValueInputRef}
placeholder={secondValuePlaceholder}
value={secondInternalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
handleChange(
firstInternalValue,
turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
);
}}
onClick={handleClickToPreventParentClickEvents}
/>
</StyledContainer>
<FieldInputContainer>
<StyledContainer ref={containerRef}>
<StyledTextInput
autoComplete="off"
autoFocus
onFocus={() => setFocusPosition('left')}
ref={firstValueInputRef}
placeholder={firstValuePlaceholder}
value={firstInternalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
handleChange(
turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
secondInternalValue,
);
}}
onPaste={(event: ClipboardEvent<HTMLInputElement>) =>
handleOnPaste(event)
}
onClick={handleClickToPreventParentClickEvents}
/>
<StyledTextInput
autoComplete="off"
onFocus={() => setFocusPosition('right')}
ref={secondValueInputRef}
placeholder={secondValuePlaceholder}
value={secondInternalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
handleChange(
firstInternalValue,
turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
);
}}
onClick={handleClickToPreventParentClickEvents}
/>
</StyledContainer>
</FieldInputContainer>
);
};

10
packages/twenty-front/src/modules/ui/field/input/components/FieldInputContainer.tsx Normal file
View File

@ -0,0 +1,10 @@
import styled from '@emotion/styled';
// eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled
export const FieldInputContainer = styled.div`
align-items: center;
display: flex;
min-height: 32px;
min-width: 200px;
width: 100%;
`;

16
packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx
View File

@ -1,16 +0,0 @@
import styled from '@emotion/styled';
import { OVERLAY_BACKGROUND } from 'twenty-ui';
const StyledFieldInputOverlay = styled.div`
align-items: center;
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
height: 32px;
justify-content: space-between;
margin: -1px;
width: 100%;
${OVERLAY_BACKGROUND}
`;
export const FieldInputOverlay = StyledFieldInputOverlay;

16
packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
View File

@ -1,16 +0,0 @@
import styled from '@emotion/styled';
import { OVERLAY_BACKGROUND } from 'twenty-ui';
const StyledFieldTextAreaOverlay = styled.div`
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
margin: -1px;
max-height: 420px;
position: absolute;
top: 0;
width: 100%;
${OVERLAY_BACKGROUND}
`;
export const FieldTextAreaOverlay = StyledFieldTextAreaOverlay;

27
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
View File

@ -33,33 +33,14 @@ const StyledTextArea = styled(TextareaAutosize)`
resize: none;
max-height: 400px;
width: calc(100% - ${({ theme }) => theme.spacing(7)});
background: transparent;
line-height: 18px;
`;
const StyledTextAreaContainer = styled.div`
background: ${({ theme }) => theme.background.primary};
border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
position: relative;
width: 100%;
padding-top: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(2)};
border-radius: ${({ theme }) => theme.border.radius.sm};
@supports (
(backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))
) {
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
-webkit-backdrop-filter: ${({ theme }) => theme.blur.medium};
}
`;
const StyledLightIconButtonContainer = styled.div`
background: transparent;
position: absolute;
top: 18px;
top: 16px;
transform: translateY(-50%);
right: 0;
`;
@ -114,7 +95,7 @@ export const TextAreaInput = ({
});
return (
<StyledTextAreaContainer>
<>
<StyledTextArea
placeholder={placeholder}
disabled={disabled}
@ -130,6 +111,6 @@ export const TextAreaInput = ({
<LightCopyIconButton copyText={internalText} />
</StyledLightIconButtonContainer>
)}
</StyledTextAreaContainer>
</>
);
};

7
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -3,11 +3,11 @@ import { useMemo, useState } from 'react';
import { useRecoilValue } from 'recoil';
import {
IconApps,
IconComponent,
useIcons,
IconButton,
IconButtonVariant,
IconComponent,
LightIconButton,
useIcons,
} from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -33,7 +33,6 @@ export type IconPickerProps = {
onOpen?: () => void;
variant?: IconButtonVariant;
className?: string;
disableBlur?: boolean;
};
const StyledMenuIconItemsContainer = styled.div`
@ -90,7 +89,6 @@ export const IconPicker = ({
onClose,
onOpen,
variant = 'secondary',
disableBlur = false,
className,
}: IconPickerProps) => {
const [searchString, setSearchString] = useState('');
@ -172,7 +170,6 @@ export const IconPicker = ({
/>
}
dropdownMenuWidth={176}
disableBlur={disableBlur}
dropdownComponents={
<SelectableList
selectableListId="icon-list"

3
packages/twenty-front/src/modules/ui/input/components/Select.tsx
View File

@ -32,7 +32,6 @@ export type SelectProps<Value extends SelectValue> = {
className?: string;
disabled?: boolean;
selectSizeVariant?: SelectSizeVariant;
disableBlur?: boolean;
dropdownId: string;
dropdownWidth?: `${string}px` | 'auto' | number;
dropdownWidthAuto?: boolean;
@ -63,7 +62,6 @@ export const Select = <Value extends SelectValue>({
className,
disabled: disabledFromProps,
selectSizeVariant,
disableBlur = false,
dropdownId,
dropdownWidth = 176,
dropdownWidthAuto = false,
@ -135,7 +133,6 @@ export const Select = <Value extends SelectValue>({
selectSizeVariant={selectSizeVariant}
/>
}
disableBlur={disableBlur}
dropdownComponents={
<>
{!!withSearchInput && (

2
packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
View File

@ -32,7 +32,7 @@ export const CurrencyPickerDropdownSelect = ({
);
return (
<DropdownMenu disableBlur>
<DropdownMenu>
<DropdownMenuSearchInput
value={searchFilter}
onChange={(event) => setSearchFilter(event.target.value)}

2
packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx
View File

@ -81,7 +81,6 @@ export const AbsoluteDatePickerHeader = ({
<Select
dropdownId={MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID}
options={getMonthSelectOptions()}
disableBlur
onChange={onChangeMonth}
value={endOfDayInLocalTimezone.getMonth()}
fullWidth
@ -91,7 +90,6 @@ export const AbsoluteDatePickerHeader = ({
onChange={onChangeYear}
value={endOfDayInLocalTimezone.getFullYear()}
options={years}
disableBlur
fullWidth
/>
<LightIconButton

2
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
View File

@ -16,8 +16,6 @@ import { isDefined } from 'twenty-ui';
const StyledInputContainer = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-top-left-radius: ${({ theme }) => theme.border.radius.md};
border-top-right-radius: ${({ theme }) => theme.border.radius.md};

3
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -5,7 +5,6 @@ import { Key } from 'ts-key-enum';
import {
IconCalendarX,
MenuItemLeftContent,
OVERLAY_BACKGROUND,
StyledHoverableMenuItemBase,
} from 'twenty-ui';
@ -122,8 +121,6 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown {
border: ${({ theme }) => theme.border.color.light};
${OVERLAY_BACKGROUND}
overflow-y: scroll;
top: ${({ theme }) => theme.spacing(2)};
}

2
packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
View File

@ -57,7 +57,6 @@ export const RelativeDatePickerHeader = (
return (
<StyledContainer>
<Select
disableBlur
dropdownId="direction-select"
value={direction}
onChange={(newDirection) => {
@ -95,7 +94,6 @@ export const RelativeDatePickerHeader = (
disabled={direction === 'THIS'}
/>
<Select
disableBlur
dropdownId="unit-select"
value={unit}
onChange={(newUnit) => {

5
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx
View File

@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { Country } from '@/ui/input/components/internal/types/Country';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@ -47,7 +46,7 @@ export const PhoneCountryPickerDropdownSelect = ({
);
return (
<DropdownMenu width="auto" disableBlur>
<>
<DropdownMenuSearchInput
value={searchFilter}
onChange={(event) => setSearchFilter(event.currentTarget.value)}
@ -91,6 +90,6 @@ export const PhoneCountryPickerDropdownSelect = ({
</>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
</>
);
};

15
packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
View File

@ -53,7 +53,7 @@ const StyledEditor = styled.div`
}
& .bn-drag-handle-menu {
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
backdrop-filter: ${({ theme }) => theme.blur.medium};
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.04),
2px 4px 16px rgba(0, 0, 0, 0.12);
@ -64,6 +64,19 @@ const StyledEditor = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.medium};
left: 26px;
}
& .bn-container .bn-suggestion-menu-item:hover {
background-color: blue;
}
& .bn-suggestion-menu {
padding: 4px;
border-radius: 8px;
border: 1px solid ${({ theme }) => theme.border.color.medium};
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
}
& .mantine-Menu-item {
background-color: transparent;
min-width: 152px;

56
packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
View File

@ -4,6 +4,9 @@ import { IconComponent, MenuItemSuggestion } from 'twenty-ui';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useFloating } from '@floating-ui/react';
import { createPortal } from 'react-dom';
export type SuggestionItem = {
title: string;
@ -14,28 +17,43 @@ export type SuggestionItem = {
type CustomSlashMenuProps = SuggestionMenuProps<SuggestionItem>;
const StyledSlashMenu = styled.div`
* {
box-sizing: content-box;
}
const StyledContainer = styled.div`
height: 1px;
width: 1px;
`;
const StyledInnerContainer = styled.div`
height: 250px;
width: 100%;
`;
export const CustomSlashMenu = (props: CustomSlashMenuProps) => {
const { refs, floatingStyles } = useFloating({
placement: 'bottom-start',
});
return (
<StyledSlashMenu>
<DropdownMenu style={{ zIndex: 2001 }}>
<DropdownMenuItemsContainer>
{props.items.map((item, index) => (
<MenuItemSuggestion
key={item.title}
onClick={() => item.onItemClick()}
text={item.title}
LeftIcon={item.Icon}
selected={props.selectedIndex === index}
/>
))}
</DropdownMenuItemsContainer>
</DropdownMenu>
</StyledSlashMenu>
<StyledContainer ref={refs.setReference}>
{createPortal(
<OverlayContainer ref={refs.setFloating} style={floatingStyles}>
<StyledInnerContainer>
<DropdownMenu style={{ zIndex: 2001 }}>
<DropdownMenuItemsContainer>
{props.items.map((item, index) => (
<MenuItemSuggestion
key={item.title}
onClick={() => item.onItemClick()}
text={item.title}
LeftIcon={item.Icon}
selected={props.selectedIndex === index}
/>
))}
</DropdownMenuItemsContainer>
</DropdownMenu>
</StyledInnerContainer>
</OverlayContainer>,
document.body,
)}
</StyledContainer>
);
};

3
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
View File

@ -37,7 +37,6 @@ type DropdownProps = {
dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
dropdownOffset?: { x?: number; y?: number };
dropdownStrategy?: 'fixed' | 'absolute';
disableBlur?: boolean;
onClickOutside?: () => void;
onClose?: () => void;
onOpen?: () => void;
@ -55,7 +54,6 @@ export const Dropdown = ({
dropdownPlacement = 'bottom-end',
dropdownStrategy = 'absolute',
dropdownOffset = { x: 0, y: 0 },
disableBlur = false,
onClickOutside,
onClose,
onOpen,
@ -123,7 +121,6 @@ export const Dropdown = ({
<DropdownContent
className={className}
floatingStyles={floatingStyles}
disableBlur={disableBlur}
dropdownMenuWidth={dropdownMenuWidth}
dropdownComponents={dropdownComponents}
dropdownId={dropdownId}

49
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
View File

@ -3,12 +3,14 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useInternalHotkeyScopeManagement } from '@/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import {
FloatingPortal,
Placement,
@ -19,6 +21,11 @@ import { Keys } from 'react-hotkeys-hook';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
export const StyledDropdownContentContainer = styled.div`
display: flex;
z-index: 30;
`;
export type DropdownContentProps = {
className?: string;
dropdownId: string;
@ -32,7 +39,6 @@ export type DropdownContentProps = {
scope: string;
};
onHotkeyTriggered?: () => void;
disableBlur?: boolean;
dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
dropdownComponents: React.ReactNode;
parentDropdownId?: string;
@ -49,7 +55,6 @@ export const DropdownContent = ({
floatingStyles,
hotkey,
onHotkeyTriggered,
disableBlur,
dropdownMenuWidth,
dropdownComponents,
avoidPortal,
@ -59,7 +64,7 @@ export const DropdownContent = ({
const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
const [dropdownMaxHeight] = useRecoilComponentStateV2(
const dropdownMaxHeight = useRecoilComponentValueV2(
dropdownMaxHeightComponentStateV2,
dropdownId,
);
@ -114,28 +119,36 @@ export const DropdownContent = ({
<HotkeyEffect hotkey={hotkey} onHotkeyTriggered={onHotkeyTriggered} />
)}
{avoidPortal ? (
<DropdownMenu
className={className}
disableBlur={disableBlur}
width={dropdownMenuWidth ?? dropdownWidth}
data-select-disable
<StyledDropdownContentContainer
ref={floatingUiRefs.setFloating}
style={dropdownMenuStyles}
>
{dropdownComponents}
</DropdownMenu>
<OverlayContainer>
<DropdownMenu
className={className}
width={dropdownMenuWidth ?? dropdownWidth}
data-select-disable
>
{dropdownComponents}
</DropdownMenu>
</OverlayContainer>
</StyledDropdownContentContainer>
) : (
<FloatingPortal>
<DropdownMenu
className={className}
disableBlur={disableBlur}
width={dropdownMenuWidth ?? dropdownWidth}
data-select-disable
<StyledDropdownContentContainer
ref={floatingUiRefs.setFloating}
style={dropdownMenuStyles}
>
{dropdownComponents}
</DropdownMenu>
<OverlayContainer>
<DropdownMenu
className={className}
width={dropdownMenuWidth ?? dropdownWidth}
data-select-disable
>
{dropdownComponents}
</DropdownMenu>
</OverlayContainer>
</StyledDropdownContentContainer>
</FloatingPortal>
)}
</>

19
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx
View File

@ -1,29 +1,12 @@
import styled from '@emotion/styled';
const StyledDropdownMenu = styled.div<{
disableBlur?: boolean;
disableBorder?: boolean;
width?: `${string}px` | `${number}%` | 'auto' | number;
}>`
backdrop-filter: ${({ theme, disableBlur }) =>
disableBlur ? 'none' : theme.blur.medium};
color: ${({ theme }) => theme.font.color.secondary};
background: ${({ theme, disableBlur }) =>
disableBlur
? theme.background.primary
: theme.background.transparent.primary};
border: ${({ disableBorder, theme }) =>
disableBorder ? 'none' : `1px solid ${theme.border.color.medium}`};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
flex-direction: column;
z-index: 30;
height: 100%;
width: ${({ width = 200 }) =>
typeof width === 'number' ? `${width}px` : width};
`;

5
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
View File

@ -13,11 +13,6 @@ const StyledInput = styled.input<{
}>`
${TEXT_INPUT_STYLE}
border: 1px solid ${({ theme, hasError }) =>
hasError ? theme.border.color.danger : theme.border.color.medium};
background-color: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-sizing: border-box;
font-weight: ${({ theme }) => theme.font.weight.medium};
height: 32px;

5
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx
View File

@ -6,12 +6,9 @@ import { TEXT_INPUT_STYLE } from 'twenty-ui';
const StyledDropdownMenuSearchInputContainer = styled.div`
align-items: center;
--vertical-padding: ${({ theme }) => theme.spacing(2)};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
flex-direction: row;
height: calc(36px - 2 * var(--vertical-padding));
min-height: calc(36px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) 0;
width: 100%;

33
packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx
View File

@ -3,8 +3,10 @@ import styled from '@emotion/styled';
import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
import { ReactNode } from 'react';
import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
type ExpandedListDropdownProps = {
anchorElement?: HTMLElement;
@ -16,11 +18,6 @@ type ExpandedListDropdownProps = {
const StyledExpandedListContainer = styled.div<{
withBorder?: boolean;
}>`
backdrop-filter: ${({ theme }) => theme.blur.strong};
background-color: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) =>
`0px 2px 4px ${theme.boxShadow.light}, 2px 4px 16px ${theme.boxShadow.strong}`};
display: flex;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(1)};
@ -33,6 +30,7 @@ const StyledExpandedListContainer = styled.div<{
`};
`;
// TODO: unify this and use Dropdown component instead
export const ExpandedListDropdown = ({
anchorElement,
children,
@ -55,19 +53,24 @@ export const ExpandedListDropdown = ({
return (
<FloatingPortal>
<DropdownMenu
<StyledDropdownContentContainer
ref={refs.setFloating}
style={floatingStyles}
width={
anchorElement
? Math.max(220, anchorElement.getBoundingClientRect().width)
: undefined
}
>
<StyledExpandedListContainer withBorder={withBorder}>
{children}
</StyledExpandedListContainer>
</DropdownMenu>
<OverlayContainer>
<DropdownMenu
width={
anchorElement
? Math.max(220, anchorElement.getBoundingClientRect().width)
: undefined
}
>
<StyledExpandedListContainer withBorder={withBorder}>
{children}
</StyledExpandedListContainer>
</DropdownMenu>
</OverlayContainer>
</StyledDropdownContentContainer>
</FloatingPortal>
);
};

20
packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx Normal file
View File

@ -0,0 +1,20 @@
import styled from '@emotion/styled';
// eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled
export const OverlayContainer = styled.div`
align-items: center;
display: flex;
backdrop-filter: ${({ theme }) => theme.blur.medium};
width: fit-content;
border-radius: ${({ theme }) => theme.border.radius.md};
background: ${({ theme }) => theme.background.transparent.primary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
overflow: hidden;
z-index: 30;
`;

1
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx
View File

@ -93,7 +93,6 @@ export const MenuItemWithOptionDropdown = ({
dropdownComponents={dropdownContent}
dropdownId={dropdownId}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
disableBlur
/>
</div>
{hasSubMenu && (

2
packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
View File

@ -17,7 +17,7 @@ import 'overlayscrollbars/overlayscrollbars.css';
const StyledScrollWrapper = styled.div<{ scrollHide?: boolean }>`
display: flex;
height: 100%;
height: fit-content;
width: 100%;
.os-scrollbar-handle {