Feature/SSD-812-ta-spinner-component by FidDeveloper · Pull Request #344 · govtechmy/myds

FidDeveloper · 2026-02-10T06:47:03Z

Summarise the feature

Issue ticket # SSD-812

Description:
TA Spinner component

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

Affected endpoints

/?

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works

vercel · 2026-02-10T06:47:09Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
myds	Ready	Preview, Comment	Feb 10, 2026 6:47am
myds-storybook	Ready	Preview, Comment	Feb 10, 2026 6:47am

changeset-bot · 2026-02-10T06:47:10Z

⚠️ No Changeset found

Latest commit: dbe0995

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot

Pull request overview

Adds a TA Spinner component preview and documentation page intended to showcase variants (color/size) for issue SSD-812.

Changes:

Added an HTML preview page for spinner examples (with theme switching support in an iframe).
Added spinner CSS styles (base, color variants, dark mode, size variants).
Replaced the Spinner docs MDX page content with a tabbed preview/code layout.

Reviewed changes

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

File	Description
apps/docs/public/assets/ta-preview/spinner/ta-spinner-preview.html	Adds an iframe-able preview page demonstrating spinner usage in buttons.
apps/docs/public/assets/ta-preview/spinner/spinner.css	Introduces standalone spinner styling used by the preview and docs.
apps/docs/content/docs/develop/(transistory-assistance)/ta-spinner.mdx	Adds a tabbed docs layout with an iframe preview, but the embedded “Code/CSS/JS” content appears unrelated to Spinner.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-10T06:55:13Z

@@ -2,5 +2,573 @@
 title: Spinner
 description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users.


This Spinner docs page content looks mismatched: the frontmatter description is about accessibility testing tools, the tab labels are SelectCSS/SelectJS, and the “Code” section contains Select component markup rather than Spinner examples. Update the description and replace the Select code/CSS/JS with Spinner-specific examples and appropriately named tabs (e.g., Preview / Usage / CSS).

Copilot · 2026-02-10T06:55:13Z

+import IframeThemePreview from "@/components/iframe-theme-preview";

-## Work In Progress
+<Tabs items={["Preview","Code","SelectCSS","SelectJS"]} defaultValue="Preview">


This Spinner docs page content looks mismatched: the frontmatter description is about accessibility testing tools, the tab labels are SelectCSS/SelectJS, and the “Code” section contains Select component markup rather than Spinner examples. Update the description and replace the Select code/CSS/JS with Spinner-specific examples and appropriately named tabs (e.g., Preview / Usage / CSS).

Copilot · 2026-02-10T06:55:14Z

 ---
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import IframeThemePreview from "@/components/iframe-theme-preview";



This Spinner docs page content looks mismatched: the frontmatter description is about accessibility testing tools, the tab labels are SelectCSS/SelectJS, and the “Code” section contains Select component markup rather than Spinner examples. Update the description and replace the Select code/CSS/JS with Spinner-specific examples and appropriately named tabs (e.g., Preview / Usage / CSS).

Copilot · 2026-02-10T06:55:14Z

 ---
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import IframeThemePreview from "@/components/iframe-theme-preview";



