BlueSky & more on desktop
lazurite.stormlightlabs.org/
tauri
rust
typescript
bluesky
appview
atproto
solid
refactor: improve compact button label handling and transitions
+31
-16
+1
-1
src/App.tsx
+1
-1
src/App.tsx
···
54
54
return (
55
55
<>
56
56
<main
57
-
class="grid h-screen min-h-screen overflow-hidden grid-cols-(--app-rail-cols) transition-[grid-template-columns] duration-300 ease-out max-lg:h-auto max-lg:min-h-screen max-lg:grid-cols-1 max-lg:overflow-visible"
57
+
class="grid h-screen min-h-screen overflow-hidden grid-cols-(--app-rail-cols) max-lg:h-auto max-lg:min-h-screen max-lg:grid-cols-1 max-lg:overflow-visible"
58
58
style={{ "--app-rail-cols": shell.railColumns }}>
59
59
<AppRail />
60
60
+10
-7
src/components/rail/AppRail.tsx
+10
-7
src/components/rail/AppRail.tsx
···
229
229
aria-expanded={open()}
230
230
aria-haspopup="menu"
231
231
onClick={handleToggle}
232
-
class="relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
232
+
class="relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
233
233
classList={{
234
-
"w-[2.75rem] justify-center": compact(),
235
-
"w-full justify-start px-3": !compact(),
234
+
"w-[2.75rem] justify-center gap-0": compact(),
235
+
"w-full justify-start gap-2.5 px-3": !compact(),
236
236
"bg-surface-container text-primary": open(),
237
237
}}>
238
238
<Icon iconClass={iconClassForTheme(props.currentTheme)} class="shrink-0 text-[1.25rem]" />
239
-
<Show when={!compact()}>
240
-
<span class="text-sm font-medium leading-none">Theme</span>
241
-
</Show>
239
+
<span
240
+
class="overflow-hidden whitespace-nowrap text-sm font-medium leading-none transition-[max-width,opacity] duration-200 ease-out motion-reduce:transition-none"
241
+
classList={{ "max-w-40 opacity-100": !compact(), "max-w-0 opacity-0": compact() }}
242
+
aria-hidden={compact() ? "true" : undefined}>
243
+
Theme
244
+
</span>
242
245
</button>
243
246
244
247
<Show when={open()}>
···
295
298
296
299
return (
297
300
<aside
298
-
class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-300 ease-out max-lg:grid max-lg:min-h-0 max-lg:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-lg:items-center max-lg:gap-x-4 max-lg:gap-y-3 max-lg:p-4"
301
+
class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-220 ease-out motion-reduce:transition-none max-lg:grid max-lg:min-h-0 max-lg:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-lg:items-center max-lg:gap-x-4 max-lg:gap-y-3 max-lg:p-4"
299
302
classList={{
300
303
"items-center px-4": shell.railCondensed && !shell.narrowViewport,
301
304
"gap-5": shell.railCondensed && !shell.narrowViewport,
+16
-7
src/components/rail/AppRailButton.tsx
+16
-7
src/components/rail/AppRailButton.tsx
···
27
27
</Show>
28
28
</Presence>
29
29
</div>
30
-
<Show when={!props.compact}>
31
-
<span class="text-sm font-medium leading-none">{props.label}</span>
32
-
</Show>
30
+
<span
31
+
class="overflow-hidden whitespace-nowrap text-sm font-medium leading-none transition-[max-width,opacity] duration-200 ease-out motion-reduce:transition-none"
32
+
classList={{ "max-w-40 opacity-100": !props.compact, "max-w-0 opacity-0": !!props.compact }}
33
+
aria-hidden={props.compact ? "true" : undefined}>
34
+
{props.label}
35
+
</span>
33
36
</>
34
37
);
35
38
}
···
39
42
<A
40
43
href={props.href}
41
44
end={props.end}
42
-
class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
45
+
class={"relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
43
46
activeClass="bg-surface-container text-primary"
44
47
inactiveClass=""
45
-
classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }}
48
+
classList={{
49
+
"w-[2.75rem] justify-center gap-0": !!props.compact,
50
+
"gap-2.5 px-3": !props.compact,
51
+
}}
46
52
aria-label={props.label}
47
53
title={props.label}>
48
54
<RailButtonContent {...props} />
···
54
60
return (
55
61
<button
56
62
type="button"
57
-
class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
58
-
classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }}
63
+
class={"relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"}
64
+
classList={{
65
+
"w-[2.75rem] justify-center gap-0": !!props.compact,
66
+
"gap-2.5 px-3": !props.compact,
67
+
}}
59
68
aria-label={props.label}
60
69
title={props.label}
61
70
onClick={() => props.onClick()}>
+4
-1
src/components/rail/tests/AppRailButton.test.tsx
+4
-1
src/components/rail/tests/AppRailButton.test.tsx
···
21
21
it("hides label text when compact", () => {
22
22
renderInRouter(() => <RailButton href="/auth" label="Accounts" icon="profile" compact />);
23
23
24
-
expect(screen.queryByText("Accounts")).not.toBeInTheDocument();
24
+
const label = screen.getByText("Accounts");
25
+
expect(label).toHaveClass("max-w-0");
26
+
expect(label).toHaveClass("opacity-0");
27
+
expect(label).toHaveAttribute("aria-hidden", "true");
25
28
});
26
29
27
30
it("uses rounded-lg (not rounded-full) for reduced rounding", () => {