@gogitcms/design-system 0.16.0-next.1 → 0.16.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.1",
+  "version": "0.16.0-next.2",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ContentBrowser.forms.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
 import { ThemeProvider } from "../ThemeProvider";
 import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
 import { FORMS_NAV_KEY, formsNavKey, type FormInfo, type FormsApi } from "../forms";
@@ -109,3 +109,49 @@ test("an open form takes the whole content area", async () => {
   expect(screen.queryByTestId("forms-empty")).not.toBeInTheDocument();
   expect(screen.queryByTestId("resize-forms")).not.toBeInTheDocument();
 });
+
+// Media, Forms and Changes head their content pane with PaneTitle; a collection
+// heads the same pane with its own header. They have to be the same heading, or
+// the title moves and changes size as you switch between them.
+test("the forms heading matches a collection's, not a smaller indented one", () => {
+  const { unmount } = render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey={FORMS_NAV_KEY}
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+        forms={makeApi()}
+      />,
+    ),
+  );
+  // Scoped to the pane: "Forms" is also the nav item that got us here.
+  const formsHeading = within(screen.getByTestId("pane-forms")).getByText("Forms");
+  // The heading sits directly in Pane's header row — the row with the pane's
+  // height and the rule under it. A padded wrapper of its own in between is
+  // what used to push this title a step right of every collection's.
+  expect(formsHeading.parentElement).toHaveStyle({ height: "48px", paddingLeft: "16px" });
+  const formsStyle = window.getComputedStyle(formsHeading);
+  unmount();
+
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+      />,
+    ),
+  );
+  const collectionHeading = within(screen.getByTestId("pane-entries")).getByText("Posts");
+  const collectionStyle = window.getComputedStyle(collectionHeading);
+
+  expect(formsStyle.fontSize).toBe(collectionStyle.fontSize);
+  expect(formsStyle.fontWeight).toBe(collectionStyle.fontWeight);
+  expect(formsStyle.flexGrow).toBe(collectionStyle.flexGrow);
+});

package/src/components/ContentBrowser.tsx

@@ -5082,14 +5082,20 @@ function mediaSetLabel(sets: MediaSetInfo[], name: string): string {
   return set ? titleCaseWord(set.name) : titleCaseWord(name);
 }
 
-// PaneTitle is the content pane's heading, matching the entry list's header
-// height so the panes line up when switching between content and media.
+// PaneTitle is the content pane's heading for the surfaces with no controls
+// beside it — Changes, Media, Forms.
+//
+// Deliberately the same Text the collection header uses (`listHeader`), and
+// nothing else. Pane's header row already supplies the height, the horizontal
+// padding and the rule beneath, so the padded wrapper this used to add sat
+// inside that padding and pushed the title a step right of every collection's —
+// at `body` rather than `h3`, so it read a size smaller too. Switching between
+// Posts and Media moved the heading twice over.
 function PaneTitle({ title }: { title: string }) {
-  const t = useTheme();
   return (
-    <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(3) }}>
-      <Text variant="body" weight="semibold">{title}</Text>
-    </View>
+    <Text variant="h3" weight="semibold" style={{ flex: 1 }}>
+      {title}
+    </Text>
   );
 }