PlAlert

일어난 일에 대한 메시지를, 그 일이 벌어진 페이지 안에 놓습니다. 한 줄짜리, 글리프가 붙은 한 줄짜리, 헤드라인과 그 아래 상세까지 세 가지 모양이 있는데, 서로 다른 자리가 채워진 하나의 컴포넌트입니다.

React

import { PlAlert } from 'plass-ui';

<PlAlert color="success">Your changes are live.</PlAlert>;
<PlAlert color="danger" title="The deploy failed">
  Two of the health checks never came back.
</PlAlert>;

import 'package:plass_ui/plass_ui.dart';

const PlAlert(color: PlassColor.success, child: Text('Your changes are live.'));
const PlAlert(
  color: PlassColor.danger,
  title: Text('The deploy failed'),
  child: Text('Two of the health checks never came back.'),
);

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'glass' | 'ghost'	'glass'	표면의 재질. alert는 색을 입는 대상 자체라서, 컨테이너와 달리 시트가 틴트를 받습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	글리프와 제목, 메시지의 타입 스케일과 여백
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'info'	심각도. 기본값이 primary가 아니라 info인 이유는, alert는 주요한 무언가가 아니라 알림이기 때문입니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
title	ReactNode	—	헤드라인. 주면 두 부분(헤드라인 + 아래의 상세)이 되고, 없으면 전체가 한 줄입니다
icon	ReactNode | false	—	앞머리의 글리프. 기본값은 color에 맞는 모양이고, false면 없애고, 노드를 주면 대체합니다
action	ReactNode	—	줄 끝에 고정되는 내용 — Retry 버튼, 링크. children 바깥이라 메시지가 줄바꿈돼도 첫 줄에 남습니다
onClose	(event) => void	—	이것을 주는 것이 닫기 버튼을 나타나게 합니다
closeLabel	string	'Dismiss'	닫기 버튼의 접근 가능한 이름. 화면에는 그려지지 않습니다
children	ReactNode	—	메시지

Prop	타입	기본값	설명
variant공통	PlassVariant	PlassVariant.glass	표면의 재질. alert는 색을 입는 대상 자체라서, 컨테이너와 달리 시트가 틴트를 받습니다
size공통	PlassSize	PlassSize.md	글리프와 제목, 메시지의 타입 스케일과 여백
color공통	PlassColor	PlassColor.info	심각도. 기본값이 primary가 아니라 info인 이유는, alert는 주요한 무언가가 아니라 알림이기 때문입니다
density공통	PlassDensity	PlassDensity.standard	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	int	0	그림자 깊이. 0은 그림자 없음
title	Widget?	—	헤드라인. 주면 두 부분(헤드라인 + 아래의 상세)이 되고, 없으면 전체가 한 줄입니다
icon	Widget?	—	앞머리의 글리프. 기본값은 color에 맞는 모양이고, false면 없애고, 노드를 주면 대체합니다
showIcon	bool	true	글리프를 그릴지. React는 icon={false}로 말하는 것을, null도 위젯도 아닌 값이 없는 언어에서 이름을 따로 두어 말합니다
action	Widget?	—	줄 끝에 고정되는 내용 — Retry 버튼, 링크. children 바깥이라 메시지가 줄바꿈돼도 첫 줄에 남습니다
onClose	VoidCallback?	—	이것을 주는 것이 닫기 버튼을 나타나게 합니다
closeLabel	String	'Dismiss'	닫기 버튼의 접근 가능한 이름. 화면에는 그려지지 않습니다
child	Widget?	—	메시지

네이티브 <div> 속성은 role을 포함해 그대로 전달됩니다. 아래 live region 항목을 보세요. color와 title은 둘 다 여기서는 Plass의 prop이라 전달 대상에서 제외됩니다.

icon은 Widget?이고 그 옆에 showIcon이 스위치로 있습니다. React는 둘을 세 갈래 prop 하나로 나타내는데, Dart에는 그럴 값이 없습니다. null이 있고 위젯이 있을 뿐, "치워라"에 해당하는 값이 없습니다.

라이브러리 전체에서 공유 축(variant size color density elevation)이 뜻하는 바는 prop 규칙에 있습니다.

Examples

variant

alert는 색을 입는 대상 자체입니다. 남의 내용을 담는 컨테이너가 아니라 심각도에 대한 알림이므로, PlCard와 달리 시트가 틴트를 받습니다.

solid는 색 계열의 그러데이션에 같은 계열의 그림자를 깔고, 채워진 PlButton이 그렇듯 gloss line은 없습니다. glass는 헤어라인과 글리프, 제목에 색 계열을 입습니다. ghost는 틴트뿐이며, form 필드들 사이에 놓여 사각형이 하나 더 늘어나면 안 되는 자리에 씁니다.

React

import { PlAlert } from 'plass-ui';

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      {(['solid', 'glass', 'ghost'] as const).map((variant) => (
        <PlAlert key={variant} variant={variant} color="info" title={variant}>
          The same alert, three materials deep.
        </PlAlert>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AlertVariants extends StatelessWidget {
  const AlertVariants({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          for (final variant in PlassVariant.values)
            PlAlert(
              variant: variant,
              title: Text(variant.name),
              child: const Text('The same alert, three materials deep.'),
            ),
        ],
      ),
    );
  }
}

color

기본값은 primary가 아니라 info입니다. primary가 틀리는 유일한 자리입니다. alert는 알림이고, 팔레트에는 이미 그것을 가리키는 단어가 있습니다.

각 계열은 자기 색만이 아니라 자기 모양도 그립니다. 빨간색으로만 "잘못됐다"고 알리는 alert는 일부 독자에게만 닿는 alert입니다.

React

import { PlAlert } from 'plass-ui';

const lines = {
  info: 'Maintenance is scheduled for Sunday.',
  success: 'The invoice was paid.',
  warning: 'Your card expires next month.',
  danger: 'The webhook has failed 12 times.'
} as const;

export default function AlertColors() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      {(Object.keys(lines) as (keyof typeof lines)[]).map((color) => (
        <PlAlert key={color} color={color}>
          {lines[color]}
        </PlAlert>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

const Map<PlassColor, String> _lines = <PlassColor, String>{
  PlassColor.info: 'Maintenance is scheduled for Sunday.',
  PlassColor.success: 'The invoice was paid.',
  PlassColor.warning: 'Your card expires next month.',
  PlassColor.danger: 'The webhook has failed 12 times.',
};

class AlertColors extends StatelessWidget {
  const AlertColors({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          for (final entry in _lines.entries) PlAlert(color: entry.key, child: Text(entry.value)),
        ],
      ),
    );
  }
}

세 가지 모양

맨 한 줄이면 icon={false}showIcon: false, 글리프가 붙은 한 줄이면 기본값, 헤드라인과 상세면 title에 본문. 셋 사이에서 표면은 아무것도 바뀌지 않습니다. 얼마나 쓰이는지만 다릅니다.

React

import { PlAlert } from 'plass-ui';

export default function AlertShapes() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <PlAlert icon={false}>A bare line, for a note among form fields.</PlAlert>
      <PlAlert>A line with the severity glyph — the default.</PlAlert>
      <PlAlert title="A headline">And the detail under it, in the muted ink.</PlAlert>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AlertShapes extends StatelessWidget {
  const AlertShapes({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 512,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          PlAlert(showIcon: false, child: Text('A bare line, for a note among form fields.')),
          PlAlert(child: Text('A line with the severity glyph — the default.')),
          PlAlert(
            title: Text('A headline'),
            child: Text('And the detail under it, in the muted ink.'),
          ),
        ],
      ),
    );
  }
}

action과 onClose

action은 메시지가 옆에서 줄바꿈되는 동안에도 첫 줄에 남습니다. 본문 뒤에 이어 붙이는 대신 자기 자리가 붙은 이유입니다.

onClose를 주는 것이 닫기 버튼을 나타나게 합니다. 컴포넌트가 스스로 사라지지는 않습니다. 닫혔을 때 무슨 일이 일어나는지는 호출하는 쪽의 몫이고, 알아서 사라진 alert는 언제 다시 나타나야 하는지 누군가 알려 줘야 합니다.

React

import { useState } from 'react';
import { PlAlert, PlButton } from 'plass-ui';

