-
Notifications
You must be signed in to change notification settings - Fork 27
SSD-806: ta-input #349
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
4fn4n
wants to merge
5
commits into
main
Choose a base branch
from
feature/SSD-806-ta-input
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
SSD-806: ta-input #349
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
6 changes: 6 additions & 0 deletions
6
apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| title: Dialog | ||
| description: Terokai alat ujian kebolehcapaian bersepadu dalam persekitaran pembangunan kami yang membantu mengenal pasti dan menyelesaikan isu kebolehcapaian semasa pembangunan. Alat-alat ini berfungsi bersama untuk memastikan komponen kami memenuhi piawaian WCAG dan memberikan pengalaman yang lebih baik untuk semua pengguna. | ||
| --- | ||
|
|
||
| ## Kerja Dalam Proses |
382 changes: 380 additions & 2 deletions
382
apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,384 @@ | ||
| --- | ||
| title: Input | ||
| 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. | ||
| description: MYDS-compliant input component for seamless transition starting point from HTML/CSS to React | ||
| --- | ||
| import { | ||
| PreviewButton, | ||
| Button, | ||
| ButtonIcon, | ||
| ButtonCounter, | ||
| Link, | ||
| } from "@/components/myds"; | ||
| import { Tab, Tabs } from "fumadocs-ui/components/tabs"; | ||
| import IframeThemePreview from "@/components/iframe-theme-preview"; | ||
|
|
||
| ## Work In Progress | ||
| <Tabs items={["Preview","Code","ResetCSS","InputCSS","InputDarkCSS"]} defaultValue="Preview"> | ||
| <Tab value="Preview"> | ||
| <IframeThemePreview | ||
| src="/assets/ta-preview/input/ta-input-preview.html" | ||
| /> | ||
| </Tab> | ||
| <Tab value="Code"> | ||
| ```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> | ||
| ``` | ||
| </Tab> | ||
| <Tab value="ResetCSS"> | ||
| ```css | ||
| /* CSS BASE RESET ------------------------------------------------------------------------------------ */ | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Remove default body margin */ | ||
| body { | ||
| margin: 0; | ||
| font-family: system-ui, sans-serif; | ||
| line-height: 1.5; | ||
| -webkit-font-smoothing: antialiased; | ||
| background-color: #fff; | ||
| color: #000; | ||
| } | ||
|
|
||
| /* Reset headings */ | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| font-size: inherit; | ||
| font-weight: inherit; | ||
| } | ||
|
|
||
| /* Remove list styles */ | ||
| ul, | ||
| ol { | ||
| list-style: none; | ||
| } | ||
|
|
||
| /* Remove default anchor styles */ | ||
| a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| /* Normalize images and media */ | ||
| img, | ||
| picture, | ||
| video, | ||
| canvas, | ||
| svg { | ||
| display: block; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| /* Form elements reset */ | ||
| button, | ||
| input, | ||
| select, | ||
| textarea { | ||
| font: inherit; | ||
| color: inherit; | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| outline: none; | ||
| appearance: none; | ||
| } | ||
|
|
||
| /* Reset button styles completely */ | ||
| button { | ||
| background-color: transparent; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* Ensure buttons and inputs are usable */ | ||
| button:disabled, | ||
| input:disabled { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| /* Table reset */ | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
|
|
||
| /* Remove focus outlines unless using keyboard */ | ||
| :focus:not(:focus-visible) { | ||
| outline: none; | ||
| } | ||
| ``` | ||
| </Tab> | ||
| <Tab value="InputCSS"> | ||
| ```css | ||
| /* Layout */ | ||
| .myds-page-center { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| padding: 2rem; | ||
| } | ||
|
|
||
| .myds-input-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | ||
| gap: 2rem; | ||
| width: 100%; | ||
| max-width: 900px; | ||
| } | ||
|
|
||
| .myds-input-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .myds-input-label { | ||
| font-size: 0.875rem; | ||
| font-weight: 500; | ||
| color: #3f3f46; | ||
| } | ||
|
|
||
| /* Base Input Styles */ | ||
| .myds-input { | ||
| width: 100%; | ||
| padding: 0.625rem 0.875rem; | ||
| font-size: 0.875rem; | ||
| line-height: 1.25rem; | ||
| color: #3f3f46; | ||
| background-color: #ffffff; | ||
| border: 1px solid #e4e4e7; | ||
| border-radius: 0.375rem; | ||
| transition: all 0.15s ease; | ||
| outline: none; | ||
| } | ||
|
|
||
| .myds-input::placeholder { | ||
| color: #a1a1aa; | ||
| } | ||
|
|
||
| /* Hover State */ | ||
| .myds-input:hover:not(:disabled):not(.myds-input-error) { | ||
| border-color: #d4d4d8; | ||
| } | ||
|
|
||
| .myds-input-hover { | ||
| border-color: #d4d4d8; | ||
| } | ||
|
|
||
| /* Focus State */ | ||
| .myds-input:focus:not(:disabled):not(.myds-input-error) { | ||
| border-color: #2563eb; | ||
| box-shadow: 0 0 0 3px rgba(150, 183, 255, 0.4); | ||
| } | ||
|
|
||
| .myds-input-focused { | ||
| border-color: #2563eb; | ||
| box-shadow: 0 0 0 3px rgba(150, 183, 255, 0.4); | ||
| } | ||
|
|
||
| /* Disabled State */ | ||
| .myds-input:disabled { | ||
| background-color: #fafafa; | ||
| border-color: #f4f4f5; | ||
| color: #a1a1aa; | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| /* Error State */ | ||
| .myds-input-error { | ||
| border-color: #dc2626; | ||
| color: #dc2626; | ||
| } | ||
|
|
||
| .myds-input-error:hover { | ||
| border-color: #b91c1c; | ||
| } | ||
|
|
||
| .myds-input-error:focus { | ||
| border-color: #dc2626; | ||
| box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); | ||
| } | ||
|
|
||
| /* For porting into documentation */ | ||
| html, | ||
| body { | ||
| height: 100%; | ||
| background-color: white; | ||
| } | ||
|
|
||
| .dark body { | ||
| height: 100%; | ||
| background-color: #161619; | ||
| } | ||
| ``` | ||
| </Tab> | ||
| <Tab value="InputDarkCSS"> | ||
| ```css | ||
| /* Dark mode support */ | ||
|
|
||
| .dark .myds-input-label { | ||
| color: #d4d4d8; | ||
| } | ||
|
|
||
| /* Base Input Dark Mode */ | ||
| .dark .myds-input { | ||
| background-color: #18181b; | ||
| border-color: #3f3f46; | ||
| color: #d4d4d8; | ||
| } | ||
|
|
||
| .dark .myds-input::placeholder { | ||
| color: #71717a; | ||
| } | ||
|
|
||
| /* Hover State Dark Mode */ | ||
| .dark .myds-input:hover:not(:disabled):not(.myds-input-error) { | ||
| border-color: #52525b; | ||
| } | ||
|
|
||
| .dark .myds-input-hover { | ||
| border-color: #52525b; | ||
| } | ||
|
|
||
| /* Focus State Dark Mode */ | ||
| .dark .myds-input:focus:not(:disabled):not(.myds-input-error) { | ||
| border-color: #6394ff; | ||
| box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4); | ||
| } | ||
|
|
||
| .dark .myds-input-focused { | ||
| border-color: #6394ff; | ||
| box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4); | ||
| } | ||
|
|
||
| /* Disabled State Dark Mode */ | ||
| .dark .myds-input:disabled { | ||
| background-color: #27272a; | ||
| border-color: #27272a; | ||
| color: #52525b; | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| /* Error State Dark Mode */ | ||
| .dark .myds-input-error { | ||
| border-color: #dc2626; | ||
| color: #fca5a5; | ||
| } | ||
|
|
||
| .dark .myds-input-error:hover { | ||
| border-color: #b91c1c; | ||
| } | ||
|
|
||
| .dark .myds-input-error:focus { | ||
| border-color: #dc2626; | ||
| box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3); | ||
| } | ||
| ``` | ||
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## 1. Overview | ||
|
|
||
| The Input component provides a consistent, accessible text input field that follows MYDS design guidelines. It includes multiple states for different user interactions and feedback scenarios. | ||
|
|
||
| ## 2. Features | ||
|
|
||
| - **Multiple States**: Default, hover, focus, disabled, and error states | ||
| - **Accessibility**: Proper labels and ARIA attributes | ||
| - **Dark Mode**: Full dark mode support | ||
| - **Responsive**: Adapts to different screen sizes | ||
| - **Customizable**: Easy to style and extend | ||
|
|
||
| ## 3. Usage | ||
|
|
||
| ### Basic Input | ||
|
|
||
| ```html | ||
| <div class="myds-input-wrapper"> | ||
| <label class="myds-input-label">Label</label> | ||
| <input type="text" class="myds-input" placeholder="Enter text..." /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Input with Error | ||
|
|
||
| ```html | ||
| <div class="myds-input-wrapper"> | ||
| <label class="myds-input-label">Email</label> | ||
| <input type="email" class="myds-input myds-input-error" placeholder="Enter email..." value="invalid" /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Disabled Input | ||
|
|
||
| ```html | ||
| <div class="myds-input-wrapper"> | ||
| <label class="myds-input-label">Disabled</label> | ||
| <input type="text" class="myds-input" placeholder="Cannot edit..." disabled /> | ||
| </div> | ||
| ``` | ||
|
|
||
| ## 4. Class Reference | ||
|
|
||
| | Class | Description | | ||
| |-------|-------------| | ||
| | `.myds-input` | Base input styling | | ||
| | `.myds-input-wrapper` | Container for label and input | | ||
| | `.myds-input-label` | Label styling | | ||
| | `.myds-input-hover` | Hover state (for demos) | | ||
| | `.myds-input-focused` | Focus state (for demos) | | ||
| | `.myds-input-error` | Error state styling | | ||
|
|
||
| ## 5. Accessibility | ||
|
|
||
| - Always pair inputs with labels using the `myds-input-label` class | ||
| - Use appropriate `type` attributes (text, email, password, etc.) | ||
| - Include placeholder text for additional context | ||
| - Error states should be accompanied by error messages | ||
| - Disabled inputs are not focusable or interactive | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The "Code" tab in both
ta-input.mdxandta-input.ms.mdxshows HTML that is completely different from the actual preview rendered inta-input-preview.html. The preview uses a container-based approach withmyds-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
InputCSStab documents.myds-page-center(not the.page-centerclass used in the actual preview), uses hardcoded hex values instead of CSS variables, and showsmax-width: 900pxinstead of1200pxused in the actual CSS. Users copying the code from the "Code" tab will not reproduce what they see in the live preview.