DS-372 :: Icon naming sync

[diogo-filipe-costa]

Description

This PR delivers DS-372 icon naming sync across the toolkit icon asset set, the docs-site icon gallery, the public React Icon surface, release metadata, and the merge-readiness prompt follow-up.

After comparing the current repo against the Figma icon page, the scope expanded beyond the two circle-outline additions because the public icon names were no longer aligned with the design-system source of truth. This branch takes the hard-cut route while there are still no downstream consumers to preserve: the old names are removed rather than kept as compatibility aliases.

It also carries the merge-readiness prompt follow-up that came out of this work, so future review units default to independently releasable branches and more intentional PR metadata.

Ticket:

• DS-372

Release scope

• @ourfuturehealth/toolkit -> 4.9.0 (planned tag: toolkit-v4.9.0)
• @ourfuturehealth/react-components -> 0.7.0 (planned tag: react-v0.7.0)
• site/docs changes are included in-repo and are not independently versioned

Breaking Changes

• Toolkit and React icon names now match the current Figma icon set directly, with no backward-compatible aliases.
• The release includes hard renames such as:
  • Done -> Check
  • ExpandLess -> ChevronUp
  • ExpandMore -> ChevronDown
  • CalendarTodayOutlined -> CalendarOutline
  • FmdGoodOutlined -> LocationOutline
  • LinkedIn -> Linkedin
• See UPGRADING.md in this branch for the full rename table and migration examples.

Key Changes

1) Public icon names are now Figma-aligned end to end

• Renamed the toolkit SVG source files, manifest entries, and generated sprite symbol ids to the current Figma names
• Folded the earlier circle-outline addition into the renamed public surface as AddCircleOutline and MinusCircleOutline
• Replaced the old stepper names (LooksZero through LooksNine) with the Figma-aligned ListZero through ListNine

2) Current docs and component consumers now use the renamed icon surface

• Updated the docs-site icon gallery and icon usage guidance to show the renamed public names
• Updated current toolkit component/example usages, including Card metadata, Pagination arrows, Details/Expander icons, and checkbox checkmarks
• Updated the public React Icon stories/tests and current React component consumers to use the renamed names
• Ordered docs-gallery categories alphabetically by icon name, while preserving numeric order for the Stepper icon set

3) Release and workflow follow-up are included in the same branch

• Bumped @ourfuturehealth/toolkit to 4.9.0 and @ourfuturehealth/react-components to 0.7.0
• Added CHANGELOG.md, UPGRADING.md, and release-versioning updates for the breaking rename release
• Tightened the merge-readiness prompt so future review units default to independently releasable branches and more intentional PR metadata

Validation

Automated:

• npm test
• pnpm lint
• pnpm build
• pnpm docs:release-contract
• pnpm smoke:release-artifacts

Manual QA:

• verified the docs-site icon gallery loads with the renamed icon rows present and the replaced names removed
• verified representative renamed icons render correctly at 16, 24, and 32, including Check, ChevronUp, ChevronDown, ClockOutline, LocationOutline, AddCircleOutline, and MinusCircleOutline
• verified current toolkit consumer surfaces that changed name references, including Card metadata, Pagination, Details/Expander, and Checkboxes
• verified the React Icon and Card Storybook surfaces use the renamed options correctly
• verified docs-gallery ordering is alphabetical within categories, with the Stepper icons intentionally kept in numeric order

Reviewer Focus

• Completeness of the hard rename across the sprite inputs, manifest.json, generated icon-sprite.svg, docs gallery, and current toolkit/React consumers
• Correctness of the 4.9.0 / 0.7.0 breaking-release metadata and migration guidance
• Whether the merge-readiness prompt follow-up captures the intended releasable-branch workflow without forcing low-value boilerplate

[netlify]

✅ Deploy Preview for ofh-design-system-storybook ready!

Name	Link
🔨 Latest commit	9b23d70
🔍 Latest deploy log	https://app.netlify.com/projects/ofh-design-system-storybook/deploys/69d79fb65d5ba70008371e1d
😎 Deploy Preview	https://deploy-preview-196--ofh-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for ofh-design-system-docs ready!

Name	Link
🔨 Latest commit	9b23d70
🔍 Latest deploy log	https://app.netlify.com/projects/ofh-design-system-docs/deploys/69d79fb63a865400087adbf7
😎 Deploy Preview	https://deploy-preview-196--ofh-design-system-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Copilot]

Pull request overview

Adds new “circle outline” add/remove icons to the toolkit icon set, wiring them into the icon manifest, generated sprite, and the docs-site icon gallery data so they can be consumed by components and displayed in the design system site.

Changes:

• Added two new SVG assets: add/remove circle outline variants.
• Registered the new icons in packages/toolkit/assets/icons/manifest.json and icon-sprite.svg.
• Updated the docs-site icon ordering list to include the new icons.

Reviewed changes

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

Show a summary per file

File	Description
packages/toolkit/assets/icons/AddCircleOutlineOutlined.svg	Adds new add-circle outline SVG asset.
packages/toolkit/assets/icons/RemoveCircleOutlineOutlined.svg	Adds new remove-circle outline SVG asset.
packages/toolkit/assets/icons/manifest.json	Registers the two new icons in the toolkit icon manifest.
packages/toolkit/assets/icons/icon-sprite.svg	Adds sprite <symbol> entries for the two new icons.
packages/site/views/_data/materialIcons.js	Includes the new icons in the docs gallery ordering.

---

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