From 004ef1caf3be3609494cc9fa594e28ea35039bde Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Thu, 26 Feb 2026 14:49:53 +0800 Subject: [PATCH 1/5] add ta input branch --- .../assets/ta-preview/input/input-dark.css | 138 +++++++++++++ .../public/assets/ta-preview/input/input.css | 188 ++++++++++++++++++ .../ta-preview/input/ta-input-preview.html | 42 ++++ 3 files changed, 368 insertions(+) create mode 100644 apps/docs/public/assets/ta-preview/input/input-dark.css create mode 100644 apps/docs/public/assets/ta-preview/input/input.css create mode 100644 apps/docs/public/assets/ta-preview/input/ta-input-preview.html diff --git a/apps/docs/public/assets/ta-preview/input/input-dark.css b/apps/docs/public/assets/ta-preview/input/input-dark.css new file mode 100644 index 00000000..77f48de0 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/input/input-dark.css @@ -0,0 +1,138 @@ +/* dark mode support */ + +.dark .button-myds-primary:disabled { + background-color: #172554; + cursor: not-allowed; + border-color: transparent; + color: #ffffff66; + } + + /* Secondary Button */ + .dark .button-myds-secondary { + background-color: #18181b; + color: #d4d4d8; + border-color: #3f3f46; + } + + .dark .button-myds-secondary:hover { + background-color: #27272a; + } + + .dark .button-myds-secondary:disabled { + background-color: #27272a66; + cursor: not-allowed; + border-color: transparent; + color: #a1a1aa66; + } + + /* Secondary Color Button */ + .dark .button-myds-secondary-color { + background-color: #18181b; + color: #6394ff; + border-color: #1e40af; + } + + .dark .button-myds-secondary-color:hover { + background-color: #172554; + } + + .dark .button-myds-secondary-color:disabled { + background-color: #27272a66; + cursor: not-allowed; + border-color: transparent; + color: #6394ff66; + } + + /* Tertiary Button */ + .dark .button-myds-tertiary { + background-color: transparent; + border-color: transparent; + color: #d4d4d8; + } + + .dark .button-myds-tertiary:hover { + background-color: #27272a; + } + + .dark .button-myds-tertiary:disabled { + background-color: #27272a66; + cursor: not-allowed; + border-color: transparent; + color: #a1a1aa66; + } + + /* Tertiary Color Button */ + .dark .button-myds-tertiary-color { + background-color: transparent; + border-color: transparent; + color: #6394ff; + } + + .dark .button-myds-tertiary-color:hover { + background-color: #172554; + } + + .dark .button-myds-tertiary-color:disabled { + background-color: #27272a66; + cursor: not-allowed; + border-color: transparent; + color: #6394ff66; + } + + /* Danger Primary Button */ + .dark .button-myds-danger-primary { + background-color: #dc2626; + border-color: #dc2626; + color: #ffffff; + } + + .dark .button-myds-danger-primary:hover { + background-color: #b91c1c; + border-color: #b91c1c; + } + + .dark .button-myds-danger-primary:disabled { + background-color: #450a0a; + cursor: not-allowed; + border-color: transparent; + color: #ffffff66; + } + + /* Danger Secondary Button */ + .dark .button-myds-danger-secondary { + background-color: #18181b; + border-color: #991b1b; + color: #f87171; + } + + .dark .button-myds-danger-secondary:hover { + background-color: #450a0a; + border-color: #fca5a5; + } + + .dark .button-myds-danger-secondary:disabled { + background-color: #27272a66; + cursor: not-allowed; + border-color: transparent; + color: #f8717166; + } + + /* Danger Tertiary Button */ + .dark .button-myds-danger-tertiary { + background-color: transparent; + border-color: transparent; + color: #f87171; + } + + .dark .button-myds-danger-tertiary:hover { + background-color: #450a0a; + border-color: transparent; + } + + .dark .button-myds-danger-tertiary:disabled { + background-color: #27272a66; + cursor: not-allowed; + border-color: transparent; + color: #f8717166; + } + \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/input/input.css b/apps/docs/public/assets/ta-preview/input/input.css new file mode 100644 index 00000000..d1c9861d --- /dev/null +++ b/apps/docs/public/assets/ta-preview/input/input.css @@ -0,0 +1,188 @@ +.button-myds:focus { + outline: 3px solid #96b7ff66; +} + +.dark .button-myds:focus { + outline: 3px solid #1d4ed866; +} + +/* Primary Button */ +.button-myds-primary { + background-color: #2563eb; + color: #ffffff; + border-color: #2563eb; +} + +.button-myds-primary:hover { + background-color: #1d4ed8; +} + +.button-myds-primary:disabled { + background-color: #c2d5ff; + cursor: not-allowed; + border: none; + color: #ffffff66; +} + +/* Secondary Button */ +.button-myds-secondary { + background-color: #ffffff; + color: #3f3f46; + border-color: #e4e4e7; +} + +.button-myds-secondary:hover { + background-color: #fafafa; +} + +.button-myds-secondary:disabled { + background-color: #f4f4f566; + cursor: not-allowed; + border: none; + color: #52525b66; +} + +/* Secondary Color Button */ +.button-myds-secondary-color { + background-color: #ffffff; + color: #2563eb; + border-color: #c2d5ff; +} + +.button-myds-secondary-color:hover { + background-color: #eff6ff; +} + +.button-myds-secondary-color:disabled { + background-color: #f4f4f566; + cursor: not-allowed; + border: none; + color: #2563eb66; +} + +/* Tertiary Button */ + +.button-myds-tertiary { + background-color: transparent; + border-color: transparent; + color: #3f3f46; +} + +.button-myds-tertiary:hover { + background-color: #fafafa; +} + +.button-myds-tertiary:disabled { + background-color: #f4f4f566; + cursor: not-allowed; + border: none; + color: #52525b66; +} + +/* Tertiary Color Button */ + +.button-myds-tertiary-color { + background-color: transparent; + border-color: transparent; + color: #2563eb; +} + +.button-myds-tertiary-color:hover { + background-color: #eff6ff; +} + +.button-myds-tertiary-color:disabled { + background-color: #f4f4f566; + cursor: not-allowed; + border: none; + color: #2563eb66; +} + +/* Danger Primary Button */ + +.button-myds-danger-primary { + background-color: #dc2626; + border-color: #dc2626; + color: #ffffff; +} + +.button-myds-danger-primary:hover { + background-color: #b91c1c; + border-color: #b91c1c; +} + +.button-myds-danger-primary:disabled { + background-color: #fecaca; + cursor: not-allowed; + border: none; + color: #ffffff66; +} + +/* Danger Secondary Button */ + +.button-myds-danger-secondary { + background-color: #ffffff; + border-color: #fecaca; + color: #b91c1c; +} + +.button-myds-danger-secondary:hover { + background-color: #fef2f2; + border-color: #fca5a5; +} + +.button-myds-danger-secondary:disabled { + background-color: #f4f4f566; + cursor: not-allowed; + border: none; + color: #b91c1c66; +} + +/* Danger Tertiary Button */ + +.button-myds-danger-tertiary { + background-color: #ffffff; + border-color: transparent; + color: #b91c1c; +} + +.button-myds-danger-tertiary:hover { + background-color: #fef2f2; + border-color: transparent; +} + +.button-myds-danger-tertiary:disabled { + background-color: #f4f4f566; + cursor: not-allowed; + border: none; + color: #b91c1c66; +} + +/* for porting into documentation */ + +html, +body { + height: 100%; + background-color: white; +} +.dark body { + height: 100%; + background-color: #161619; +} + +.page-center { + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + min-height: 100%; +} + +.button-grid { + display: grid; + grid-template-columns: repeat(4, auto); + gap: 10px; + align-items: center; + justify-items: center; + justify-content: center; +} diff --git a/apps/docs/public/assets/ta-preview/input/ta-input-preview.html b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html new file mode 100644 index 00000000..7ffd7624 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + +
+
+ + + + + +
+
+ + From 1d1fad388de1a81e7ae5ca6478507600f051869d Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Fri, 27 Feb 2026 15:58:53 +0800 Subject: [PATCH 2/5] fix error --- .../docs/develop/(transistory-assistance)/ta-dialog.ms.mdx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx new file mode 100644 index 00000000..98ae4daf --- /dev/null +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx @@ -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 From 698bb037c91bd97257c1ecc7086c3117f9ae5f97 Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Mon, 2 Mar 2026 10:17:45 +0800 Subject: [PATCH 3/5] update ta-input --- .../(transistory-assistance)/ta-input.mdx | 390 ++++++++++++++++- .../(transistory-assistance)/ta-input.ms.mdx | 392 ++++++++++++++++++ .../assets/ta-preview/input/input-dark.css | 204 +++------ .../public/assets/ta-preview/input/input.css | 277 +++++++------ .../ta-preview/input/ta-input-preview.html | 118 +++++- 5 files changed, 1104 insertions(+), 277 deletions(-) create mode 100644 apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx index a1db7bb1..01579758 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx @@ -1,6 +1,392 @@ --- 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 \ No newline at end of file + + + + + + ```html +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ ``` + + + ```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; +} + ``` + + + ```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; +} + ``` + + + ```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); +} + ``` + + + +## 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. + +## 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 + +## Usage + +### Basic Input + +```html +
+ + +
+``` + +### Input with Error + +```html +
+ + +
+``` + +### Disabled Input + +```html +
+ + +
+``` + +## 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 | + +## 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 + +## Best Practices + +1. **Always use labels**: Every input should have a corresponding label +2. **Meaningful placeholders**: Use placeholders as examples, not as labels +3. **Error feedback**: Combine `.myds-input-error` with clear error messages +4. **Appropriate types**: Use the correct input type for the data being collected +5. **Validation**: Provide immediate feedback for validation errors \ No newline at end of file diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx new file mode 100644 index 00000000..d6bb55a2 --- /dev/null +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx @@ -0,0 +1,392 @@ +--- +title: Input +description: Komponen input yang mematuhi MYDS untuk titik permulaan peralihan lancar dari HTML/CSS ke 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"; + + + + + + + ```html +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ ``` + + + ```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; +} + ``` + + + ```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; +} + ``` + + + ```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); +} + ``` + + + +## Gambaran Keseluruhan + +Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yang mengikuti garis panduan reka bentuk MYDS. Ia termasuk pelbagai keadaan untuk interaksi pengguna dan senario maklum balas yang berbeza. + +## Ciri-ciri + +- **Pelbagai Keadaan**: Keadaan lalai, hover, fokus, dilumpuhkan, dan ralat +- **Kebolehcapaian**: Label dan atribut ARIA yang sesuai +- **Mod Gelap**: Sokongan penuh mod gelap +- **Responsif**: Menyesuaikan diri dengan saiz skrin yang berbeza +- **Boleh Disesuaikan**: Mudah untuk digayakan dan diperluaskan + +## Penggunaan + +### Input Asas + +```html +
+ + +
+``` + +### Input dengan Ralat + +```html +
+ + +
+``` + +### Input Dilumpuhkan + +```html +
+ + +
+``` + +## Rujukan Kelas + +| Kelas | Penerangan | +|-------|-------------| +| `.myds-input` | Gaya input asas | +| `.myds-input-wrapper` | Bekas untuk label dan input | +| `.myds-input-label` | Gaya label | +| `.myds-input-hover` | Keadaan hover (untuk demo) | +| `.myds-input-focused` | Keadaan fokus (untuk demo) | +| `.myds-input-error` | Gaya keadaan ralat | + +## Kebolehcapaian + +- Sentiasa pasangkan input dengan label menggunakan kelas `myds-input-label` +- Gunakan atribut `type` yang sesuai (text, email, password, dll.) +- Sertakan teks placeholder untuk konteks tambahan +- Keadaan ralat perlu disertakan dengan mesej ralat +- Input yang dilumpuhkan tidak boleh difokus atau interaktif + +## Amalan Terbaik + +1. **Sentiasa gunakan label**: Setiap input harus mempunyai label yang berkaitan +2. **Placeholder bermakna**: Gunakan placeholder sebagai contoh, bukan sebagai label +3. **Maklum balas ralat**: Gabungkan `.myds-input-error` dengan mesej ralat yang jelas +4. **Jenis yang sesuai**: Gunakan jenis input yang betul untuk data yang dikumpul +5. **Pengesahan**: Berikan maklum balas segera untuk ralat pengesahan \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/input/input-dark.css b/apps/docs/public/assets/ta-preview/input/input-dark.css index 77f48de0..6096bccb 100644 --- a/apps/docs/public/assets/ta-preview/input/input-dark.css +++ b/apps/docs/public/assets/ta-preview/input/input-dark.css @@ -1,138 +1,68 @@ -/* dark mode support */ +/* Dark mode support - MYDS Color Tokens */ +.dark { + --bg-white: rgb(24 24 27); + --bg-washed: rgb(29 29 33); + --txt-black-700: rgb(212 212 216); + --txt-black-500: rgb(161 161 170); + --txt-black-disabled: rgba(161 161 170 / 0.4); + --otl-gray-200: rgb(39 39 42); + --otl-primary-300: rgb(29 78 216); + --fr-primary: rgba(29 78 216 / 0.4); +} -.dark .button-myds-primary:disabled { - background-color: #172554; - cursor: not-allowed; - border-color: transparent; - color: #ffffff66; - } - - /* Secondary Button */ - .dark .button-myds-secondary { - background-color: #18181b; - color: #d4d4d8; - border-color: #3f3f46; - } - - .dark .button-myds-secondary:hover { - background-color: #27272a; - } - - .dark .button-myds-secondary:disabled { - background-color: #27272a66; - cursor: not-allowed; - border-color: transparent; - color: #a1a1aa66; - } - - /* Secondary Color Button */ - .dark .button-myds-secondary-color { - background-color: #18181b; - color: #6394ff; - border-color: #1e40af; - } - - .dark .button-myds-secondary-color:hover { - background-color: #172554; - } - - .dark .button-myds-secondary-color:disabled { - background-color: #27272a66; - cursor: not-allowed; - border-color: transparent; - color: #6394ff66; - } - - /* Tertiary Button */ - .dark .button-myds-tertiary { - background-color: transparent; - border-color: transparent; - color: #d4d4d8; - } - - .dark .button-myds-tertiary:hover { - background-color: #27272a; - } - - .dark .button-myds-tertiary:disabled { - background-color: #27272a66; - cursor: not-allowed; - border-color: transparent; - color: #a1a1aa66; - } - - /* Tertiary Color Button */ - .dark .button-myds-tertiary-color { - background-color: transparent; - border-color: transparent; - color: #6394ff; - } - - .dark .button-myds-tertiary-color:hover { - background-color: #172554; - } - - .dark .button-myds-tertiary-color:disabled { - background-color: #27272a66; - cursor: not-allowed; - border-color: transparent; - color: #6394ff66; - } - - /* Danger Primary Button */ - .dark .button-myds-danger-primary { - background-color: #dc2626; - border-color: #dc2626; - color: #ffffff; - } - - .dark .button-myds-danger-primary:hover { - background-color: #b91c1c; - border-color: #b91c1c; - } - - .dark .button-myds-danger-primary:disabled { - background-color: #450a0a; - cursor: not-allowed; - border-color: transparent; - color: #ffffff66; - } - - /* Danger Secondary Button */ - .dark .button-myds-danger-secondary { - background-color: #18181b; - border-color: #991b1b; - color: #f87171; - } - - .dark .button-myds-danger-secondary:hover { - background-color: #450a0a; - border-color: #fca5a5; - } - - .dark .button-myds-danger-secondary:disabled { - background-color: #27272a66; - cursor: not-allowed; - border-color: transparent; - color: #f8717166; - } - - /* Danger Tertiary Button */ - .dark .button-myds-danger-tertiary { - background-color: transparent; - border-color: transparent; - color: #f87171; - } - - .dark .button-myds-danger-tertiary:hover { - background-color: #450a0a; - border-color: transparent; - } - - .dark .button-myds-danger-tertiary:disabled { - background-color: #27272a66; - cursor: not-allowed; - border-color: transparent; - color: #f8717166; - } - \ No newline at end of file +.dark .myds-input-label { + color: var(--txt-black-700); +} + +.dark .myds-input-container { + background-color: var(--bg-white); + border-color: var(--otl-gray-200); +} + +.dark .myds-input-container:focus-within, +.dark .myds-input-container-focused { + border-color: var(--otl-primary-300); + box-shadow: 0 0 0 3px var(--fr-primary); +} + +.dark .myds-input { + background-color: var(--bg-white); + color: var(--txt-black-700); +} + +.dark .myds-input::placeholder { + color: var(--txt-black-500); +} + +.dark .myds-input:disabled { + background-color: var(--bg-washed); + color: var(--txt-black-disabled); +} + +.dark .myds-input-icon { + color: var(--txt-black-500); +} + +.dark .myds-input-addon { + color: var(--txt-black-700); +} + +.dark .myds-input-addon-prepend { + border-right-color: var(--otl-gray-200); +} + +.dark .myds-input-addon-append { + border-left-color: var(--otl-gray-200); +} + +.dark .myds-input-container:has(.myds-input:disabled) { + background-color: var(--bg-washed); +} + +.dark .myds-input-container:has(.myds-input:disabled) .myds-input-icon { + color: var(--txt-black-disabled); +} + +.dark .myds-input-container:has(.myds-input:disabled) .myds-input-addon { + color: var(--txt-black-disabled); +} \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/input/input.css b/apps/docs/public/assets/ta-preview/input/input.css index d1c9861d..284eb44a 100644 --- a/apps/docs/public/assets/ta-preview/input/input.css +++ b/apps/docs/public/assets/ta-preview/input/input.css @@ -1,188 +1,205 @@ -.button-myds:focus { - outline: 3px solid #96b7ff66; -} - -.dark .button-myds:focus { - outline: 3px solid #1d4ed866; -} - -/* Primary Button */ -.button-myds-primary { - background-color: #2563eb; - color: #ffffff; - border-color: #2563eb; +/* MYDS Color Tokens - Light Mode */ +:root { + --bg-white: rgb(255 255 255); + --bg-washed: rgb(244 244 245); + --txt-black-700: rgb(63 63 70); + --txt-black-500: rgb(107 107 116); + --txt-black-disabled: rgba(82 82 91 / 0.4); + --otl-gray-200: rgb(228 228 231); + --otl-primary-300: rgb(150 183 255); + --fr-primary: rgba(150 183 255 / 0.4); +} + +/* Layout */ +.page-center { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 2rem; } -.button-myds-primary:hover { - background-color: #1d4ed8; +.myds-input-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + width: 100%; + max-width: 1200px; } -.button-myds-primary:disabled { - background-color: #c2d5ff; - cursor: not-allowed; - border: none; - color: #ffffff66; +.myds-input-wrapper { + display: flex; + flex-direction: column; + gap: 0.5rem; } -/* Secondary Button */ -.button-myds-secondary { - background-color: #ffffff; - color: #3f3f46; - border-color: #e4e4e7; +.myds-input-label { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.25rem; + color: var(--txt-black-700); } -.button-myds-secondary:hover { - background-color: #fafafa; +/* Input Container (like the wrapper div in React) */ +.myds-input-container { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + border: 1px solid var(--otl-gray-200); + border-radius: 0.375rem; + background-color: var(--bg-white); + outline: none; + box-sizing: border-box; + transition: all 0.15s ease; +} + +.myds-input-container:focus-within, +.myds-input-container-focused { + border-color: var(--otl-primary-300); + box-shadow: 0 0 0 3px var(--fr-primary); +} + +/* Base Input Styles */ +.myds-input { + width: 100%; + background-color: var(--bg-white); + border: 1px solid transparent; + outline: none; + box-sizing: border-box; + border-radius: 0.375rem; + color: var(--txt-black-700); + transition: colors 0.15s ease; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.myds-input::placeholder { + color: var(--txt-black-500); +} + +.myds-input:focus { + outline: none; + border-color: transparent; } -.button-myds-secondary:disabled { - background-color: #f4f4f566; +.myds-input:disabled { + background-color: var(--bg-washed); cursor: not-allowed; - border: none; - color: #52525b66; + color: var(--txt-black-disabled); } -/* Secondary Color Button */ -.button-myds-secondary-color { - background-color: #ffffff; - color: #2563eb; - border-color: #c2d5ff; +/* Size Variants */ +.myds-input-sm { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; } -.button-myds-secondary-color:hover { - background-color: #eff6ff; +.myds-input-md { + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; } -.button-myds-secondary-color:disabled { - background-color: #f4f4f566; - cursor: not-allowed; - border: none; - color: #2563eb66; +.myds-input-lg { + padding: 0.625rem 0.875rem; + font-size: 1rem; + line-height: 1.5rem; } -/* Tertiary Button */ - -.button-myds-tertiary { - background-color: transparent; - border-color: transparent; - color: #3f3f46; +/* Input with Icons */ +.myds-input-icon { + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + color: var(--txt-black-500); } -.button-myds-tertiary:hover { - background-color: #fafafa; +.myds-input-icon svg { + width: 1.125rem; + height: 1.125rem; } -.button-myds-tertiary:disabled { - background-color: #f4f4f566; - cursor: not-allowed; - border: none; - color: #52525b66; +.myds-input-icon-left { + left: 0.75rem; } -/* Tertiary Color Button */ - -.button-myds-tertiary-color { - background-color: transparent; - border-color: transparent; - color: #2563eb; +.myds-input-icon-right { + right: 0.75rem; } -.button-myds-tertiary-color:hover { - background-color: #eff6ff; +.myds-input-with-left-icon { + padding-left: 2.5rem; } -.button-myds-tertiary-color:disabled { - background-color: #f4f4f566; - cursor: not-allowed; - border: none; - color: #2563eb66; +.myds-input-with-right-icon { + padding-right: 2.5rem; } -/* Danger Primary Button */ - -.button-myds-danger-primary { - background-color: #dc2626; - border-color: #dc2626; - color: #ffffff; +.myds-input-with-both-icon { + padding-left: 2.5rem; + padding-right: 2.5rem; } -.button-myds-danger-primary:hover { - background-color: #b91c1c; - border-color: #b91c1c; +/* Input Addons (Prepend/Append) */ +.myds-input-addon { + display: flex; + align-items: center; + border: 1px solid transparent; + outline: none; + box-sizing: border-box; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--txt-black-700); } -.button-myds-danger-primary:disabled { - background-color: #fecaca; - cursor: not-allowed; - border: none; - color: #ffffff66; +.myds-input-addon-prepend { + padding: 0.375rem 0.75rem; + border-right: 1px solid var(--otl-gray-200); } -/* Danger Secondary Button */ - -.button-myds-danger-secondary { - background-color: #ffffff; - border-color: #fecaca; - color: #b91c1c; +.myds-input-addon-append { + padding: 0.375rem 0.75rem; + border-left: 1px solid var(--otl-gray-200); } -.button-myds-danger-secondary:hover { - background-color: #fef2f2; - border-color: #fca5a5; +.myds-input-with-prepend { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.button-myds-danger-secondary:disabled { - background-color: #f4f4f566; - cursor: not-allowed; - border: none; - color: #b91c1c66; +.myds-input-with-append { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -/* Danger Tertiary Button */ - -.button-myds-danger-tertiary { - background-color: #ffffff; - border-color: transparent; - color: #b91c1c; +/* Disabled State for Container with addons/icons */ +.myds-input-container:has(.myds-input:disabled) { + background-color: var(--bg-washed); } -.button-myds-danger-tertiary:hover { - background-color: #fef2f2; - border-color: transparent; +.myds-input-container:has(.myds-input:disabled) .myds-input-icon { + color: var(--txt-black-disabled); } -.button-myds-danger-tertiary:disabled { - background-color: #f4f4f566; - cursor: not-allowed; - border: none; - color: #b91c1c66; +.myds-input-container:has(.myds-input:disabled) .myds-input-addon { + color: var(--txt-black-disabled); } -/* for porting into documentation */ - +/* For porting into documentation */ html, body { height: 100%; background-color: white; } + .dark body { height: 100%; background-color: #161619; } - -.page-center { - display: flex; - justify-content: center; - align-items: center; - margin: 0 auto; - min-height: 100%; -} - -.button-grid { - display: grid; - grid-template-columns: repeat(4, auto); - gap: 10px; - align-items: center; - justify-items: center; - justify-content: center; -} diff --git a/apps/docs/public/assets/ta-preview/input/ta-input-preview.html b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html index 7ffd7624..ceb0bdc0 100644 --- a/apps/docs/public/assets/ta-preview/input/ta-input-preview.html +++ b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html @@ -28,14 +28,116 @@
-
- - - - - +
+ +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + +
+ +
+
+ + + + +
+ +
+
+ + +
+ +
+ +
+ + + + +
+
+
+ + +
+ +
+
+ + + + +
+ +
+ + + + +
+
+
+ + +
+ +
+
+ RM +
+ +
+
+ + +
+ +
+ +
+ Copy +
+
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
From a53a9cdbc55af42a32d1452504fb032643be6988 Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Mon, 2 Mar 2026 11:03:03 +0800 Subject: [PATCH 4/5] update ta-input --- .../docs/develop/(transistory-assistance)/ta-input.mdx | 10 +--------- .../develop/(transistory-assistance)/ta-input.ms.mdx | 10 +--------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx index 01579758..d5f6ea58 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx @@ -381,12 +381,4 @@ The Input component provides a consistent, accessible text input field that foll - 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 - -## Best Practices - -1. **Always use labels**: Every input should have a corresponding label -2. **Meaningful placeholders**: Use placeholders as examples, not as labels -3. **Error feedback**: Combine `.myds-input-error` with clear error messages -4. **Appropriate types**: Use the correct input type for the data being collected -5. **Validation**: Provide immediate feedback for validation errors \ No newline at end of file +- Disabled inputs are not focusable or interactive \ No newline at end of file diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx index d6bb55a2..d30b9f2e 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx @@ -381,12 +381,4 @@ Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yan - Gunakan atribut `type` yang sesuai (text, email, password, dll.) - Sertakan teks placeholder untuk konteks tambahan - Keadaan ralat perlu disertakan dengan mesej ralat -- Input yang dilumpuhkan tidak boleh difokus atau interaktif - -## Amalan Terbaik - -1. **Sentiasa gunakan label**: Setiap input harus mempunyai label yang berkaitan -2. **Placeholder bermakna**: Gunakan placeholder sebagai contoh, bukan sebagai label -3. **Maklum balas ralat**: Gabungkan `.myds-input-error` dengan mesej ralat yang jelas -4. **Jenis yang sesuai**: Gunakan jenis input yang betul untuk data yang dikumpul -5. **Pengesahan**: Berikan maklum balas segera untuk ralat pengesahan \ No newline at end of file +- Input yang dilumpuhkan tidak boleh difokus atau interaktif \ No newline at end of file From 2eae8c9aaa48c50e9ef6ec9154df616062813544 Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Mon, 2 Mar 2026 12:09:18 +0800 Subject: [PATCH 5/5] update docs --- .../(transistory-assistance)/ta-input.mdx | 10 ++--- .../(transistory-assistance)/ta-input.ms.mdx | 10 ++--- .../ta-preview/input/ta-input-preview.html | 45 ++++++++----------- 3 files changed, 28 insertions(+), 37 deletions(-) diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx index d5f6ea58..55828a1d 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx @@ -323,11 +323,11 @@ body { -## Overview +## 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. -## Features +## 2. Features - **Multiple States**: Default, hover, focus, disabled, and error states - **Accessibility**: Proper labels and ARIA attributes @@ -335,7 +335,7 @@ The Input component provides a consistent, accessible text input field that foll - **Responsive**: Adapts to different screen sizes - **Customizable**: Easy to style and extend -## Usage +## 3. Usage ### Basic Input @@ -364,7 +364,7 @@ The Input component provides a consistent, accessible text input field that foll ``` -## Class Reference +## 4. Class Reference | Class | Description | |-------|-------------| @@ -375,7 +375,7 @@ The Input component provides a consistent, accessible text input field that foll | `.myds-input-focused` | Focus state (for demos) | | `.myds-input-error` | Error state styling | -## Accessibility +## 5. Accessibility - Always pair inputs with labels using the `myds-input-label` class - Use appropriate `type` attributes (text, email, password, etc.) diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx index d30b9f2e..9331946b 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx @@ -323,11 +323,11 @@ body { -## Gambaran Keseluruhan +## 1. Gambaran Keseluruhan Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yang mengikuti garis panduan reka bentuk MYDS. Ia termasuk pelbagai keadaan untuk interaksi pengguna dan senario maklum balas yang berbeza. -## Ciri-ciri +## 2. Ciri-ciri - **Pelbagai Keadaan**: Keadaan lalai, hover, fokus, dilumpuhkan, dan ralat - **Kebolehcapaian**: Label dan atribut ARIA yang sesuai @@ -335,7 +335,7 @@ Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yan - **Responsif**: Menyesuaikan diri dengan saiz skrin yang berbeza - **Boleh Disesuaikan**: Mudah untuk digayakan dan diperluaskan -## Penggunaan +## 3. Penggunaan ### Input Asas @@ -364,7 +364,7 @@ Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yan ``` -## Rujukan Kelas +## 4. Rujukan Kelas | Kelas | Penerangan | |-------|-------------| @@ -375,7 +375,7 @@ Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yan | `.myds-input-focused` | Keadaan fokus (untuk demo) | | `.myds-input-error` | Gaya keadaan ralat | -## Kebolehcapaian +## 5. Kebolehcapaian - Sentiasa pasangkan input dengan label menggunakan kelas `myds-input-label` - Gunakan atribut `type` yang sesuai (text, email, password, dll.) diff --git a/apps/docs/public/assets/ta-preview/input/ta-input-preview.html b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html index ceb0bdc0..bf78ccd5 100644 --- a/apps/docs/public/assets/ta-preview/input/ta-input-preview.html +++ b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html @@ -1,30 +1,25 @@ - - + + + + + + - - - - -
@@ -33,7 +28,7 @@
- +
@@ -41,7 +36,7 @@
- +
@@ -49,7 +44,7 @@
- +
@@ -63,7 +58,7 @@ - + @@ -71,7 +66,7 @@
- +
@@ -105,10 +100,8 @@
-
- RM -
- +
RM
+
@@ -116,10 +109,8 @@
- -
- Copy -
+ +
Copy
@@ -127,7 +118,7 @@
- +
@@ -135,7 +126,7 @@
- +