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

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

@@ -12,12 +12,18 @@ var _color = require("../../../../constant/color");
 var _HintText = require("../../shared/hintText/HintText");
 var _Label = require("../../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 슬롯 아이콘(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 = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     size = 'xs',
@@ -125,8 +131,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
       onClick: onClearText,
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
         className: "ncua-input__clear-icon",
-        width: iconSvgSize[size],
-        height: iconSvgSize[size]
+        width: statusIconSvgSize[size],
+        height: statusIconSvgSize[size]
       })
     });
   };
@@ -136,8 +142,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: (0, _jsxRuntime.jsx)(_uiAdminIcon.InfoCircle, {
           className: "ncua-input__destructive-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }
@@ -146,8 +152,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: (0, _jsxRuntime.jsx)(_uiAdminIcon.CheckCircle, {
           className: "ncua-input__validation-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }

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

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

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

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