| name | canopy-v33-migration |
| description | Apply the Canopy v32→v33 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v33, upgrade @legal-and-general/canopy from v32, or fix errors after upgrading to v33. |
| license | MIT |
| metadata | {"version":"33.0.0","source":"https://github.com/Legal-and-General/canopy/releases/tag/v33.0.0"} |
Canopy v32 → v33 Migration
When asked to apply this migration, work through each section below in order.
After completing all sections, follow the Verification steps at the end.
1. pictogram: replace lg-brand-icon APIs with lg-pictogram
What changed: lg-brand-icon has been replaced by lg-pictogram. The
LgBrandIconComponent, LgBrandIconRegistry, BrandIconName, and
BrandIconSize exports have been removed and replaced with
LgPictogramComponent, LgPictogramRegistry, PictogramName, and
PictogramSize.
Search for (in *.html and *.ts files):
lg-brand-icon
LgBrandIconComponent
LgBrandIconRegistry
BrandIconName
BrandIconSize
Replace with:
- Replace
<lg-brand-icon> with <lg-pictogram>.
- Update imports from the Canopy library to use
LgPictogramComponent,
LgPictogramRegistry, PictogramName, and PictogramSize.
- In
TestBed, standalone component imports, NgModule metadata, and any
other Angular arrays, replace LgBrandIconComponent with
LgPictogramComponent and LgBrandIconRegistry with
LgPictogramRegistry.
Before:
import {
BrandIconName,
BrandIconSize,
LgBrandIconComponent,
LgBrandIconRegistry,
} from '@legal-and-general/canopy';
<lg-brand-icon name="sun" size="sm"></lg-brand-icon>
After:
import {
LgPictogramComponent,
LgPictogramRegistry,
PictogramName,
PictogramSize,
} from '@legal-and-general/canopy';
<lg-pictogram name="sun" size="sm"></lg-pictogram>
Automated? No — update selectors, imports, Angular metadata arrays, and
renamed types together.
2. pictogram: remove legacy colour inputs
What changed: The colour, halfToneColour, and outlinesColour inputs
have been removed. Pictogram colouring is now theme-driven via CSS custom
properties. To enable the fill colour controlled by
--content-pictogram-fill, set [hasFill]="true" only where that behaviour is
wanted.
Search for (in *.html and *.ts files):
colour
halfToneColour
outlinesColour
Replace with:
- Remove
colour, halfToneColour, and outlinesColour inputs from
lg-pictogram usage.
- If a self-service application needs the fill colour, set
[hasFill]="true".
- If no fill is needed, omit
hasFill and keep the default theme-driven
appearance.
- Do not set
hasFill in highly branded scenarios such as Dotcom CMS unless
the product team has explicitly approved it.
Before:
<lg-brand-icon name="sun" [colour]="'--colour-green-400'"></lg-brand-icon>
After:
<lg-pictogram name="sun" [hasFill]="true"></lg-pictogram>
<lg-pictogram name="sun"></lg-pictogram>
Automated? No — remove the deleted inputs everywhere, then decide case by
case whether hasFill should be enabled.
3. pictogram: replace unsupported xxs and xs sizes
What changed: The xxs and xs sizes have been removed from the size API.
The supported sizes are now sm, md, lg, xl, and xxl.
Search for (in *.html and *.ts files):
size="xxs"
size="xs"
'xxs'
'xs'
Replace with: Choose the closest supported size from the updated scale
below. There is no direct equivalent for xxs or xs; the smallest supported
size is now sm.
| Size | rem | px |
|---|
sm | 10 | 160 |
md | 12.5 | 200 |
lg | 15 | 240 |
xl | 17.5 | 280 |
xxl | 20 | 320 |
Before:
<lg-pictogram name="sun" size="xs"></lg-pictogram>
After:
<lg-pictogram name="sun" size="sm"></lg-pictogram>
Automated? No — replace each removed size with the closest supported size
for that specific UI.
4. pictogram: rename removed --brand-icon-* CSS custom properties
What changed: The --brand-icon-* CSS custom properties have been removed.
Use the new --content-pictogram-size-* tokens instead. The
--brand-icon-fill-primary token has also been removed; use
--content-pictogram-fill or the [hasFill]="true" input instead.
Search for (in *.scss, *.css, and inline style="" attributes in
*.html files):
--brand-icon-
Replace with:
| Removed CSS custom property | Replacement |
|---|
--brand-icon-xxs | no direct equivalent — use sm |
--brand-icon-xs | no direct equivalent — use sm |
--brand-icon-sm | --content-pictogram-size-sm |
--brand-icon-md | --content-pictogram-size-md |
--brand-icon-lg | --content-pictogram-size-lg |
--brand-icon-xl | --content-pictogram-size-xl |
--brand-icon-xxl | --content-pictogram-size-xxl |
--brand-icon-fill-primary | --content-pictogram-fill or [hasFill]="true" |
Before:
.hero-pictogram {
--brand-icon-sm: 10rem;
--brand-icon-fill-primary: var(--colour-green-500);
}
After:
.hero-pictogram {
--content-pictogram-size-sm: 10rem;
--content-pictogram-fill: var(--colour-green-500);
}
Automated? Partly — the direct token renames can be updated
automatically, but review xxs/xs usages and fill behaviour manually.
5. pictogram: review all pictogram names against the new catalogue
What changed: The pictogram set has been significantly updated as part of
the L&G brand modernisation. The release notes state that 383 names from the
previous set have been removed and 127 new names have been added. The release
notes do not publish a 1:1 rename table for removed names, so any removed name
must be migrated manually to the closest supported pictogram from the new
catalogue.
Search for (in *.html and *.ts files):
<lg-pictogram
name="
[name]=
PictogramName
BrandIconName
Replace with:
- Review every pictogram
name used by the application.
- Keep names that are still supported.
- Replace any removed name with the closest supported pictogram from the
updated pictogram catalogue.
- If a name is not in the retained list below, do not assume it still exists —
check the catalogue before keeping it.
Retained names (no rename required):
accessible, active-fixed-income, aeroplane, annuity, calculator,
calendar, calendar-limited-time, call-centre-headset, car, care,
cash, cash-liquidity, cash-lump-sum, chat, checklist, claim,
clock, confirm, create-account, credit-card, currency-global,
currency-pounds, customer, decrease, denied, devices, diamond,
document-confirmation, document-warning, dollars, edit-profile,
evidence, eye, features, female, female-call-centre,
fixed-term-retirement-plan, flexible-income, flip, flip-flops,
form, fuel-pump, gavel, graph-point, handshake, hierarchy,
home, increase, information, investment-choices, jigsaw,
life-ring, location, lock-closed, locked, login, looking-ahead,
male, male-call-centre, message-sent, microphone, mobile-phone,
multi-asset, oil-pump, online-chat, options, org-chart, pencil,
pension-pot, pensions-and-retirement, people, people-search,
performance, piggy-bank, pipeline, play, post, pounds,
presentation, printed-material, private-markets, profile,
question, quote, refresh, reload, responsible-investing,
rewards, rosette, saving, scales, search, search-warning,
shopping-bags, shopping-basket, shopping-trolley, solutions,
spanner, star-rating, stethoscope, stopwatch, strategy, switch,
tape-measure, target, thumbs-down, thumbs-up, trophy,
video-guides, wallet, warning, wellbeing, wind-turbine,
workshop, yen
New names introduced in v33:
25-tax-free, announcement, app-download, apparel, bank, bell,
binoculars, bob-ai, bob-ai-chatbot, briefcase, building-factory,
building-office, bullseye, calendar-confirm, calendar-time,
cement, chart-pie, chemicals, comment, computer,
computer-secure, connections, consistent, cooling-towers,
credit-card-confirm, cuppa, decision, digital-customer-products,
digital-workplace, diversity, document, document-cancel,
document-time, electirc-charging, enhanced-returns, euro,
feature, firework, food, forestry, funds-decrease,
funds-increase, funds-pounds, funds-search, funds-switch,
gas-cannister, glass, globe, growth-off-target,
growth-on-target, handheld-scanner, hazard, index-funds,
infrastructure-cloud, instant-photo, instruction-confirm,
investment-goal, landfill-waste, launch, lightbulb, locations,
lock-open, lock-settings, logistics, logout, message,
message-unavailable, metal, mining, numeral-eight,
numeral-five, numeral-four, numeral-nine, numeral-one,
numeral-seven, numeral-six, numeral-three, numeral-two,
numeral-zero, offline, oil-drum, oil-gas-platform, online,
pension-pot-filled, people-settings, phone, pointer-click,
poster, pounds-increase, pounds-secure, property, protection,
protection-confirm, protection-pounds, pylon, research,
road-transport, search-confirm, search-zoom-in, search-zoom-out,
settings, sharper-focus, shipping, signal-mobile,
signal-mobile-disconnected, signal-wifi,
signal-wifi-disconnected, solar, sprout, sustainable-growth,
tag, tap-and-drag, team, tech, technical-services,
telescope, ticks, transactions, transactions-offline,
transactions-pounds, transactions-warning, trust, upload-bulk,
utilities, video-call, website
Before:
<lg-pictogram name="old-removed-name"></lg-pictogram>
After:
<lg-pictogram name="supported-name"></lg-pictogram>
Automated? No — this requires manual review because the release notes do
not provide a 1:1 mapping for removed pictogram names.
6. primary-message: replace slotted lg-brand-icon content with lg-pictogram
What changed: lg-primary-message now accepts lg-pictogram in its
content slot instead of lg-brand-icon.
Search for (in *.html files):
<lg-primary-message
<lg-brand-icon
Replace with:
- Inside
lg-primary-message, replace any slotted <lg-brand-icon> usage with
<lg-pictogram>.
- Keep the surrounding
lg-primary-message structure unchanged unless the
pictogram name or size also needs migrating under the sections above.
Before:
<lg-primary-message>
<lg-brand-icon name="calendar"></lg-brand-icon>
<lg-primary-message-title>Title</lg-primary-message-title>
</lg-primary-message>
After:
<lg-primary-message>
<lg-pictogram name="calendar"></lg-pictogram>
<lg-primary-message-title>Title</lg-primary-message-title>
</lg-primary-message>
Automated? Yes — replace the slotted selector, then re-check the
pictogram name, size, and fill behaviour using the sections above.
Verification
- Read the consumer project's
package.json scripts field to identify the
build and test commands. Common script names include build, compile,
type-check, test, and test:ci — use whichever are present.
- Ask the user to run their build command and confirm there are no TypeScript
or compilation errors related to any of the APIs changed above.
- Ask the user to run their test command and confirm the test suite passes.
- If errors remain after applying all changes, re-read the relevant section
above and check whether the pattern matched all occurrences (for example in
template
.html files as well as .ts files, or inside Angular test setup
and theme stylesheets).
