Some css improvements

Author: pksjce

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

@@ -42,57 +42,54 @@
 [data-overflow='menu-with-root'] .Item {
   display: inline-block;
   font-size: var(--text-body-size-medium);
-  color: var(--fgColor-link);
+  color: var(--fgColor-default);
   text-decoration: none;
   padding-inline: var(--base-size-6);
   padding-block: var(--base-size-4);
   border-radius: var(--borderRadius-medium);
 
   &:hover {
     background: var(--control-transparent-bgColor-hover);
+    text-decoration: none;
   }
 
   &:focus {
-    box-shadow: none;
-    outline: 2px solid var(--focus-outlineColor, var(--color-accent-fg));
-    outline-offset: -2px;
+    @mixin focusOutline;
   }
 }
 
-.MenuSummary {
-  list-style: none;
-  display: inline-block;
-  outline: none;
-  height: 0.5rem;
-}
-
-.MenuSummary::-webkit-details-marker {
-  display: none;
-}
-
 .MenuDetails {
   position: relative;
   display: inline-block;
 }
 
-.MenuDetails summary {
+summary {
   list-style: none;
   cursor: pointer;
   outline: none;
 }
 
-.MenuDetails summary::-webkit-details-marker {
+summary::-webkit-details-marker {
   display: none;
 }
 
 .MenuOverlay {
   position: absolute;
   z-index: 1;
-  box-shadow: var(--shadow-resting-medium);
+  box-shadow: var(--shadow-resting-small);
   border-radius: var(--borderRadius-large);
   background-color: var(--overlay-bgColor);
   list-style: none;
-  width: max-content;
+  min-width: var(--overlay-width-xsmall);
+  max-height: 100vh;
+  max-width: var(--overlay-width-small);
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .MenuOverlay {
+    animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
 }
 
 .ItemSeparator {
@@ -107,7 +104,6 @@
 .ItemWrapper {
   display: inline-block;
   font-size: var(--text-body-size-medium);
-  white-space: nowrap;
   list-style: none;
 
   &::after {

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -9,6 +9,7 @@ import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import Details from '../Details'
 import {ActionList} from '../ActionList'
 import {IconButton} from '../Button/IconButton'
+import {Tooltip} from '../TooltipV2'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {useResizeObserver} from '../hooks/useResizeObserver'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
@@ -94,19 +95,19 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
 
     return (
       <Details ref={detailsRefCallback} className={classes.MenuDetails}>
-        <Details.Summary className={classes.MenuSummary} tabIndex={-1}>
+        <Tooltip text={ariaLabel || `${items.length} more breadcrumb items`} direction={'e'}>
           <IconButton
+            as="summary"
             ref={iconButtonRef}
             aria-label={ariaLabel || `${items.length} more breadcrumb items`}
             aria-expanded={isOpen ? 'true' : 'false'}
-            tooltipDirection="w"
             onClick={handleSummaryClick}
             variant="invisible"
             size="small"
             icon={KebabHorizontalIcon}
             {...rest}
           />
-        </Details.Summary>
+        </Tooltip>
         <div ref={menuContainerRef} className={classes.MenuOverlay}>
           <ActionList>
             {items.map((item, index) => {