refactor: update sidebar workspace switcher trigger styles for consistency
This commit is contained in:
@@ -48,12 +48,6 @@ export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
|
|||||||
<WorkspaceSwitcher
|
<WorkspaceSwitcher
|
||||||
currentWorkspace="dashboard"
|
currentWorkspace="dashboard"
|
||||||
variant="sidebar"
|
variant="sidebar"
|
||||||
trigger={
|
|
||||||
<SidebarMenuButton
|
|
||||||
size="lg"
|
|
||||||
className="data-[slot=sidebar-menu-button]:p-1.5!"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
</SidebarMenu>
|
</SidebarMenu>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { readFile } from "node:fs/promises";
|
|||||||
import { describe, it } from "node:test";
|
import { describe, it } from "node:test";
|
||||||
|
|
||||||
const source = await readFile(new URL("./workspace-switcher.tsx", import.meta.url), "utf8");
|
const source = await readFile(new URL("./workspace-switcher.tsx", import.meta.url), "utf8");
|
||||||
|
const appSidebarSource = await readFile(new URL("./app-sidebar.tsx", import.meta.url), "utf8");
|
||||||
|
|
||||||
describe("workspace switcher config", () => {
|
describe("workspace switcher config", () => {
|
||||||
it("contains dashboard and workbench destinations", async () => {
|
it("contains dashboard and workbench destinations", async () => {
|
||||||
@@ -25,8 +26,14 @@ it("does not auto-open the rail menu from focus or hover events", async () => {
|
|||||||
it("centers the dashboard switcher logo and shows a collapsed switch indicator", async () => {
|
it("centers the dashboard switcher logo and shows a collapsed switch indicator", async () => {
|
||||||
assert.match(source, /variant === "sidebar" &&[\s\S]*group-data-\[collapsible=icon\]:p-0!/);
|
assert.match(source, /variant === "sidebar" &&[\s\S]*group-data-\[collapsible=icon\]:p-0!/);
|
||||||
assert.match(source, /variant === "sidebar" &&[\s\S]*group-data-\[collapsible=icon\]:justify-center/);
|
assert.match(source, /variant === "sidebar" &&[\s\S]*group-data-\[collapsible=icon\]:justify-center/);
|
||||||
|
assert.match(appSidebarSource, /className="relative data-\[slot=sidebar-menu-button\]:p-1\.5! group-data-\[collapsible=icon\]:justify-center group-data-\[collapsible=icon\]:p-0!"/);
|
||||||
assert.match(source, /const switchIndicatorClassName =\s*"absolute bottom-0\.5 right-0\.5 size-2\.5/);
|
assert.match(source, /const switchIndicatorClassName =\s*"absolute bottom-0\.5 right-0\.5 size-2\.5/);
|
||||||
assert.match(source, /variant === "rail" \? \([\s\S]*<ChevronsUpDownIcon className=\{switchIndicatorClassName\} \/>/);
|
assert.match(source, /variant === "rail" \? \([\s\S]*<ChevronsUpDownIcon className=\{switchIndicatorClassName\} \/>/);
|
||||||
assert.match(source, /className=\{cn\(switchIndicatorClassName, "hidden group-data-\[collapsible=icon\]:block"\)\}/);
|
assert.match(source, /className=\{cn\(switchIndicatorClassName, "hidden group-data-\[collapsible=icon\]:block"\)\}/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("uses the same compact trigger footprint for dashboard collapsed and workbench rail switchers", async () => {
|
||||||
|
assert.match(source, /variant === "rail" &&\s*"relative size-8 rounded-md/);
|
||||||
|
assert.doesNotMatch(source, /variant === "rail" &&\s*"relative size-11/);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export function WorkspaceSwitcher({
|
|||||||
variant === "sidebar" &&
|
variant === "sidebar" &&
|
||||||
"relative data-[slot=sidebar-menu-button]:p-1.5! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:data-[slot=sidebar-menu-button]:p-0!",
|
"relative data-[slot=sidebar-menu-button]:p-1.5! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:data-[slot=sidebar-menu-button]:p-0!",
|
||||||
variant === "rail" &&
|
variant === "rail" &&
|
||||||
"relative size-11 rounded-lg border-0 bg-transparent p-0 shadow-none hover:bg-sidebar-accent",
|
"relative size-8 rounded-md border-0 bg-transparent p-0 shadow-none hover:bg-sidebar-accent",
|
||||||
className
|
className
|
||||||
)
|
)
|
||||||
const triggerContent =
|
const triggerContent =
|
||||||
|
|||||||
Reference in New Issue
Block a user