feat(api-table): use macos-text icon for macOS column

[Huxpro]

Summary

• Previously, the compat table reused the Apple logo for both iOS and macOS (clay_macos) header columns, making the two visually indistinguishable
• Maps clay_macos to a dedicated macos-text icon — the same one <APISummary /> already uses for the macOS platform badge
• iOS (ios, clay_ios) continues to use the Apple logo

Before / After

Before: macOS column shows the Apple logo (same as iOS)
After: macOS column shows the rounded-square macos-text icon, matching how APISummary renders the macOS badge

Test plan

• Visit any page with an <APITable /> (e.g. /guide/devtool) — confirm the macOS column header now shows the macos-text icon instead of the Apple logo
• Confirm iOS column still shows the Apple logo
• Confirm the icon recolors correctly in dark mode (uses the same currentColor mask treatment as the other platform icons)

Use dedicated macos-text icon for macOS column

Differentiate the platform icons in the API table compatibility table by mapping clay_macos to the macos-text icon instead of the Apple logo. This aligns the macOS column with the icon used in <APISummary /> for the macOS platform badge, while clay_ios continues to use the Apple logo.

Changes:

• Map clay_macos to macos-text and clay_ios to apple in the platform icon mapping
• Add macos-text to the SCSS icon mask classes in the compat table styling

The icon uses currentColor masking, ensuring correct recoloring across light and dark modes.

[netlify]

✅ Deploy Preview for lynx-doc ready!

Name	Link
🔨 Latest commit	999800a
🔍 Latest deploy log	https://app.netlify.com/projects/lynx-doc/deploys/6a11b3d9984c7a0007d435ff
😎 Deploy Preview	https://deploy-preview-1043--lynx-doc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a6020ee6-79e5-4478-beed-b6761053f838

📥 Commits

Reviewing files that changed from the base of the PR and between e140f4c and 999800a.

📒 Files selected for processing (2)

• src/components/api-table/compat-table/headers.tsx
• src/components/api-table/compat-table/ui/_icon.scss

---

Walkthrough

The PR differentiates platform-specific icon handling for Apple by separating iOS and macOS into distinct icons. clay_ios maps to the existing apple icon, while clay_macos maps to a new macos-text icon. The SCSS icon registry is updated to recognize the new icon name in the mask-image styling loop.

Changes

Apple Platform Icon Differentiation

Layer / File(s)	Summary
Icon mapping and registration src/components/api-table/compat-table/headers.tsx, src/components/api-table/compat-table/ui/_icon.scss	mapPlatformNameToIconName now maps clay_ios to apple and clay_macos to the new macos-text icon. SCSS $icons collection is updated to register the new icon name.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• SoonIter

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: updating the macOS column icon from the Apple logo to a dedicated 'macos-text' icon.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/apitable-macos-icon

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

Updates the API compatibility table’s platform-to-icon mapping so the macOS column no longer reuses the iOS Apple logo, aligning the table’s macOS badge with the icon already used elsewhere (e.g., APISummary).

Changes:

• Map clay_macos to the dedicated macos-text icon instead of apple.
• Register macos-text in the compat table icon mask CSS so icon-macos-text resolves to the correct SVG asset.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/components/api-table/compat-table/ui/_icon.scss	Adds macos-text to the generated .icon-* mask-image rules so the new class resolves to an SVG.
src/components/api-table/compat-table/headers.tsx	Updates platform-name→icon-name mapping so the macOS column uses macos-text while iOS continues using apple.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.