Replace research shields.io badges with design-system chips (F3) by VatsalSy · Pull Request #159 · comphy-lab/comphy-lab.github.io

VatsalSy · 2026-11-01T10:22:21Z

Description

Design-audit finding F3 (26 Oct 2026): replace ~104 third-party img.shields.io badges on /research/ with self-hosted CoMPhy design-system chips built from token CSS.

All linked paper actions (DOI, arXiv, PDF, video, GitHub, Blog, thesis, etc.) use the teal interactive a.chip style. DOI and arXiv identifier values use IBM Plex Mono via span.chip__id; venue labels stay IBM Plex Sans. Linked chips use inline-block so label + id stay one text flow (no flex column split). Blog · Coming Soon badges are kept structurally unchanged in content. Research media layout from #157 / #158 is untouched.

Type of Change

Bug fix
New feature
Content update (Team/Publication)
Documentation update
Other (please describe): design-system adherence / F3 badge conversion

Changes Made

Converted 106 shields.io markdown badges in _research/index.md to <a class="chip" href="…">…</a> (same hrefs and visible meaning)
Wrapped 32 DOI / arXiv identifier segments in <span class="chip__id"> (Plex Mono token)
Added teal interactive a.chip styles and .chip__id in assets/css/bridge.css
Kept chip text as a single inline flow (display: inline-block + .chip__id { display: inline }); overflow-wrap: break-word for DOI wraps
Updated assets/css/research-v2.css chip-row wrapping; removed shields.io image selectors
Updated AGENTS.md research badge authoring example to chips + mono ids

Testing Done

Tested locally using bundle exec jekyll serve (static _site serve + Playwright)
Checked all links and references (hrefs preserved 1:1)
Verified content formatting
Cross-browser testing (if UI changes) — Chromium Playwright light/dark @ 1280 & 390
Verified long DOI chips wrap as one flowing pill at 390px (label then id; spaces around · / DOI:)
./scripts/lint-check.sh
npm test (215 passed)
npm run lint
./scripts/build.sh

Screenshots

Before (production shields.io)

After (token chips + mono identifiers)

Related Issues

Design audit F3 (26 Oct 2026)

Checklist

Code follows the project's style guidelines
All links are valid and working
Images are optimized and properly sized
Content is properly formatted
Documentation has been updated (if needed)
Changes have been tested locally
This PR is single-purpose and does not mix dependency/security updates with unrelated formatting or content cleanups
All review threads are resolved or have an explicit won't-fix / follow-up disposition before merge
Every accepted review finding that identifies a reproducible bug or edge case either lands a regression test in this PR or has a linked follow-up issue referenced in the thread resolution

Additional Notes

Teal (--c-accent-teal) is the only interactive accent on linked chips; purple/blue/coral chip variants remain non-link labels elsewhere.
No generated files edited (search_db.json, _ds_*, standalone HTML, adherence config).
Badge count converted: 106. Identifier spans: 32.

Summary by CodeRabbit

Style
- Publication links on the research page now appear as styled text chips instead of badge images, while retaining their destinations and showing publication, repository, blog, PDF or video labels.
- The 2022 research-highlight DOI link also appears as a text chip.
- arXiv chips display their identifiers, and long labels wrap within the available space.
- Chips have teal hover and keyboard-focus states, with styling for dark themes. Research images retain consistent styling.

Convert all 106 img.shields.io badges on /research/ to self-hosted a.chip links using token teal for interactive accents. Update bridge and research-v2 styles for chip rows; keep Blog Coming Soon and PR #157/#158 media layout intact.

coderabbitai · 2026-11-01T10:22:39Z

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Essentials
Run ID: 3cd36f69-4dfc-4126-80fb-44822850d70d

Commits

Reviewing files that changed from the base of the PR and between b70c293 and dc0c912.

Files selected for processing: 2

assets/css/bridge.css
assets/css/research-v2.css

Files skipped from review as they are similar to previous changes: 2

assets/css/bridge.css
assets/css/research-v2.css

Included review availability: This review used your included allowance. 2 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

Recent review details

Context from checks skipped due to timeout: 1

GitHub Check: CodeRabbit

Walkthrough

Research publication badge links are replaced with text chip links. Their destinations are retained, while some labels are revised or added. CSS updates define linked-chip states and adjust the research-page layout for chip links.

Changes: Research chip links

Layer / File(s)	Summary
Replace publication badges with text chips `AGENTS.md`, `_research/index.md`	The instructions example and publication entries use text chip links instead of badge images. Existing destinations are retained; some labels are revised or added.
Style linked chips and research layout `assets/css/bridge.css`, `assets/css/research-v2.css`	Linked chips receive teal, hover, keyboard-focus, dark-theme, and identifier styles. Research paragraphs containing chip links use wrapping layout, and the static-image rule now covers all research-content images.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

comphy-lab/comphy-lab.github.io#157: Adds image-sizing rules that exclude shields.io images. This change replaces those images and updates the image selector.

Merge Risk: Minimal · up to dc0c9

No actionable merge-blocking issue was established. The publication links retain their destinations, and the chip styles support wrapping.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: replacing research shields.io badges with design-system chips.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 0 files. (2 skipped: 2 unsupported.)

Finishing Touches

Simplify code

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Copilot

🟡 Changes recommended

The linked-chip style removes the bottom border, leaving incomplete pill outlines that the hover color rule cannot restore.

1 open issue

Keep the chip’s bottom border when removing link underlines · New

What changed in this PR

Replaces third-party Shields.io badges on the research page with token-based chips, continuing the site’s design-system migration while preserving link destinations and existing media layouts.

Changes:

