@uniai-fe/uds-primitives 0.3.35 → 0.3.36

package/dist/styles.css

@@ -2567,6 +2567,14 @@ figure.chip {
 .input--block {
   width: 100%;
 }
+.input[data-priority=table] {
+  display: block;
+  --input-width: 100%;
+  height: 100%;
+}
+.input[data-priority=table] .input-box {
+  height: 100%;
+}
 
 .input-label {
   color: var(--input-label-color);
@@ -2682,6 +2690,7 @@ figure.chip {
   margin-left: 0;
 }
 .input-field[data-priority=table] {
+  height: 100%;
   border-radius: var(--input-table-radius-base);
   border-color: var(--input-border-table-default-color);
   background-color: var(--input-table-surface-color);
@@ -4636,43 +4645,6 @@ figure.chip {
   padding: 0;
 }
 
-.table-cell-content[data-padding=default] > :where(.input[data-priority=table]) {
-  width: calc(100% + var(--table-cell-padding-inline) * 2);
-  height: 100%;
-  min-height: calc(100% + var(--table-cell-padding-block) * 2);
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-  flex: 1 1 auto;
-}
-
-.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-box),
-.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-field) {
-  width: 100%;
-  height: 100%;
-}
-
-.table-cell-content[data-padding=default] > :where(.input-date-field) {
-  width: calc(100% + var(--table-cell-padding-inline) * 2);
-  height: 100%;
-  min-height: calc(100% + var(--table-cell-padding-block) * 2);
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-}
-
-.table-cell-content[data-padding=none] > :where(.input[data-priority=table]),
-.table-cell-content[data-no-padding=true] > :where(.input[data-priority=table]),
-.table-cell-content[data-padding=none] :where(.input[data-priority=table] .input-box,
-.input[data-priority=table] .input-field),
-.table-cell-content[data-no-padding=true] :where(.input[data-priority=table] .input-box,
-.input[data-priority=table] .input-field),
-.table-cell-content[data-padding=none] > :where(.input-date-field),
-.table-cell-content[data-no-padding=true] > :where(.input-date-field) {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  margin: 0;
-}
-
 :where(.table-cell-content) :where(.table-cell-text) {
   color: inherit;
   font-size: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.35",
+  "version": "0.3.36",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/input/markup/foundation/Input.tsx

@@ -272,7 +272,6 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
             <InputBaseUtil
-              // table priority는 success/error 상태 아이콘 대신 border만으로 상태를 표현한다.
               priority={priority}
               state={currentState}
               isDisabled={isDisabled}

package/src/components/input/markup/foundation/Utility.tsx

@@ -47,7 +47,8 @@ export default function InputBaseUtil({
   // 변경: table/tertiary priority는 상태 아이콘을 렌더하지 않는다.
   const resolvedStatusIcon =
     priority === "table" || priority === "tertiary" ? null : statusIcon;
-  const clearIconNode = clear ?? InputStatusIcon.reset;
+  const clearIconNode =
+    clear ?? (priority === "table" ? null : InputStatusIcon.reset);
   const showClearIcon = Boolean(
     clearIconNode &&
     hasValue &&

package/src/components/input/styles/foundation.scss

@@ -34,6 +34,15 @@
   &--block {
     width: 100%;
   }
+
+  &[data-priority="table"] {
+    display: block;
+    --input-width: 100%;
+    height: 100%;
+    .input-box {
+      height: 100%;
+    }
+  }
 }
 
 .input-label {
@@ -170,7 +179,8 @@
   }
 
   &[data-priority="table"] {
-    // table priority는 default에서 border를 숨기고 상태(border-color)만 드러낸다.
+    height: 100%;
+
     border-radius: var(--input-table-radius-base);
     border-color: var(--input-border-table-default-color);
     background-color: var(--input-table-surface-color);

package/src/components/table/styles/foundation.scss

@@ -372,32 +372,32 @@
   padding: 0;
 }
 
-// 변경: table cell 내부 full-bleed 제어는 직계 child 루트에만 적용해 내부 컴포넌트 스타일 역전을 방지한다.
-.table-cell-content[data-padding="default"]
-  > :where(.input[data-priority="table"]) {
-  width: calc(100% + (var(--table-cell-padding-inline) * 2));
-  height: 100%;
-  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-  flex: 1 1 auto;
-}
+// // 변경: table cell 내부 full-bleed 제어는 직계 child 루트에만 적용해 내부 컴포넌트 스타일 역전을 방지한다.
+// .table-cell-content[data-padding="default"]
+//   > :where(.input[data-priority="table"]) {
+//   width: calc(100% + (var(--table-cell-padding-inline) * 2));
+//   height: 100%;
+//   min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+//   margin-inline: calc(var(--table-cell-padding-inline) * -1);
+//   margin-block: calc(var(--table-cell-padding-block) * -1);
+//   flex: 1 1 auto;
+// }
 
-.table-cell-content[data-padding="default"]
-  :where(.input[data-priority="table"] .input-box),
-.table-cell-content[data-padding="default"]
-  :where(.input[data-priority="table"] .input-field) {
-  width: 100%;
-  height: 100%;
-}
+// .table-cell-content[data-padding="default"]
+//   :where(.input[data-priority="table"] .input-box),
+// .table-cell-content[data-padding="default"]
+//   :where(.input[data-priority="table"] .input-field) {
+//   width: 100%;
+//   height: 100%;
+// }
 
-.table-cell-content[data-padding="default"] > :where(.input-date-field) {
-  width: calc(100% + (var(--table-cell-padding-inline) * 2));
-  height: 100%;
-  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-}
+// .table-cell-content[data-padding="default"] > :where(.input-date-field) {
+//   width: calc(100% + (var(--table-cell-padding-inline) * 2));
+//   height: 100%;
+//   min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+//   margin-inline: calc(var(--table-cell-padding-inline) * -1);
+//   margin-block: calc(var(--table-cell-padding-block) * -1);
+// }
 
 // .table-cell-content[data-padding="default"]
 //   > :where(
@@ -426,27 +426,27 @@
 //   margin: 0;
 // }
 
-.table-cell-content[data-padding="none"]
-  > :where(.input[data-priority="table"]),
-.table-cell-content[data-no-padding="true"]
-  > :where(.input[data-priority="table"]),
-.table-cell-content[data-padding="none"]
-  :where(
-    .input[data-priority="table"] .input-box,
-    .input[data-priority="table"] .input-field
-  ),
-.table-cell-content[data-no-padding="true"]
-  :where(
-    .input[data-priority="table"] .input-box,
-    .input[data-priority="table"] .input-field
-  ),
-.table-cell-content[data-padding="none"] > :where(.input-date-field),
-.table-cell-content[data-no-padding="true"] > :where(.input-date-field) {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  margin: 0;
-}
+// .table-cell-content[data-padding="none"]
+//   > :where(.input[data-priority="table"]),
+// .table-cell-content[data-no-padding="true"]
+//   > :where(.input[data-priority="table"]),
+// .table-cell-content[data-padding="none"]
+//   :where(
+//     .input[data-priority="table"] .input-box,
+//     .input[data-priority="table"] .input-field
+//   ),
+// .table-cell-content[data-no-padding="true"]
+//   :where(
+//     .input[data-priority="table"] .input-box,
+//     .input[data-priority="table"] .input-field
+//   ),
+// .table-cell-content[data-padding="none"] > :where(.input-date-field),
+// .table-cell-content[data-no-padding="true"] > :where(.input-date-field) {
+//   width: 100%;
+//   height: 100%;
+//   min-height: 100%;
+//   margin: 0;
+// }
 
 // 변경: Cell 슬롯 기본 텍스트 inherit는 저특이성(:where)으로 두어 section 토큰 규칙이 우선되게 한다.
 :where(.table-cell-content) {