feat: remove expand toggle from collapsed sidebar, bump v0.1.54
Collapsed sidebar no longer shows an expand button — clicking any section icon expands the sidebar and opens that section instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -128,6 +128,7 @@ Notes:
|
|||||||
- `maxHeight` (CSS string) constrains the content area — section header stays visible, children scroll
|
- `maxHeight` (CSS string) constrains the content area — section header stays visible, children scroll
|
||||||
- Both groups scroll independently when the viewport is short
|
- Both groups scroll independently when the viewport is short
|
||||||
- Custom thin scrollbars match the dark sidebar aesthetic
|
- Custom thin scrollbars match the dark sidebar aesthetic
|
||||||
|
- No expand button when collapsed — clicking any section icon expands the sidebar and opens that section
|
||||||
```
|
```
|
||||||
|
|
||||||
### Data page pattern
|
### Data page pattern
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@cameleer/design-system",
|
"name": "@cameleer/design-system",
|
||||||
"version": "0.1.53",
|
"version": "0.1.54",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "./dist/index.es.js",
|
"main": "./dist/index.es.js",
|
||||||
"module": "./dist/index.es.js",
|
"module": "./dist/index.es.js",
|
||||||
|
|||||||
@@ -53,11 +53,6 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarCollapsed .collapseToggle {
|
|
||||||
top: 52px;
|
|
||||||
right: 50%;
|
|
||||||
transform: translateX(50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logoImg {
|
.logoImg {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
|
|||||||
@@ -132,8 +132,8 @@ describe('Sidebar compound component', () => {
|
|||||||
expect(onCollapseToggle).toHaveBeenCalledTimes(1)
|
expect(onCollapseToggle).toHaveBeenCalledTimes(1)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 7. renders expand toggle label when collapsed
|
// 7. hides collapse toggle when sidebar is collapsed
|
||||||
it('renders expand toggle when sidebar is collapsed', () => {
|
it('hides collapse toggle when sidebar is collapsed', () => {
|
||||||
render(
|
render(
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Sidebar collapsed onCollapseToggle={vi.fn()}>
|
<Sidebar collapsed onCollapseToggle={vi.fn()}>
|
||||||
@@ -141,7 +141,8 @@ describe('Sidebar compound component', () => {
|
|||||||
</Sidebar>
|
</Sidebar>
|
||||||
</Wrapper>,
|
</Wrapper>,
|
||||||
)
|
)
|
||||||
expect(screen.getByRole('button', { name: /expand sidebar/i })).toBeInTheDocument()
|
expect(screen.queryByRole('button', { name: /collapse sidebar/i })).not.toBeInTheDocument()
|
||||||
|
expect(screen.queryByRole('button', { name: /expand sidebar/i })).not.toBeInTheDocument()
|
||||||
})
|
})
|
||||||
|
|
||||||
// 8. renders search input and calls onSearchChange
|
// 8. renders search input and calls onSearchChange
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import {
|
|||||||
Search,
|
Search,
|
||||||
X,
|
X,
|
||||||
ChevronsLeft,
|
ChevronsLeft,
|
||||||
ChevronsRight,
|
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import styles from './Sidebar.module.css'
|
import styles from './Sidebar.module.css'
|
||||||
import { SidebarContext, useSidebarContext } from './SidebarContext'
|
import { SidebarContext, useSidebarContext } from './SidebarContext'
|
||||||
@@ -194,14 +193,14 @@ function SidebarRoot({
|
|||||||
className ?? '',
|
className ?? '',
|
||||||
].filter(Boolean).join(' ')}
|
].filter(Boolean).join(' ')}
|
||||||
>
|
>
|
||||||
{/* Collapse toggle */}
|
{/* Collapse toggle (hidden when collapsed — sections expand on click) */}
|
||||||
{onCollapseToggle && (
|
{onCollapseToggle && !collapsed && (
|
||||||
<button
|
<button
|
||||||
className={styles.collapseToggle}
|
className={styles.collapseToggle}
|
||||||
onClick={onCollapseToggle}
|
onClick={onCollapseToggle}
|
||||||
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
aria-label="Collapse sidebar"
|
||||||
>
|
>
|
||||||
{collapsed ? <ChevronsRight size={14} /> : <ChevronsLeft size={14} />}
|
<ChevronsLeft size={14} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user