CN-235: remove placeholder from date-field and sort-code #1649
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull request overview
This PR removes placeholders from the date-field and sort-code components for accessibility compliance and migrates numerous templates from Angular's legacy *ngIf/*ngFor directive syntax to the new @if/@for control flow syntax.
Key changes:
- Date-field component now uses a hardcoded hint ("For example, 27 12 1977") instead of accepting custom hints via content projection
- Sort-code directive no longer provides a placeholder; developers must add the hint "Must be 6 digits long, for example 00-00-00"
- Comprehensive migration to Angular's new control flow syntax across ~20 files including stories, specs, and documentation
Reviewed changes
Copilot reviewed 37 out of 37 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
projects/canopy/src/lib/forms/date/date-field.component.ts |
Changed hint from ContentChild to ViewChild; refactored ariaDescribedBy handling in ngAfterViewInit |
projects/canopy/src/lib/forms/date/date-field.component.html |
Removed placeholders from input fields; added hardcoded lg-hint component |
projects/canopy/src/lib/forms/date/date-field.component.spec.ts |
Updated tests to handle auto-generated hint IDs |
projects/canopy/src/lib/forms/date/docs/date-field.stories.ts |
Removed hint input parameter from story component |
projects/canopy/src/lib/forms/date/docs/guide.mdx |
Updated documentation to remove custom hint examples and use @if syntax |
projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts |
Removed placeholder HostBinding |
projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts |
Removed placeholder test |
projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts |
Changed to hardcoded hint in template; disabled inputmode argType |
projects/canopy/src/lib/forms/sort-code/docs/guide.mdx |
Updated documentation to instruct users to add the specific hint |
projects/canopy/src/lib/forms/validation/docs/form.stories.ts |
Removed hint from date-field; updated sort-code hint text |
projects/canopy/src/lib/forms/validation/docs/guide.mdx |
Migrated validation examples to @if syntax |
projects/canopy/src/lib/tabs/docs/tabs.stories.ts |
Migrated *ngFor to @for with track expression |
projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts |
Migrated *ngFor to @for; removed NgFor import |
projects/canopy/src/lib/table/table/table.component.spec.ts |
Migrated *ngFor to @for in test template; removed NgFor import |
projects/canopy/src/lib/table/docs/table.stories.ts |
Migrated *ngFor to @for across multiple templates; removed NgFor import |
projects/canopy/src/lib/sr-alert-message/docs/guide.mdx |
Migrated *ngIf example to @if syntax |
projects/canopy/src/lib/spinner/docs/spinner.stories.ts |
Migrated *ngIf example to @if syntax |
projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts |
Migrated multiple *ngIf to @if; removed NgIf import |
projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts |
Migrated multiple *ngIf to @if; removed duplicate decorator and NgIf import |
projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts |
Migrated *ngFor and *ngIf to @for/@if; removed NgFor and NgIf imports |
projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts |
Migrated *ngFor to @for with track expression |
projects/canopy/src/lib/page/docs/page.stories.ts |
Migrated *ngFor to @for in footer templates; removed NgFor and NgIf imports |
projects/canopy/src/lib/list/docs/lists.stories.ts |
Migrated nested *ngFor and *ngIf to @for/@if; removed imports |
projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts |
Migrated *ngFor and *ngIf to @for/@if; removed imports |
projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx |
Migrated *ngIf example to @if syntax |
projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts |
Migrated *ngIf to @if in template |
projects/canopy/src/lib/forms/select/docs/select.stories.ts |
Migrated *ngIf and *ngFor to @if/@for |
projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts |
Migrated *ngIf to @if in template |
projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts |
Migrated *ngIf to @if in template |
projects/canopy/src/lib/forms/input/input-field.component.spec.ts |
Removed NgIf import; reordered import statements |
projects/canopy/src/lib/forms/input/docs/input.stories.ts |
Migrated multiple *ngIf to @if for conditional rendering of prefix/suffix elements |
projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts |
Removed NgIf import from test imports |
projects/canopy/src/lib/footer/docs/footer.stories.ts |
Migrated *ngFor and *ngIf to @for/@if across multiple templates; removed imports |
projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts |
Migrated *ngIf to @if for conditional brand icon rendering |
projects/canopy/src/lib/card/docs/card/card.stories.ts |
Migrated *ngIf and *ngFor to @if/@for across multiple card templates |
projects/canopy/src/lib/accordion/docs/accordion.stories.ts |
Migrated *ngIf to @if for conditional icon rendering in accordion headings |
projects/canopy-test-app/src/app/app.component.html |
Removed custom hints from date-field; updated sort-code hint text in test app |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
elenagarrone
force-pushed
the
cn-235-placeholder-bug
branch
from
d8585a0 to
1e351c8
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 37 out of 37 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
BREAKING CHANGE: the placeholder has been removed as it was causing a11y issues. We have added the hint component instead. This is added automatically to the codebase. Any existing hints used within the date field will not appear anymore.
BREAKING CHANGE: the placeholder has been removed as it was causing a11y issues. You will need to manually add an `lg-hint` component as per the example in the docs.
elenagarrone
force-pushed
the
cn-235-placeholder-bug
branch
from
1e351c8 to
7ef7de9
Compare
IdaHW
approved these changes
Dec 16, 2025
Contributor
|
🎉 This PR is included in version 19.0.0-next.2 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR:
*ngIfand*ngForin certain specs and stories that were causing issues with story functionality.These changes will be categorised as breaking changes as they require manual intervention.
The resolve an issue with the placeholders not following the design patterns and mainly not passing a11y.
Fixes #1642
Checklist: