SSD-806: ta-input by 4fn4n · Pull Request #349 · govtechmy/myds

4fn4n · 2026-03-02T04:13:45Z

Summarise the feature

Issue ticket # SSD-806

Description: Add ta-input to myds design

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

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-03-02T04:13:48Z

⚠️ No Changeset found

Latest commit: 2eae8c9

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-03-02T04:13:50Z

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

Project	Deployment	Actions	Updated (UTC)
myds	Ready	Preview, Comment	Mar 2, 2026 4:13am
myds-storybook	Ready	Preview, Comment	Mar 2, 2026 4:13am

Copilot

Pull request overview

This PR adds a "Transitional Assistance" input component (ta-input) to the MYDS design documentation. It provides HTML/CSS-based input styling to help developers transition from plain HTML/CSS to the React MYDS design system.

Changes:

Adds an iframe-based preview HTML file (ta-input-preview.html) demonstrating the input component with size variants, icon slots, and addon (prepend/append) patterns.
Adds input.css and input-dark.css with CSS variable-driven theming for light and dark modes, covering the container-based input structure.
Adds both English (ta-input.mdx) and Malay (ta-input.ms.mdx) documentation pages, replacing a "Work In Progress" placeholder, plus a new Malay stub for ta-dialog.ms.mdx.

Reviewed changes

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

Show a summary per file

File	Description
`ta-input-preview.html`	Live iframe preview demonstrating input variants (sizes, icons, addons, states)
`input.css`	Light mode CSS with CSS variables and component classes for the input system
`input-dark.css`	Dark mode CSS variable overrides and dark-specific style rules
`ta-input.mdx`	English documentation page with tabs for preview, code sample, and CSS snippets
`ta-input.ms.mdx`	Malay documentation page equivalent
`ta-dialog.ms.mdx`	New Malay stub for the dialog component (placeholder content)

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

Copilot · 2026-03-02T04:17:46Z

+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import IframeThemePreview from "@/components/iframe-theme-preview";
+
+<Tabs items={["Pratonton","Kod","ResetCSS","InputCss","InputDarkCSS"]} defaultValue="Pratonton">


In ta-input.ms.mdx, the Tabs items list defines the tab label as "InputCss" but the corresponding <Tab> component uses value="InputCSS" (note the capitalization difference). In fumadocs-ui, the Tab value prop must match the string in the items array. This mismatch means the InputCSS tab will not render correctly (it will be missing or broken) for the Malay version.

Suggested change

<Tabs items={["Pratonton","Kod","ResetCSS","InputCss","InputDarkCSS"]} defaultValue="Pratonton">

<Tabs items={["Pratonton","Kod","ResetCSS","InputCSS","InputDarkCSS"]} defaultValue="Pratonton">

Copilot · 2026-03-02T04:17:46Z

+  box-sizing: border-box;
+  border-radius: 0.375rem;
+  color: var(--txt-black-700);
+  transition: colors 0.15s ease;


The transition: colors 0.15s ease declaration is invalid CSS. colors is not a valid CSS property name that can be transitioned. This should be transition: color 0.15s ease (singular) or transition: all 0.15s ease. As written, this transition rule has no effect, meaning the color change on the input will not be animated.

Suggested change

transition: colors 0.15s ease;

transition: color 0.15s ease;

Copilot · 2026-03-02T04:17:46Z

+  ```html
+      <div class="myds-input-grid">
+        <!-- Default Input -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Default</label>
+          <input type="text" class="myds-input" placeholder="Enter text..." />
+        </div>
+
+        <!-- Hover Input -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Hover</label>
+          <input type="text" class="myds-input myds-input-hover" placeholder="Enter text..." />
+        </div>
+
+        <!-- Focused Input -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Focused</label>
+          <input type="text" class="myds-input myds-input-focused" placeholder="Enter text..." />
+        </div>
+
+        <!-- Disabled Input -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Disabled</label>
+          <input type="text" class="myds-input" placeholder="Enter text..." disabled />
+        </div>
+
+        <!-- Error Input -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Error</label>
+          <input type="text" class="myds-input myds-input-error" placeholder="Enter text..." value="Invalid input" />
+        </div>
+
+        <!-- With Value Input -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">With Value</label>
+          <input type="text" class="myds-input" placeholder="Enter text..." value="Sample text" />
+        </div>
+      </div>
+      ```


