Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/icons/src/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,18 @@ describe("@corbits/icons", () => {
test("re-exports the bold icon provider and icon type", () => {
expect(typeof icons.BoldIconProvider).toBe("function");
});

// Regression for the oversized right-click menu / search bar: Phosphor's
// IconContext.Provider fully replaces the context value rather than
// merging with it, so a bare `{ weight: "bold" }` silently drops the
// library's own `size: "1em"` default. Any glyph mounted without an
// ancestor CSS rule or an explicit `size=` prop then renders as a bare
// <svg> with no width/height, which the browser falls back to sizing as
// a 300x150 replaced element.
test("BoldIconProvider preserves Phosphor's size default alongside bold weight", () => {
expect(icons.boldIconContextValue).toEqual({
size: "1em",
weight: "bold",
});
});
});
10 changes: 9 additions & 1 deletion packages/icons/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,20 @@ export {
X,
} from "@phosphor-icons/react";

/** `IconContext.Provider` replaces Phosphor's whole context value rather than
* merging with it, so this must restate every default the library ships
* (`size: "1em"`) alongside the one we're overriding (`weight: "bold"`) —
* dropping `size` silently un-sizes every glyph that has no ancestor CSS
* rule and no explicit `size=` prop, which is why the right-click menu and
* the search bar rendered at the browsers' unsized-<svg> fallback. */
export const boldIconContextValue = { size: "1em", weight: "bold" } as const;

/** Wraps a subtree so every Phosphor icon under it defaults to bold weight
* without repeating `weight="bold"` at each call site. Mounted once at each
* app's root (see `apps/web/src/app.tsx`). */
export function BoldIconProvider({ children }: { children: ReactNode }) {
return (
<IconContext.Provider value={{ weight: "bold" }}>
<IconContext.Provider value={boldIconContextValue}>
{children}
</IconContext.Provider>
);
Expand Down
Loading