From 860dec3428f641cc2e245077479ad24cc7e7ca8a Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 17 Dec 2024 15:28:26 +0100 Subject: [PATCH] Fixed dropdown blur and unified components (#9062) - 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 --- .../ActivityTargetInlineCellEditMode.tsx | 11 +-- .../AdvancedFilterAddFilterRuleSelect.tsx | 1 - .../AdvancedFilterLogicalOperatorDropdown.tsx | 1 - .../AdvancedFilterRuleOptionsDropdown.tsx | 1 - .../AdvancedFilterViewFilterFieldSelect.tsx | 1 - .../AdvancedFilterViewFilterOperandSelect.tsx | 1 - .../AdvancedFilterViewFilterValueInput.tsx | 1 - .../ObjectOptionsDropdownMenuContent.tsx | 4 +- .../components/RecordBoardCard.tsx | 5 +- .../RecordBoardColumnDropdownMenu.tsx | 34 ++++---- .../RecordBoardColumnNewOpportunity.tsx | 20 +---- .../components/FormDateFieldInput.tsx | 6 +- .../components/FormSelectFieldInput.tsx | 29 +++---- .../input/components/CurrencyFieldInput.tsx | 31 ++++---- .../input/components/FullNameFieldInput.tsx | 39 +++++----- .../input/components/MultiItemFieldInput.tsx | 10 +-- .../input/components/NumberFieldInput.tsx | 8 +- .../input/components/PhonesFieldInput.tsx | 1 - .../input/components/RawJsonFieldInput.tsx | 29 ++++--- .../components/RelationToOneFieldInput.tsx | 24 ++---- .../input/components/TextFieldInput.tsx | 6 +- .../components/RecordInlineCellEditButton.tsx | 1 + .../components/RecordInlineCellEditMode.tsx | 19 ++--- .../components/RecordInlineCellValue.tsx | 1 + .../components/RecordTableCellEditMode.tsx | 19 ++--- .../components/MultiRecordSelect.tsx | 3 +- .../components/SingleRecordSelect.tsx | 9 +-- ...FunctionTabEnvironmentVariableTableRow.tsx | 40 +++++----- .../field/input/components/AddressInput.tsx | 10 --- .../field/input/components/CurrencyInput.tsx | 4 - .../ui/field/input/components/DateInput.tsx | 35 +++------ .../input/components/DoubleTextInput.tsx | 78 +++++++++---------- .../input/components/FieldInputContainer.tsx | 10 +++ .../input/components/FieldInputOverlay.tsx | 16 ---- .../input/components/FieldTextAreaOverlay.tsx | 16 ---- .../field/input/components/TextAreaInput.tsx | 27 +------ .../ui/input/components/IconPicker.tsx | 7 +- .../modules/ui/input/components/Select.tsx | 3 - .../CurrencyPickerDropdownSelect.tsx | 2 +- .../components/AbsoluteDatePickerHeader.tsx | 2 - .../date/components/DateTimeInput.tsx | 2 - .../date/components/InternalDatePicker.tsx | 3 - .../components/RelativeDatePickerHeader.tsx | 2 - .../PhoneCountryPickerDropdownSelect.tsx | 5 +- .../input/editor/components/BlockEditor.tsx | 15 +++- .../editor/components/CustomSlashMenu.tsx | 56 ++++++++----- .../layout/dropdown/components/Dropdown.tsx | 3 - .../dropdown/components/DropdownContent.tsx | 49 +++++++----- .../dropdown/components/DropdownMenu.tsx | 19 +---- .../dropdown/components/DropdownMenuInput.tsx | 5 -- .../components/DropdownMenuSearchInput.tsx | 5 +- .../components/ExpandedListDropdown.tsx | 33 ++++---- .../overlay/components/OverlayContainer.tsx | 20 +++++ .../components/MenuItemWithOptionDropdown.tsx | 1 - .../scroll/components/ScrollWrapper.tsx | 2 +- .../ViewPickerContentCreateMode.tsx | 3 - .../components/ViewPickerContentEditMode.tsx | 1 - .../components/WorkflowSingleRecordPicker.tsx | 2 +- .../components/WorkflowVariablePicker.tsx | 2 +- .../components/SearchVariablesDropdown.tsx | 65 ++++++---------- .../SearchVariablesDropdownFieldItems.tsx | 38 ++++----- .../SearchVariablesDropdownObjectItems.tsx | 66 +++++++--------- ...archVariablesDropdownWorkflowStepItems.tsx | 56 ++++++------- .../DateTimeSettingsTimeZoneSelect.tsx | 1 - .../src/theme/constants/OverlayBackground.ts | 9 --- packages/twenty-ui/src/theme/index.ts | 1 - 66 files changed, 427 insertions(+), 602 deletions(-) create mode 100644 packages/twenty-front/src/modules/ui/field/input/components/FieldInputContainer.tsx delete mode 100644 packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx delete mode 100644 packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx create mode 100644 packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx delete mode 100644 packages/twenty-ui/src/theme/constants/OverlayBackground.ts diff --git a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx index a7a8b486ce..5db27a0e8d 100644 --- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx +++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled'; import { isNull } from '@sniptt/guards'; import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil'; import { v4 } from 'uuid'; @@ -32,12 +31,6 @@ import { MultiRecordSelect } from '@/object-record/relation-picker/components/Mu import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext'; import { prefillRecord } from '@/object-record/utils/prefillRecord'; -const StyledSelectContainer = styled.div` - position: absolute; - left: 0; - top: 0; -`; - type ActivityTargetInlineCellEditModeProps = { activity: Task | Note; activityTargetWithTargetRecords: ActivityTargetWithTargetRecord[]; @@ -282,7 +275,7 @@ export const ActivityTargetInlineCellEditMode = ({ ); return ( - + <> @@ -295,6 +288,6 @@ export const ActivityTargetInlineCellEditMode = ({ - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx index 6dc68a8cd6..9dc5afd2fe 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx @@ -137,7 +137,6 @@ export const AdvancedFilterAddFilterRuleSelect = ({ return ( diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx index 68fa9f8763..80d0877d04 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown.tsx @@ -22,7 +22,6 @@ export const AdvancedFilterLogicalOperatorDropdown = ({ return ( 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}; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx index 41913e8aca..eb0c214873 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx @@ -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)}; } diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx index d970f3c825..70643934da 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx @@ -57,7 +57,6 @@ export const RelativeDatePickerHeader = ( return ( { diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx index 5f1bf96184..96a620681a 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx @@ -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 ( - + <> setSearchFilter(event.currentTarget.value)} @@ -91,6 +90,6 @@ export const PhoneCountryPickerDropdownSelect = ({ )} - + ); }; diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx index 63af03fb0d..69d33f9d93 100644 --- a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx +++ b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx index 7850cff2e5..4e4715cbcf 100644 --- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx +++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx @@ -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; -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 ( - - - - {props.items.map((item, index) => ( - item.onItemClick()} - text={item.title} - LeftIcon={item.Icon} - selected={props.selectedIndex === index} - /> - ))} - - - + + {createPortal( + + + + + {props.items.map((item, index) => ( + item.onItemClick()} + text={item.title} + LeftIcon={item.Icon} + selected={props.selectedIndex === index} + /> + ))} + + + + , + document.body, + )} + ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index cf484a1fb0..f3bf97d0d6 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -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 = ({ 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 = ({ )} {avoidPortal ? ( - - {dropdownComponents} - + + + {dropdownComponents} + + + ) : ( - - {dropdownComponents} - + + + {dropdownComponents} + + + )} diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx index 2510c90c61..5967fbd0a8 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx @@ -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}; `; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index 6f3e9d83fc..acee892968 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx @@ -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; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index 54c54c1360..9a834c77a0 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx @@ -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%; diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx index 72d7d00d5a..61a5b62e13 100644 --- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx @@ -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 ( - - - {children} - - + + + + {children} + + + + ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx new file mode 100644 index 0000000000..1a8bc8bc3a --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx @@ -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; +`; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx index a9836e0cbc..8daac17be8 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx @@ -93,7 +93,6 @@ export const MenuItemWithOptionDropdown = ({ dropdownComponents={dropdownContent} dropdownId={dropdownId} dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }} - disableBlur /> {hasSubMenu && ( diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx index 597ea6fcd6..7aabec42bb 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx @@ -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 { diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx index 67567b2ef9..84f655a28b 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx @@ -128,7 +128,6 @@ export const ViewPickerContentCreateMode = () => { setHotkeyScope(ViewsHotkeyScope.ListDropdown)} /> { { setHotkeyScope(ViewsHotkeyScope.ListDropdown)} /> theme.font.color.tertiary}; padding: ${({ theme }) => theme.spacing(2)}; :hover { @@ -27,12 +27,7 @@ const StyledDropdownVariableButtonContainer = styled( } `; -const StyledDropdownComponentsContainer = styled(DropdownMenuItemsContainer)` - display: flex; - flex-direction: column; -`; - -const SearchVariablesDropdown = ({ +export const SearchVariablesDropdown = ({ inputId, onVariableSelect, disabled, @@ -76,36 +71,6 @@ const SearchVariablesDropdown = ({ setSelectedStep(undefined); }; - const renderSearchVariablesDropdownComponents = () => { - if (!isDefined(selectedStep)) { - return ( - - ); - } - - if (isDefined(objectNameSingularToSelect)) { - return ( - - ); - } - - return ( - - ); - }; - if (disabled === true) { return ( } dropdownComponents={ - - {renderSearchVariablesDropdownComponents()} - + !isDefined(selectedStep) ? ( + + ) : isDefined(objectNameSingularToSelect) ? ( + + ) : ( + + ) } dropdownPlacement="bottom-end" - dropdownOffset={{ x: 0, y: 4 }} + dropdownOffset={{ x: 2, y: 4 }} /> ); }; - -export default SearchVariablesDropdown; diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx index 413909ca20..20259e6af8 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx @@ -1,5 +1,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; +import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { BaseOutputSchema, LinkOutputSchema, @@ -8,11 +10,9 @@ import { } from '@/workflow/search-variables/types/StepOutputSchema'; import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema'; import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema'; -import { useTheme } from '@emotion/react'; import { useState } from 'react'; import { - HorizontalSeparator, IconChevronLeft, isDefined, MenuItemSelect, @@ -37,7 +37,6 @@ export const SearchVariablesDropdownFieldItems = ({ onSelect, onBack, }: SearchVariablesDropdownFieldItemsProps) => { - const theme = useTheme(); const [currentPath, setCurrentPath] = useState([]); const [searchInputValue, setSearchInputValue] = useState(''); const { getIcon } = useIcons(); @@ -139,30 +138,25 @@ export const SearchVariablesDropdownFieldItems = ({ > - setSearchInputValue(event.target.value)} /> - - {filteredOptions.map(([key, value]) => ( - handleSelectField(key)} - text={value.label || key} - hasSubMenu={!value.isLeaf} - LeftIcon={value.icon ? getIcon(value.icon) : undefined} - /> - ))} + + + {filteredOptions.map(([key, value]) => ( + handleSelectField(key)} + text={value.label || key} + hasSubMenu={!value.isLeaf} + LeftIcon={value.icon ? getIcon(value.icon) : undefined} + /> + ))} + ); }; diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx index 3767b2f2be..157ef04ee1 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx @@ -1,16 +1,16 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; +import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { OutputSchema, StepOutputSchema, } from '@/workflow/search-variables/types/StepOutputSchema'; import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema'; import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema'; -import { useTheme } from '@emotion/react'; import { useState } from 'react'; import { - HorizontalSeparator, IconChevronLeft, MenuItemSelect, OverflowingTextWithTooltip, @@ -28,7 +28,6 @@ export const SearchVariablesDropdownObjectItems = ({ onSelect, onBack, }: SearchVariablesDropdownObjectItemsProps) => { - const theme = useTheme(); const [currentPath, setCurrentPath] = useState([]); const [searchInputValue, setSearchInputValue] = useState(''); const { getIcon } = useIcons(); @@ -119,44 +118,39 @@ export const SearchVariablesDropdownObjectItems = ({ - setSearchInputValue(event.target.value)} /> - - {shouldDisplaySubStepObject && displayedSubStepObject?.label && ( - - )} - {filteredOptions.map(([key, value]) => ( - handleSelectField(key)} - text={value.label || key} - hasSubMenu={!value.isLeaf} - LeftIcon={value.icon ? getIcon(value.icon) : undefined} - /> - ))} + + + {shouldDisplaySubStepObject && displayedSubStepObject?.label && ( + + )} + {filteredOptions.map(([key, value]) => ( + handleSelectField(key)} + text={value.label || key} + hasSubMenu={!value.isLeaf} + LeftIcon={value.icon ? getIcon(value.icon) : undefined} + /> + ))} + ); }; diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx index 30dfef7210..0110c0f83d 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx +++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx @@ -1,11 +1,11 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; +import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema'; -import { useTheme } from '@emotion/react'; import { useState } from 'react'; import { - HorizontalSeparator, IconX, MenuItem, MenuItemSelect, @@ -24,7 +24,6 @@ export const SearchVariablesDropdownWorkflowStepItems = ({ steps, onSelect, }: SearchVariablesDropdownWorkflowStepItemsProps) => { - const theme = useTheme(); const { getIcon } = useIcons(); const [searchInputValue, setSearchInputValue] = useState(''); @@ -41,40 +40,35 @@ export const SearchVariablesDropdownWorkflowStepItems = ({ - setSearchInputValue(event.target.value)} /> - - {availableSteps.length > 0 ? ( - availableSteps.map((item, _index) => ( - onSelect(item.id)} - text={item.name} - LeftIcon={item.icon ? getIcon(item.icon) : undefined} - hasSubMenu + + + {availableSteps.length > 0 ? ( + availableSteps.map((item, _index) => ( + onSelect(item.id)} + text={item.name} + LeftIcon={item.icon ? getIcon(item.icon) : undefined} + hasSubMenu + /> + )) + ) : ( + {}} + text="No variables available" + LeftIcon={undefined} + hasSubMenu={false} /> - )) - ) : ( - {}} - text="No variables available" - LeftIcon={undefined} - hasSubMenu={false} - /> - )} + )} + ); }; diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx index 74b1191137..3f83e59568 100644 --- a/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx +++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx @@ -19,7 +19,6 @@ export const DateTimeSettingsTimeZoneSelect = ({ return (