tessl/npm-mui--lab

Laboratory for new Material UI modules - hosts incubator components that are not yet ready to move to core

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Timeline System

Name: tessl/npm-mui--lab
Author: tessl

Complete timeline component system for displaying chronological information with flexible positioning, styling, and content organization. Components work together to create rich temporal displays.

Capabilities

Timeline Container

Main container component that establishes timeline structure and positioning context.

/**
 * Timeline container component rendered as unordered list
 * @param props - Timeline configuration props
 * @returns Timeline container element
 */
function Timeline(props: TimelineProps): JSX.Element;

interface TimelineProps extends StandardProps<React.ComponentProps<'ul'>> {
  /** Position of timeline items relative to the timeline axis (default: 'right') */
  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
  /** TimelineItem child components */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineClasses>;
  /** Additional CSS class name */
  className?: string;
  /** System prop for styling */
  sx?: SxProps<Theme>;
}

interface TimelineClasses {
  /** Class applied to the root ul element */
  root: string;
  /** Class applied when position is 'left' */
  positionLeft: string;
  /** Class applied when position is 'right' */
  positionRight: string;
  /** Class applied when position is 'alternate' */
  positionAlternate: string;
  /** Class applied when position is 'alternate-reverse' */
  positionAlternateReverse: string;
}

Usage Example:

import React from 'react';
import {
  Timeline,
  TimelineItem,
  TimelineSeparator,
  TimelineConnector,
  TimelineContent,
  TimelineDot
} from '@mui/lab';

function BasicTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>First Event</TimelineContent>
      </TimelineItem>
      
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Second Event</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

TimelineItem

Individual timeline item wrapper that contains separators and content.

/**
 * Individual timeline item rendered as list item  
 * @param props - Timeline item props
 * @returns Timeline item element
 */
function TimelineItem(props: TimelineItemProps): JSX.Element;

interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
  /** Override timeline position for this specific item */
  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
  /** Child components (TimelineSeparator, TimelineContent, etc.) */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineItemClasses>;
  /** System prop for styling */
  sx?: SxProps<Theme>;
}

interface TimelineItemClasses {
  /** Class applied to the root li element */
  root: string;
  /** Class applied when position is 'left' */
  positionLeft: string;
  /** Class applied when position is 'right' */
  positionRight: string;
  /** Class applied when position is 'alternate' */
  positionAlternate: string;
  /** Class applied when position is 'alternate-reverse' */
  positionAlternateReverse: string;
  /** Class applied to opposite content side */
  missingOppositeContent: string;
}

TimelineContent

Content area for timeline items, extends Material-UI Typography component.

/**
 * Content container for timeline items, extends Typography
 * @param props - Timeline content props extending Typography
 * @returns Styled typography element for timeline content
 */
function TimelineContent(props: TimelineContentProps): JSX.Element;

interface TimelineContentProps extends StandardProps<TypographyProps> {
  /** Content to display in timeline item */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineContentClasses>;
  /** System prop for styling */
  sx?: SxProps<Theme>;
}

interface TimelineContentClasses {
  /** Class applied to the root Typography element */
  root: string;
  /** Class applied when positioned on right side */
  positionRight: string;
  /** Class applied when positioned on left side */
  positionLeft: string;
  /** Class applied in alternate positioning */
  positionAlternate: string;
  /** Class applied in alternate-reverse positioning */
  positionAlternateReverse: string;
}

TimelineDot

Dot or icon element that appears on the timeline axis.

/**
 * Timeline dot/icon element rendered as span
 * @param props - Timeline dot styling and content props
 * @returns Styled dot element
 */
function TimelineDot(props: TimelineDotProps): JSX.Element;

interface TimelineDotProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>> {
  /** Content to display inside dot (icon, text, etc.) */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineDotClasses>;
  /** Color theme for the dot (default: 'grey') */
  color?: 'inherit' | 'grey' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
  /** System prop for styling */
  sx?: SxProps<Theme>;
  /** Visual style variant (default: 'filled') */
  variant?: 'filled' | 'outlined';
}

