From 39e6ade7ea1c1a9abc0a2e8f8c1e3ad5c405b409 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Mon, 6 Oct 2025 11:15:34 -0700
Subject: [PATCH] docs: s2 docs quick fixes (#8967)

* docs: update the expanded key in s2 accordion docs

* increase gap between icons in available icons

* fix focus ring on search menu tabs
---
 packages/dev/s2-docs/pages/s2/Accordion.mdx |  2 +-
 packages/dev/s2-docs/src/IconCards.tsx      |  2 +-
 packages/dev/s2-docs/src/Tabs.tsx           | 25 ++++++++++++++++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index d8b12ac3907..5ca3f9cbe99 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -36,7 +36,7 @@ import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel, type Key} from
 import {useState} from 'react';
 
 function Example() {
-  let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['system']));
+  let [expandedKeys, setExpandedKeys] = useState(new Set<Key>(['settings']));
 
   return (
     <Accordion
diff --git a/packages/dev/s2-docs/src/IconCards.tsx b/packages/dev/s2-docs/src/IconCards.tsx
index edab43d71c2..69b94bc79a9 100644
--- a/packages/dev/s2-docs/src/IconCards.tsx
+++ b/packages/dev/s2-docs/src/IconCards.tsx
@@ -64,7 +64,7 @@ export function IconCards() {
     <Autocomplete filter={filter}>
       <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
         <SearchField size="L" aria-label="Search icons" placeholder="Search icons" />
-        <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(8, 8), preserveAspectRatio: true}}>
+        <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
           <ListBox
             onAction={(item) => handleCopyImport(item.toString())}
             items={iconList}
diff --git a/packages/dev/s2-docs/src/Tabs.tsx b/packages/dev/s2-docs/src/Tabs.tsx
index 8c8e3070ef7..c64dea712e8 100644
--- a/packages/dev/s2-docs/src/Tabs.tsx
+++ b/packages/dev/s2-docs/src/Tabs.tsx
@@ -74,7 +74,7 @@ const tablist = style({
   paddingStart: 12,
   flexShrink: 0,
   flexBasis: '[0%]',
-  gap: 32,
+  gap: 24,
   maxWidth: 240,
   height: 'full',
   paddingY: 4
@@ -161,7 +161,7 @@ function TabLine(props: TabLineProps) {
   );
 }
 
-const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({
+const tab = style<TabRenderProps & {density?: 'compact' | 'regular', orientation?: 'vertical' | 'horizontal', labelBehavior?: 'show' | 'hide'}>({
   ...focusRing(),
   display: 'flex',
   color: {
@@ -173,7 +173,26 @@ const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavi
   },
   borderRadius: 'sm',
   gap: 'text-to-visual',
-  height: 48,
+  height: {
+    orientation: {
+      horizontal: {
+        density: {
+          compact: 32,
+          regular: 48
+        }
+      }
+    }
+  },
+  minHeight: {
+    orientation: {
+      vertical: {
+        density: {
+          compact: 32,
+          regular: 48
+        }
+      }
+    }
+  },
   alignItems: 'center',
   position: 'relative',
   cursor: 'default',