The fenced code blocks are labeled as tsx but contain plain HTML (including HTML comments and class=\"...\"). Use a more accurate fence language (e.g., html/css/js) so syntax highlighting and copy-paste usage are correct.

Copilot · 2026-02-10T06:55:14Z

+        <button type="button" class="select-trigger" label="Fruit">
+          <span class="select-name">Fruit</span>
+          <span class="select-value">Select</span>
+          <svg width="2o" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-txt-black-900 size-4" aria-hidden="true">


The SVG width attribute is set to 2o (letter 'o'), which is invalid and may render incorrectly. Change it to a valid numeric value (likely 20).

Suggested change

<svg width="2o" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-txt-black-900 size-4" aria-hidden="true">

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-txt-black-900 size-4" aria-hidden="true">

Copilot · 2026-02-10T06:55:14Z

+    window.addEventListener("message", (event) => {
+      if (event.origin !== window.origin) return;
+      if (event.data?.theme) {
+        document.documentElement.className = event.data.theme;
+        console.log("Theme applied inside iframe:", event.data.theme);


The origin check should compare against window.location.origin (not window.origin) to reliably validate the sender. Also, the console.log is noisy for docs previews; consider removing it or guarding it behind a debug flag.

Suggested change

window.addEventListener("message", (event) => {

if (event.origin !== window.origin) return;

if (event.data?.theme) {

document.documentElement.className = event.data.theme;

console.log("Theme applied inside iframe:", event.data.theme);

const DEBUG_THEME_MESSAGES = false;

window.addEventListener("message", (event) => {

if (event.origin !== window.location.origin) return;

if (event.data?.theme) {

document.documentElement.className = event.data.theme;

if (DEBUG_THEME_MESSAGES) {

console.log("Theme applied inside iframe:", event.data.theme);

}

Copilot · 2026-02-10T06:55:15Z

+</head>
+
+<body>
+  <h1>Spinner Component Examples</h1>


The page uses multiple <h1> elements; the second section heading should be an <h2> (or nested appropriately) for correct document structure. Also, the spinner <span> should typically be marked aria-hidden=\"true\", and if it conveys loading state you may want an accessible status (e.g., aria-busy on the button or a role=\"status\" region) to avoid screen readers reading a purely decorative element.

Copilot · 2026-02-10T06:55:15Z

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+


The page uses multiple <h1> elements; the second section heading should be an <h2> (or nested appropriately) for correct document structure. Also, the spinner <span> should typically be marked aria-hidden=\"true\", and if it conveys loading state you may want an accessible status (e.g., aria-busy on the button or a role=\"status\" region) to avoid screen readers reading a purely decorative element.

Copilot · 2026-02-10T06:55:15Z

+/* Default Spinner (same as gray) */
+.spinner-default {
+  border-top-color: #6b6b74;
+  border-right-color: rgba(107, 107, 116, 0.3);
+  border-bottom-color: rgba(107, 107, 116, 0.3);
+  border-left-color: rgba(107, 107, 116, 0.3);
+}


.spinner-default duplicates .spinner-gray exactly; consider consolidating them (e.g., shared selector .spinner-gray, .spinner-default { ... }) to avoid future drift. Also, the size variants include commented-out rem values and then hard-code px; remove the commented code and pick a single unit strategy (rem or px) to keep the stylesheet consistent.

Copilot · 2026-02-10T06:55:15Z

+/* Size variants */
+.spinner-small {
+  /* width: 0.875rem;
+  height: 0.875rem; */
+  width: 16px;
+  height: 16px;


.spinner-default duplicates .spinner-gray exactly; consider consolidating them (e.g., shared selector .spinner-gray, .spinner-default { ... }) to avoid future drift. Also, the size variants include commented-out rem values and then hard-code px; remove the commented code and pick a single unit strategy (rem or px) to keep the stylesheet consistent.

FidDeveloper added 2 commits February 10, 2026 14:36

feat: add TA spinner component

a2590ca

feat: Add TA spinner component preview

dbe0995

FidDeveloper requested a review from Copilot February 10, 2026 06:52

FidDeveloper self-assigned this Feb 10, 2026

FidDeveloper requested a review from harrisazmi February 10, 2026 06:53

FidDeveloper marked this pull request as ready for review February 10, 2026 06:53

FidDeveloper changed the title ~~Feature/SSD-812-ta-spinners~~ Feature/SSD-812-ta-spinner-component Feb 10, 2026

Copilot AI reviewed Feb 10, 2026

View reviewed changes

		@@ -2,5 +2,573 @@
		title: Spinner
		description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users.

	<svg width="2o" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-txt-black-900 size-4" aria-hidden="true">
	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-txt-black-900 size-4" aria-hidden="true">

		@@ -0,0 +1,90 @@
		<!DOCTYPE html>
		<html lang="en" class="dark">

Conversation

FidDeveloper commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summarise the feature

Type of change

Affected endpoints

Checklist

Uh oh!

vercel Bot commented Feb 10, 2026

Uh oh!

changeset-bot Bot commented Feb 10, 2026

⚠️ No Changeset found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

FidDeveloper commented Feb 10, 2026 •

edited

Loading