docs(spindle-ui): add TextField design doc and tests#1644
docs(spindle-ui): add TextField design doc and tests#1644
Conversation
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds comprehensive documentation and testing for the TextField component in spindle-ui. The changes include creating a design document that outlines component usage, accessibility guidelines, and testing strategy, along with adding missing unit tests and Storybook stories to improve component coverage.
Key Changes:
- Created complete design documentation (design-doc.md) with usage examples, accessibility checklist, and test strategy
- Added unit tests for basic HTML attributes (id, placeholder, disabled, type)
- Added Storybook stories for key component states (with value, disabled, long text)
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/spindle-ui/src/Form/TextField/design-doc.md | New design documentation covering component overview, usage patterns, accessibility requirements, and testing approach |
| packages/spindle-ui/src/Form/TextField/TextField.test.tsx | Added unit tests for id, placeholder, disabled, and type attributes |
| packages/spindle-ui/src/Form/TextField/TextField.stories.tsx | Added three new stories: MediumWithValue, MediumDisabled, and MediumWithLongText |
| packages/spindle-ui/src/Form/TextField/TextField.mdx | Added documentation sections for the three new Storybook stories |
|
Visit the preview URL for this PR (updated for commit 254ad51): https://ameba-spindle--pr1644-docs-form-textfield-kba65so0.web.app (expires Sun, 25 Jan 2026 09:59:03 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435 |
|
reg-suit detected visual differences. Check this report, and review them.
How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
herablog
force-pushed
the
docs/form-textfield
branch
from
5779502 to
9067d71
Compare
- TextFieldコンポーネントのdesign-docを追加 - ユニットテストを追加（id、placeholder、disabled、type属性） - Storybookストーリーを追加（入力値あり、無効化、長いテキスト）
Add unit tests for aria-invalid, aria-errormessage, and aria-describedby attributes when TextField is in error state. Update design-doc to clarify that accessibility attributes should be tested in unit tests rather than VRT.
herablog
force-pushed
the
docs/form-textfield
branch
from
9067d71 to
5110afa
Compare
Co-authored-by: yasuda-shin <80251820+yasuda-shin@users.noreply.github.com>
| 入力値が不正な場合は、`hasError`プロパティを指定してエラー状態を表示します。[InvalidMessage](https://ameba-spindle.web.app/?path=/story/form-invalidmessage--invalid-message)と組み合わせることで、ユーザーに具体的なエラー内容を伝えることができます。 | ||
|
|
||
| エラーメッセージとの紐付けには、`aria-invalid`と`aria-errormessage`（または`aria-describedby`）を使用します。 |
There was a problem hiding this comment.
nits. これ、Storybookの方にも記載あった方が親切かなと思いました（とくにaria-errormessageは忘れそう）
（InvalidMessageの方にあるのでも良いですが）
Summary
TextFieldコンポーネントのDesign Docとテストを追加しました。
Test plan