fix: feedback clementino smart one about expandable

scaleway · Apr 3, 2024 · 33e40b4 · 33e40b4
1 parent bb8bc1a
commit 33e40b4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/.changeset/itchy-maps-turn.md b/.changeset/itchy-maps-turn.md
@@ -2,4 +2,5 @@
 "@ultraviolet/plus": patch
 ---
 
-Fix `<Navigation />` to work better with slider, have better tab index and close the menu when clicking
+- Fix `<Navigation />` to work better with slider, have better tab index and close the menu when clicking
+- Fix `<EstimateCost />` to have prop `overlayMargin` in order to adapt the overlay depending on the width of the navigation
diff --git a/.changeset/nervous-schools-smile.md b/.changeset/nervous-schools-smile.md
@@ -2,4 +2,5 @@
 "@ultraviolet/ui": patch
 ---
 
-Add `tabIndex` on `<Tooltip />` component to be able to disable tab when the children is already tabbable
+- Add `tabIndex` on `<Tooltip />` component to be able to disable tab when the children is already tabbable
+- Fix `<Expandable />` to add `visibility: hidden` when the component is collapsed to avoid tabulation on hidden elements
diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -330,26 +330,26 @@ export const Item = ({
   const PaddedStack = noExpand ? Stack : PaddingStack
 
   const hasHrefAndNoChildren = href && !children
-  const haspinnedFeatureAndNoChildren =
+  const hasPinnedFeatureAndNoChildren =
     pinnedFeature && !children && !noPinButton
   const isItemPinned = pinnedItems.includes(label)
   const shouldShowPinnedButton = useMemo(() => {
     if (href || disabled) return false
 
     if (pinnedItems.length >= pinLimit && type === 'default') return false
 
-    if (haspinnedFeatureAndNoChildren && type !== 'default') {
+    if (hasPinnedFeatureAndNoChildren && type !== 'default') {
       return true
     }
 
-    if (haspinnedFeatureAndNoChildren && !isItemPinned) {
+    if (hasPinnedFeatureAndNoChildren && !isItemPinned) {
       return true
     }
 
     return false
   }, [
     disabled,
-    haspinnedFeatureAndNoChildren,
+    hasPinnedFeatureAndNoChildren,
     href,
     isItemPinned,
     pinLimit,
@@ -474,7 +474,7 @@ export const Item = ({
             </Stack>
           </Stack>
           <Stack direction="row" alignItems="center" gap={href ? 1 : undefined}>
-            {badgeText || haspinnedFeatureAndNoChildren ? (
+            {badgeText || hasPinnedFeatureAndNoChildren ? (
               <>
                 {badgeText ? (
                   <StyledBadge

diff --git a/packages/ui/src/components/Expandable/index.tsx b/packages/ui/src/components/Expandable/index.tsx
@@ -70,6 +70,9 @@ export const Expandable = ({
   useEffect(() => {
     if (opened && ref.current && height) {
       ref.current.style.maxHeight = `${height}px`
+      if (!minHeight) {
+        ref.current.style.visibility = ''
+      }
       transitionTimer.current = setTimeout(() => {
         if (ref.current) {
           ref.current.style.maxHeight = 'initial'
@@ -85,6 +88,11 @@ export const Expandable = ({
           if (ref.current) {
             ref.current.style.maxHeight = `${minHeight}px`
             ref.current.style.overflow = 'hidden'
+            setTimeout(() => {
+              if (ref.current && !minHeight) {
+                ref.current.style.visibility = 'hidden'
+              }
+            }, ANIMATION_DURATION)
           }
         }, 0)
       }