@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.2

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

@@ -52,7 +52,7 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
       input.removeEventListener('input', syncFromInput);
     };
   }, [props.value]);
-  const renderOutsideSlot = slot => {
+  const renderOutsideSlot = (slot, position) => {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
     }
@@ -66,7 +66,7 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
         });
       case 'text':
         return _jsx("span", {
-          className: classNames('ncua-input__leading-text', `ncua-input__leading-text--${size}`),
+          className: classNames(`ncua-input__${position}-text`, `ncua-input__${position}-text--${size}`),
           children: slot.text
         });
       case 'custom':
@@ -83,7 +83,12 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
           return _jsx("div", {
             className: "ncua-input__icon-wrap",
             children: _jsx(SlotIcon, {
-              className: classNames(`ncua-input__${position}-icon`, slot.className),
+              className: classNames(`ncua-input__${position}-icon`,
+              // color 를 지정하지 않았을 때만 상태별 색(Placeholder/Filled/Focused/Disabled)을 CSS 에 맡긴다.
+              // 지정한 경우에는 이 클래스를 붙이지 않아 지정 색이 그대로 유지된다.
+              {
+                'ncua-input__slot-icon': !slot.color
+              }, slot.className),
               color: slot.color ? COLOR[slot.color] : undefined,
               width: slot.size ?? iconSvgSize[size],
               height: slot.size ?? iconSvgSize[size]
@@ -155,13 +160,14 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
       'full-width': fullWidth,
       'ncua-input__trailing-button': trailingElement?.type === 'button',
       'ncua-input__leading-text-wrap': leadingElement?.type === 'text',
+      'ncua-input__trailing-text-wrap': trailingElement?.type === 'text',
       'has-value': hasValue
     }, className),
     children: [renderLabel(), _jsxs("div", {
       className: "ncua-input__content-wrap",
       children: [_jsxs("div", {
         className: "ncua-input__content",
-        children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", {
+        children: [leadingElement && renderOutsideSlot(leadingElement, 'leading'), _jsxs("div", {
           className: classNames('ncua-input__field', `ncua-input__field--${size}`),
           children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", {
             ref: node => {
@@ -177,7 +183,7 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
             maxLength: maxLength,
             ...props
           }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
-        }), trailingElement && renderOutsideSlot(trailingElement)]
+        }), trailingElement && renderOutsideSlot(trailingElement, 'trailing')]
       }), showTextCount && maxLength && _jsxs("div", {
         className: "ncua-input__field-text-count",
         children: [_jsx("output", {

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

@@ -4,6 +4,7 @@ import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { describe, expect, it, vi } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
 import { InputBase } from '../InputBase';
 // React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -130,6 +131,55 @@ describe('InputBase — 아이콘 사이즈', () => {
     view.unmount();
   });
 });
+describe('InputBase — 슬롯 아이콘 상태 색상', () => {
+  // 상태별 색은 CSS 가 결정한다. jsdom 에서는 스타일시트를 로드하지 않으므로
+  // "상태 규칙을 타는 클래스가 붙었는지" 와 "지정 색이 인라인으로 남았는지" 로 검증한다.
+  const leftIconOf = container => container.querySelector('.ncua-input__left-icon');
+  it('color 를 지정하지 않으면 상태 색상 클래스가 붙는다', () => {
+    // Given/When: color 없이 슬롯 아이콘을 렌더하면
+    const view = mountInputBase({
+      leadingElement: {
+        type: 'icon',
+        icon: SearchLg
+      }
+    });
+    // Then: 상태 규칙을 타는 클래스가 붙고, 인라인 색은 지정되지 않는다
+    const icon = leftIconOf(view.container);
+    expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    expect(icon?.hasAttribute('color')).toBe(false);
+    view.unmount();
+  });
+  it('color 를 지정하면 상태 색상 클래스가 붙지 않고 지정 색이 유지된다', () => {
+    // Given/When: color 를 지정해 렌더하면
+    const view = mountInputBase({
+      leadingElement: {
+        type: 'icon',
+        icon: SearchLg,
+        color: 'blue500'
+      }
+    });
+    // Then: 상태 규칙에서 제외되고 지정한 색이 그대로 남는다
+    const icon = leftIconOf(view.container);
+    expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(false);
+    expect(icon?.getAttribute('color')).toBe(COLOR.blue500);
+    view.unmount();
+  });
+  it('slot.className 을 함께 주어도 상태 색상 클래스가 유지된다', () => {
+    // Given/When: className 을 추가로 넘기면
+    const view = mountInputBase({
+      leadingElement: {
+        type: 'icon',
+        icon: SearchLg,
+        className: 'my-icon'
+      }
+    });
+    // Then: 두 클래스가 모두 붙는다
+    const icon = leftIconOf(view.container);
+    expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    expect(icon?.classList.contains('my-icon')).toBe(true);
+    view.unmount();
+  });
+});
 describe('InputBase — has-value 상태 클래스', () => {
   const typeInto = (container, text) => {
     const input = container.querySelector('input');
@@ -178,4 +228,70 @@ describe('InputBase — has-value 상태 클래스', () => {
     expect(view.container.querySelector('.ncua-input')?.classList.contains('has-value')).toBe(true);
     view.unmount();
   });
+});
+describe('InputBase — 텍스트 슬롯', () => {
+  it('leadingElement 텍스트는 leading 클래스와 wrap 클래스가 붙는다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      leadingElement: {
+        type: 'text',
+        text: 'https://'
+      }
+    });
+    const text = container.querySelector('.ncua-input__leading-text');
+    expect(text?.textContent).toBe('https://');
+    expect(container.querySelector('.ncua-input__leading-text-wrap')).not.toBeNull();
+    unmount();
+  });
+  it('trailingElement 텍스트는 trailing 클래스와 wrap 클래스가 붙는다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      trailingElement: {
+        type: 'text',
+        text: 'px'
+      }
+    });
+    const text = container.querySelector('.ncua-input__trailing-text');
+    expect(text?.textContent).toBe('px');
+    expect(container.querySelector('.ncua-input__trailing-text-wrap')).not.toBeNull();
+    // leading 클래스가 섞이면 모서리·테두리 방향이 반대가 된다
+    expect(container.querySelector('.ncua-input__leading-text')).toBeNull();
+    unmount();
+  });
+  it('trailingElement 텍스트는 입력 필드 뒤에 온다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      trailingElement: {
+        type: 'text',
+        text: 'px'
+      }
+    });
+    const content = container.querySelector('.ncua-input__content');
+    const children = Array.from(content?.children ?? []);
+    const fieldIndex = children.findIndex(el => el.classList.contains('ncua-input__field'));
+    const textIndex = children.findIndex(el => el.classList.contains('ncua-input__trailing-text'));
+    expect(fieldIndex).toBeGreaterThanOrEqual(0);
+    expect(textIndex).toBeGreaterThan(fieldIndex);
+    unmount();
+  });
+  it('사이즈 modifier 가 함께 붙는다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      size: 'sm',
+      trailingElement: {
+        type: 'text',
+        text: 'px'
+      }
+    });
+    expect(container.querySelector('.ncua-input__trailing-text--sm')).not.toBeNull();
+    unmount();
+  });
 });

