@uniai-fe/uds-primitives 0.3.23 → 0.3.24

package/dist/styles.css

@@ -299,11 +299,16 @@
   --dropdown-description-color: var(--color-label-neutral);
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
+  --dropdown-text-size-selected: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-selected: var(
+  --dropdown-text-medium-letter-spacing
+  );
   --dropdown-option-height-selected: var(--dropdown-option-height-medium);
   --dropdown-option-height-xsmall: 24px;
-  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
-  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
-  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --dropdown-option-height-small: var(--theme-size-medium-1);
+  --dropdown-option-height-medium: var(--theme-size-medium-2);
+  --dropdown-option-height-large: var(--theme-size-medium-3);
   --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
   --dropdown-option-padding-block-xsmall: 0px;
   --dropdown-option-radius-xsmall: 4px;
@@ -2299,15 +2304,15 @@ figure.chip {
   align-items: center;
   gap: var(--dropdown-option-gap-inline);
   width: 100%;
-  min-height: var(--dropdown-option-height-selected, var(--dropdown-option-height-medium));
+  min-height: var(--dropdown-option-height-selected);
   padding: var(--dropdown-option-padding-block-selected) var(--dropdown-option-padding-inline-selected);
   border-radius: var(--dropdown-option-radius-selected);
   background-color: transparent;
   color: var(--dropdown-option-color);
   cursor: pointer;
-  font-size: var(--dropdown-option-font-size, var(--dropdown-text-medium-size));
-  font-weight: var(--dropdown-option-font-weight, var(--dropdown-text-weight));
-  line-height: var(--dropdown-option-line-height, var(--dropdown-text-medium-line-height));
+  font-size: var(--dropdown-text-size-selected);
+  font-weight: var(--dropdown-text-weight);
+  line-height: var(--dropdown-text-line-height-selected);
 }
 .dropdown-menu-item-trigger span {
   user-select: none;
@@ -2349,22 +2354,28 @@ figure.chip {
   gap: 0.2rem;
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
 }
 
 .dropdown-menu-item-label {
-  display: flex;
-  align-items: center;
+  display: block;
   min-width: 0;
+  width: 100%;
+  max-width: 100%;
   color: inherit;
-  font-size: var(--dropdown-text-size-selected, var(--dropdown-text-medium-size));
-  line-height: var(--dropdown-text-line-height-selected, var(--dropdown-text-medium-line-height));
-  letter-spacing: var(--dropdown-text-letter-spacing-selected, var(--dropdown-text-medium-letter-spacing));
+  font-size: var(--dropdown-text-size-selected);
+  line-height: var(--dropdown-text-line-height-selected);
+  letter-spacing: var(--dropdown-text-letter-spacing-selected);
   font-weight: var(--dropdown-text-weight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.dropdown-menu-item-trigger > .dropdown-menu-item-label {
+  flex: 1 1 auto;
+}
+
 .dropdown-menu-item-description {
   font-size: var(--dropdown-description-size);
   line-height: var(--dropdown-description-line-height);

package/package.json

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

package/src/components/dropdown/markup/foundation/MenuItem.tsx

@@ -6,7 +6,6 @@ import { forwardRef } from "react";
 
 import type { DropdownMenuItemProps } from "../../types/props";
 import { Checkbox } from "../../../checkbox/markup/Checkbox";
-import type { CheckboxProps } from "../../../checkbox/types";
 import { Slot } from "../../../slot";
 
 /**
@@ -42,41 +41,36 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
     },
     ref,
   ) => {
-    const labelContent = label ?? children;
-    // 변경: label 렌더링을 Slot.Text 경로로 통일해 string|number만 공통 래핑 규칙을 적용한다.
-    const resolvedLabelContent = (
-      <Slot.Text className="dropdown-menu-item-label">{labelContent}</Slot.Text>
-    );
-    const hasDescription = Boolean(description);
-    const shouldRenderCheckbox = multiple && !left;
-
     const renderLeft = () => {
-      if (shouldRenderCheckbox) {
-        const checkboxClassName = clsx(
-          "dropdown-menu-item-checkbox",
-          checkboxProps?.className,
-        );
+      // 변경: 좌측 콘텐츠가 전혀 없고 multiple도 아니면 즉시 null을 반환한다.
+      if (!left && !multiple) {
+        return null;
+      }
 
-        const checkboxAdditionalProps: CheckboxProps = {
-          ...checkboxProps,
-          checked: isSelected,
-          onCheckedChange: checkboxProps?.onCheckedChange ?? (() => {}),
-          tabIndex: -1,
-          "aria-hidden": true,
-          className: checkboxClassName,
-        } as CheckboxProps;
+      // 변경: left가 있으면 우선 렌더링하고 체크박스 분기보다 앞에서 종료한다.
+      if (left) {
+        return <span className="dropdown-menu-item-left">{left}</span>;
+      }
 
+      if (multiple) {
         return (
           <span className="dropdown-menu-item-left" aria-hidden="true">
-            <Checkbox size="medium" {...checkboxAdditionalProps} />
+            <Checkbox
+              size="medium"
+              {...checkboxProps}
+              checked={isSelected}
+              onCheckedChange={checkboxProps?.onCheckedChange ?? (() => {})}
+              tabIndex={-1}
+              aria-hidden="true"
+              className={clsx(
+                "dropdown-menu-item-checkbox",
+                checkboxProps?.className,
+              )}
+            />
           </span>
         );
       }
 
-      if (left) {
-        return <span className="dropdown-menu-item-left">{left}</span>;
-      }
-
       return null;
     };
 
@@ -88,7 +82,7 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
           className={clsx("dropdown-menu-item-trigger", className)}
           data-state={isSelected ? "selected" : undefined}
           data-multiple={multiple ? "true" : undefined}
-          data-has-description={hasDescription ? "true" : undefined}
+          data-has-description={description ? "true" : undefined}
           onSelect={event => {
             if (multiple) {
               event.preventDefault();
@@ -97,14 +91,21 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
           }}
         >
           {renderLeft()}
-          <span className="dropdown-menu-item-body">
-            {resolvedLabelContent}
-            {description ? (
+          {/* 변경: description이 있을 때만 body wrapper를 렌더링해 불필요한 중첩 span을 줄인다. */}
+          {description ? (
+            <span className="dropdown-menu-item-body">
+              <Slot.Text className="dropdown-menu-item-label">
+                {label ?? children}
+              </Slot.Text>
               <span className="dropdown-menu-item-description">
                 {description}
               </span>
-            ) : null}
-          </span>
+            </span>
+          ) : (
+            <Slot.Text className="dropdown-menu-item-label">
+              {label ?? children}
+            </Slot.Text>
+          )}
           {right ? (
             <span className="dropdown-menu-item-right">{right}</span>
           ) : null}

package/src/components/dropdown/styles/dropdown.scss

@@ -81,22 +81,16 @@
   align-items: center;
   gap: var(--dropdown-option-gap-inline);
   width: 100%;
-  min-height: var(
-    --dropdown-option-height-selected,
-    var(--dropdown-option-height-medium)
-  );
+  min-height: var(--dropdown-option-height-selected);
   padding: var(--dropdown-option-padding-block-selected)
     var(--dropdown-option-padding-inline-selected);
   border-radius: var(--dropdown-option-radius-selected);
   background-color: transparent;
   color: var(--dropdown-option-color);
   cursor: pointer;
-  font-size: var(--dropdown-option-font-size, var(--dropdown-text-medium-size));
-  font-weight: var(--dropdown-option-font-weight, var(--dropdown-text-weight));
-  line-height: var(
-    --dropdown-option-line-height,
-    var(--dropdown-text-medium-line-height)
-  );
+  font-size: var(--dropdown-text-size-selected);
+  font-weight: var(--dropdown-text-weight);
+  line-height: var(--dropdown-text-line-height-selected);
 
   span {
     user-select: none;
@@ -150,32 +144,30 @@
   gap: 0.2rem;
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
 }
 
 .dropdown-menu-item-label {
-  // 변경: inline-* 금지 규칙에 맞춰 라벨 렌더 박스를 flex로 유지한다.
-  display: flex;
-  align-items: center;
+  // 변경: 말줄임표 동작을 위해 라벨 박스를 block + width 제약으로 고정한다.
+  display: block;
   min-width: 0;
+  width: 100%;
+  max-width: 100%;
   color: inherit;
-  font-size: var(
-    --dropdown-text-size-selected,
-    var(--dropdown-text-medium-size)
-  );
-  line-height: var(
-    --dropdown-text-line-height-selected,
-    var(--dropdown-text-medium-line-height)
-  );
-  letter-spacing: var(
-    --dropdown-text-letter-spacing-selected,
-    var(--dropdown-text-medium-letter-spacing)
-  );
+  font-size: var(--dropdown-text-size-selected);
+  line-height: var(--dropdown-text-line-height-selected);
+  letter-spacing: var(--dropdown-text-letter-spacing-selected);
   font-weight: var(--dropdown-text-weight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+// 변경: description이 없어 body wrapper를 생략하는 경로에서 label이 가용 폭을 차지하도록 한다.
+.dropdown-menu-item-trigger > .dropdown-menu-item-label {
+  flex: 1 1 auto;
+}
+
 .dropdown-menu-item-description {
   font-size: var(--dropdown-description-size);
   line-height: var(--dropdown-description-line-height);

package/src/components/dropdown/styles/variables.scss

@@ -53,11 +53,18 @@
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
 
+  // 변경: fallback 없는 토큰 계약을 위해 기본 selected typography를 root에서 명시한다.
+  --dropdown-text-size-selected: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-selected: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-selected: var(
+    --dropdown-text-medium-letter-spacing
+  );
+
   --dropdown-option-height-selected: var(--dropdown-option-height-medium);
   --dropdown-option-height-xsmall: 24px;
-  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
-  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
-  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  --dropdown-option-height-small: var(--theme-size-medium-1);
+  --dropdown-option-height-medium: var(--theme-size-medium-2);
+  --dropdown-option-height-large: var(--theme-size-medium-3);
   --dropdown-option-padding-inline-xsmall: var(--spacing-padding-3);
   --dropdown-option-padding-block-xsmall: 0px;
   --dropdown-option-radius-xsmall: 4px;