Components for showing progress, status, and system feedback to users including progress indicators, status messages, and illustrated content.
Linear progress indicator for showing completion status of operations.
/**
* Linear progress indicator for operation completion status
* @param props - ProgressBar configuration and value properties
* @returns JSX element as linear progress indicator
*/
function ProgressBar(props: SpectrumProgressBarProps): JSX.Element;
interface SpectrumProgressBarProps extends DOMProps, StyleProps {
/** Progress bar label */
label?: React.ReactNode;
/** Current progress value */
value?: number;
/** Minimum progress value */
minValue?: number;
/** Maximum progress value */
maxValue?: number;
/** Whether to show value label */
showValueLabel?: boolean;
/** Value label position */
labelPosition?: "top" | "side";
/** Number formatting options for value display */
formatOptions?: Intl.NumberFormatOptions;
/** Custom value formatter */
valueLabel?: React.ReactNode;
/** Progress bar size */
size?: "S" | "M" | "L";
/** Progress bar variant */
variant?: "default" | "overBackground";
/** Static color for specific backgrounds */
staticColor?: "white" | "black";
/** Whether progress is indeterminate */
isIndeterminate?: boolean;
/** Whether progress bar is disabled */
isDisabled?: boolean;
}Circular progress indicator for showing completion status in constrained spaces.
/**
* Circular progress indicator for constrained spaces
* @param props - ProgressCircle configuration and styling properties
* @returns JSX element as circular progress indicator
*/
function ProgressCircle(props: SpectrumProgressCircleProps): JSX.Element;
interface SpectrumProgressCircleProps extends DOMProps, StyleProps {
/** Current progress value */
value?: number;
/** Minimum progress value */
minValue?: number;
/** Maximum progress value */
maxValue?: number;
/** Number formatting options */
formatOptions?: Intl.NumberFormatOptions;
/** Custom value label */
valueLabel?: React.ReactNode;
/** Progress circle size */
size?: "S" | "M" | "L";
/** Progress circle variant */
variant?: "default" | "overBackground";
/** Static color for specific backgrounds */
staticColor?: "white" | "black";
/** Whether progress is indeterminate */
isIndeterminate?: boolean;
/** Whether progress circle is disabled */
isDisabled?: boolean;
}Display component for showing measurement values with optional thresholds.
/**
* Meter for displaying measurement values with thresholds
* @param props - Meter configuration and threshold properties
* @returns JSX element as measurement meter
*/
function Meter(props: SpectrumMeterProps): JSX.Element;
interface SpectrumMeterProps extends DOMProps, StyleProps {
/** Meter label */
label?: React.ReactNode;
/** Current meter value */
value: number;
/** Minimum meter value */
minValue?: number;
/** Maximum meter value */
maxValue?: number;
/** Whether to show value label */
showValueLabel?: boolean;
/** Value label position */
labelPosition?: "top" | "side";
/** Number formatting options */
formatOptions?: Intl.NumberFormatOptions;
/** Custom value label */
valueLabel?: React.ReactNode;
/** Meter size */
size?: "S" | "M" | "L";
/** Meter variant for semantic meaning */
variant?: "informative" | "positive" | "notice" | "negative";
/** Static color for specific backgrounds */
staticColor?: "white" | "black";
/** Whether meter is disabled */
isDisabled?: boolean;
}Inline notification component for contextual messages and status updates.
/**
* Inline notification for contextual messages
* @param props - InlineAlert content and variant properties
* @returns JSX element as inline notification
*/
function InlineAlert(props: SpectrumInlineNotificationProps): JSX.Element;
interface SpectrumInlineNotificationProps extends DOMProps, StyleProps {
/** Alert content */
children: React.ReactNode;
/** Alert variant for semantic meaning */
variant?: "neutral" | "informative" | "positive" | "notice" | "negative";
/** Auto-dismiss after timeout (ms) */
autoHideDelay?: number;
/** Header/title content */
header?: React.ReactNode;
/** Action button configuration */
actionButton?: React.ReactElement;
/** Whether alert can be dismissed */
isDismissible?: boolean;
/** Dismiss handler */
onDismiss?: () => void;
/** Auto-dismiss handler */
onAutoHide?: () => void;
}Component for displaying empty states, errors, and informational content with illustrations.
/**
* Illustrated message for empty states and informational content
* @param props - IllustratedMessage content and illustration properties
* @returns JSX element as illustrated message
*/
function IllustratedMessage(props: SpectrumIllustratedMessageProps): JSX.Element;
interface SpectrumIllustratedMessageProps extends DOMProps, StyleProps {
/** Message content */
children: React.ReactNode;
/** Illustration to display */
illustration?: React.ReactNode;
/** Message heading */
heading?: React.ReactNode;
/** Message description */
description?: React.ReactNode;
/** Size of the illustrated message */
size?: "S" | "M" | "L";
}function FileUploadProgress({ files, onCancel }) {
return (
<View>
<Heading level={4}>Uploading Files</Heading>
{files.map(file => (
<div key={file.id}>
<ProgressBar
label={file.name}
value={file.progress}
maxValue={100}
showValueLabel
formatOptions={{ style: 'percent', maximumSignificantDigits: 3 }}
/>
<Text slot="description">
{file.status === 'uploading' && 'Uploading...'}
{file.status === 'complete' && 'Upload complete'}
{file.status === 'error' && 'Upload failed'}
</Text>
</div>
))}
<ButtonGroup marginTop="size-200">
<Button variant="secondary" onPress={onCancel}>Cancel All</Button>
</ButtonGroup>
</View>
);
}function SystemStatusDashboard({ metrics }) {
return (
<Grid columns="repeat(2, 1fr)" gap="size-300">
<View>
<Heading level={4}>CPU Usage</Heading>
<Meter
label="Current"
value={metrics.cpu}
maxValue={100}
variant={metrics.cpu > 80 ? 'negative' : metrics.cpu > 60 ? 'notice' : 'positive'}
showValueLabel
formatOptions={{ style: 'percent' }}
/>
</View>
<View>
<Heading level={4}>Memory Usage</Heading>
<ProgressCircle
value={metrics.memory}
maxValue={100}
variant={metrics.memory > 90 ? 'negative' : 'default'}
size="L"
valueLabel={`${metrics.memory}%`}
/>
</View>
<View>
<Heading level={4}>Disk Space</Heading>
<Meter
label="Used"
value={metrics.diskUsed}
maxValue={metrics.diskTotal}
variant={metrics.diskUsed / metrics.diskTotal > 0.9 ? 'negative' : 'informative'}
showValueLabel
formatOptions={{ style: 'unit', unit: 'gigabyte' }}
/>
</View>
<View>
<Heading level={4}>Network</Heading>
<ProgressBar
label="Bandwidth"
value={metrics.bandwidth}
maxValue={1000}
isIndeterminate={metrics.networkStatus === 'connecting'}
showValueLabel
/>
</View>
</Grid>
);
}function StatusMessages({ messages, onDismiss }) {
return (
<View>
{messages.map(message => (
<InlineAlert
key={message.id}
variant={message.type}
isDismissible
onDismiss={() => onDismiss(message.id)}
header={message.title}
autoHideDelay={message.autoHide ? 5000 : undefined}
>
{message.content}
{message.actionLabel && (
<Button
variant="secondary"
size="S"
onPress={message.onAction}
>
{message.actionLabel}
</Button>
)}
</InlineAlert>
))}
</View>
);
}function EmptyDataState({ onRefresh, onCreateNew }) {
return (
<IllustratedMessage
illustration={<Icon src={EmptyFolderIcon} size="XXL" />}
heading="No data available"
description="There are no items to display. Create your first item or refresh to check for updates."
>
<ButtonGroup>
<Button variant="secondary" onPress={onRefresh}>
<Icon src={RefreshIcon} />
<Text>Refresh</Text>
</Button>
<Button variant="accent" onPress={onCreateNew}>
<Icon src={AddIcon} />
<Text>Create New</Text>
</Button>
</ButtonGroup>
</IllustratedMessage>
);
}function LoadingStates() {
const [isLoading, setIsLoading] = useState(false);
const [progress, setProgress] = useState(0);
const handleDataLoad = async () => {
setIsLoading(true);
setProgress(0);
for (let i = 0; i <= 100; i += 10) {
setProgress(i);
await new Promise(resolve => setTimeout(resolve, 200));
}
setIsLoading(false);
};
return (
<View>
<ButtonGroup marginBottom="size-300">
<Button onPress={handleDataLoad} isDisabled={isLoading}>
Load Data
</Button>
</ButtonGroup>
{isLoading && (
<View>
<ProgressBar
label="Loading data..."
value={progress}
maxValue={100}
showValueLabel
/>
<Flex gap="size-200" marginTop="size-200">
<ProgressCircle size="S" isIndeterminate />
<Text>Processing...</Text>
</Flex>
</View>
)}
{!isLoading && progress === 100 && (
<InlineAlert variant="positive">
Data loaded successfully!
</InlineAlert>
)}
</View>
);
}/** Progress value range */
interface ProgressRange {
/** Current value */
value?: number;
/** Minimum value */
minValue?: number;
/** Maximum value */
maxValue?: number;
}
/** Label positioning options */
type LabelPosition = "top" | "side";
/** Progress size variants */
type ProgressSize = "S" | "M" | "L";
/** Progress variant styles */
type ProgressVariant = "default" | "overBackground";
/** Static color options */
type StaticColor = "white" | "black";/** Status variant types for semantic meaning */
type StatusVariant = "neutral" | "informative" | "positive" | "notice" | "negative";
/** Meter variant types */
type MeterVariant = "informative" | "positive" | "notice" | "negative";
/** Alert auto-hide configuration */
interface AutoHideConfig {
/** Delay before auto-hide (ms) */
delay: number;
/** Auto-hide handler */
onAutoHide?: () => void;
}/** Illustrated message size options */
type IllustratedMessageSize = "S" | "M" | "L";
/** Illustration content types */
type IllustrationContent = React.ReactNode;