Fixed dropdown blur and unified components #9062

lucasbordeau · 2024-12-13T16:19:01Z

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

packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx

greptile-apps

PR Summary

This PR unifies backdrop filter handling across dropdowns and overlay components by introducing a new StyledOverlayContainer component, particularly addressing Firefox-specific issues with stacked backdrop filters.

Added new StyledOverlayContainer in /ui/layout/overlay/components/StyledOverlayContainer.tsx as the single source for backdrop filter CSS
Removed disableBlur prop from all dropdown-related components to centralize blur control
Removed FieldInputOverlay.tsx and OVERLAY_BACKGROUND constant in favor of the new unified approach
Adjusted positioning offsets in RecordInlineCellEditMode and RecordTableCellEditMode for better alignment
Consolidated dropdown menu styling by removing redundant backdrop filters and border styles from individual components

_{55 file(s) reviewed, 12 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-12-13T16:21:15Z

...ront/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx

+    <TextInput
+      placeholder={fieldDefinition.metadata.placeHolder}
+      autoFocus
+      value={draftValue?.toString() ?? ''}


style: Consider validating the input string before converting to ensure it's a valid number

greptile-apps · 2024-12-13T16:21:45Z

...front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx

@@ -9,6 +9,7 @@ const StyledInlineCellButtonContainer = styled.div`
  align-items: center;
  display: flex;
 `;
+
 export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {


logic: component name in export doesn't match filename (RecordInlineCellEditButton.tsx vs RecordInlineCellButton)

greptile-apps · 2024-12-13T16:23:18Z

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

+        date={internalValue ?? new Date()}
+        onChange={handleChange}
+        onMouseSelect={handleMouseSelect}
+        clearable={clearable ? clearable : false}


style: redundant ternary - clearable ? clearable : false can be simplified to !!clearable

greptile-apps · 2024-12-13T16:25:37Z

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

+              dropdownHeightComponentStateV2.atomFamily({
+                instanceId: dropdownId,
+              }),
+            )


logic: onClickOutside is called inside handleClickableComponentClick which seems incorrect - this callback should typically be for clicks outside the dropdown, not for clicks on the clickable component itself

greptile-apps · 2024-12-13T16:25:38Z

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

+    ({ snapshot, set }) =>
+      (availableHeight: any, elements: any) => {
+        flushSync(() => {
+          const elementRect = elements.floating.getBoundingClientRect();


style: using querySelector('#root') is fragile - consider passing boundary as a prop or finding a more robust way to determine the boundary

greptile-apps · 2024-12-13T16:26:23Z

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

 const StyledDropdownMenu = styled.div<{
-  disableBlur?: boolean;
  disableBorder?: boolean;
  width?: `${string}px` | `${number}%` | 'auto' | number;
 }>`


logic: disableBlur prop was removed but still accepting disableBorder - should probably remove disableBorder too since border styling was moved

greptile-apps · 2024-12-13T16:27:56Z

packages/twenty-front/src/modules/workflow/components/WorkflowVariablePicker.tsx

+    <SearchVariablesDropdown
+      inputId={inputId}
+      onVariableSelect={onVariableSelect}
+      disabled={disabled}
+    />


logic: multiline prop is passed to component but not used after removing StyledSearchVariablesDropdownContainer wrapper. This may break multiline functionality.

greptile-apps · 2024-12-13T16:28:02Z

...es/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx

  if (disabled === true) {
    return (


style: strict equality comparison with boolean is unnecessary, can be simplified to 'if (disabled)'

greptile-apps · 2024-12-13T16:28:03Z

...es/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx

-        <StyledDropdownComponentsContainer>
-          {renderSearchVariablesDropdownComponents()}
-        </StyledDropdownComponentsContainer>
+        !isDefined(selectedStep) ? (


style: this conditional rendering could be simplified using a switch statement or early returns for better readability

greptile-apps · 2024-12-13T16:28:45Z

...rc/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx

+        ) : (
+          <MenuItem
+            key="no-steps"
+            onClick={() => {}}


style: empty onClick handler could be omitted since it's not doing anything

charlesBochet · 2024-12-13T17:00:50Z

Found 3 bugs while doing the functional review

- Fixed Multi Record Select width

lucasbordeau · 2024-12-17T14:55:17Z

Fixes #8840

lucasbordeau added 3 commits December 13, 2024 16:20

WIP

f16894c

FIX

34e0f59

Fixed Dropdown height and overflow bugs

fc4b5ec

charlesBochet reviewed Dec 13, 2024

View reviewed changes

packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx Outdated Show resolved Hide resolved

charlesBochet approved these changes Dec 13, 2024

View reviewed changes

greptile-apps bot reviewed Dec 13, 2024

View reviewed changes

lucasbordeau added 3 commits December 13, 2024 17:45

Fixes

322227e

Fix

cfa1bb2

Fix

5b6b79f

lucasbordeau changed the title ~~Fix dopwon blur~~ Fix dropdown blur and unified components Dec 13, 2024

lucasbordeau changed the title ~~Fix dropdown blur and unified components~~ Fixed dropdown blur and unified components Dec 13, 2024

charlesBochet added the -PR: awaiting author label Dec 13, 2024

charlesBochet assigned lucasbordeau Dec 13, 2024

lucasbordeau added 7 commits December 16, 2024 12:11

Fix

368bd4d

- Fixed activity target inline cell

5e810fa

- Fixed Multi Record Select width

Fix

1a1658c

Fixed text input common container

d2e7073

WIP

addd175

Fixed CustomSlashMenu

31895d9

Fixed alignment problem

992e690

lucasbordeau enabled auto-merge (squash) December 17, 2024 11:00

lucasbordeau added 3 commits December 17, 2024 12:10

Merge branch 'main' into fix/dropdown-blur

a209f14

Fixed OverlayContainer

cb180e6

Merge branch 'main' into fix/dropdown-blur

ee308f1

lucasbordeau disabled auto-merge December 17, 2024 14:26

lucasbordeau enabled auto-merge (squash) December 17, 2024 14:26

lucasbordeau merged commit 860dec3 into main Dec 17, 2024
22 checks passed

lucasbordeau deleted the fix/dropdown-blur branch December 17, 2024 14:28

lucasbordeau mentioned this pull request Dec 17, 2024

Dropdowns are transparent in table records --- in Firefox #8840

Closed

ehconitin mentioned this pull request Dec 18, 2024

fix: recordBoard sticky header + scrollThumb #8946

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed dropdown blur and unified components #9062

Fixed dropdown blur and unified components #9062

lucasbordeau commented Dec 13, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

greptile-apps bot Dec 13, 2024

charlesBochet commented Dec 13, 2024

lucasbordeau commented Dec 17, 2024

Fixed dropdown blur and unified components #9062

Fixed dropdown blur and unified components #9062

Conversation

lucasbordeau commented Dec 13, 2024 • edited Loading

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 13, 2024

Choose a reason for hiding this comment

charlesBochet commented Dec 13, 2024

lucasbordeau commented Dec 17, 2024

lucasbordeau commented Dec 13, 2024 •

edited

Loading