Skip to content

feat: 新增輸入表單的核心元件#124

Merged
wendyyuchensun merged 6 commits intocoseeing:mainfrom
wendyyuchensun:v2-7-input
Apr 21, 2026
Merged

feat: 新增輸入表單的核心元件#124
wendyyuchensun merged 6 commits intocoseeing:mainfrom
wendyyuchensun:v2-7-input

Conversation

@wendyyuchensun
Copy link
Copy Markdown
Collaborator

@wendyyuchensun wendyyuchensun commented Apr 6, 2026

摘要

新增輸入表單的核心元件,供日後 exports/iframe/image input modal 可以共用:

  • 新增 TextInput 核心元件,統一輸入框樣式,支援 label、hint、錯誤訊息及 disabled 狀態
  • 新增 RadioGroup 核心元件,支援:
    • options 陣列管理選項,每個選項可獨立設定 disabled
    • 未選取時圓圈顯示 gray-400、選取時顯示主色;停用時顯示 gray-200
    • Focus ring 環繞整個 radio + 文字區域(figma

其他

  • 重構 LinkInputModal,以 TextInputRadioGroup 取代原有的 inline 表單元素
  • 新增 LinkInputModal 必填欄位驗證:當 user 點選「確認」時,若「顯示文字」與「URL」兩個欄位為空,顯示錯誤訊息

@wendyyuchensun wendyyuchensun changed the title V2 7 input feat: 新增輸入表單的核心元件 Apr 6, 2026
@wendyyuchensun wendyyuchensun marked this pull request as ready for review April 6, 2026 07:45
Comment on lines +32 to +33
const isDisplayEmpty = !display.trim();
const isUrlEmpty = !url.trim();
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

需不需要驗證 url 的格式呢?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

沒問題,覺得加上驗證 URL pattern 比較好:41a52fe

{...props}
/>
{error && (
<span id={`${id}-error`} role="alert" className="text-sm text-error leading-[1.4]">
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

這裡依賴 id prop 來提供 error message,那 id 是不是要改為必填或是加個 fallback 呢?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice catch,加上 fallback:2244c25

Comment thread src/components/core/text-input.js Outdated
id={id}
type={type}
value={value}
onChange={onChange}
Copy link
Copy Markdown
Collaborator

@jamliaoo jamliaoo Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit
onChange 的參數 radio 那邊是傳 value,這裡是用 event,如果沒有特殊需求的話感覺兩邊統一比較一至~

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated: ef108af

@wendyyuchensun wendyyuchensun merged commit eb7f216 into coseeing:main Apr 21, 2026
1 check passed
@wendyyuchensun wendyyuchensun deleted the v2-7-input branch April 21, 2026 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants