From a074b62ed13ee5e03a637bf311eb3d9ddec7b925 Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Fri, 26 Jun 2026 14:50:37 -0600 Subject: [PATCH] chore(studio): use sentence case for Data API access label (#47353) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What kind of change does this PR introduce? UI copy + agent guidance. ## What is the current behavior? - The Table Editor labels the Data API setting as "Data API Access" (title case). - Agents have no scoped pointer to our copywriting rules ## What is the new behavior? - Label uses sentence case: "Data API access" (e2e and test docs updated). - Agents are pointed at `apps/design-system/content/docs/copywriting.mdx` via `studio-copy.instructions.md` and `studio-ui-patterns` skill. ## Summary by CodeRabbit * **Bug Fixes** * Standardized the **“Data API access”** label casing across the Studio UI. * Updated end-to-end tests to assert the corrected label text. * **Documentation** * Updated Studio E2E test review instructions and examples to use **“Data API access”**. * Added/expanded Studio UI copywriting guidance, including where to source copy and how to apply consistent casing. --------- Co-authored-by: Cursor --- .claude/skills/studio-e2e-tests/SKILL.md | 2 +- .claude/skills/studio-ui-patterns/SKILL.md | 6 ++++++ .github/copilot-instructions.md | 1 + .github/instructions/studio-copy.instructions.md | 13 +++++++++++++ .../instructions/studio-e2e-tests.instructions.md | 2 +- .../SidePanelEditor/TableEditor/ApiAccessToggle.tsx | 2 +- e2e/studio/features/api-access-toggle.spec.ts | 10 +++++----- 7 files changed, 28 insertions(+), 8 deletions(-) create mode 100644 .github/instructions/studio-copy.instructions.md diff --git a/.claude/skills/studio-e2e-tests/SKILL.md b/.claude/skills/studio-e2e-tests/SKILL.md index 1006981e42d..ecd48bc8376 100644 --- a/.claude/skills/studio-e2e-tests/SKILL.md +++ b/.claude/skills/studio-e2e-tests/SKILL.md @@ -88,7 +88,7 @@ test.describe.configure({ mode: 'serial' }) 3. **`getByText` with exact match** - Good for unique text ```typescript - page.getByText('Data API Access', { exact: true }) + page.getByText('Data API access', { exact: true }) ``` 4. **`locator` with CSS** - Use sparingly, more fragile diff --git a/.claude/skills/studio-ui-patterns/SKILL.md b/.claude/skills/studio-ui-patterns/SKILL.md index 2a67de2bee4..c929e767a13 100644 --- a/.claude/skills/studio-ui-patterns/SKILL.md +++ b/.claude/skills/studio-ui-patterns/SKILL.md @@ -125,3 +125,9 @@ Forms in sheets: - `layout="horizontal"` for wider sheets - `layout="vertical"` for narrow sheets (`size="sm"` or below) + +## Copy + +Source of truth: `apps/design-system/content/docs/copywriting.mdx` — sentence case, title case, proper nouns, voice and tone. + +When changing visible copy, grep `e2e/studio/` for the old string. diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 827b4111518..b002e4a7b99 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -54,6 +54,7 @@ Path-specific rules in `.github/instructions/`: - **Error Handling**: `studio-error-handling.instructions.md` — error classification, `ErrorMatcher` usage - **E2E Tests**: `studio-e2e-tests.instructions.md` — selector priority, anti-patterns (`waitForTimeout`, `force: true`) - **Composition Patterns**: `studio-composition-patterns.instructions.md` — avoid boolean props, use compound components +- **UI Copy**: `studio-copy.instructions.md` → `apps/design-system/content/docs/copywriting.mdx` - **shadcn/Radix Components**: `studio-shadcn-components.instructions.md` — accessibility handled by primitives, do not flag - **Keyboard Shortcuts**: `studio-shortcuts.instructions.md` — shortcut registry pattern, search-input escape handler, when to flag missing coverage diff --git a/.github/instructions/studio-copy.instructions.md b/.github/instructions/studio-copy.instructions.md new file mode 100644 index 00000000000..7b662e0cf4f --- /dev/null +++ b/.github/instructions/studio-copy.instructions.md @@ -0,0 +1,13 @@ +--- +applyTo: 'apps/studio/**' +--- + +# Studio UI Copy + +All comments are **advisory**. + +**Source of truth:** `apps/design-system/content/docs/copywriting.mdx` — read it before writing or reviewing user-facing Studio strings. + +## Agent checklist (not in the design doc) + +- When changing visible copy, grep `e2e/studio/` and `.github/instructions/` for the old string. diff --git a/.github/instructions/studio-e2e-tests.instructions.md b/.github/instructions/studio-e2e-tests.instructions.md index 58488df8d18..590512b176b 100644 --- a/.github/instructions/studio-e2e-tests.instructions.md +++ b/.github/instructions/studio-e2e-tests.instructions.md @@ -23,7 +23,7 @@ All comments are **advisory**. 3. **`getByText` with exact match** — good for unique text ```typescript - page.getByText('Data API Access', { exact: true }) + page.getByText('Data API access', { exact: true }) ``` 4. **`locator` with CSS** — use sparingly, more fragile diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx index c1d276ac102..acdebff6d47 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx @@ -320,7 +320,7 @@ export const ApiAccessToggle = ({
-
Data API Access
+
Data API access

Allow this table to be queried via Supabase client libraries or the API directly

diff --git a/e2e/studio/features/api-access-toggle.spec.ts b/e2e/studio/features/api-access-toggle.spec.ts index 46bb1afc080..6a8e047d074 100644 --- a/e2e/studio/features/api-access-toggle.spec.ts +++ b/e2e/studio/features/api-access-toggle.spec.ts @@ -57,14 +57,14 @@ async function verifyTablePrivileges( } /** - * Locates the API access toggle switch for Data API Access. + * Locates the API access toggle switch for Data API access. * Only present when creating or duplicating a table (not when editing). */ function getApiAccessSwitch(page: Page) { const sidePanel = page.getByTestId('table-editor-side-panel') const dataApiSection = sidePanel .locator('div') - .filter({ hasText: 'Data API Access' }) + .filter({ hasText: 'Data API access' }) .filter({ has: page.getByRole('switch') }) return dataApiSection.getByRole('switch') } @@ -239,10 +239,10 @@ test.describe('API Access Toggle', () => { await page.getByRole('menuitem', { name: 'Edit table' }).click() await expect(page.getByTestId('table-editor-side-panel')).toBeVisible() - // Data API Access section is visible + // Data API access section is visible await expect( - page.getByText('Data API Access'), - 'Data API Access label should be visible in edit mode' + page.getByText('Data API access'), + 'Data API access label should be visible in edit mode' ).toBeVisible() // In edit mode the panel shows a "Manage access" link instead of a toggle switch