package/dist/esm/src/components/forms-and-input/password-input/PasswordInput.js

@@ -26,9 +26,9 @@ export const PasswordInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
-      icon: Lock01,
-      // 색은 CSS가 결정한다 — 여기서 props.value로 판정하면 uncontrolled Input에서 영원히 빈 값 취급된다
-      className: 'ncua-input__password-lock-icon'
+      icon: Lock01
+      // color 를 넘기지 않아 슬롯 아이콘 공통 규칙(상태별 색)을 그대로 따른다.
+      // 여기서 props.value 로 판정하면 uncontrolled Input 에서 영원히 빈 값 취급된다.
     },
     trailingElement: {
       type: 'custom',

package/dist/esm/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.js

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { PasswordInput } from '../PasswordInput';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountPasswordInput() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/createElement(PasswordInput, props));
+  });
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+}
+describe('PasswordInput — 자물쇠 아이콘 색상', () => {
+  // 자물쇠 색은 CSS 가 결정한다. 인라인 color 를 넘기면 상태 규칙이 무시되므로,
+  // "인라인 색이 없고 슬롯 아이콘 공통 클래스를 탄다" 는 것이 색상 반영의 전제다.
+  it('자물쇠에 인라인 색을 넘기지 않고 슬롯 아이콘 공통 클래스를 탄다', () => {
+    // Given/When: 기본 상태로 렌더하면
+    const view = mountPasswordInput();
+    // Then: 상태 규칙을 타는 클래스가 붙고 인라인 색은 없다
+    const lockIcon = view.container.querySelector('.ncua-input__left-icon');
+    expect(lockIcon).not.toBeNull();
+    expect(lockIcon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    expect(lockIcon?.hasAttribute('color')).toBe(false);
+    view.unmount();
+  });
+  // 값이 있는 채로 비활성화되면 has-value 가 살아 있어 자물쇠가 진하게 남던 문제
+  it('값이 있는 채로 disabled 여도 자물쇠가 상태 규칙 대상으로 남는다', () => {
+    // Given/When: 값이 있는 비활성화 상태로 렌더하면
+    const view = mountPasswordInput({
+      value: 'secret',
+      disabled: true,
+      onChange: vi.fn()
+    });
+    // Then: 루트에 is-disabled 와 has-value 가 함께 붙고, 자물쇠는 공통 클래스를 유지한다
+    const root = view.container.querySelector('.ncua-input');
+    expect(root?.classList.contains('is-disabled')).toBe(true);
+    expect(root?.classList.contains('has-value')).toBe(true);
+    expect(view.container.querySelector('.ncua-input__left-icon')?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    view.unmount();
+  });
+});