Feature/SSD-811-ta-select by FidDeveloper · Pull Request #343 · govtechmy/myds

FidDeveloper · 2026-02-10T05:17:06Z

Summarise the feature

Issue ticket # SSD-811
Description:
TA Select 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

changeset-bot · 2026-02-10T05:17:11Z

⚠️ No Changeset found

Latest commit: e67fd84

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

vercel · 2026-02-10T05:17:11Z

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

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

Copilot

Pull request overview

Adds TA Select documentation and interactive previews (plus a Callout preview asset) to support SSD-811.

Changes:

Added standalone HTML/CSS/JS preview assets for the Select component.
Added a Select docs page with tabs for Preview/Code/CSS/JS.
Added standalone HTML/CSS preview assets for the Callout component.

Reviewed changes

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

Show a summary per file

File	Description
apps/docs/public/assets/ta-preview/select/ta-select-preview.html	New iframe preview page demonstrating Select variants/states.
apps/docs/public/assets/ta-preview/select/select.js	New JS behavior for the custom Select (open/close, pick option).
apps/docs/public/assets/ta-preview/select/select.css	New styling for Select variants (outline/ghost), sizes, disabled states.
apps/docs/public/assets/ta-preview/callout/ta-callout-preview.html	New iframe preview page demonstrating Callout variants/layouts.
apps/docs/public/assets/ta-preview/callout/callout.css	New styling for Callout variants and layout.
apps/docs/content/docs/develop/(transistory-assistance)/ta-select.mdx	New docs content with tabbed preview and embedded code samples.

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

Copilot · 2026-02-10T05:25:13Z

+        <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 has a typo (2o), which is not a valid numeric value and may break sizing in some browsers. Change it to 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-10T05:25: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 docs code sample includes the same SVG width typo (2o). Update it to 20 so the documentation matches valid HTML.

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-10T05:25:14Z

+      <label class="select-label">Variant Outline</label>
+      <div class="custom-select select-small">
+        <button type="button" class="select-trigger" label="Fruit">


The <label> is not programmatically associated with the control, and the label attribute on <button> is not a valid accessible labeling mechanism. Prefer either: (1) give the button an id and set the label’s for, or (2) use aria-labelledby to reference the label element, or (3) use aria-label if there’s no visible label.

Copilot · 2026-02-10T05:25:14Z

+          <div class="select-option disabled" data-value="apple" disabled>Apple</div>
+          <div class="select-option" data-value="banana">Banana</div>
+          <div class="select-option disabled" data-value="blueberry" disabled>Blueberry</div>


The disabled attribute is invalid on <div> elements, so assistive tech won’t reliably recognize these options as disabled. Use aria-disabled=\"true\" (and keep the .disabled class / pointer-events: none styling), and ensure the JS prevents selection of aria-disabled options if click events can still reach them in other implementations.

Suggested change

<div class="select-option disabled" data-value="apple" disabled>Apple</div>

<div class="select-option" data-value="banana">Banana</div>

<div class="select-option disabled" data-value="blueberry" disabled>Blueberry</div>

<div class="select-option disabled" data-value="apple" aria-disabled="true">Apple</div>

<div class="select-option" data-value="banana">Banana</div>

<div class="select-option disabled" data-value="blueberry" aria-disabled="true">Blueberry</div>

Copilot · 2026-02-10T05:25:14Z

+.select-ghost:focus {
+  background-color: #ffffff;
+  border-color: #2563eb;
+}
+
+.dark .select-ghost:focus {


.select-ghost appears to be a container element (likely a <div>), so :focus will never match during keyboard focus (focus is on the button). Move these focus styles to the actual focus target (e.g., .select-ghost .select-trigger:focus) or use :focus-within on the container.

Suggested change

.select-ghost:focus {

background-color: #ffffff;

border-color: #2563eb;

}

.dark .select-ghost:focus {

.select-ghost:focus-within {

background-color: #ffffff;

border-color: #2563eb;

}

.dark .select-ghost:focus-within {

Copilot · 2026-02-10T05:25:15Z

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



The docs code fences are labeled tsx but the content is HTML/CSS/JS. Consider switching the fence languages to html, css, and js for accurate syntax highlighting and to avoid confusing readers.

Copilot · 2026-02-10T05:25:15Z

+      const trigger = select.querySelector('.select-trigger');
+      const dropdown = select.querySelector('.select-dropdown');


The embedded JS example doesn’t match apps/docs/public/assets/ta-preview/select/select.js: the real file has dropdown and value commented out. Update the MDX snippet (or the JS file) so the docs reflect the actual implementation.

Copilot · 2026-02-10T05:25:16Z

+      options.forEach(option => {
+        option.addEventListener('click', function (e) {
+          e.stopPropagation();
+          const value = this.dataset.value;


The embedded JS example doesn’t match apps/docs/public/assets/ta-preview/select/select.js: the real file has dropdown and value commented out. Update the MDX snippet (or the JS file) so the docs reflect the actual implementation.

Copilot · 2026-02-10T05:25:16Z

+    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);


This console.log will produce noise for anyone viewing the preview in devtools. Consider removing it or gating 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.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-10T05:25:16Z

+      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);


This console.log will produce noise for anyone viewing the preview in devtools. Consider removing it or gating it behind a debug flag.

Suggested change

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

FidDeveloper added 7 commits January 26, 2026 09:54

feature: add TA callout component styles and example HTML

48764c2

Remove a category to make shorter.

d8c99cc

Remove header and call-title css

4df9145

refactor: remove unnecessary thing from callout elements

9da7d54

feature: add TA select component with styles and functionality

fdc8d2c

feature: add background styles for documentation layout

ac7718c

feature: implement preview ta-select component

e67fd84

FidDeveloper requested a review from Copilot February 10, 2026 05:23

Copilot AI reviewed Feb 10, 2026

View reviewed changes

FidDeveloper marked this pull request as ready for review February 10, 2026 07:18

	<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">

		const trigger = select.querySelector('.select-trigger');
		const dropdown = select.querySelector('.select-dropdown');

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!

changeset-bot Bot commented Feb 10, 2026

⚠️ No Changeset found

Uh oh!

vercel Bot commented Feb 10, 2026

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