The "Code" tab in both ta-input.mdx and ta-input.ms.mdx shows HTML that is completely different from the actual preview rendered in ta-input-preview.html. The preview uses a container-based approach with myds-input-container, size variants (myds-input-sm, myds-input-md, myds-input-lg), icon slots, and addon (prepend/append) patterns. The Code tab, however, shows a simpler flat input structure with different states (myds-input-hover, myds-input-error, myds-input-focused) applied directly to the input element, with no wrapper container.

Additionally, the CSS shown in the InputCSS tab documents .myds-page-center (not the .page-center class used in the actual preview), uses hardcoded hex values instead of CSS variables, and shows max-width: 900px instead of 1200px used in the actual CSS. Users copying the code from the "Code" tab will not reproduce what they see in the live preview.

Copilot · 2026-03-02T04:17:47Z

+  ```html
+      <div class="myds-input-grid">
+        <!-- Input Lalai -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Lalai</label>
+          <input type="text" class="myds-input" placeholder="Masukkan teks..." />
+        </div>
+
+        <!-- Input Hover -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Hover</label>
+          <input type="text" class="myds-input myds-input-hover" placeholder="Masukkan teks..." />
+        </div>
+
+        <!-- Input Fokus -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Fokus</label>
+          <input type="text" class="myds-input myds-input-focused" placeholder="Masukkan teks..." />
+        </div>
+
+        <!-- Input Dilumpuhkan -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Dilumpuhkan</label>
+          <input type="text" class="myds-input" placeholder="Masukkan teks..." disabled />
+        </div>
+
+        <!-- Input Ralat -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Ralat</label>
+          <input type="text" class="myds-input myds-input-error" placeholder="Masukkan teks..." value="Input tidak sah" />
+        </div>
+
+        <!-- Input Dengan Nilai -->
+        <div class="myds-input-wrapper">
+          <label class="myds-input-label">Dengan Nilai</label>
+          <input type="text" class="myds-input" placeholder="Masukkan teks..." value="Teks sampel" />
+        </div>
+      </div>
+      ```


Same as ta-input.mdx: the "Kod" (Code) tab shows HTML that does not match the actual live preview in ta-input-preview.html. The preview uses the container-based approach with myds-input-container and size/icon/addon classes, while the Kod tab shows a flat input structure with different state classes. The InputCSS tab also documents different CSS (no container, different class names, hardcoded colors instead of CSS variables).

Copilot · 2026-03-02T04:17:47Z

+                <path d="M13.3333 8C13.3333 8 11.3333 12 8 12C4.66667 12 2.66667 8 2.66667 8C2.66667 8 4.66667 4 8 4C11.3333 4 13.3333 8 13.3333 8Z" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+            </div>
+            <input type="password" class="myds-input myds-input-sm myds-input-with-both-icon" placeholder="Password..." value="password123" />


The hardcoded value="password123" in the "With Both Icons" demo input is a plain text password exposed in a publicly served HTML file. While this is only a preview/documentation file, using an obviously named password like password123 in a design system demo could promote poor security practices. Consider using a less suggestive placeholder value such as "••••••••" or "mypassword" to avoid inadvertently normalizing common weak passwords in documentation examples.

4fn4n added 5 commits February 26, 2026 14:49

add ta input branch

004ef1c

fix error

1d1fad3

update ta-input

698bb03

update ta-input

a53a9cd

update docs

2eae8c9

4fn4n requested review from Copilot and harrisazmi March 2, 2026 04:13

4fn4n self-assigned this Mar 2, 2026

Copilot started reviewing on behalf of 4fn4n March 2, 2026 04:14 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSD-806: ta-input#349

SSD-806: ta-input#349
4fn4n wants to merge 5 commits into
mainfrom
feature/SSD-806-ta-input

4fn4n commented Mar 2, 2026

Uh oh!

changeset-bot Bot commented Mar 2, 2026

Uh oh!

vercel Bot commented Mar 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<Tabs items={["Pratonton","Kod","ResetCSS","InputCss","InputDarkCSS"]} defaultValue="Pratonton">
	<Tabs items={["Pratonton","Kod","ResetCSS","InputCSS","InputDarkCSS"]} defaultValue="Pratonton">

Conversation

4fn4n commented Mar 2, 2026

Summarise the feature

Type of change

Checklist

Uh oh!

changeset-bot Bot commented Mar 2, 2026

⚠️ No Changeset found

Uh oh!

vercel Bot commented Mar 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants