ListRow

정보, 전체 행 동작, 화면 이동을 static div와 native button·anchor로 구분하는 flat row입니다.

예제

사용해야 할 때

설정, 주문, 배송처럼 한 줄의 정보가 자체로 완결되거나 전체 행이 한 번의 동작 또는 화면 이동을 나타낼 때 사용합니다. 의미 있는 trailing control이 따로 필요하면 static branch의 right에 Switch 같은 control을 놓습니다.

사용하지 말아야 할 때

현재 문맥 안에서 상세 내용을 펼치는 disclosure에는 BoardRow를 사용합니다. whole-row button이나 link 안에 Button, anchor, input, select, textarea, summary 또는 positive tabindex descendant를 중첩하지 않습니다. asset loader, shine·blink, 임의 padding matrix는 ListRow의 책임이 아닙니다.

구조

root는 props에 따라 div, button, a 중 하나입니다. 내부에는 선택적인 presentational left, title과 description copy, 의미가 유지되는 right, 선택적인 owned decorative ChevronRight가 있습니다. left는 aria-hidden="true", right는 노출 상태를 유지합니다.

크기와 변형

공개 size prop 없이 최소 56px 높이와 full-width flat geometry를 사용합니다. divider는 none 또는 indented, arrow는 별도 boolean입니다. Figma 계약은 Divider None/Indented × State Default/Pressed/Disabled = 6 variants이며 native root 종류는 같은 시각 geometry를 공유합니다.

상태와 동작

runtime dispatch는 string href를 먼저 검사해 native anchor를 만들고, 그다음 function onClick으로 native button을 만들며, 둘 다 없으면 static div로 돌아갑니다. button의 기본 type은 button이고 native Enter·Space·form·disabled 동작을 유지합니다. anchor에는 실제 href가 남고 fake disabled 상태를 제공하지 않습니다. 개발과 테스트에서는 whole-row action root를 DOM에 렌더한 뒤 nested interactive descendant를 검증합니다.

반응형 동작

모든 region은 min-inline-size: 0과 overflow-wrap: anywhere를 사용합니다. 긴 localized copy와 공백 없는 문자열은 320px viewport와 200% text zoom에서도 page overflow 없이 content-driven height로 줄바꿈됩니다.

접근성

native element가 제공하는 의미와 keyboard 동작을 ARIA로 재구현하지 않습니다. left와 ChevronRight는 accessible name에서 제외되고 title, description, right는 노출됩니다. interactive right child는 static branch에만 허용됩니다. focus ring과 indented divider는 forced colors에서도 system color로 남으며 static trailing Switch의 자체 system-color 처리를 방해하지 않습니다.

React 예제

import { ListRow, Switch } from '@hds/react';
import '@hds/react/styles.css';

export function NotificationSetting() {
  return (
    <ListRow
      description="주문 상태가 바뀌면 알려드려요."
      divider="indented"
      right={<Switch label="주문 알림" />}
      title="알림 설정"
    />
  );
}

API

사용 토큰

• geometry: size/control/large, size/icon/medium, space/0, space/2, space/4, space/8, space/12, space/16, radius/none
• type와 motion: font/family/sans, font/size/body-sm, font/size/body, font/weight/medium, font/line-height/body-sm, font/line-height/body, motion/duration/fast, motion/easing/standard
• color: color/bg/surface, color/text/primary, color/text/secondary, color/text/disabled, color/border/default, color/action/weak, color/action/weak-hover, color/focus/ring

Figma

live ListRow component set은 Divider None/Indented × State Default/Pressed/Disabled = 6 variants와 Title, Description, Right TEXT, Show left, Show description, Show right, Show arrow BOOLEAN, Left icon INSTANCE_SWAP properties를 가집니다. Left icon은 owned Icon/Info를 기본으로 하고 다섯 owned Icon을 preferred swap으로 제한하며, 별도의 owned Icon/ChevronRight는 회전하지 않습니다. static·button·link는 같은 시각 geometry를 공유하는 구현 동작입니다. TDS Mobile ListRow overview와 components reference를 참고하되 이 저장소는 native div·button·anchor overload와 strict nested-control 계약을 유지합니다.

지원 상태