From 5257ca840fca4f7085b08a244f75f98dce7d31b9 Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Wed, 20 Nov 2024 12:20:39 +0100 Subject: [PATCH 1/4] Fix UI dropdown-component by using floating-ui/react library and navbar bottom line --- package-lock.json | 35 ++++++++ package.json | 1 + .../dropdown/Dropdown.component.tsx | 88 +++++++++++++------ .../components/navbar/Navbar.component.tsx | 1 - 4 files changed, 95 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 43051962fa..bc99a1dc87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.3", + "@floating-ui/react": "^0.26.28", "@fortawesome/fontawesome-free": "^5.10.2", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-regular-svg-icons": "^5.15.3", @@ -2817,6 +2818,34 @@ "@floating-ui/utils": "^0.2.8" } }, + "node_modules/@floating-ui/react": { + "version": "0.26.28", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", + "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@floating-ui/utils": { "version": "0.2.8", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", @@ -21255,6 +21284,12 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", "dev": true }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index a313186a95..9b1b98496a 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ }, "dependencies": { "@floating-ui/dom": "^1.6.3", + "@floating-ui/react": "^0.26.28", "@fortawesome/fontawesome-free": "^5.10.2", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-regular-svg-icons": "^5.15.3", diff --git a/src/lib/components/dropdown/Dropdown.component.tsx b/src/lib/components/dropdown/Dropdown.component.tsx index 4ed975199b..834a57a75e 100644 --- a/src/lib/components/dropdown/Dropdown.component.tsx +++ b/src/lib/components/dropdown/Dropdown.component.tsx @@ -1,7 +1,6 @@ // @ts-nocheck -import { useState, useCallback } from 'react'; +import { useState, useRef, useCallback, useEffect } from 'react'; import styled, { css } from 'styled-components'; - import { ButtonStyled, ButtonIcon, @@ -14,6 +13,14 @@ import { getThemePropSelector } from '../../utils'; import { Icon } from '../icon/Icon.component'; import { useSelect } from 'downshift'; import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component'; +import { flip, offset, Placement, shift } from '@floating-ui/dom'; +import { useFloating, useInteractions, autoUpdate } from '@floating-ui/react'; + +// use of floating-ui/react ? +// Oui : ça permet de faciliter le float -> pourra etre utilisé pour d'autres composants ; éviter useEffect et une couche de complexité utilisant floating-ui/dom + +// NON : utilisation d'une bibliothèque externe + export type Item = { label: string; name?: string; @@ -29,6 +36,7 @@ type Props = { items: Items; icon?: JSX.Element; caret?: boolean; + placement?: Placement; }; const DropdownStyled = styled.div` position: relative; @@ -39,6 +47,13 @@ const DropdownStyled = styled.div` border-radius: 0; } `; + +// ------------------- replace first 4 lines with floatin-ui -------------- +// position: absolute; +// margin: 0; +// padding: 0; +// top: 50px; + const DropdownMenuStyled = styled.ul` position: absolute; margin: 0; @@ -49,9 +64,10 @@ const DropdownMenuStyled = styled.ul` max-height: 200px; min-width: 100%; overflow: auto; - border-bottom: 0.3px solid ${getThemePropSelector('border')}; display: ${(props) => (props.isOpen ? 'auto' : 'none')}; `; +// border-bottom: 0.3px solid ${getThemePropSelector('border')}; + const DropdownMenuItemStyled = styled.li` display: flex; align-items: center; @@ -97,6 +113,7 @@ function Dropdown({ variant = 'buttonSecondary', title, caret = true, + placement = 'bottom', ...rest }: Props) { const { @@ -109,12 +126,23 @@ function Dropdown({ items, itemToString: (item) => item?.label || '', }); + + const { refs, floatingStyles } = useFloating({ + // open: isOpen, + middleware: [offset(10), flip(), shift()], + placement: placement, + whileElementsMounted: autoUpdate, + }); + + const { getReferenceProps, getFloatingProps } = useInteractions(); + return ( {icon && ( @@ -134,32 +163,33 @@ function Dropdown({ )} - - - {items.map((item, index) => { - return ( - - {item.label} - - ); - })} - + + {items.map((item, index) => { + return ( + + {item.label} + + ); + })} + ); } diff --git a/src/lib/components/navbar/Navbar.component.tsx b/src/lib/components/navbar/Navbar.component.tsx index 25281ee860..c37e102d44 100644 --- a/src/lib/components/navbar/Navbar.component.tsx +++ b/src/lib/components/navbar/Navbar.component.tsx @@ -36,7 +36,6 @@ const NavbarContainer = styled.div` .sc-trigger-text { color: ${getThemePropSelector('textPrimary')}; } - border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3}; box-sizing: border-box; `}; `; From f1dc9412a625aa38db76b89b8c4cc3762aea5060 Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Wed, 20 Nov 2024 14:20:36 +0100 Subject: [PATCH 2/4] fix-PR --- .../components/dropdown/Dropdown.component.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/lib/components/dropdown/Dropdown.component.tsx b/src/lib/components/dropdown/Dropdown.component.tsx index 834a57a75e..39cf805a19 100644 --- a/src/lib/components/dropdown/Dropdown.component.tsx +++ b/src/lib/components/dropdown/Dropdown.component.tsx @@ -1,6 +1,5 @@ // @ts-nocheck -import { useState, useRef, useCallback, useEffect } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { ButtonStyled, ButtonIcon, @@ -16,11 +15,6 @@ import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component'; import { flip, offset, Placement, shift } from '@floating-ui/dom'; import { useFloating, useInteractions, autoUpdate } from '@floating-ui/react'; -// use of floating-ui/react ? -// Oui : ça permet de faciliter le float -> pourra etre utilisé pour d'autres composants ; éviter useEffect et une couche de complexité utilisant floating-ui/dom - -// NON : utilisation d'une bibliothèque externe - export type Item = { label: string; name?: string; @@ -48,12 +42,6 @@ const DropdownStyled = styled.div` } `; -// ------------------- replace first 4 lines with floatin-ui -------------- -// position: absolute; -// margin: 0; -// padding: 0; -// top: 50px; - const DropdownMenuStyled = styled.ul` position: absolute; margin: 0; @@ -66,7 +54,6 @@ const DropdownMenuStyled = styled.ul` overflow: auto; display: ${(props) => (props.isOpen ? 'auto' : 'none')}; `; -// border-bottom: 0.3px solid ${getThemePropSelector('border')}; const DropdownMenuItemStyled = styled.li` display: flex; @@ -138,7 +125,6 @@ function Dropdown({ return ( Date: Wed, 20 Nov 2024 17:42:20 +0100 Subject: [PATCH 3/4] fix PR --- src/lib/components/navbar/Navbar.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/navbar/Navbar.component.tsx b/src/lib/components/navbar/Navbar.component.tsx index c37e102d44..7913a3f875 100644 --- a/src/lib/components/navbar/Navbar.component.tsx +++ b/src/lib/components/navbar/Navbar.component.tsx @@ -37,6 +37,7 @@ const NavbarContainer = styled.div` color: ${getThemePropSelector('textPrimary')}; } box-sizing: border-box; + border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2}; `}; `; const NavbarMenu = styled.div` @@ -121,7 +122,7 @@ const NavbarMenuItem = styled.div` &:hover { background-color: ${getThemePropSelector('highlight')}; } - height: ${navbarHeight}; + height: auto; font-size: ${fontSize.base}; } .menu-item { From 917aab360c32bd86ce49f30f14e62fa0a6215d0f Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Wed, 20 Nov 2024 18:10:26 +0100 Subject: [PATCH 4/4] fix PR --- src/lib/components/dropdown/Dropdown.component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/dropdown/Dropdown.component.tsx b/src/lib/components/dropdown/Dropdown.component.tsx index 39cf805a19..58d521fc03 100644 --- a/src/lib/components/dropdown/Dropdown.component.tsx +++ b/src/lib/components/dropdown/Dropdown.component.tsx @@ -115,7 +115,6 @@ function Dropdown({ }); const { refs, floatingStyles } = useFloating({ - // open: isOpen, middleware: [offset(10), flip(), shift()], placement: placement, whileElementsMounted: autoUpdate,