export default function AlertDismiss() {
  const [open, setOpen] = useState(true);

  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      {open ? (
        <PlAlert color="warning" title="Storage is nearly full" onClose={() => setOpen(false)}>
          92% of your quota is in use.
        </PlAlert>
      ) : (
        <PlButton size="sm" variant="glass" onClick={() => setOpen(true)}>
          Bring it back
        </PlButton>
      )}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AlertDismiss extends StatefulWidget {
  const AlertDismiss({super.key});

  @override
  State<AlertDismiss> createState() => _AlertDismissState();
}

class _AlertDismissState extends State<AlertDismiss> {
  bool _open = true;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Align(
        alignment: AlignmentDirectional.centerStart,
        child: _open
            ? PlAlert(
                color: PlassColor.warning,
                title: const Text('Storage is nearly full'),
                onClose: () => setState(() => _open = false),
                child: const Text('92% of your quota is in use.'),
              )
            : PlButton(
                size: PlassSize.sm,
                variant: PlassVariant.glass,
                onPressed: () => setState(() => _open = true),
                child: const Text('Bring it back'),
              ),
      ),
    );
  }
}

size

React

import { PlAlert } from 'plass-ui';

export default function AlertSizes() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      {(['sm', 'md', 'lg'] as const).map((size) => (
        <PlAlert key={size} size={size} color="info" title={`size="${size}"`}>
          The glyph, the title and the message move together.
        </PlAlert>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AlertSizes extends StatelessWidget {
  const AlertSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          for (final size in <PlassSize>[PlassSize.sm, PlassSize.md, PlassSize.lg])
            PlAlert(
              size: size,
              title: Text('size: ${size.name}'),
              child: const Text('The glyph, the title and the message move together.'),
            ),
        ],
      ),
    );
  }
}

Accessibility

• alert는 live region이고, 어느 쪽인지는 심각도가 정합니다. warning과 danger는 role="alert"로 스크린리더가 읽고 있던 것을 끊고, 나머지는 role="status"로 쉬는 지점을 기다립니다. "실패했다"는 끊을 만하고 "저장됐다"는 그렇지 않습니다.
• 직접 넘긴 role이 이깁니다. props가 기본값 뒤에 펼쳐집니다.
• 글리프는 장식이라 aria-hidden입니다. 심각도는 role과 모양, 색이 함께 나르며 색만으로 전달되지 않습니다.
• 글리프는 1lh로 메시지의 첫 줄에 맞춰 놓입니다. 세 줄짜리 alert도 글리프는 위쪽에 있습니다.
• action과 닫기 버튼은 각자 tab stop이 붙은 진짜 버튼입니다. action에는 접근 가능한 이름을 주세요. 닫기 버튼은 이미 있습니다.

• 끊을지 말지는 심각도가 정합니다. warning과 danger는 live region이라 나타나는 순간 알려지고, 나머지는 읽는 사람이 거기 닿았을 때 읽힙니다. "실패했다"는 끊을 만하고 "저장됐다"는 그렇지 않습니다.
• Flutter에는 정중함 단계가 둘이 아니라 live region 하나뿐이라, React 빌드가 role="alert"와 role="status"로 말하는 것이 여기서는 live region인가 아닌가가 됩니다.
• 글리프는 semantics에서 제외됩니다. 심각도는 모양과 색이 함께 나르며 색만으로 전달되지 않습니다.
• 글리프는 메시지의 첫 줄에 맞춰 놓입니다(타입 스케일이 무엇이든 그 줄 상자 높이의 상자 안에). 그래서 세 줄짜리 alert도 글리프는 위쪽에 있습니다.
• action과 닫기 버튼은 각자 focus stop을 가집니다. action에는 이름을 주세요. 닫기 버튼은 이미 있습니다.

React 빌드와 다른 점

React	Flutter	이유
role="alert" / role="status"	live region이거나 아니거나	Flutter에는 live region 플래그 하나가 있을 뿐 정중함 단계가 없습니다. 정하는 것은 여전히 심각도이고, 정할 수 있는 폭이 좁습니다.
직접 넘긴 role이 이김	—	덮어쓸 role이 없습니다. 다른 semantics가 필요한 호출자는 alert를 자기 Semantics로 감쌉니다.
icon={false}	showIcon: false	Dart에는 null도 위젯도 아닌 값이 없으니, "치워라"가 자기 이름을 갖습니다.
children	child	Flutter의 이름입니다.
className, style	—	전달할 클래스 목록도 style 속성도 없습니다.