Dialog Usage

사용자에게 정보를 제공하거나 필드를 동반한 정보 요구, 또는 특정 액션에 대한 사용자의 의사를 확인합니다.

Layout

Spacing

Dialog 사이즈에 관계없이 내부 요소 간의 간격은 동일하게 적용합니다.

Placement

Dialog는 화면의 정중앙에 위치합니다. 배치 시 scrim을 적용해서 dialog 액션에 집중할 수 있게 합니다.

Behaviors

Closing Dialog

사용자 입력이 없는 경우 (수정사항 미 존재)

Dialog의 바깥 영역을 클릭하거나 esc 키를 누르면 Cancel 버튼을 누르는 것과 동일하게 dialog를 즉시 종료합니다.

사용자 입력이 있는 경우 (수정사항 존재)

Dialog의 바깥 영역을 클릭하거나 esc 키를 누르면 confirmation dialog를 보여주고, Proceed를 누르면 종료합니다. Cancel을 누르면 종료를 취소합니다.

Confirmation / Form Submission

1) Dialog 내 Form이 없는 경우

enter 키를 누르면 primary button을 누르는 것과 동일하게 OK, Delete 등 dialog에서 prompt 하는 액션을 수행합니다.

2) Dialog 내 Form이 있고 primary 버튼이 비활성화 된 경우 (모든 required field가 채워지지 않은 경우)

enter 키를 눌러도 primary button이 비활성화 되어있기 때문에 Add, Save 등 dialog에서 prompt 하는 액션을 수행할 수 없습니다.

3) Dialog 내 Form이 있고 primary 버튼이 활성화 된 경우

enter 키를 누르면 primary button을 누르는 것과 동일하게 Add, Save 등 dialog에서 prompt 하는 액션을 수행합니다.