diff --git a/CHANGELOG.md b/CHANGELOG.md index e7c4eb9df..c48ac182d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,42 @@ We are following [Semantic Versioning](https://semver.org/spec/v2.0.0.html), as ## Monorepo Package Releases (`toolkit-v*`, `react-v*`) +### 2026-04-09 + +#### @ourfuturehealth/toolkit 4.9.0 (`toolkit-v4.9.0`) + +##### ⚠️ BREAKING CHANGES + +- **Icon naming aligned with Figma**: hard-renamed the public toolkit icon names to the current design-system set with no backward-compatible aliases + - `Done` → `Check` + - `ExpandLess` → `ChevronUp` + - `ExpandMore` → `ChevronDown` + - `CalendarTodayOutlined` → `CalendarOutline` + - `FmdGoodOutlined` → `LocationOutline` + - `HospitalOutlined` → `HospitalOutline` + - see [UPGRADING.md](UPGRADING.md#upgrading-to-v490--react-v070) for the full rename table + +##### Changed + +- Renamed the toolkit icon SVG files, manifest entries, sprite symbols, docs gallery entries, and current component/example usages to the Figma-aligned public names +- Folded the earlier circle-outline addition into the renamed public surface as `AddCircleOutline` and `MinusCircleOutline` +- Updated the icon docs page and contributor guidance to reflect the renamed toolkit and React icon APIs + +#### @ourfuturehealth/react-components 0.7.0 (`react-v0.7.0`) + +##### ⚠️ BREAKING CHANGES + +- **React Icon names aligned with toolkit/Figma**: any React consumer using the old `Icon` names must migrate to the renamed public set + - `Done` → `Check` + - `AccessTime` → `ClockOutline` + - `LinkedIn` → `Linkedin` + - `HospitalOutlined` → `HospitalOutline` + - see [UPGRADING.md](UPGRADING.md#upgrading-to-v490--react-v070) for the full rename table + +##### Changed + +- Updated the public React `Icon` stories/tests and current component consumers to use the renamed icon surface + ### 2026-03-30 #### @ourfuturehealth/toolkit 4.8.0 (`toolkit-v4.8.0`) diff --git a/UPGRADING.md b/UPGRADING.md index 9cbc0ade3..d80c725de 100644 --- a/UPGRADING.md +++ b/UPGRADING.md @@ -8,6 +8,7 @@ This guide provides detailed migration instructions for upgrading between versio | Version | Date | Breaking Changes | Migration Complexity | | ------------------------------------------------------- | ------------- | --------------------- | ------------------------------------- | +| [v4.9.0 / React v0.7.0](#upgrading-to-v490--react-v070) | April 2026 | Icon naming sync | 🟡 Medium - Search/replace icon names | | [v4.8.0 / React v0.6.0](#upgrading-to-v480--react-v060) | March 2026 | No breaking changes | 🟢 Low - only relevant if you adopted the earlier TextInput prototype | | [v4.7.0 / React v0.5.0](#upgrading-to-v470--react-v050) | March 2026 | Card family realignment | 🟡 Medium - API migration recommended | | [v4.6.0 / React v0.4.0](#upgrading-to-v460--react-v040) | March 2026 | Tag default + naming | 🟡 Medium - Search/replace recommended | @@ -18,6 +19,104 @@ This guide provides detailed migration instructions for upgrading between versio --- +## Upgrading to v4.9.0 / React v0.7.0 + +**Released:** April 2026 +**Affected packages:** + +- `@ourfuturehealth/toolkit` v4.9.0+ +- `@ourfuturehealth/react-components` v0.7.0+ + +### Breaking Changes + +Toolkit and React icon names now match the current Figma icon set directly. This is a hard rename with no backward-compatible aliases. + +| Category | Previous name | New name | +| -------- | ------------- | -------- | +| DataValidation | `CancelOutlined` | `CancelOutline` | +| DataValidation | `Done` | `Check` | +| DataValidation | `AddCircleOutlineOutlined` | `AddCircleOutline` | +| DataValidation | `RemoveCircle` | `MinusCircle` | +| DataValidation | `RemoveCircleOutlineOutlined` | `MinusCircleOutline` | +| Action | `AccountCircleOutlined` | `AccountCircleOutline` | +| Action | `FileDownloadOutlined` | `FileDownloadOutline` | +| Action | `FavoriteBorderOutlined` | `FavoriteOutline` | +| Action | `CalendarTodayOutlined` | `CalendarOutline` | +| Action | `CalendarToday` | `Calendar` | +| Arrows | `ExpandLess` | `ChevronUp` | +| Arrows | `ExpandMore` | `ChevronDown` | +| Arrows | `East` | `ArrowRight` | +| Arrows | `West` | `ArrowLeft` | +| Graphical | `InfoOutlined` | `InfoOutline` | +| Graphical | `WorkOutlined` | `WorkOutline` | +| Graphical | `HealthCrossOutlined` | `HealthCrossOutline` | +| Graphical | `ListAltOutlined` | `ListAltOutline` | +| Graphical | `HealthAndSafetyOutlined` | `HealthAndSafetyOutline` | +| Graphical | `ListAltCheckedOutlined` | `ListAltCheckedOutline` | +| Graphical | `TestTubeOutlined` | `TestTubeOutline` | +| Graphical | `AccessTime` | `ClockOutline` | +| Graphical | `WatchLater` | `Clock` | +| Graphical | `FmdGoodOutlined` | `LocationOutline` | +| Graphical | `HospitalOutlined` | `HospitalOutline` | +| Stepper | `LooksZero` | `ListZero` | +| Stepper | `LooksOne` | `ListOne` | +| Stepper | `LooksTwo` | `ListTwo` | +| Stepper | `LooksThree` | `ListThree` | +| Stepper | `LooksFour` | `ListFour` | +| Stepper | `LooksFive` | `ListFive` | +| Stepper | `LooksSix` | `ListSix` | +| Stepper | `LooksSeven` | `ListSeven` | +| Stepper | `LooksEight` | `ListEight` | +| Stepper | `LooksNine` | `ListNine` | +| Socials | `LinkedIn` | `Linkedin` | +| Socials | `LinkedInHover` | `LinkedinHover` | + +### Release Overview + +This breaking release removes the older icon names and replaces them with the Figma-aligned public set across toolkit and React. + +Current toolkit component templates, docs examples, React stories, and tests have already been moved to the renamed icon surface in this branch. + +### Migration Steps + +1. Search for old icon names in toolkit macros, Nunjucks data, React `Icon` props, and any manifest-driven tests. +2. Replace each old name with the corresponding Figma-aligned name from the table above. +3. Re-run any tests or visual checks that assert icon symbol ids or class names such as `ofh-icon--Done`. + +#### Toolkit example + +**Before (`toolkit-v4.8.0`):** + +```njk +{{ icon({ "name": "Done", "size": 24 }) }} +{{ icon({ "name": "ExpandMore", "size": 24 }) }} +``` + +**After (`toolkit-v4.9.0`):** + +```njk +{{ icon({ "name": "Check", "size": 24 }) }} +{{ icon({ "name": "ChevronDown", "size": 24 }) }} +``` + +#### React example + +**Before (`react-v0.6.0`):** + +```tsx + + +``` + +**After (`react-v0.7.0`):** + +```tsx + + +``` + +--- + ## Upgrading to v4.8.0 / React v0.6.0 **Released:** March 2026 diff --git a/docs/contributing/material-icons.md b/docs/contributing/material-icons.md index 1b09fc05d..99da2dce8 100644 --- a/docs/contributing/material-icons.md +++ b/docs/contributing/material-icons.md @@ -121,17 +121,20 @@ Example usage: Core icon styles are in [`packages/toolkit/core/styles/_icons-material.scss`](../../packages/toolkit/core/styles/_icons-material.scss) and imported in [`packages/toolkit/core/all.scss`](../../packages/toolkit/core/all.scss). -### React components (future) +### React components -Current status: the React package does not yet have a shared icon component. +The React package now exposes a shared `Icon` component: -When React icon support is added, this doc should be updated with the final approach. Recommended baseline: +- [`packages/react-components/src/components/Icon/Icon.tsx`](../../packages/react-components/src/components/Icon/Icon.tsx) +- [`packages/react-components/src/components/Icon/Icon.stories.tsx`](../../packages/react-components/src/components/Icon/Icon.stories.tsx) -- Keep icon names aligned with toolkit `manifest.json` -- Reuse the same icon semantics (`name`, `size`, decorative vs titled) -- Decide implementation explicitly: - - Sprite-based `` approach (consistency with toolkit/docs), or - - Build-time inlined SVG components +React icon names should stay aligned with toolkit `manifest.json` and the generated sprite symbols. + +Current React approach: + +- Reuses the toolkit sprite semantics (`name`, `size`, responsive sizing, decorative vs titled) +- Defaults to the bundled toolkit sprite asset and references symbols with `` +- Treats icon-name changes as consumer-facing API changes that must be documented in release notes and the upgrading guide Related package: [`packages/react-components/`](../../packages/react-components/) @@ -172,7 +175,7 @@ Most icons should use `currentColor` to inherit CSS colors, but some icons need **Icons that need brand colors preserved:** -- Social media icons (LinkedIn, X, Facebook, Youtube, Instagram, Tiktok) and their hover states +- Social media icons (Linkedin, X, Facebook, Youtube, Instagram, Tiktok) and their hover states - `ArrowCircleRightColour` (uses `#011D4B` and `#FFC62C`) **Solution**: For brand-colored icons, keep the original Figma fill colors. For all other icons, replace fill colors with `currentColor`. diff --git a/docs/prompts/README.md b/docs/prompts/README.md index a6938f851..df0b6d8c6 100644 --- a/docs/prompts/README.md +++ b/docs/prompts/README.md @@ -9,7 +9,7 @@ Use these prompts as a staged workflow when updating a component. 2. `component-validation-qa-template-prompt.md` Use once implementation is mostly done and you want an interactive manual QA pass with exact URLs and step-by-step validation. 3. `component-pr-readiness-template-prompt.md` - Use after QA passes, or when you want the final repo-wide cleanup, release-doc refresh, commit prep, and branch handoff. + Use after QA passes, or when you want the final merge-readiness pass: repo-wide cleanup, release-doc refresh, commit prep, PR metadata, and branch handoff. ## Why These Are Separate @@ -17,6 +17,6 @@ The implementation prompt and the two finish-up prompts ask the agent to work in - implementation work should stay focused on design analysis and code changes - interactive QA should pause after each step and wait for pass/fail feedback -- PR-readiness work should keep moving and clean up repo-wide surfaces without stopping after every check +- merge-readiness work should keep moving and clean up repo-wide surfaces without stopping after every check Keeping them separate makes the workflow easier to follow and reduces prompt ambiguity. diff --git a/docs/prompts/component-pr-readiness-template-prompt.md b/docs/prompts/component-pr-readiness-template-prompt.md index 89a1c170a..8a99aa275 100644 --- a/docs/prompts/component-pr-readiness-template-prompt.md +++ b/docs/prompts/component-pr-readiness-template-prompt.md @@ -1,10 +1,10 @@ -# Component PR Readiness Template Prompt +# Component Merge Readiness Template Prompt -This template is for the final repo-wide cleanup once a component branch is functionally done and you want to make it review-ready. +This template is for the final repo-wide cleanup once a component branch is functionally done and you want to make it merge-ready. -Use this prompt after manual QA passes, or when you want the final PR-preparation sweep across docs, release notes, branch state, and commits. +Use this prompt after manual QA passes, or when you want the final merge-preparation sweep across docs, release notes, branch state, commits, release prep, and PR metadata. -This prompt assumes the implementation phase already included the main template's documentation and Storybook UX pass. PR-readiness work should verify consistency and clean up leftovers, not rely on this stage as the first place to discover misleading Storybook controls or unclear prop descriptions. +This prompt assumes the implementation phase already included the main template's documentation and Storybook UX pass. Merge-readiness work should verify consistency and clean up leftovers, not rely on this stage as the first place to discover misleading Storybook controls or unclear prop descriptions. --- @@ -30,7 +30,9 @@ Context: - If relevant, Figma: `[FIGMA URL]` - If relevant, related PRs or dependency order: `[details]` -I want you to make this branch PR-ready. +I want you to make this branch merge-ready. + +Treat `merge-ready` as `reviewable, independently releasable, and safe to merge into the intended base branch` unless I explicitly say this branch is intentionally non-releasable. Workflow I want you to follow: 1. Inspect the current diff, branch status, and recent component work across toolkit, React, docs/examples, Storybook, and tests. @@ -49,7 +51,13 @@ Workflow I want you to follow: - package READMEs - migration/upgrading docs - changelog or release notes -5. Check public API and migration clarity: +5. Decide release impact before sign-off: + - determine which published packages are affected: `toolkit`, `react-components`, `both`, or `none` + - recommend the correct bump type for each affected package: `patch`, `minor`, or `major` + - explain the reasoning briefly in user-facing terms + - if this branch is expected to be independently releasable, apply the version bump instead of only suggesting it + - if no package version, changelog entry, or migration guidance is updated for an affected releasable package, treat that as a merge-readiness failure and fix it before sign-off +6. Check public API and migration clarity: - confirm deprecated compatibility paths exist only where intended - confirm toolkit vs React consumer expectations are documented clearly - confirm Storybook controls policy and prop docs are still coherent after any late changes @@ -57,61 +65,71 @@ Workflow I want you to follow: - confirm no story is exposing controls for values the component visibly ignores or overrides - if the component was touched by a spacing/typography token migration, do a final spot-check for same-number static-token substitutions where Figma expected responsive tokens - do a final spot-check for accidental semantic-element inheritance (`p`, `ul`, `li`, `h*`, `a`) that may have reintroduced wrong spacing or typography - - confirm release/version metadata is internally consistent wherever this branch claims a release number or tag: - - `packages/*/package.json` version fields - - `CHANGELOG.md` - - `UPGRADING.md` - - release/versioning strategy docs - - PR title/body if it mentions planned release versions or tags - - if docs claim a package release version or tag that is not reflected in the relevant `package.json`, treat that as a PR-readiness failure and fix it before sign-off - - if the component was touched by a spacing/typography token migration, do a final spot-check for same-number static-token substitutions where Figma expected responsive tokens - - do a final spot-check for accidental semantic-element inheritance (`p`, `ul`, `li`, `h*`, `a`) that may have reintroduced wrong spacing or typography - - confirm release/version metadata is internally consistent wherever this branch claims a release number or tag: - - `packages/*/package.json` version fields - - `CHANGELOG.md` - - `UPGRADING.md` - - release/versioning strategy docs - - PR title/body if it mentions planned release versions or tags - - if docs claim a package release version or tag that is not reflected in the relevant `package.json`, treat that as a PR-readiness failure and fix it before sign-off - - confirm no interactive single-component stories are still relying on raw JSON controls for stable nested props when clearer story-specific controls would be more usable - - confirm no story is exposing controls for values the component visibly ignores or overrides - - if the component was touched by a spacing/typography token migration, do a final spot-check for same-number static-token substitutions where Figma expected responsive tokens - - do a final spot-check for accidental semantic-element inheritance (`p`, `ul`, `li`, `h*`, `a`) that may have reintroduced wrong spacing or typography - - confirm release/version metadata is internally consistent wherever this branch claims a release number or tag: + - confirm release/version metadata is internally consistent for every affected releasable package: - `packages/*/package.json` version fields - `CHANGELOG.md` - `UPGRADING.md` - release/versioning strategy docs - PR title/body if it mentions planned release versions or tags - - if docs claim a package release version or tag that is not reflected in the relevant `package.json`, treat that as a PR-readiness failure and fix it before sign-off + - if docs claim a package release version or tag that is not reflected in the relevant `package.json`, treat that as a merge-readiness failure and fix it before sign-off - identify any temporary internal adapters or dependency workarounds that were introduced because a reusable component was missing or not ready - if any remain, either remove them or document them explicitly as follow-up debt - add or refresh migration guidance if the branch changes APIs, names, routes, or recommended usage -6. If any stale references, repo-drift issues, or missing release-doc updates are found, fix them with minimal changes and run the required checks. -7. Make sure the branch is attached if the worktree is on a detached `HEAD`. -8. Update the branch against the intended base branch using the repo's preferred workflow: +7. If any stale references, repo-drift issues, or missing release-doc updates are found, fix them with minimal changes and run the required checks. +8. Make sure the branch is attached if the worktree is on a detached `HEAD`. +9. Update the branch against the intended base branch using the repo's preferred workflow: - merge or rebase, whichever is appropriate - if another PR must land first, explain that clearly and stop before forcing a bad merge - if updating from base introduces dependency, lint, test, or build issues, fix them as part of branch prep -9. Re-run final validation after the cleanup and base-branch update: +10. Re-run final validation after the cleanup and base-branch update: - `npm test` after JavaScript or TypeScript changes - `pnpm lint` - `pnpm build` when relevant + - `pnpm docs:release-contract` for releasable branches + - `pnpm smoke:release-artifacts` when preparing a package release branch that bumps a published package version - any package-specific checks that matter, especially Storybook if React/docs were touched -10. If any lint/build/test issue appears during the review-ready stage, explain clearly: +11. If any lint/build/test issue appears during the merge-ready stage, explain clearly: - what failed - whether it came from this branch, from updating from base, or from local dependency drift - what you changed to resolve it -11. Create appropriate conventional commit(s): +12. Create appropriate conventional commit(s): - use concise subjects - include short bodies when helpful - if there are clearly separate concerns, split them into logical commits -12. Once the branch is fully ready, draft: - - a PR title - - a concise PR description in the style used in this repo -13. Do not push. Give me the exact `git push` command(s) to run manually. +13. Once the branch is fully ready, draft the PR metadata in the house style used in this repo: + - use a ticket-led title when the branch maps cleanly to ticketed work: + - single ticket: `[TICKET] :: [concise scope summary]` + - multi-ticket: `[TICKET A] / [TICKET B] :: [shared scope summary]` + - use a non-ticket title only for repo/infra/release work that genuinely does not map to a ticket + - keep titles short, specific, and noun-led where possible; avoid filler such as "misc", "stuff", or generic "update" unless it adds clarity + - use the repo-style sections intentionally rather than mechanically + - start from the common section set below, but only keep sections that add reviewer value for this specific PR: + - `## Description` + - `Ticket:`, `Tickets:`, or `Closes:` + - `## Release scope` or `## Scope` + - `## Breaking Changes` + - `## Key Changes` + - `## Validation` + - `## Reviewer Focus` + - section selection rules: + - always include `## Description` + - include `Ticket:`, `Tickets:`, or `Closes:` when the work maps to ticketed work + - use `## Release scope` when package version bumps, release metadata, or release coordination are part of the branch + - use `## Scope` when the branch needs contextual boundaries but release scope is not the main framing + - include `## Breaking Changes` when the PR is breaking, or when explicitly saying `None.` helps reviewers and release prep + - include `## Key Changes` when there are multiple meaningful change buckets; for very small PRs, fold the substance into `## Description` instead + - include `## Validation` with exact commands and meaningful manual QA surfaces + - include `## Reviewer Focus` when you can point reviewers at the highest-risk or highest-value review areas; omit it when it would only repeat the obvious diff + - body-writing rules: + - opening paragraph pattern: `This PR delivers **[ticket/work summary]** across [affected surfaces].` + - add a second context paragraph only when it genuinely helps, for example rebases, stacked dependencies, release baseline shifts, or why the branch goes beyond a narrow ticket interpretation + - keep the body review-oriented: explain what changed, why it changed, release impact, and where reviewers should focus + - avoid padding the PR with empty, repetitive, or low-information sections just to match a template +14. Do not push. Give me the exact `git push` command(s) to run manually. Important constraints: +- Default to independently releasable branches for review units unless I explicitly tell you otherwise. +- If the branch changes a published package, do not sign off merge readiness until you have assessed release impact and either applied or explicitly justified the absence of package-version, changelog, and migration updates. - Run `npm test` after modifying JavaScript or TypeScript files. - Run `pnpm lint` before considering the branch ready to push. - Prefer minimal, surgical changes. @@ -140,5 +158,5 @@ Output style I want from you: ## Notes -- This template is intentionally focused on review-readiness rather than interactive QA. +- This template is intentionally focused on merge-readiness rather than interactive QA. - Use `component-validation-qa-template-prompt.md` when you want the agent to stop after each validation step and wait for pass/fail feedback. diff --git a/docs/prompts/component-update-template-prompt.md b/docs/prompts/component-update-template-prompt.md index 111fec5cb..73f11be48 100644 --- a/docs/prompts/component-update-template-prompt.md +++ b/docs/prompts/component-update-template-prompt.md @@ -5,7 +5,7 @@ This template provides a complete workflow for updating/creating design system c Follow this with the dedicated finish-up prompts: - `component-validation-qa-template-prompt.md` for interactive manual QA -- `component-pr-readiness-template-prompt.md` for final cleanup, release-doc refresh, commits, and PR prep +- `component-pr-readiness-template-prompt.md` for the final merge-readiness pass: cleanup, release-doc refresh, commits, and PR prep --- @@ -25,7 +25,7 @@ Follow this with the dedicated finish-up prompts: 4. The agent will follow the structured workflow automatically **💡 Best Practice:** Keep this file as your master template. Don't create component-specific files. -After implementation is mostly done, move to the dedicated validation and PR-readiness prompts instead of trying to do everything in one long session. +After implementation is mostly done, move to the dedicated validation and merge-readiness prompts instead of trying to do everything in one long session. This workflow also includes a temporary external-reference audit against the BSM React repo to speed up component work while OFH React coverage is still catching up. Once OFH React reaches comparable coverage, stop relying on that external repo. --- diff --git a/docs/prompts/component-validation-qa-template-prompt.md b/docs/prompts/component-validation-qa-template-prompt.md index 0bd4f5337..b6d2e1079 100644 --- a/docs/prompts/component-validation-qa-template-prompt.md +++ b/docs/prompts/component-validation-qa-template-prompt.md @@ -98,7 +98,7 @@ Output style I want from you: - Drive the QA one step at a time. - Make each QA step specific enough that a reviewer can validate it without guessing what "good" looks like. - When something fails, explain it plainly and fix it before moving on. -- Keep the summary concise and useful for handing off into PR-readiness work. +- Keep the summary concise and useful for handing off into merge-readiness work. ``` --- @@ -106,4 +106,4 @@ Output style I want from you: ## Notes - This template is intentionally focused on human-in-the-loop validation. -- Use `component-pr-readiness-template-prompt.md` after this when you want the final cleanup, release-doc refresh, commits, and branch handoff. +- Use `component-pr-readiness-template-prompt.md` after this when you want the final merge-readiness pass: cleanup, release-doc refresh, commits, PR metadata, and branch handoff. diff --git a/docs/release-versioning-strategy.md b/docs/release-versioning-strategy.md index cf63d4309..76e5fd4ae 100644 --- a/docs/release-versioning-strategy.md +++ b/docs/release-versioning-strategy.md @@ -31,8 +31,8 @@ For consumer migration instructions, use [Upgrading Guide](../UPGRADING.md). | Package | Canonical tag pattern | Example tag | | ----------------------------------- | --------------------- | ---------------- | -| `@ourfuturehealth/toolkit` | `toolkit-v*` | `toolkit-v4.1.0` | -| `@ourfuturehealth/react-components` | `react-v*` | `react-v0.6.0` | +| `@ourfuturehealth/toolkit` | `toolkit-v*` | `toolkit-v4.9.0` | +| `@ourfuturehealth/react-components` | `react-v*` | `react-v0.7.0` | The release workflow still accepts legacy toolkit tags in the `v*` format for backward compatibility, but new toolkit releases should use `toolkit-v*`. @@ -60,7 +60,7 @@ Consumers must install the package release tarball: ```json { "dependencies": { - "@ourfuturehealth/toolkit": "https://github.com/ourfuturehealth/design-system-toolkit/releases/download/toolkit-v4.1.0/ourfuturehealth-toolkit-4.1.0.tgz" + "@ourfuturehealth/toolkit": "https://github.com/ourfuturehealth/design-system-toolkit/releases/download/toolkit-v4.9.0/ourfuturehealth-toolkit-4.9.0.tgz" } } ``` @@ -70,7 +70,7 @@ React consumers follow the same contract: ```json { "dependencies": { - "@ourfuturehealth/react-components": "https://github.com/ourfuturehealth/design-system-toolkit/releases/download/react-v0.6.0/ourfuturehealth-react-components-0.6.0.tgz" + "@ourfuturehealth/react-components": "https://github.com/ourfuturehealth/design-system-toolkit/releases/download/react-v0.7.0/ourfuturehealth-react-components-0.7.0.tgz" } } ``` @@ -124,8 +124,10 @@ This table is a visual aid for pre-monorepo versus post-monorepo releases. | 15 | `react-v0.4.0` | N/A | `0.4.0` | Monorepo | Released | | 16 | `toolkit-v4.7.0` | `4.7.0` | N/A | Monorepo | Released | | 17 | `react-v0.5.0` | N/A | `0.5.0` | Monorepo | Released | -| 18 | `toolkit-v4.8.0` | `4.8.0` | N/A | Monorepo | Planned in this branch | -| 19 | `react-v0.6.0` | N/A | `0.6.0` | Monorepo | Planned in this branch | +| 18 | `toolkit-v4.8.0` | `4.8.0` | N/A | Monorepo | Released | +| 19 | `react-v0.6.0` | N/A | `0.6.0` | Monorepo | Released | +| 20 | `toolkit-v4.9.0` | `4.9.0` | N/A | Monorepo | Planned in this branch | +| 21 | `react-v0.7.0` | N/A | `0.7.0` | Monorepo | Planned in this branch | ## References diff --git a/packages/react-components/README.md b/packages/react-components/README.md index c5d30913e..a1638da24 100644 --- a/packages/react-components/README.md +++ b/packages/react-components/README.md @@ -9,7 +9,7 @@ Install the packaged GitHub release artifact: ```json { "dependencies": { - "@ourfuturehealth/react-components": "https://github.com/ourfuturehealth/design-system-toolkit/releases/download/react-v0.6.0/ourfuturehealth-react-components-0.6.0.tgz", + "@ourfuturehealth/react-components": "https://github.com/ourfuturehealth/design-system-toolkit/releases/download/react-v0.7.0/ourfuturehealth-react-components-0.7.0.tgz", "react": "^19.2.4", "react-dom": "^19.2.4" } diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 9abbb5a42..13f007ee8 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@ourfuturehealth/react-components", - "version": "0.6.0", + "version": "0.7.0", "type": "module", "description": "React component library for OFH Design System", "packageManager": "pnpm@10.29.2", diff --git a/packages/react-components/src/components/Card/Card.stories.tsx b/packages/react-components/src/components/Card/Card.stories.tsx index abb680ddd..97037da20 100644 --- a/packages/react-components/src/components/Card/Card.stories.tsx +++ b/packages/react-components/src/components/Card/Card.stories.tsx @@ -28,7 +28,9 @@ const tagVariantOptions: TagVariant[] = [ 'red', ]; -const iconNameOptions = iconManifest.icons.map(({ name }) => name); +const iconNameOptions = iconManifest.icons + .map(({ name }) => name) + .sort((left, right) => left.localeCompare(right)); const renderCard = ({ tagText, @@ -71,19 +73,19 @@ const renderCard = ({ ? [ metadataItem1Text ? { - icon: metadataItem1Icon ?? 'FmdGoodOutlined', + icon: metadataItem1Icon ?? 'LocationOutline', text: metadataItem1Text, } : null, metadataItem2Text ? { - icon: metadataItem2Icon ?? 'CalendarTodayOutlined', + icon: metadataItem2Icon ?? 'CalendarOutline', text: metadataItem2Text, } : null, metadataItem3Text ? { - icon: metadataItem3Icon ?? 'AccessTime', + icon: metadataItem3Icon ?? 'ClockOutline', text: metadataItem3Text, } : null, @@ -307,7 +309,7 @@ export const BasicWithIcon: Story = { args: { heading: 'Profile complete', description: 'You’ve completed all the required profile details.', - iconName: 'Done', + iconName: 'Check', iconColor: '#00725F', }, argTypes: { @@ -364,11 +366,11 @@ export const ClickableAction: Story = { tagVariant: 'blue', description: 'A quick guide for people who have care and support needs and their carers.', - metadataItem1Icon: 'FmdGoodOutlined', + metadataItem1Icon: 'LocationOutline', metadataItem1Text: 'Online', - metadataItem2Icon: 'CalendarTodayOutlined', + metadataItem2Icon: 'CalendarOutline', metadataItem2Text: 'Updated today', - metadataItem3Icon: 'AccessTime', + metadataItem3Icon: 'ClockOutline', metadataItem3Text: '5 minute read', helperText: 'Recommended for new participants.', iconName: 'ArrowCircleRightColour', diff --git a/packages/react-components/src/components/Card/Card.test.tsx b/packages/react-components/src/components/Card/Card.test.tsx index 064658211..f623a2d73 100644 --- a/packages/react-components/src/components/Card/Card.test.tsx +++ b/packages/react-components/src/components/Card/Card.test.tsx @@ -124,11 +124,11 @@ describe('Card', () => { , @@ -148,7 +148,7 @@ describe('Card', () => { , ); diff --git a/packages/react-components/src/components/CardDoDont/CardDoDont.tsx b/packages/react-components/src/components/CardDoDont/CardDoDont.tsx index 3f0f2971b..8c1f89ca3 100644 --- a/packages/react-components/src/components/CardDoDont/CardDoDont.tsx +++ b/packages/react-components/src/components/CardDoDont/CardDoDont.tsx @@ -31,7 +31,7 @@ export const CardDoDont = ({ ...props }: CardDoDontProps) => { const resolvedHeading = heading ?? (type === 'dont' ? 'Don’t' : 'Do'); - const iconName = type === 'dont' ? 'Close' : 'Done'; + const iconName = type === 'dont' ? 'Close' : 'Check'; return (
diff --git a/packages/react-components/src/components/Icon/Icon.test.tsx b/packages/react-components/src/components/Icon/Icon.test.tsx index 8dd931594..4b40a8bc2 100644 --- a/packages/react-components/src/components/Icon/Icon.test.tsx +++ b/packages/react-components/src/components/Icon/Icon.test.tsx @@ -6,7 +6,7 @@ import { Icon } from './Icon'; describe('Icon', () => { it('renders the default 24px sprite icon classes and href', () => { - const { container } = render(); + const { container } = render(); const icon = container.querySelector('svg'); const use = container.querySelector('use'); @@ -15,13 +15,13 @@ describe('Icon', () => { 'ofh-icon', 'ofh-icon--material', 'ofh-icon--24', - 'ofh-icon--Done', + 'ofh-icon--Check', ); - expect(use).toHaveAttribute('href', expect.stringContaining('#ofh-icon-Done')); + expect(use).toHaveAttribute('href', expect.stringContaining('#ofh-icon-Check')); }); it('renders the requested fixed size class and dimensions', () => { - const { container } = render(); + const { container } = render(); const icon = container.querySelector('svg'); @@ -32,7 +32,7 @@ describe('Icon', () => { }); it('renders the responsive size class when responsiveSize is provided', () => { - const { container } = render(); + const { container } = render(); const icon = container.querySelector('svg'); @@ -40,7 +40,7 @@ describe('Icon', () => { 'ofh-icon', 'ofh-icon--material', 'ofh-icon--responsive-32', - 'ofh-icon--Done', + 'ofh-icon--Check', ); expect(icon).not.toHaveClass('ofh-icon--32'); expect(icon).toHaveAttribute('width', '32'); @@ -48,7 +48,7 @@ describe('Icon', () => { }); it('renders an accessible image when title is provided', () => { - render(); + render(); expect(screen.getByRole('img', { name: 'Completed' })).toBeInTheDocument(); }); @@ -56,7 +56,7 @@ describe('Icon', () => { it('applies custom colour and extra classes', () => { const { container } = render( { const { container } = render( { expect(icon).toHaveAttribute('data-track', 'icon-usage'); expect(icon).toHaveAttribute('aria-describedby', 'icon-help'); expect(icon).toHaveAttribute('tabindex', '-1'); - expect(use).toHaveAttribute('href', '/custom/sprite.svg#ofh-icon-Done'); + expect(use).toHaveAttribute('href', '/custom/sprite.svg#ofh-icon-Check'); expect(handleClick).toHaveBeenCalledTimes(1); }); it('forwards ref to the svg element', () => { const ref = createRef(); - render(); + render(); expect(ref.current).toBeInstanceOf(SVGSVGElement); expect(ref.current).toHaveClass('ofh-icon'); }); it('has no accessibility violations for a decorative icon', async () => { - const { container } = render(); + const { container } = render(); const results = await axe(container); expect(results.violations).toHaveLength(0); diff --git a/packages/site/tests/fixtures/icon/fixed-size.njk b/packages/site/tests/fixtures/icon/fixed-size.njk index 0d524157b..207a4fa33 100644 --- a/packages/site/tests/fixtures/icon/fixed-size.njk +++ b/packages/site/tests/fixtures/icon/fixed-size.njk @@ -1,6 +1,6 @@ {% from 'icon/macro.njk' import icon %} {{ icon({ - "name": "Done", + "name": "Check", "size": 16 }) }} diff --git a/packages/site/views/_data/materialIcons.js b/packages/site/views/_data/materialIcons.js index afc24575c..059405cbd 100644 --- a/packages/site/views/_data/materialIcons.js +++ b/packages/site/views/_data/materialIcons.js @@ -15,109 +15,33 @@ const categoryOrder = [ "Socials", ]; -// Custom sort: logical groupings for better usability const icons = [...manifest.icons]; -// Define logical orderings for each category -const categoryOrders = { - DataValidation: [ - // Positive/Success - "Done", - "CheckCircle", - "CheckCircleOutline", - // Negative/Cancel - "Close", - "Cancel", - "CancelOutlined", - // Add/Remove - "AddCircle", - "RemoveCircle", - ], - Action: [ - "Search", - // Account - "AccountCircle", - "AccountCircleOutlined", - // Favorites - "Favorite", - "FavoriteBorderOutlined", - // Calendar - "CalendarToday", - "CalendarTodayOutlined", - // Other actions - "FileDownloadOutlined", - "Launch", - ], - Arrows: [ - // Horizontal navigation - "ChevronRight", - "ChevronLeft", - "East", - "West", - // Vertical expand/collapse - "ExpandMore", - "ExpandLess", - "UnfoldMore", - "UnfoldLess", - // Special arrows - "ArrowCircleRight", - "ArrowCircleRightColour", - ], - Graphical: [ - // Location/Places - "FamilyHome", - "WorkOutlined", - "HospitalOutlined", - "FmdGoodOutlined", - // Health/Medical - "HealthCrossOutlined", - "HealthAndSafetyOutlined", - "TestTubeOutlined", - // Lists - "ListAltOutlined", - "ListAltCheckedOutlined", - // Time - "AccessTime", - "WatchLater", - // Info - "InfoOutlined", - ], - Socials: [ - // Group each platform with its hover state - "LinkedIn", - "LinkedInHover", - "X", - "XHover", - "Facebook", - "FacebookHover", - "Youtube", - "YoutubeHover", - "Instagram", - "InstagramHover", - "Tiktok", - "TiktokHover", - ], -}; - const iconsByCategory = categoryOrder .map((category) => { const categoryIcons = icons.filter((icon) => icon.category === category); - - // Stepper: preserve manifest order (numerical LooksZero-LooksNine) - if (category === "Stepper") { - // No sorting needed - } else if (categoryOrders[category]) { - // Use custom logical order for categories with defined orderings + + if (category === 'Stepper') { + const stepperOrder = [ + 'ListZero', + 'ListOne', + 'ListTwo', + 'ListThree', + 'ListFour', + 'ListFive', + 'ListSix', + 'ListSeven', + 'ListEight', + 'ListNine', + ]; + categoryIcons.sort((a, b) => { - const indexA = categoryOrders[category].indexOf(a.name); - const indexB = categoryOrders[category].indexOf(b.name); - return indexA - indexB; + return stepperOrder.indexOf(a.name) - stepperOrder.indexOf(b.name); }); } else { - // Fallback to alphabetical for any unconfigured categories categoryIcons.sort((a, b) => a.name.localeCompare(b.name)); } - + return { category, icons: categoryIcons, diff --git a/packages/site/views/design-system/components/card/card-with-icon/index.njk b/packages/site/views/design-system/components/card/card-with-icon/index.njk index 8881727fb..e0ee06032 100644 --- a/packages/site/views/design-system/components/card/card-with-icon/index.njk +++ b/packages/site/views/design-system/components/card/card-with-icon/index.njk @@ -5,7 +5,7 @@ "headingLevel": "3", "description": "You’ve completed all the required profile details.", "icon": { - "name": "Done", + "name": "Check", "size": 32, "color": "#00725F" } diff --git a/packages/site/views/design-system/components/card/clickable-action/index.njk b/packages/site/views/design-system/components/card/clickable-action/index.njk index d8b252dcc..ce615685f 100644 --- a/packages/site/views/design-system/components/card/clickable-action/index.njk +++ b/packages/site/views/design-system/components/card/clickable-action/index.njk @@ -12,15 +12,15 @@ "description": "A quick guide for people who have care and support needs and their carers.", "metadataItems": [ { - "icon": "FmdGoodOutlined", + "icon": "LocationOutline", "text": "Online" }, { - "icon": "CalendarTodayOutlined", + "icon": "CalendarOutline", "text": "Updated today" }, { - "icon": "AccessTime", + "icon": "ClockOutline", "text": "5 minute read" } ], diff --git a/packages/site/views/design-system/components/icon/responsive/index.njk b/packages/site/views/design-system/components/icon/responsive/index.njk index 914fe84bd..5436592df 100644 --- a/packages/site/views/design-system/components/icon/responsive/index.njk +++ b/packages/site/views/design-system/components/icon/responsive/index.njk @@ -2,18 +2,18 @@
{{ icon({ - "name": "Done", + "name": "Check", "responsiveSize": 16, - "title": "Done" + "title": "Check" }) }} {{ icon({ - "name": "Done", + "name": "Check", "responsiveSize": 24, - "title": "Done" + "title": "Check" }) }} {{ icon({ - "name": "Done", + "name": "Check", "responsiveSize": 32, - "title": "Done" + "title": "Check" }) }}
diff --git a/packages/site/views/design-system/styles/icons/index.njk b/packages/site/views/design-system/styles/icons/index.njk index d18323d07..395c08dee 100644 --- a/packages/site/views/design-system/styles/icons/index.njk +++ b/packages/site/views/design-system/styles/icons/index.njk @@ -2,7 +2,7 @@ {% set pageDescription = "Use this small set of icons that we know our users need and understand to help them identify and navigate content more quickly." %} {% set pageSection = "Design system" %} {% set subSection = "Foundation styles" %} -{% set dateUpdated = "March 2026" %} +{% set dateUpdated = "April 2026" %} {% set backlog_issue_id = "4" %} {% set hideContact = "true" %} @@ -166,14 +166,14 @@
  • Search
  • ChevronRight
    • -
  • ExpandMore and ExpandLess for expandable sections
    • +
  • ChevronDown and ChevronUp for expandable sections
  • Close

Other icons need an explanation. They include:

  • action links - tell the user what the link will help them do, for example: "Find a pharmacy"
  • right and left arrows for pagination - add "Previous" or "Next"
    • -
  • Close and Done - use the words Do and Don't at the top of Card / Do & Don’t
    • +
  • Close and Check - use the words Do and Don't at the top of Card / Do & Don’t

Using SVG classes for icons

diff --git a/packages/site/views/examples/components/card/basic-card-with-icon.njk b/packages/site/views/examples/components/card/basic-card-with-icon.njk index fb34efd1c..82baa5481 100644 --- a/packages/site/views/examples/components/card/basic-card-with-icon.njk +++ b/packages/site/views/examples/components/card/basic-card-with-icon.njk @@ -14,7 +14,7 @@ "headingLevel": "3", "description": "You’ve completed all the required profile details.", "icon": { - "name": "Done", + "name": "Check", "size": 32, "color": "#00725F" } diff --git a/packages/site/views/examples/components/card/clickable-action-card.njk b/packages/site/views/examples/components/card/clickable-action-card.njk index bca272986..b0dfef5c7 100644 --- a/packages/site/views/examples/components/card/clickable-action-card.njk +++ b/packages/site/views/examples/components/card/clickable-action-card.njk @@ -21,15 +21,15 @@ "description": "A quick guide for people who have care and support needs and their carers.", "metadataItems": [ { - "icon": "FmdGoodOutlined", + "icon": "LocationOutline", "text": "Online" }, { - "icon": "CalendarTodayOutlined", + "icon": "CalendarOutline", "text": "Updated today" }, { - "icon": "AccessTime", + "icon": "ClockOutline", "text": "5 minute read" } ], diff --git a/packages/toolkit/assets/icons/AccountCircleOutlined.svg b/packages/toolkit/assets/icons/AccountCircleOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/AccountCircleOutlined.svg rename to packages/toolkit/assets/icons/AccountCircleOutline.svg diff --git a/packages/toolkit/assets/icons/AddCircleOutline.svg b/packages/toolkit/assets/icons/AddCircleOutline.svg new file mode 100644 index 000000000..860cb0c0e --- /dev/null +++ b/packages/toolkit/assets/icons/AddCircleOutline.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/toolkit/assets/icons/West.svg b/packages/toolkit/assets/icons/ArrowLeft.svg similarity index 100% rename from packages/toolkit/assets/icons/West.svg rename to packages/toolkit/assets/icons/ArrowLeft.svg diff --git a/packages/toolkit/assets/icons/East.svg b/packages/toolkit/assets/icons/ArrowRight.svg similarity index 100% rename from packages/toolkit/assets/icons/East.svg rename to packages/toolkit/assets/icons/ArrowRight.svg diff --git a/packages/toolkit/assets/icons/CalendarToday.svg b/packages/toolkit/assets/icons/Calendar.svg similarity index 100% rename from packages/toolkit/assets/icons/CalendarToday.svg rename to packages/toolkit/assets/icons/Calendar.svg diff --git a/packages/toolkit/assets/icons/CalendarTodayOutlined.svg b/packages/toolkit/assets/icons/CalendarOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/CalendarTodayOutlined.svg rename to packages/toolkit/assets/icons/CalendarOutline.svg diff --git a/packages/toolkit/assets/icons/CancelOutlined.svg b/packages/toolkit/assets/icons/CancelOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/CancelOutlined.svg rename to packages/toolkit/assets/icons/CancelOutline.svg diff --git a/packages/toolkit/assets/icons/Done.svg b/packages/toolkit/assets/icons/Check.svg similarity index 100% rename from packages/toolkit/assets/icons/Done.svg rename to packages/toolkit/assets/icons/Check.svg diff --git a/packages/toolkit/assets/icons/ExpandMore.svg b/packages/toolkit/assets/icons/ChevronDown.svg similarity index 100% rename from packages/toolkit/assets/icons/ExpandMore.svg rename to packages/toolkit/assets/icons/ChevronDown.svg diff --git a/packages/toolkit/assets/icons/ExpandLess.svg b/packages/toolkit/assets/icons/ChevronUp.svg similarity index 100% rename from packages/toolkit/assets/icons/ExpandLess.svg rename to packages/toolkit/assets/icons/ChevronUp.svg diff --git a/packages/toolkit/assets/icons/WatchLater.svg b/packages/toolkit/assets/icons/Clock.svg similarity index 100% rename from packages/toolkit/assets/icons/WatchLater.svg rename to packages/toolkit/assets/icons/Clock.svg diff --git a/packages/toolkit/assets/icons/AccessTime.svg b/packages/toolkit/assets/icons/ClockOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/AccessTime.svg rename to packages/toolkit/assets/icons/ClockOutline.svg diff --git a/packages/toolkit/assets/icons/FavoriteBorderOutlined.svg b/packages/toolkit/assets/icons/FavoriteOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/FavoriteBorderOutlined.svg rename to packages/toolkit/assets/icons/FavoriteOutline.svg diff --git a/packages/toolkit/assets/icons/FileDownloadOutlined.svg b/packages/toolkit/assets/icons/FileDownloadOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/FileDownloadOutlined.svg rename to packages/toolkit/assets/icons/FileDownloadOutline.svg diff --git a/packages/toolkit/assets/icons/HealthAndSafetyOutlined.svg b/packages/toolkit/assets/icons/HealthAndSafetyOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/HealthAndSafetyOutlined.svg rename to packages/toolkit/assets/icons/HealthAndSafetyOutline.svg diff --git a/packages/toolkit/assets/icons/HealthCrossOutlined.svg b/packages/toolkit/assets/icons/HealthCrossOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/HealthCrossOutlined.svg rename to packages/toolkit/assets/icons/HealthCrossOutline.svg diff --git a/packages/toolkit/assets/icons/HospitalOutlined.svg b/packages/toolkit/assets/icons/HospitalOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/HospitalOutlined.svg rename to packages/toolkit/assets/icons/HospitalOutline.svg diff --git a/packages/toolkit/assets/icons/InfoOutlined.svg b/packages/toolkit/assets/icons/InfoOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/InfoOutlined.svg rename to packages/toolkit/assets/icons/InfoOutline.svg diff --git a/packages/toolkit/assets/icons/LinkedIn.svg b/packages/toolkit/assets/icons/Linkedin.svg similarity index 100% rename from packages/toolkit/assets/icons/LinkedIn.svg rename to packages/toolkit/assets/icons/Linkedin.svg diff --git a/packages/toolkit/assets/icons/LinkedInHover.svg b/packages/toolkit/assets/icons/LinkedinHover.svg similarity index 100% rename from packages/toolkit/assets/icons/LinkedInHover.svg rename to packages/toolkit/assets/icons/LinkedinHover.svg diff --git a/packages/toolkit/assets/icons/ListAltCheckedOutlined.svg b/packages/toolkit/assets/icons/ListAltCheckedOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/ListAltCheckedOutlined.svg rename to packages/toolkit/assets/icons/ListAltCheckedOutline.svg diff --git a/packages/toolkit/assets/icons/ListAltOutlined.svg b/packages/toolkit/assets/icons/ListAltOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/ListAltOutlined.svg rename to packages/toolkit/assets/icons/ListAltOutline.svg diff --git a/packages/toolkit/assets/icons/LooksEight.svg b/packages/toolkit/assets/icons/ListEight.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksEight.svg rename to packages/toolkit/assets/icons/ListEight.svg diff --git a/packages/toolkit/assets/icons/LooksFive.svg b/packages/toolkit/assets/icons/ListFive.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksFive.svg rename to packages/toolkit/assets/icons/ListFive.svg diff --git a/packages/toolkit/assets/icons/LooksFour.svg b/packages/toolkit/assets/icons/ListFour.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksFour.svg rename to packages/toolkit/assets/icons/ListFour.svg diff --git a/packages/toolkit/assets/icons/LooksNine.svg b/packages/toolkit/assets/icons/ListNine.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksNine.svg rename to packages/toolkit/assets/icons/ListNine.svg diff --git a/packages/toolkit/assets/icons/LooksOne.svg b/packages/toolkit/assets/icons/ListOne.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksOne.svg rename to packages/toolkit/assets/icons/ListOne.svg diff --git a/packages/toolkit/assets/icons/LooksSeven.svg b/packages/toolkit/assets/icons/ListSeven.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksSeven.svg rename to packages/toolkit/assets/icons/ListSeven.svg diff --git a/packages/toolkit/assets/icons/LooksSix.svg b/packages/toolkit/assets/icons/ListSix.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksSix.svg rename to packages/toolkit/assets/icons/ListSix.svg diff --git a/packages/toolkit/assets/icons/LooksThree.svg b/packages/toolkit/assets/icons/ListThree.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksThree.svg rename to packages/toolkit/assets/icons/ListThree.svg diff --git a/packages/toolkit/assets/icons/LooksTwo.svg b/packages/toolkit/assets/icons/ListTwo.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksTwo.svg rename to packages/toolkit/assets/icons/ListTwo.svg diff --git a/packages/toolkit/assets/icons/LooksZero.svg b/packages/toolkit/assets/icons/ListZero.svg similarity index 100% rename from packages/toolkit/assets/icons/LooksZero.svg rename to packages/toolkit/assets/icons/ListZero.svg diff --git a/packages/toolkit/assets/icons/FmdGoodOutlined.svg b/packages/toolkit/assets/icons/LocationOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/FmdGoodOutlined.svg rename to packages/toolkit/assets/icons/LocationOutline.svg diff --git a/packages/toolkit/assets/icons/RemoveCircle.svg b/packages/toolkit/assets/icons/MinusCircle.svg similarity index 100% rename from packages/toolkit/assets/icons/RemoveCircle.svg rename to packages/toolkit/assets/icons/MinusCircle.svg diff --git a/packages/toolkit/assets/icons/MinusCircleOutline.svg b/packages/toolkit/assets/icons/MinusCircleOutline.svg new file mode 100644 index 000000000..82e6aa841 --- /dev/null +++ b/packages/toolkit/assets/icons/MinusCircleOutline.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/toolkit/assets/icons/TestTubeOutlined.svg b/packages/toolkit/assets/icons/TestTubeOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/TestTubeOutlined.svg rename to packages/toolkit/assets/icons/TestTubeOutline.svg diff --git a/packages/toolkit/assets/icons/WorkOutlined.svg b/packages/toolkit/assets/icons/WorkOutline.svg similarity index 100% rename from packages/toolkit/assets/icons/WorkOutlined.svg rename to packages/toolkit/assets/icons/WorkOutline.svg diff --git a/packages/toolkit/assets/icons/icon-sprite.svg b/packages/toolkit/assets/icons/icon-sprite.svg index 13dd4621d..6cd4f120d 100644 --- a/packages/toolkit/assets/icons/icon-sprite.svg +++ b/packages/toolkit/assets/icons/icon-sprite.svg @@ -1,16 +1,16 @@