Converts 106 publication-action badges to HTML chip links.
Adds teal linked-chip styling, hover and keyboard-focus states, and responsive wrapping.
Updates the research authoring example to use chips.

File	Description
`assets/css/research-v2.css`	Adds chip-row wrapping and removes badge-specific image selectors.
`assets/css/bridge.css`	Defines shared interactive styling for linked chips.
`AGENTS.md`	Updates the publication-action markup example.
`_research/index.md`	Replaces image badges with text-based chip links.

_{Review effort: Balanced}

comphy-bot · 2026-11-01T10:31:30Z

comphy-bot review status for comphy-lab/comphy-lab.github.io#159 at 60342bad: reviewing-lanes

Review started; code-review lanes are running.

Drop border-bottom: 0 on a.chip so the pill outline stays complete; suppress the prose-link underline with text-decoration only.

Copilot

🟢 Approval recommended

No active review issues are reported for the research badge-to-chip replacement.

No open issues 🎉

1 resolved since last review

Keep the chip’s bottom border when removing link underlines

_{Review effort: Balanced}

Wrap identifier segments in span.chip__id so venue labels stay IBM Plex Sans while DOIs and arXiv ids use the mono token.

Copilot

🟢 Approval recommended

There are no active review issues with the research-link chip update.

No open issues 🎉

_{Review effort: Balanced}

comphy-bot · 2026-11-01T10:52:29Z

comphy-bot review status for comphy-lab/comphy-lab.github.io#159 at b70c293e: synthesis

Lane review is complete; findings are being verified and synthesised.

Use inline-block on a.chip so label and .chip__id stay one flowing text run (not flex columns), keep spaces around · and DOI:, and prefer break-word wraps at / and . instead of mid-digit splits.

comphy-bot

Review: Replace research shields.io badges with design-system chips (F3)

Summary

+169/-127 across 4 files. Reviewed the exact head b70c293ed896de136a768032e6780f470e2fd0a7, including all 7 required review units and cross-file chip/token styling.

Findings

No actionable findings. The converted publication actions preserve their destinations and identifier text. The previous linked-chip bottom-border finding is fixed at this head; the pill border remains intact while text underlines are suppressed. Reviewed wrapping rules, native-link keyboard semantics, focus-visible styling, and light/dark token overrides.

Verification

Fresh GitHub build, content-rules and PR-hygiene checks passed; deployment is skipped for this PR.
Deterministic patch checks passed.
Reviewed existing peer threads and verified the reported border issue against the current source.
Source review only: I did not independently rerun the author's browser screenshots or local test suite.

Copilot

🟢 Approval recommended

The research badge-to-chip update has no active review issues.

No open issues 🎉

_{Review effort: Balanced}

Copilot AI balanced review requested due to automatic review settings November 1, 2026 10:22

Copilot started reviewing on behalf of VatsalSy November 1, 2026 10:22

View session

Copilot AI reviewed Nov 1, 2026

View reviewed changes

Comment thread assets/css/bridge.css Resolved

Keep linked chip borders intact on all sides

2afb30c

Drop border-bottom: 0 on a.chip so the pill outline stays complete; suppress the prose-link underline with text-decoration only.

Copilot AI balanced review requested due to automatic review settings November 1, 2026 10:33

Copilot started reviewing on behalf of VatsalSy November 1, 2026 10:34

View session

Copilot AI reviewed Nov 1, 2026

View reviewed changes

Use Plex Mono for DOI and arXiv ids inside chips

b70c293

Wrap identifier segments in span.chip__id so venue labels stay IBM Plex Sans while DOIs and arXiv ids use the mono token.

Copilot AI balanced review requested due to automatic review settings November 1, 2026 10:44

Copilot started reviewing on behalf of VatsalSy November 1, 2026 10:44

View session

Copilot AI reviewed Nov 1, 2026

View reviewed changes

Fix chip text flow for mono DOI identifiers

dc0c912

Use inline-block on a.chip so label and .chip__id stay one flowing text run (not flex columns), keep spaces around · and DOI:, and prefer break-word wraps at / and . instead of mid-digit splits.

comphy-bot approved these changes Nov 1, 2026

View reviewed changes

Copilot AI balanced review requested due to automatic review settings November 1, 2026 10:58

Copilot started reviewing on behalf of VatsalSy November 1, 2026 10:58

View session

Copilot AI reviewed Nov 1, 2026

View reviewed changes

VatsalSy merged commit eb72497 into main Nov 1, 2026
6 checks passed

VatsalSy deleted the rayleigh-cloud/research-badge-chips-f3-9403 branch November 1, 2026 11:13

Navigation Menu

Repository navigation

Replace research shields.io badges with design-system chips (F3) - #159

Replace research shields.io badges with design-system chips (F3)#159
VatsalSy merged 4 commits into
mainfrom
rayleigh-cloud/research-badge-chips-f3-9403

VatsalSy commented Nov 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Nov 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

comphy-bot commented Nov 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

comphy-bot commented Nov 1, 2026 •

edited

Loading

Uh oh!

comphy-bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

VatsalSy commented Nov 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Changes Made

Testing Done

Screenshots

Before (production shields.io)

After (token chips + mono identifiers)

Related Issues

Checklist

Additional Notes

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

comphy-bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

comphy-bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

comphy-bot left a comment

Choose a reason for hiding this comment

Review: Replace research shields.io badges with design-system chips (F3)

Summary

Findings

Verification

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

VatsalSy commented Nov 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Nov 1, 2026 •

edited

Loading

comphy-bot commented Nov 1, 2026 •

edited

Loading

comphy-bot commented Nov 1, 2026 •

edited

Loading