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 a7a8b486c..5db27a0e8 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 6dc68a8cd..9dc5afd2f 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 68fa9f876..80d0877d0 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 41913e8ac..eb0c21487 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 d970f3c82..70643934d 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 5f1bf9618..96a620681 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 63af03fb0..69d33f9d9 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 7850cff2e..4e4715cbc 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 cf484a1fb..f3bf97d0d 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 2510c90c6..5967fbd0a 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 6f3e9d83f..acee89296 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 54c54c136..9a834c77a 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 72d7d00d5..61a5b62e1 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 000000000..1a8bc8bc3 --- /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 a9836e0cb..8daac17be 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 597ea6fcd..7aabec42b 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 67567b2ef..84f655a28 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 413909ca2..20259e6af 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 3767b2f2b..157ef04ee 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 30dfef721..0110c0f83 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 74b119113..3f83e5956 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 (