interface TimelineDotClasses {
  /** Class applied to the root span element */
  root: string;
  /** Classes for different color variants */
  colorGrey: string;
  colorInherit: string;
  colorPrimary: string;
  colorSecondary: string;
  colorError: string;
  colorInfo: string;
  colorSuccess: string;
  colorWarning: string;
  /** Classes for variant styles */
  variantFilled: string;
  variantOutlined: string;
}

TimelineConnector

Connecting line between timeline items.

/**
 * Connecting line between timeline dots rendered as span
 * @param props - Timeline connector props
 * @returns Styled connector line element
 */
function TimelineConnector(props: TimelineConnectorProps): JSX.Element;

interface TimelineConnectorProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>> {
  /** Optional content (typically none for simple line) */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineConnectorClasses>;
  /** System prop for styling */
  sx?: SxProps<Theme>;
}

interface TimelineConnectorClasses {
  /** Class applied to the root span element */
  root: string;
}

TimelineSeparator

Container for timeline dot and connector elements.

/**
 * Container for dot and connector elements rendered as div
 * @param props - Timeline separator props
 * @returns Container for timeline axis elements
 */
function TimelineSeparator(props: TimelineSeparatorProps): JSX.Element;

interface TimelineSeparatorProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
  /** Child components (typically TimelineDot and TimelineConnector) */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineSeparatorClasses>;
  /** System prop for styling */
  sx?: SxProps<Theme>;
}

interface TimelineSeparatorClasses {
  /** Class applied to the root div element */
  root: string;
}

TimelineOppositeContent

Content displayed on the opposite side of the timeline from the main content.

/**
 * Content for opposite side of timeline, extends Typography
 * @param props - Timeline opposite content props
 * @returns Typography element for opposite timeline content
 */
function TimelineOppositeContent(props: TimelineOppositeContentProps): JSX.Element;

interface TimelineOppositeContentProps extends StandardProps<TypographyProps> {
  /** Content to display on opposite side */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TimelineOppositeContentClasses>;
  /** System prop for styling */
  sx?: SxProps<Theme>;
}

interface TimelineOppositeContentClasses {
  /** Class applied to the root Typography element */
  root: string;
  /** Class applied when positioned on right side */
  positionRight: string;
  /** Class applied when positioned on left side */
  positionLeft: string;
  /** Class applied in alternate positioning */
  positionAlternate: string;
  /** Class applied in alternate-reverse positioning */
  positionAlternateReverse: string;
}

Timeline Patterns

Basic Timeline

import {
  Timeline,
  TimelineItem,
  TimelineSeparator,
  TimelineConnector,
  TimelineContent,
  TimelineDot
} from '@mui/lab';

function BasicTimeline() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

Timeline with Colors and Icons

import {
  Timeline,
  TimelineItem,
  TimelineSeparator,
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineOppositeContent
} from '@mui/lab';
import {
  FastfoodIcon,
  LaptopMacIcon,
  HotelIcon,
  RepeatIcon
} from '@mui/icons-material';

function ColoredTimeline() {
  return (
    <Timeline position="alternate">
      <TimelineItem>
        <TimelineOppositeContent color="text.secondary">
          09:30 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot color="primary">
            <FastfoodIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      
      <TimelineItem>
        <TimelineOppositeContent color="text.secondary">
          10:00 am
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot color="success">
            <LaptopMacIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

CSS Classes

// Available CSS class objects
const timelineClasses: TimelineClasses;
const timelineItemClasses: TimelineItemClasses;
const timelineContentClasses: TimelineContentClasses;
const timelineDotClasses: TimelineDotClasses;
const timelineConnectorClasses: TimelineConnectorClasses;
const timelineSeparatorClasses: TimelineSeparatorClasses;
const timelineOppositeContentClasses: TimelineOppositeContentClasses;