Merge branch 'main' into r/upgrade-deps

iTwin · Feb 5, 2025 · ab88842 · ab88842
2 parents 58725e8 + 239cf55
commit ab88842
Show file tree

Hide file tree

Showing 23 changed files with 820 additions and 650 deletions.
diff --git a/.changeset/selfish-foxes-punch.md b/.changeset/selfish-foxes-punch.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fine-tuned the default Tooltip delay to `{ open: 100ms, close: 200ms }`.
diff --git a/.changeset/seven-parents-complain.md b/.changeset/seven-parents-complain.md
@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Added `Tooltip` delay grouping to components that use `Tooltip` internally. This prevents the tooltip from lingering when quickly hovering across different parts of the component.
+* Components affected: `SideNavigation`, `Slider`, `Stepper`, `List`.
diff --git a/apps/react-workshop/src/AvatarGroup.test.ts b/apps/react-workshop/src/AvatarGroup.test.ts
@@ -19,7 +19,7 @@ describe('AvatarGroup', () => {
 
       if (testName.includes('Tooltip')) {
         cy.get('div').contains('3').trigger('mouseenter');
-        cy.wait(50);
+        cy.wait(100);
       }
 
       cy.compareSnapshot(testName);

diff --git a/apps/react-workshop/src/Breadcrumbs.test.ts b/apps/react-workshop/src/Breadcrumbs.test.ts
@@ -27,7 +27,7 @@ describe('Breadcrumbs', () => {
         cy.get('button').eq(1).click();
       } else if (testName === 'Custom Overflow Back Button') {
         cy.get('button').eq(1).trigger('mouseenter');
-        cy.wait(60);
+        cy.wait(100);
       }
 
       cy.compareSnapshot(testName);

diff --git a/apps/react-workshop/src/Stepper.test.ts b/apps/react-workshop/src/Stepper.test.ts
@@ -14,7 +14,7 @@ describe('Stepper', () => {
       if (testName.includes('Tooltip')) {
         cy.get('#ladle-root').within(() => {
           cy.get('li').first().trigger('mouseenter'); // trigger tooltip
-          cy.wait(50);
+          cy.wait(100);
         });
       }
 

diff --git a/apps/react-workshop/src/Tooltip.test.ts b/apps/react-workshop/src/Tooltip.test.ts
@@ -11,7 +11,7 @@ describe('Tooltip', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
       cy.get('#tooltip-target').trigger('mouseenter');
-      cy.wait(50);
+      cy.wait(100);
       cy.compareSnapshot(testName);
     });
   });

diff --git a/apps/react-workshop/src/WorkflowDiagram.test.ts b/apps/react-workshop/src/WorkflowDiagram.test.ts
@@ -14,7 +14,7 @@ describe('WorkflowDiagram', () => {
       if (testName.includes('Tooltip')) {
         cy.get('#ladle-root').within(() => {
           cy.get('li').first().trigger('mouseenter'); // trigger tooltip
-          cy.wait(50);
+          cy.wait(100);
         });
       }
 

diff --git a/examples/DropdownMenu.hidemiddleware.jsx b/examples/DropdownMenu.hidemiddleware.jsx
@@ -29,7 +29,7 @@ export default () => {
   const items = new Array(30).fill(0);
 
   return (
-    <Surface className='demo-container'>
+    <Surface>
       <Surface.Body as={List} className='list'>
         {items.map((_, i) => (
           <ListItem key={i}>

diff --git a/packages/itwinui-css/src/expandable-block/expandable-block.scss b/packages/itwinui-css/src/expandable-block/expandable-block.scss
@@ -17,6 +17,8 @@
   --_iui-expandable-block-header-focus-offset: -2px;
   --_iui-expandable-block-header-focus-thickness: 2px;
 
+  --_iui-expandable-block-header-caption-color-hover: var(--iui-color-text-hover);
+
   &[data-iui-expanded='true'] {
     --_iui-expandable-block-header-bottom-border-radius: 0;
     --_iui-expandable-block-expander-icon-transform: rotate(90deg);
@@ -80,14 +82,14 @@
 
   &:where(:hover) {
     --_iui-expandable-block-expander-icon-fill: var(--iui-color-icon-hover);
-    --_iui-expandable-block-header-caption-color: var(--iui-color-text-hover);
+    --_iui-expandable-block-header-caption-color: var(--_iui-expandable-block-header-caption-color-hover);
     --_iui-expandable-block-header-label-color: var(--iui-color-text-hover);
 
     background-color: var(--_iui-expandable-block-header-background-color-hover);
 
     @media (forced-colors: active) {
       --_iui-expandable-block-expander-icon-fill: Highlight;
-      --_iui-expandable-block-header-caption-color: Highlight;
+      --_iui-expandable-block-header-caption-color-hover: Highlight;
       --_iui-expandable-block-header-label-color: Highlight;
       border-color: Highlight;
     }

diff --git a/packages/itwinui-css/src/menu/menu.scss b/packages/itwinui-css/src/menu/menu.scss
@@ -33,6 +33,8 @@ $iui-active-outline: 1px solid var(--iui-color-border-accent);
 }
 
 :is(.iui-list-item, .iui-menu-item-skeleton) {
+  --_iui-list-item-background-hover: var(--iui-color-background-hover);
+
   display: flex;
   align-items: center;
   gap: var(--iui-size-xs);
@@ -54,7 +56,7 @@ $iui-active-outline: 1px solid var(--iui-color-border-accent);
   &:where([data-iui-actionable='true']:hover),
   &:where(:has(.iui-link-action):hover) {
     cursor: pointer;
-    background-color: var(--iui-color-background-hover);
+    background-color: var(--_iui-list-item-background-hover);
   }
 
   &:where(.iui-large, [data-iui-size='large']) {

diff --git a/packages/itwinui-css/src/progress-indicator/progress-indicator.scss b/packages/itwinui-css/src/progress-indicator/progress-indicator.scss
@@ -4,6 +4,10 @@
 @use 'sass:string';
 @use '../mixins';
 
+:is(.iui-progress-indicator-radial, .iui-progress-indicator-linear) {
+  --_iui-progress-indicator-color-default-progress: var(--iui-color-border-accent);
+}
+
 .iui-progress-indicator-radial {
   --_iui-progress-indicator-radial-size: #{map.get(mixins.$iui-icon-sizes, xl)};
   vertical-align: middle;
@@ -34,7 +38,7 @@
   &::after {
     mask-composite: subtract;
     mask-clip: border-box, content-box;
-    background-color: var(--iui-color-border-accent);
+    background-color: var(--_iui-progress-indicator-color-default-progress);
   }
 
   &::before,
@@ -144,7 +148,7 @@
     content: '';
     block-size: var(--iui-size-2xs);
     $percentage: var(--iui-progress-percentage, 100%);
-    $fill: var(--_iui-progress-indicator-track-fill, var(--iui-color-border-accent));
+    $fill: var(--_iui-progress-indicator-track-fill, var(--_iui-progress-indicator-color-default-progress));
 
     background-color: var(--iui-color-border);
     background-image: linear-gradient(90deg, $fill 0% 100%);

diff --git a/packages/itwinui-css/src/tabs/base.scss b/packages/itwinui-css/src/tabs/base.scss
@@ -18,6 +18,16 @@ $borderless-horizontal-tab-min-height: calc(
 );
 
 @mixin iui-tabs-wrapper {
+  --_iui-tab-color-stripe-blue: var(--iui-color-border-accent);
+  --_iui-tab-color-stripe-green: var(--iui-color-border-positive);
+  --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-blue);
+
+  --_iui-tab-color-default: var(--iui-color-text);
+  --_iui-tab-color-selected: var(--iui-color-text-accent);
+  --_iui-tab-color-disabled: var(--iui-color-text-disabled);
+  --_iui-tab-color-green-selected: var(--iui-color-text-positive);
+  --_iui-tab-color: var(--_iui-tab-color-default);
+
   display: grid;
   position: relative;
 }
@@ -44,13 +54,17 @@ $borderless-horizontal-tab-min-height: calc(
     min-block-size: calc(var(--iui-size-m) * 2.5);
     block-size: 100%;
     cursor: pointer;
-    color: var(--iui-color-text);
+    color: var(--_iui-tab-color);
     transition: background-color var(--iui-duration-1) ease-out;
     text-align: start;
     scroll-margin: var(--iui-size-m);
 
+    &::after {
+      background-color: var(--_iui-tab-color-stripe);
+    }
+
     &[aria-selected='true'] {
-      color: var(--iui-color-text-accent);
+      --_iui-tab-color: var(--_iui-tab-color-selected);
 
       .iui-tab-icon svg {
         fill: currentColor;
@@ -63,7 +77,7 @@ $borderless-horizontal-tab-min-height: calc(
 
     &:is([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) {
       cursor: not-allowed;
-      color: var(--iui-color-text-disabled);
+      --_iui-tab-color: var(--_iui-tab-color-disabled);
 
       .iui-tab-description {
         color: inherit;
@@ -105,7 +119,7 @@ $borderless-horizontal-tab-min-height: calc(
     }
 
     &[aria-selected='true'] {
-      color: var(--iui-color-text-positive);
+      --_iui-tab-color: var(--_iui-tab-color-green-selected);
 
       .iui-tab-icon svg {
         fill: currentColor;
@@ -235,7 +249,8 @@ $borderless-horizontal-tab-min-height: calc(
   .iui-tab::after {
     content: '';
     position: absolute;
-    background-color: var(--iui-color-border-accent);
+
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-blue);
   }
 
   [aria-selected='true']::after {
@@ -247,19 +262,20 @@ $borderless-horizontal-tab-min-height: calc(
   }
 
   &.iui-green .iui-tab::after {
-    background-color: var(--iui-color-border-positive);
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-green);
   }
 }
 
 @mixin iui-tab-animated {
   &::after {
     position: absolute;
     content: ' ';
-    background-color: var(--iui-color-border-accent);
+
+    background-color: var(--_iui-tab-color-stripe);
   }
 
   &.iui-green::after {
-    background-color: var(--iui-color-border-positive);
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-green);
   }
 
   .iui-horizontal &::after {

diff --git a/packages/itwinui-css/src/tabs/default.scss b/packages/itwinui-css/src/tabs/default.scss
@@ -81,7 +81,7 @@
   }
 
   &.iui-green .iui-tab::after {
-    background-color: var(--iui-color-border-positive);
+    --_iui-tab-color-stripe: var(--_iui-tab-color-stripe-green);
   }
 
   ~ .iui-tabs-content {

diff --git a/packages/itwinui-react/package.json b/packages/itwinui-react/package.json
@@ -120,7 +120,7 @@
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@vitest/coverage-v8": "^1.6.1",
     "eslint": "^8",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
@@ -129,7 +129,7 @@
     "react-dom": "^18.0.0",
     "typescript": "5",
     "vite": "~5.4.14",
-    "vitest": "^1.2.1"
+    "vitest": "^1.6.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

diff --git a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx
@@ -14,6 +14,7 @@ import {
   CompositeItem,
   FloatingDelayGroup,
 } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
 // ----------------------------------------------------------------------------
 
@@ -131,7 +132,7 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
   );
 
   return (
-    <FloatingDelayGroup delay={{ open: 50, close: 250 }}>
+    <FloatingDelayGroup delay={defaultTooltipDelay}>
       <ButtonGroupContext.Provider value={orientation}>
         {props.role === 'toolbar' ? (
           <Composite

diff --git a/packages/itwinui-react/src/core/List/List.tsx b/packages/itwinui-react/src/core/List/List.tsx
@@ -2,9 +2,27 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../../utils/index.js';
+import * as React from 'react';
+import { Box, type PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
+import cx from 'classnames';
 
-export const List = polymorphic.div('iui-list', { role: 'list' });
+export const List = React.forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+
+  return (
+    <FloatingDelayGroup delay={defaultTooltipDelay}>
+      <Box
+        as='div'
+        ref={ref}
+        role='list'
+        {...rest}
+        className={cx('iui-list', className)}
+      />
+    </FloatingDelayGroup>
+  );
+}) as PolymorphicForwardRefComponent<'div'>;
 if (process.env.NODE_ENV === 'development') {
   List.displayName = 'List';
 }
diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx
@@ -7,6 +7,8 @@ import cx from 'classnames';
 import { SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
 // ----------------------------------------------------------------------------
 
@@ -137,41 +139,43 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         className={cx('iui-side-navigation-wrapper', wrapperProps?.className)}
         ref={forwardedRef}
       >
-        <Box
-          as='div'
-          className={cx(
-            'iui-side-navigation',
-            {
-              'iui-expanded': isExpanded,
-              'iui-collapsed': !isExpanded,
-            },
-            className,
-          )}
-          {...rest}
-        >
-          {expanderPlacement === 'top' && ExpandButton}
+        <FloatingDelayGroup delay={defaultTooltipDelay}>
           <Box
             as='div'
-            {...contentProps}
-            className={cx('iui-sidenav-content', contentProps?.className)}
+            className={cx(
+              'iui-side-navigation',
+              {
+                'iui-expanded': isExpanded,
+                'iui-collapsed': !isExpanded,
+              },
+              className,
+            )}
+            {...rest}
           >
+            {expanderPlacement === 'top' && ExpandButton}
             <Box
               as='div'
-              {...topProps}
-              className={cx('iui-top', topProps?.className)}
+              {...contentProps}
+              className={cx('iui-sidenav-content', contentProps?.className)}
             >
-              {items}
-            </Box>
-            <Box
-              as='div'
-              {...bottomProps}
-              className={cx('iui-bottom', bottomProps?.className)}
-            >
-              {secondaryItems}
+              <Box
+                as='div'
+                {...topProps}
+                className={cx('iui-top', topProps?.className)}
+              >
+                {items}
+              </Box>
+              <Box
+                as='div'
+                {...bottomProps}
+                className={cx('iui-bottom', bottomProps?.className)}
+              >
+                {secondaryItems}
+              </Box>
             </Box>
+            {expanderPlacement === 'bottom' && ExpandButton}
           </Box>
-          {expanderPlacement === 'bottom' && ExpandButton}
-        </Box>
+        </FloatingDelayGroup>
 
         {submenu && isSubmenuOpen ? submenu : null}
       </Box>