@idbrnd/design-system 1.6.1 → 1.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -4
- package/dist/components/Input/Input.types.d.ts +2 -0
- package/dist/index.js +817 -802
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -235,7 +235,7 @@ function InputExample() {
|
|
|
235
235
|
| `required` | `boolean` | `false` | 필수 입력 표시 및 native `required` 속성 적용 |
|
|
236
236
|
| `description` | `ReactNode \| boolean` | `false` | 하단 안내 문구. `true`면 기본 안내 문구를 사용 |
|
|
237
237
|
| `fixedDescriptionHeight` | `boolean` | `true` | helper 영역 높이 고정 여부 |
|
|
238
|
-
| `errorMessage` | `ReactNode` | 기본 에러 문구 | 전달되면 에러 상태가 자동 적용되고 해당 메시지가 표시됨
|
|
238
|
+
| `errorMessage` | `ReactNode` | 기본 에러 문구 | 의미 있는 값이 전달되면 에러 상태가 자동 적용되고 해당 메시지가 표시됨 |
|
|
239
239
|
| `leadingIcon` | `ReactNode` | — | 입력 필드 좌측 아이콘 |
|
|
240
240
|
| `trailingContent` | `ReactNode` | — | 입력 필드 우측 콘텐츠 |
|
|
241
241
|
| `readOnly` | `boolean` | `false` | 읽기 전용 |
|
|
@@ -245,8 +245,9 @@ function InputExample() {
|
|
|
245
245
|
유의사항:
|
|
246
246
|
|
|
247
247
|
- `variant`를 지정하지 않으면 값 존재 여부에 따라 내부적으로 `basic` 또는 `typed` 상태가 자동 적용됩니다.
|
|
248
|
-
- `errorMessage
|
|
248
|
+
- `errorMessage`에 의미 있는 값이 있으면 `variant` 값보다 우선해서 에러 상태가 적용됩니다. 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 에러로 처리하지 않습니다.
|
|
249
249
|
- `variant="error"`일 때는 `description` 대신 에러 문구가 우선 노출되며, `errorMessage`를 생략하면 기본 에러 문구가 표시됩니다.
|
|
250
|
+
- `description`도 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼면 문구가 없는 것으로 처리됩니다.
|
|
250
251
|
- `description={true}`를 전달하면 기본 안내 문구(`2~19자 이내로 입력해 주세요.`)가 표시됩니다.
|
|
251
252
|
- `fixedDescriptionHeight={true}`면 안내/에러 문구가 없을 때도 helper 영역 높이를 유지해 레이아웃 점프를 방지합니다.
|
|
252
253
|
- helper 문구(`description`, `errorMessage`)는 기본적으로 입력창 너비에 맞춰 줄바꿈되지 않습니다. 특정 케이스에서만 줄바꿈이 필요하면 래퍼 노드에 `maxWidth`를 주거나 `<br />`를 사용하세요.
|
|
@@ -308,14 +309,14 @@ function SearchExample() {
|
|
|
308
309
|
| `onClear` | `() => void` | — | 삭제 버튼 클릭 콜백. 미지정 시 기본 동작 사용 |
|
|
309
310
|
| `size` | `"default"` \| `"small"` | `"default"` | 크기 |
|
|
310
311
|
| `variant` | `"default"` \| `"onTyping"` \| `"typed"` \| `"error"` | — | 상태 변형. `errorMessage`가 있으면 `error`가 우선 적용 |
|
|
311
|
-
| `errorMessage` | `ReactNode` | — | 전달되면 에러 상태가 자동 적용되고 해당 문구가 표시됨
|
|
312
|
+
| `errorMessage` | `ReactNode` | — | 의미 있는 값이 전달되면 에러 상태가 자동 적용되고 해당 문구가 표시됨 |
|
|
312
313
|
| `maxLength` | `number` | `20` | native `input`의 `maxLength` 속성으로 전달 |
|
|
313
314
|
| `heading` | `boolean` | `false` | 상단 heading 표시 여부 |
|
|
314
315
|
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
315
316
|
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
316
317
|
|
|
317
318
|
- `SearchBar`는 UI 컴포넌트로만 동작하며, 길이 검증이나 번역 문구 생성 로직은 포함하지 않습니다.
|
|
318
|
-
- `errorMessage`가
|
|
319
|
+
- `errorMessage`가 비거나 내용 없는 JSX 래퍼만 남으면 에러로 처리하지 않고, `variant` prop 또는 기본 자동 상태(`default`/`typed`)로 되돌아갑니다.
|
|
319
320
|
- `description`, `fixedDescriptionHeight` 등 나머지 보조 속성은 `Input`과 동일하게 사용할 수 있습니다.
|
|
320
321
|
- helper 문구를 일부 케이스에서만 줄바꿈하고 싶다면 `errorMessage` 또는 `description`에 래퍼 노드를 넘겨 `maxWidth`나 `<br />`를 적용하면 됩니다.
|
|
321
322
|
|
|
@@ -80,6 +80,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
|
|
|
80
80
|
*
|
|
81
81
|
* 주의:
|
|
82
82
|
* - `variant === 'error'`이면 description 대신 에러 문구가 우선 노출된다.
|
|
83
|
+
* - 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 안내 문구가 없는 것으로 처리한다.
|
|
83
84
|
* @defaultValue `false`
|
|
84
85
|
*/
|
|
85
86
|
description?: ReactNode | boolean;
|
|
@@ -93,6 +94,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
|
|
|
93
94
|
/**
|
|
94
95
|
* 에러 문구.
|
|
95
96
|
* 전달되면 `variant` 지정 여부와 관계없이 `error` 상태가 우선 적용된다.
|
|
97
|
+
* 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 에러 문구로 간주하지 않는다.
|
|
96
98
|
* 미지정 시 기본 에러 문구를 표시한다.
|
|
97
99
|
*/
|
|
98
100
|
errorMessage?: ReactNode;
|