Skip to content

Conversation

@GCHQDev01001010
Copy link

@GCHQDev01001010 GCHQDev01001010 commented Oct 29, 2025

Summary of the changes

Enabled angular output target in stencil config to create native angular library output.
This change set also provides an angular schematic for ease of integration with consumer apps and updates in-repo documentation for using ICDS with Angular.

Related issue

#3933
& ic-design-system 850

Checklist

General

  • Changes to docs package checked and committed.
  • All acceptance criteria reviewed and met.

Testing

  • Relevant unit tests and visual regression tests added.
  • Visual testing against Figma component specification completed.
  • [-] Playground stories in React Storybook up to date, with any prop changes and additions addressed. - not needed, see 850 issue comments
  • [-] Compare performance of modified components against develop using Performance addon in React Storybook. - not needed, see 850 issue comments

Accessibility

  • Accessibility Insights FastPass performed.
  • A11y unit test added and yields no issues.
  • [-] A11y plug-in on Storybook yields no issues. - not including Storybook
  • Manual screen reader testing performed using NVDA and VoiceOver.
  • Manual keyboard testing for keyboard controls and logical focus order.
  • Correct roles used and ARIA attributes used correctly where required.
  • Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

  • Page can be zoomed to 400% with no loss of content.
  • Screen magnifier used with no issues.
  • Text resized to 200% with no loss of content.
  • Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

  • Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
  • Windows High Contrast mode tested with no loss of content.
  • System light and dark mode tested with no loss of content.
  • Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

  • Min/max content examples tested with no loss of content or overflow.
  • All prop combinations work without issue.
  • Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
  • Controlled and uncontrolled input components tested.
  • Props/slots can be updated after initial render.

@GCHQDev01001010
Copy link
Author

Raising this PR ahead of time while I work on some component tests to get opinions/check I haven't missed anything large

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome 👋

Welcome to the ic-ui-kit repo, thank you for submitting a pull request!

How to contribute

Please read our CONTRIBUTING.md, which explains our ways of working and guidelines for contributions.

Code of Conduct

We'd appreciate it if you could read and abide by our Code of Conduct, as we wish to foster an inclusive and respectful community.

Targeting your pull request

We use develop rather than main as the base for contributions - please make sure your PR is targeting develop.

Signing the CLA

We require all contributors to sign our Contributor License Agreement (CLA) before we can accept a contribution. If you are contributing on behalf of an organization please follow your organization's policies in signing CLAs.

Associated issue

Please make sure that your pull request has an issue open - this allows us to keep track of changes made and offer support where needed.

@evenstensberg
Copy link
Contributor

I can review this later if wanted. A couple of places we can improve logic.

@GCHQDev01001010
Copy link
Author

GCHQDev01001010 commented Oct 30, 2025

I can review this later if wanted. A couple of places we can improve logic.

Please do, I'm having an interesting time getting cypress set up for the angular side, and when I was about to push up the quick fixes to add the scope and remove the general linting from the angular package (as per the react one) I now have some important vulnerabilities being flagged by the commit processor!

@evenstensberg
Copy link
Contributor

CC me when this is ready for review 👍🏾

@GCHQDev01001010 GCHQDev01001010 force-pushed the feat/3933-angular-native-wrappers branch from f6e9ecd to 2f11a6c Compare October 31, 2025 11:37
Copy link
Contributor

@MI6-255 MI6-255 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Marking as requested changes simply to prevent merging whilst the team has internal discussions on this PR

@GCHQDev01001010 GCHQDev01001010 force-pushed the feat/3933-angular-native-wrappers branch from 48c2ddb to f06b421 Compare November 12, 2025 14:00
@GCHQDev01001010 GCHQDev01001010 force-pushed the feat/3933-angular-native-wrappers branch 3 times, most recently from ac54468 to fe2261c Compare January 9, 2026 16:26
GCHQDev01001010 and others added 8 commits January 12, 2026 13:49
Set up new output targets in the stencil config to output native angular wrapper components in a
similar vein to the react components. Versions have been included that will allow the integrating
developers to import the components as standalone items one-by-one at need or as a whole module.
This also required the addition/alteration of the custom-elements-dist output to create an internal
package for the web-components that the angular output plugin could use.

re mi6#3933

feat(angular): updated proxies following changes on develop

refactor(angular): added angular to the pack tars script, included package.json entry for ng-add

feat(angular): uplifts Ng native componnets to latest changes & fixes "ng add" schematic

re mi6#3933

feat(root): included angular output targets to produce native wrappers

Set up new output targets in the stencil config to output native angular wrapper components in a similar vein to the react components. Versions have been included that will allow the integrating developers to import the components as standalone items one-by-one at need or as a whole module. This also required
the addition/alteration of the custom-elements-dist output to create an internal package for the web-components that the angular output plugin could use.
The package is included in the pack all script and other checks. Also includes an Angular schematic in the package so users can install simply with "ng add"
Removes generic linting from angular to be more in line with the react components. Adds references
to the angular package in various workflow configs. Updates the contributing docs with reference to
angular package where the react native components are already highlihgted

re mi6#3933

style(angular): addresses PR comments

feat(angular): updates angular package to version 3.16 and fixes some packaging config issues

chore(angular): responding to review comment

refactor(angular): changes angular package name to include community status

Also adds some more notes to the readme as per agreements with ICDS team

chore(angular): adding updated package-lock

chore(angular-community-supported): fixes audit concerns with package updates and uolifts to 3.17.0

feat(angular-community-developed): fixing pipeline issues and renames package

Removes generic linting from angular to be more in line with the react components. Adds references
to the angular package in various workflow configs. Updates the contributing docs with reference to
angular package where the react native components are already highlihgted

Package renamed to reflect community driven nature.
Also adds some more notes to the readme as per agreements with ICDS team regarding package ownership.

re mi6#3933
…ableTimes' prop

Modify the disableTimes prop in time-input and time-selector to remove ability to set individual
times

BREAKING CHANGE: Modified IcDisableTimeSelection type, affecting disableTimes prop

ref mi6#3949
Update the description omf the disableTimes prop used in time components

ref mi6#3949
…isableTimes

Updated disableTime examples in Time Input and Selector stories, including playgrounds.

ref mi6#3949
Update audit ci with new vulnerability
…scope check and fixes prettier

chore(angular-community-supported): removed redundant scope mapping

style(angular-community-supported): adds new angular package name to scope check and fixes prettier
@GCHQDev01001010 GCHQDev01001010 force-pushed the feat/3933-angular-native-wrappers branch from 199081d to 0ce3454 Compare January 12, 2026 14:24
@GCHQDev01001010
Copy link
Author

I've moved the changes over to a new branch to make the commit scoping neater.
Please see new PR: #4180

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants