Polaris code example updates for Action components

[timtrevor-shopify]

Background

As part of an overall update to the App Home / App Bridge docs, we're improving the titles and descriptions of code examples for Polaris components, as well as removing any redundant examples, and adding new examples for missing use cases.

Solution

This PR makes updates to the following component pages:
ButtonGroup
Clickable
ClickableChip
Link
Menu

The following code examples have been added and removed:

ButtonGroup
Removed example files:
basic-usage.html / .jsx — Redundant with the default example; both showed a Cancel + Save button pair using the primary-action and secondary-actions slots.
form-action-buttons.html / .jsx — Redundant with the default example; same Cancel + Save pattern with only the label text changed to "Save product".

Clickable
Removed example files:
basic-button-usage.html / .jsx — Redundant with the default example; showed a single clickable with border and padding, which is a strict subset of the default that already demonstrates two clickable elements with those same props.

ClickableChip
Removed example files:
multiple-chips-with-proper-spacing.html / .jsx — Redundant composite of concepts already covered individually by the color variants, icon/removable, and subdued/icon examples. The title focused on layout spacing which is an s-stack concern, not a ClickableChip concept.

Link
Removed example files:
links-with-auto-tone.html / .jsx — Redundant with "Basic Links in Paragraph"; both showed links inside a regular paragraph with no new concept.
links-in-banner-context.html / .jsx — Redundant with "Links in Banner"; same pattern of a link inside a banner, just a different tone value (warning vs info).
links-in-subdued-paragraph.html / .jsx — Redundant with "Links with Different Tones" which comprehensively covers links inheriting tone from six different paragraph tones.
critical-context-links.html / .jsx — Redundant with "Links with Different Tones" which includes a critical tone example among others.

Menu
Removed example files:
basic-menu.html / .jsx — Redundant with the default example; both showed a trigger button with three icon buttons in the menu.
menu-with-icons.html / .jsx — Redundant with the default example; the only new element was a caret-down icon on the trigger button, which didn't warrant a separate example.

Added example files:
icon-only-trigger.html / .jsx — Added to fill a gap; no existing example showed the common "three-dot menu" pattern where an icon-only button triggers the menu, which is one of the most frequent menu patterns in real apps.

🎩

To TopHat these changes, checkout the branch PolarisCodeExampleUpdates2 and run yarn docs:admin 2026-01.
In the shopify-dev repo, confirm the db/data/docs/templated_apis/app_home/generated_docs_data.json has been updated and run dev s for a local preview.

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

[mcvinci]

Nice improvements, @timtrevor-shopify! I added a few suggestions, and happy to chat through any feedback, too.

[Fionoble]

Need to add the missing html files

[SteveSill]

Looking good @timtrevor-shopify ! Added a few suggestions to take a look at before merging.

Claude and I also did a quick pass on the example code. But I couldn't track down a PR with any examples in them. So I'll note them here:

Code review (.html + .jsx example files)

Link

links-with-different-tones.html vs .jsx: HTML labels don't match tones. HTML says "Neutral tone" for tone="success" and "Subdued tone" for tone="caution". JSX correctly says "Success tone" and "Caution tone".

• Files: Link/examples/links-with-different-tones.html L6, Link/examples/links-with-different-tones.jsx L6

links-with-different-tones.html: Zero href attributes across all 6 <s-link> elements. Links without href don't navigate.

• File: Link/examples/links-with-different-tones.html

links-with-language-attribute.html: No href attribute on the <s-link>.

• File: Link/examples/links-with-language-attribute.html

default.html and default.jsx: On the base branch (not changed in this PR). HTML uses href="#beep", JSX uses href="javascript:void(0)". Both have typo "fufilling" (should be "fulfilling"). Worth flagging for whoever owns the base.

• Files: Link/examples/default.html, Link/examples/default.jsx

Menu

menu-with-links-and-disabled-items.html vs .jsx: Different download button behavior. HTML: <s-button download href="javascript:void(0)"> (bare boolean download, placeholder href). JSX: <s-button download="sales-report.csv" href="/reports/sales-report.csv"> (filename + real path). HTML and JSX should match.

• Files: Menu/examples/menu-with-links-and-disabled-items.html L8, Menu/examples/menu-with-links-and-disabled-items.jsx L9

[timtrevor-shopify]

@Fionoble All the examples have been fixed to display the HTML examples with an html label on the codeblock. As agreed, we're only providing HTML examples now so all the jsx has been removed.