Popconfirm

그 질문을 띄운 컨트롤 옆에서 묻습니다. Confirm의 작은 형제로, 결과가 페이지 전체가 아니라 그 줄에 머무는 행동을 위한 것입니다.

import { IconButton, Popconfirm } from 'neba';

<Popconfirm
  title="이 도메인을 제거할까요?"
  description="즉시 응답을 멈춥니다."
  onConfirm={() => remove(id)}
  trigger={<IconButton label="제거" icon={<TrashIcon />} />}
/>;

Props

Prop	타입	기본값	설명
trigger	ReactElement	—	질문이 매달리고, 질문을 띄우는 컨트롤. ref와 props spread를 받는 element 하나, Neba 컴포넌트는 모두 됩니다
title	ReactNode	—	질문
description	ReactNode	—	답의 대가. 제목을 다시 쓰는 자리가 아니라 결과를 적는 자리입니다
onConfirm	() => void | Promise<unknown>	—	확인했을 때. promise를 반환하면 그것이 settle될 때까지 버블이 떠 있고 확인 버튼이 busy로 남습니다. 답이 닿기 전에 사라진 질문은 전달됐는지 알 수 없는 질문입니다
onCancel	() => void	—	취소했을 때. Escape나 바깥 클릭으로 닫는 것은 여기 해당하지 않습니다. 물러나는 것과 아니오라고 답하는 것은 다른 행동입니다
confirmLabel	ReactNode	—	확인 버튼의 라벨. 기본값은 로케일의 단어
cancelLabel	ReactNode	—	취소 버튼의 라벨
color	NebaColor	'danger'	색 계열. Popconfirm이 보통 하는 일이 무언가를 없애는 것이라 기본값이 danger입니다
size	NebaSize	'sm'	버블과 두 버튼의 크기 단계
icon	ReactNode | false	true	색 계열의 severity 마크를 질문 옆에 그립니다. 장식이 아니라 의미를 모양으로도 말하는 것, 빨간색으로만 말하면 일부 독자에게만 말하는 셈입니다
side	'top' | 'bottom' | 'start' | 'end'	'top'	trigger의 어느 쪽에 앉을지. 어떤 줄에 대한 질문은 아래 줄을 덮는 것보다 위에 있는 편이 읽기 쉽습니다
align	'start' | 'center' | 'end'	'center'	그 변을 따라 어디에 맞출지
open	boolean	—	버블이 열려 있는지. onOpenChange와 함께 제어 컴포넌트로 씁니다
defaultOpen	boolean	false	처음에 열린 채로 시작
onOpenChange	(open: boolean) => void	—	열리거나 닫힐 때
locale	string	—	두 기본 라벨을 정하는 BCP 47 태그. 기본값은 브라우저의 로케일
width	number | string	280	버블의 너비
classNames	NebaSlots<'icon' | 'title' | 'description' | 'actions'>	—	루트 뒤에 있는 각 파트의 class. 루트 자체는 className이 맡으므로 root 키는 없습니다

어느 쪽을 쓸까

Confirm과의 차이는 위험도나 크기가 아니라 범위입니다.

	쓸 것
결과가 이 줄, 이 파일, 이 태그에 머문다	Popconfirm
결과가 화면에 보이는 것 너머까지 미친다	Confirm

Popconfirm은 자기를 띄운 것에 붙어 있으므로 독자가 지우려는 대상을 계속 볼 수 있습니다. 작은 행동에 모달이 무겁게 느껴지는 이유의 대부분이 바로 그 맥락을 잃는 것입니다. Confirm은 페이지를 가져가는데, 일어날 일이 그 페이지보다 클 때 그것이 맞습니다.

예시

onConfirm과 비동기 작업

버블은 클릭할 때가 아니라 onConfirm이 settle될 때 닫힙니다. promise를 반환하면 작업이 끝날 때까지 확인 버튼이 busy 상태로 남은 채 버블이 떠 있습니다.

<Popconfirm title="키를 폐기할까요?" onConfirm={() => api.revoke(id)} trigger={…} />

답이 도착하기도 전에 사라진 질문은, 독자가 그 답이 전달됐는지 알 방법이 없는 질문입니다.

onCancel과 dismiss

onCancel은 취소 버튼에서만 호출되고 Escape나 바깥 클릭에서는 호출되지 않습니다. 질문에서 그냥 물러나는 것과 아니오라고 답하는 것은 다른 행동이고, onCancel에서 무언가를 되돌리는 호출자가 Escape를 누를 때마다 그것을 되돌려서는 안 됩니다.

color와 icon

color의 기본값은 danger입니다. Popconfirm은 보통 그런 용도이기 때문입니다. icon은 그 계열의 severity 마크를 질문 옆에 그립니다.

이 마크는 기본으로 켜져 있고 장식이 아닙니다. "이것은 파괴적입니다"를 빨간색으로만 말하는 질문은 일부 독자에게만 말하는 것이므로, 모양이 의미를 함께 지녀야 합니다. 직접 만든 노드를 넘기거나 false로 끌 수 있습니다.

side와 align

버블이 trigger에 대해 어디에 앉을지를, Popover · Tooltip과 같은 어휘로 정합니다. 기본값은 top입니다. 어떤 줄에 관한 질문은 아래 줄을 덮는 것보다 그 위에 있는 편이 읽기 쉽기 때문입니다.

접근성

• Popover를 그리므로 focus가 버블 안으로 들어갔다가 닫힐 때 trigger로 돌아옵니다.
• Escape와 바깥 클릭은 답하지 않고 닫습니다.
• trigger에는 자기 accessible name이 필요합니다. 아이콘만 있는 trigger는 맨 글리프가 아니라 label을 가진 IconButton이어야 합니다.
• severity 마크에는 aria-hidden이 붙습니다. 이미 글이 말한 것을 되풀이할 뿐이고, 그것이 온 색 계열은 스크린 리더가 쓸 수 있는 정보가 아니기 때문입니다.