상태 표현 언어

구성

상태 pill은 10px glyph disc와 Geist Mono 11px label로 구성됩니다. 자간은 0.04em입니다. 같은 축의 값과 그 label을 사용하며 외형만 바꿔 다른 상태처럼 보이게 하지 않습니다.

선으로 실제와 의도를 구분합니다

이미 존재하는 상태는 실선, 제안·대기처럼 의도된 상태는 점선 역할을 사용합니다. 이 구분도 label을 대신하지 않습니다.

강조에서 평상시로

settleLit()를 사용합니다. 약 1.1초의 강조 후 배경과 선만 잦아들며 글자와 위치는 움직이지 않습니다. 변경이 반복되어도 상태의 의미를 바꾸지 않습니다.

전체 상태 값

아래 예제는 공용 상태 맵입니다. 서로 다른 축을 하나의 성공·실패 단계로 합치지 않습니다. 특히 outcome-unknown은 결과를 모른다는 뜻이지 실패나 성공이 아닙니다.

사용과 회피

• 지금 적용한 결과는 Applied, 그 범위를 읽어 확인한 뒤에만 Verified로 표시합니다.
• 아직 결과가 미확정인 대상은 정지된 표시로 남깁니다. 실제 요청이 진행 중일 때만 spinner를 사용합니다.
• 검증의 label에는 확인한 범위를 남깁니다. 일부 대상의 검증을 전체 업무 해결로 표현하지 않습니다.

코드

직접 glyph와 색을 조합하는 대신 statusMark() 또는 등록된 상태 요소를 사용합니다. 값의 출처는 계약 필드여야 합니다.

import { statusMark } from '@lyotic/components';
statusMark({ axis: 'execution', value: 'outcome-unknown', label: 'Amazon · outcome unknown', lit: true });
// throws if the value is not a legal value of the axis

<ly-status axis="verification" value="verified">Verified · 4 of 5 checks</ly-status>