Discovery: CDS copilot genereted Loader experiment by helene-mccarron · Pull Request #1664 · department-of-veterans-affairs/component-library

helene-mccarron · 2025-06-24T14:43:34Z

Chromatic

https://CDS-contribution-experiment--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

An experiment to convert the Clinical Design System component Loader into a web component.

Styles aren't fully implemented as part of this proof of concept but the component code is ready for review. It was generated using Copilot, after analyzing va-loading-indicator.

Please focus review on potential hallucinations and markedly erroneous patterns to help with refining the prompt.

Screenshots

Testing and review

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

Engineering: platform-design-system-fe
Accessibility: platform-design-system-a11y
Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

🌱 New Component Variation Added

The PR has the minor label
The variation matches its Figma design.
Any new properties, custom events, or utility functions have e2e and/or unit tests
A new story has been added to the component's existing Storybook page
Any Chromatic UI snapshot changes have been accepted by a design reviewer
Tested in vets-website using Verdaccio
Engineering has approved the PR
Design has approved the PR

🐞 Component Fix

The PR has the patch label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any markup changes are evaluated for impact on vets-website.
- Will any vets-website tests fail from the change?
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

♿️ Component Fix - Accessibility

The PR has the patch label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR
Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

The PR has the major label
vets-website and content-build have been evaluated to determine the impact of the breaking change
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Tested in vets-website using Verdaccio
Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

The PR has the minor label
Any new properties, custom events, or utility functions have e2e and/or unit tests
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

📖 Storybook Update

The PR has the ignore-for-release label
Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
Engineering has approved the PR

🎨 CSS-Library Update

The PR has the css-library label
vets-website and content-build have been checked to determine the impact of any breaking changes
Engineering has approved the PR

Copilot

Pull Request Overview

This PR provides a proof-of-concept conversion of the Clinical Design System Loader component into a web component, generated using Copilot. Key changes include the addition of new CSS styling, end-to-end tests for functionality and accessibility, and the generated web component code for the loader.

Reviewed Changes

Copilot reviewed 4 out of 6 changed files in this pull request and generated 3 comments.

File	Description
packages/web-components/src/components/va-loader/va-loader.css	Added CSS styling for the loader including animation, layout, and visual details.
packages/web-components/src/components/va-loader/test/va-loader.e2e.ts	Added new e2e tests for rendering, custom labels, dynamic text changes, and accessibility checks.
packages/web-components/src/components/va-loader/loader-generated.tsx	Introduced the web component implementation with rotation logic and dynamic label updates.
packages/storybook/stories/va-loader.stories.tsx	Added Storybook stories to demonstrate various loader configurations.

Copilot · 2025-06-25T15:52:01Z

+  top: 45%;
+  left: 30%;
+  transform: translate(-50%, -50%);
+  font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Arial, sans


The generic font family should be 'sans-serif' instead of 'sans' to ensure proper font rendering.

Suggested change

font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Arial, sans

font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Arial, sans-serif

Copilot · 2025-06-25T15:52:02Z

