From 9cde143971edbd7d4ef3e4e3d06e96bcee497110 Mon Sep 17 00:00:00 2001
From: JulianMaurin <julian.maurin@mergify.com>
Date: Tue, 30 Jun 2026 11:12:58 +0200
Subject: [PATCH] docs(conditions): add per-row anchors to the attributes
 tables

Each attribute row carries a stable `pull-request-attributes-<key>` id and a
hover-revealed `#` link, so individual attributes are deep-linkable like config
options (e.g. queue-rule-model-allow_inplace_checks). The id scheme reuses
OptionsTable's defToIdPrefix, and the anchor styling mirrors the config-option
pattern: scroll-margin for the sticky nav and a :target highlight.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Change-Id: Icad884bdd3c70cb3e90b12300d8e2af3832f7210
---
 src/components/Tables/OptionsTable.tsx        |  2 +-
 .../Tables/PullRequestAttributes.module.css   | 33 +++++++++++++++++++
 .../Tables/PullRequestAttributes.tsx          | 15 +++++++--
 3 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Tables/PullRequestAttributes.module.css

diff --git a/src/components/Tables/OptionsTable.tsx b/src/components/Tables/OptionsTable.tsx
index 0e272d166c..c7b0654a07 100644
--- a/src/components/Tables/OptionsTable.tsx
+++ b/src/components/Tables/OptionsTable.tsx
@@ -18,7 +18,7 @@ export default function OptionsTable({ def }: Def) {
   return OptionsTableBase(configSchema, options, def);
 }
 
-function defToIdPrefix(def: string): string {
+export function defToIdPrefix(def: string): string {
   return def.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
 
diff --git a/src/components/Tables/PullRequestAttributes.module.css b/src/components/Tables/PullRequestAttributes.module.css
new file mode 100644
index 0000000000..518eabbce7
--- /dev/null
+++ b/src/components/Tables/PullRequestAttributes.module.css
@@ -0,0 +1,33 @@
+.row {
+  scroll-margin-top: calc(var(--theme-navbar-height) + 1rem);
+}
+
+.row:target > td {
+  background-color: color-mix(in srgb, var(--section-accent) 6%, transparent);
+}
+
+.name {
+  white-space: nowrap;
+}
+
+.anchor {
+  margin-left: 0.4rem;
+  color: var(--theme-text-muted);
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
+}
+
+.anchor:hover,
+.anchor:focus {
+  color: var(--theme-link);
+}
+
+.row:hover .anchor,
+.row:focus-within .anchor,
+.row:target .anchor {
+  opacity: 1;
+}
diff --git a/src/components/Tables/PullRequestAttributes.tsx b/src/components/Tables/PullRequestAttributes.tsx
index a9623e116e..a7e2435c2a 100644
--- a/src/components/Tables/PullRequestAttributes.tsx
+++ b/src/components/Tables/PullRequestAttributes.tsx
@@ -1,6 +1,8 @@
 import { getAttributeSource } from '../../util/attributeMetadata';
 import configSchema from '../../util/sanitizedConfigSchema';
 import { getValueType } from './ConfigOptions';
+import { defToIdPrefix } from './OptionsTable';
+import styles from './PullRequestAttributes.module.css';
 
 import { renderMarkdown } from './utils';
 
@@ -17,6 +19,10 @@ interface ConditionMeta {
   };
 }
 
+// Mirror the config-option anchor scheme: `<def>-<key>`, e.g.
+// `pull-request-attributes-author`.
+const ID_PREFIX = defToIdPrefix('PullRequestAttributes');
+
 interface Props {
   staticAttributes?: Attributes;
   // When set, render only attributes whose metadata source matches (e.g. "github").
@@ -108,11 +114,16 @@ export default function PullRequestAttributes({ staticAttributes, source }: Prop
           {rows.map(([key, value]) => {
             const valueType = getValueType(configSchema, value);
             const meta = value as ConditionMeta;
+            const id = `${ID_PREFIX}-${key}`;
+            const href = `#${encodeURIComponent(id)}`;
 
             return (
-              <tr key={key}>
-                <td style={{ whiteSpace: 'nowrap' }}>
+              <tr key={key} id={id} className={styles.row}>
+                <td className={styles.name}>
                   <code>{key}</code>
+                  <a className={styles.anchor} href={href} aria-label={`Link to ${key}`}>
+                    #
+                  </a>
                 </td>
                 <td>{valueType}</td>
                 {hasConditionMetadata && (