fix(AsideHeader): also fix the collapsed items popup

gravity-ui · Sep 6, 2024 · d411f9b · d411f9b
1 parent 1b38d6b
commit d411f9b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
@@ -116,6 +116,18 @@ $block: '.#{variables.$ns}composite-bar-item';
         height: 100%;
         cursor: pointer;
 
+        background: none;
+        color: inherit;
+        border: none;
+        font: inherit;
+        outline: inherit;
+        text-decoration: inherit;
+
+        &:focus-visible {
+            outline: solid var(--g-color-line-misc);
+            outline-offset: -2px;
+        }
+
         &-icon {
             color: var(--gn-aside-header-item-icon-color, var(--_--item-icon-color));
             margin-right: 10px;

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -300,26 +300,21 @@ function CollapsedPopup({
                             title: titleEl,
                             icon: iconEl,
                         }: MakeItemParams) => {
-                            const res = (
-                                <div
+                            const [Tag, tagProps] = collapseItem.link
+                                ? ['a' as const, {href: collapseItem.link}]
+                                : ['button' as const, {}];
+
+                            return (
+                                <Tag
+                                    {...tagProps}
                                     className={b('collapse-item')}
-                                    onClick={(
-                                        event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-                                    ) => {
+                                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
                                         onItemClick?.(collapseItem, true, event);
                                     }}
                                 >
                                     {iconEl}
                                     {titleEl}
-                                </div>
-                            );
-
-                            return collapseItem.link ? (
-                                <a href={collapseItem.link} className={b('link')}>
-                                    {res}
-                                </a>
-                            ) : (
-                                res
+                                </Tag>
                             );
                         };