+.vacds-loader {
+  position: relative;
+  width: 12.5rem;
+  height: 12.5rem


[nitpick] For stylistic consistency, add a trailing semicolon after the height property.

Suggested change

height: 12.5rem

height: 12.5rem;

jamigibbs

There is functional base here that could continue to be built on but this work would need a lot more human attention to detail related to building out the style and Storybook previews.

jamigibbs · 2025-06-26T17:47:45Z

suggestion (blocking): The name of this file should be name of the component va-loader.tsx which would follow the current component-library pattern.

jamigibbs · 2025-06-26T17:53:10Z

+/**
+ * @componentName Loader
+ * @maturityCategory review
+ * @maturityLevel development


suggestion (blocking): The maturityCategory and maturityLevel should follow these maturity scale values

jamigibbs · 2025-06-26T17:55:02Z

+  height: 12.5rem
+}
+
+.vacds-loader-border {


suggestion (blocking): Class naming should follow the naming conventions outlined here: https://design.va.gov/about/naming-conventions/

jamigibbs · 2025-06-26T17:56:11Z

+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1.25rem solid #f0f0f0;


suggestion (blocking): Colors should use VADS color tokens where possible. New colors should be evaluated for addition to the design system CSS-Library

jamigibbs · 2025-06-26T17:58:16Z

+SetFocus.args = { ...defaultArgs, 'set-focus': true };
+
+export const EnableAnalytics = Template.bind(null);
+EnableAnalytics.args = { ...defaultArgs, 'enable-analytics': true };


suggeston (blocking): There is no enable-analytics property on the component so this story should not have been added. This could be an issue with the va-loader story too but even so, we don't want the same problem to be duplicated.

jamigibbs · 2025-06-26T18:02:59Z

+
+const defaultArgs = {
+  'message': 'Loading your application...',
+  'label': 'Loading',


label and message are declared but not being used.

jamigibbs

Testing locally, the loader looks like this:

Screen.Recording.2025-07-02.at.8.31.29.AM.mov

I'm not familiar with the VACDS version of this component but is that acceptable for your use? I suspect it still needs some styling.

I'm also not sure that this "Custom Position" feature is working. It looks exactly the same as the other stories:

jamigibbs · 2025-07-02T12:55:36Z

+
+  'Loader': {
+    guidanceHref: 'loader',
+    guidanceName: 'Loader',


This file additional-docs.js is only for deprecated React components and styling classes from CSS-Library (previously Formation). It's not used for web components so this should be removed.

jamigibbs · 2025-07-02T13:26:14Z

+/**
+ * @componentName Loader
+ * @maturityCategory don't use
+ * @maturityLevel proposed


This should be:

* @maturityCategory caution * @maturityLevel candidate

…rtment-of-veterans-affairs/component-library into CDS-contribution-experiment

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

humancompanion-usds · 2025-07-07T13:49:06Z

I had thought that one of the goals of revising the va-loading-indicator was to make it more accessible as evidenced by this discussion. They goal there appeared to be use of the prefers-reduced-motion CSS media feature. Is that still a goal? Otherwise, I'm not sure we need another loading indicator.

That said, if the purpose of the experiment was just to see if you could convert a component of a certain framework to a web-component using Copilot then that seems to have had mitigated success. We've not yet arrived at a series of prompts for converting to web components because we are generally starting from scratch or from a web-component contribution.

helene-mccarron added 3 commits June 19, 2025 12:07

Basic conversion

c8f2344

fix build errors

1ea4516

generated tests

fb3461f

jamigibbs added the ignore-for-release Used if you want to ignore the PR in the generated release notes label Jun 24, 2025

Merge branch 'main' into CDS-contribution-experiment

fc88955

jamigibbs requested a review from Copilot June 25, 2025 15:51

Copilot AI reviewed Jun 25, 2025

View reviewed changes

Merge branch 'main' into CDS-contribution-experiment

2ab0f7a

jamigibbs reviewed Jun 26, 2025

View reviewed changes

helene-mccarron assigned helene-mccarron and unassigned helene-mccarron Jun 27, 2025

helene-mccarron and others added 4 commits June 27, 2025 11:11

rename classes

e3087d6

update stories and maturity level

15f9e7a

Fix broken tests

d66c0bc

Merge branch 'main' into CDS-contribution-experiment

c41de99

jamigibbs reviewed Jul 2, 2025

View reviewed changes

helene-mccarron and others added 3 commits July 2, 2025 10:22

final code review changes

e6e610e

Merge branch 'CDS-contribution-experiment' of https://github.com/depa…

d40e518

…rtment-of-veterans-affairs/component-library into CDS-contribution-experiment

Update packages/web-components/src/components/va-loader/va-loader.css

8be886c

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

	font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Arial, sans
	font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Arial, sans-serif

Conversation

helene-mccarron commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chromatic

Description

Related tickets and links

Screenshots

Testing and review

Approvals

QA checklists

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

jamigibbs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jamigibbs left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

humancompanion-usds commented Jul 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

helene-mccarron commented Jun 24, 2025 •

edited

Loading