@ncds/ui-admin 1.8.21-alpha.16 → 1.8.21-alpha.18

package/dist/esm/src/components/forms-and-input/input-base/InputBase.js

@@ -5,12 +5,18 @@ import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../../constant/color';
 import { HintText } from '../../shared/hintText/HintText';
 import { Label } from '../../shared/label/Label';
-// 슬롯 아이콘(leadingElement/trailingElement)과 상태 아이콘(clear·validation·destructive)은 같은 크기를 쓴다.
+// 슬롯 아이콘(leadingElement/trailingElement)은 인풋 크기에 맞춰 커진다.
 // slot.size 를 명시하면 그 값이 우선한다.
 const iconSvgSize = {
   xs: 14,
   sm: 20
 };
+// 상태 아이콘(clear·validation·destructive)은 인풋 크기와 무관하게 16px 로 고정한다.
+// 슬롯 아이콘은 sm 에서 20px 로 커지므로 두 상수를 하나로 합치지 않는다.
+const statusIconSvgSize = {
+  xs: 14,
+  sm: 16
+};
 const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     size = 'xs',
@@ -118,8 +124,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
       onClick: onClearText,
       children: _jsx(X, {
         className: "ncua-input__clear-icon",
-        width: iconSvgSize[size],
-        height: iconSvgSize[size]
+        width: statusIconSvgSize[size],
+        height: statusIconSvgSize[size]
       })
     });
   };
@@ -129,8 +135,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: _jsx(InfoCircle, {
           className: "ncua-input__destructive-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }
@@ -139,8 +145,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: _jsx(CheckCircle, {
           className: "ncua-input__validation-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }

package/dist/esm/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -77,8 +77,9 @@ describe('InputBase — 아이콘 사이즈', () => {
       height: svg?.getAttribute('height')
     };
   };
-  // 슬롯 아이콘과 상태 아이콘은 같은 크기를 쓴다 — 과거 상태 아이콘만 sm=16으로 어긋나 있었다
-  it.each([['xs', '14'], ['sm', '20']])('size=%s 일 때 슬롯 아이콘과 상태 아이콘이 모두 %spx로 렌더된다', (size, expected) => {
+  // 슬롯 아이콘은 인풋 크기에 연동돼 sm 에서 20px 로 커지지만,
+  // 상태 아이콘(clear·validation·destructive)은 16px 로 고정한다.
+  it.each([['xs', '14', '14'], ['sm', '20', '16']])('size=%s 일 때 슬롯 아이콘은 %spx, 상태 아이콘은 %spx로 렌더된다', (size, slotExpected, statusExpected) => {
     // Given/When: 슬롯 아이콘과 clear 버튼, destructive 상태를 함께 렌더하면
     const view = mountInputBase({
       size,
@@ -90,23 +91,27 @@ describe('InputBase — 아이콘 사이즈', () => {
         icon: SearchLg
       }
     });
-    // Then: 슬롯·clear·destructive 아이콘의 크기가 서로 어긋나지 않는다
-    const expectedSize = {
-      width: expected,
-      height: expected
+    // Then: 슬롯 아이콘만 인풋 크기를 따라가고, 상태 아이콘은 16px 을 넘지 않는다
+    const slotSize = {
+      width: slotExpected,
+      height: slotExpected
+    };
+    const statusSize = {
+      width: statusExpected,
+      height: statusExpected
     };
-    expect(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(expectedSize);
-    expect(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(expectedSize);
-    expect(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(expectedSize);
+    expect(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(slotSize);
+    expect(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(statusSize);
+    expect(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(statusSize);
     view.unmount();
   });
-  it.each([['xs', '14'], ['sm', '20']])('size=%s 일 때 validation 아이콘도 %spx로 렌더된다', (size, expected) => {
+  it.each([['xs', '14'], ['sm', '16']])('size=%s 일 때 validation 아이콘은 %spx로 렌더된다', (size, expected) => {
     // Given/When: validation 상태로 렌더하면
     const view = mountInputBase({
       size,
       validation: true
     });
-    // Then: 다른 아이콘과 같은 크기다
+    // Then: 다른 상태 아이콘과 같은 크기다
     expect(iconSizeOf(view.container, '.ncua-input__validation-icon')).toEqual({
       width: expected,
       height: expected

package/dist/esm/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js

@@ -164,6 +164,8 @@ const PostcodeSearchModal = _ref2 => {
               size: "sm",
               fullWidth: true,
               value: searchQuery,
+              clearText: !!searchQuery,
+              onClearText: () => onSearchQueryChange(''),
               onChange: handleSearchQueryChange,
               onKeyDown: handleSearchKeyDown,
               placeholder: SEARCH_PLACEHOLDER,