CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-office-ui-fabric-react

Comprehensive React component library implementing Microsoft's Fluent Design System for building Office 365 experiences

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

layout-components.mddocs/

Layout Components

Flexible layout system including Stack for flexbox layouts, Grid for CSS grid layouts, and responsive container components for building consistent application structures.

Capabilities

Stack

Flexbox-based layout container with design token integration for consistent spacing and alignment.

/**
 * Flexbox layout container with design token support
 */
function Stack(props: IStackProps): JSX.Element;

/**
 * Individual item within a Stack container
 */
function StackItem(props: IStackItemProps): JSX.Element;

interface IStackProps {
  /** Element type to render as */
  as?: React.ElementType;
  /** Whether to use horizontal layout (row) instead of vertical (column) */
  horizontal?: boolean;
  /** Whether to reverse the direction */
  reversed?: boolean;
  /** Horizontal alignment of items */
  horizontalAlign?: Alignment;
  /** Vertical alignment of items */
  verticalAlign?: Alignment;
  /** Whether to fill available vertical space */
  verticalFill?: boolean;
  /** Whether to disable shrinking of items */
  disableShrink?: boolean;
  /** Whether to allow wrapping */
  wrap?: boolean;
  /** Gap between items (can use design tokens) */
  gap?: number | string;
  /** Padding around the container */
  padding?: number | string;
  /** Maximum width of the container */
  maxWidth?: number | string;
  /** Design tokens for consistent spacing */
  tokens?: IStackTokens;
  /** Whether to grow items to fill space */
  grow?: boolean | number;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IStackStyleProps, IStackStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** Child elements */
  children?: React.ReactNode;
}

interface IStackItemProps {
  /** Element type to render as */
  as?: React.ElementType;
  /** Whether the item should grow to fill space */
  grow?: boolean | number;
  /** Whether the item should shrink */
  shrink?: boolean | number;
  /** Whether to disable shrinking */
  disableShrink?: boolean;
  /** Alignment override for this item */
  align?: "auto" | "stretch" | "baseline" | "start" | "center" | "end";
  /** Order of the item */
  order?: number;
  /** Design tokens for this item */
  tokens?: IStackItemTokens;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IStackItemStyleProps, IStackItemStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** Child elements */
  children?: React.ReactNode;
}

interface IStackTokens {
  /** Gap between child items */
  childrenGap?: number | string;
  /** Maximum height of the container */
  maxHeight?: number | string;
  /** Maximum width of the container */
  maxWidth?: number | string;
  /** Padding around the container */
  padding?: number | string | IStackTokens;
}

interface IStackItemTokens {
  /** Margin around the item */
  margin?: number | string | IStackItemTokens;
  /** Padding within the item */
  padding?: number | string | IStackItemTokens;
}

type Alignment = 
  | "start" 
  | "end" 
  | "center" 
  | "space-between" 
  | "space-around" 
  | "space-evenly" 
  | "baseline" 
  | "stretch";

Usage Examples:

import React from "react";
import { Stack, StackItem } from "office-ui-fabric-react";

function BasicStack() {
  return (
    <Stack tokens={{ childrenGap: 10 }}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}

function HorizontalStack() {
  return (
    <Stack 
      horizontal 
      tokens={{ childrenGap: 15 }}
      horizontalAlign="space-between"
      verticalAlign="center"
    >
      <span>Left item</span>
      <span>Center item</span>
      <span>Right item</span>
    </Stack>
  );
}

function ResponsiveStack() {
  return (
    <Stack 
      tokens={{ 
        childrenGap: 20,
        padding: 16 
      }}
      styles={{
        root: {
          maxWidth: 600,
          margin: "0 auto",
          border: "1px solid #ddd",
          borderRadius: 4
        }
      }}
    >
      <StackItem>
        <h2>Header</h2>
      </StackItem>
      
      <StackItem grow>
        <p>This item will grow to fill available space.</p>
      </StackItem>
      
      <StackItem align="end">
        <button>Action Button</button>
      </StackItem>
    </Stack>
  );
}

function NestedStacks() {
  return (
    <Stack tokens={{ childrenGap: 20 }}>
      <Stack 
        horizontal 
        tokens={{ childrenGap: 10 }}
        horizontalAlign="space-between"
      >
        <span>Navigation</span>
        <span>User Menu</span>
      </Stack>
      
      <Stack horizontal tokens={{ childrenGap: 15 }}>
        <StackItem styles={{ root: { width: 200 } }}>
          <div>Sidebar</div>
        </StackItem>
        
        <StackItem grow>
          <div>Main Content Area</div>
        </StackItem>
      </Stack>
    </Stack>
  );
}

Fabric

Root application wrapper component that provides theme context to all child components.

/**
 * Root application wrapper providing theme context
 */
function Fabric(props: IFabricProps): JSX.Element;

interface IFabricProps {
  /** Element type to render as */
  as?: React.ElementType;
  /** Theme to provide to child components */
  theme?: IPartialTheme;
  /** Whether to apply global styles */
  applyTheme?: boolean;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;
  /** Additional CSS class */
  className?: string;
  /** Direction for text (ltr or rtl) */
  dir?: "ltr" | "rtl";
  /** Child elements */
  children?: React.ReactNode;
}

Usage Examples:

import React from "react";
import { Fabric, createTheme, IPartialTheme } from "office-ui-fabric-react";

function AppWithTheme() {
  const customTheme: IPartialTheme = {
    palette: {
      themePrimary: "#0078d4",
      themeLighterAlt: "#eff6fc",
      themeLighter: "#deecf9",
      themeLight: "#c7e0f4",
      themeTertiary: "#71afe5",
      themeSecondary: "#2b88d8",
      themeDarkAlt: "#106ebe",
      themeDark: "#005a9e",
      themeDarker: "#004378"
    }
  };

  return (
    <Fabric theme={customTheme}>
      <div>Your application content here</div>
    </Fabric>
  );
}

function BasicFabricWrapper() {
  return (
    <Fabric>
      <div>Application with default theme</div>
    </Fabric>
  );
}

Grid

CSS Grid layout component for complex two-dimensional layouts.

/**
 * CSS Grid layout component for complex layouts
 */
function Grid(props: IGridProps): JSX.Element;

interface IGridProps {
  /** Element type to render as */
  as?: React.ElementType;
  /** CSS grid-template-columns value */
  columns?: string;
  /** CSS grid-template-rows value */
  rows?: string;
  /** CSS grid-gap value */
  gap?: string | number;
  /** CSS grid-column-gap value */
  columnGap?: string | number;
  /** CSS grid-row-gap value */
  rowGap?: string | number;
  /** CSS grid-template-areas value */
  areas?: string;
  /** CSS grid-auto-columns value */
  autoColumns?: string;
  /** CSS grid-auto-rows value */
  autoRows?: string;
  /** CSS grid-auto-flow value */
  autoFlow?: "row" | "column" | "row dense" | "column dense";
  /** CSS justify-items value */
  justifyItems?: "start" | "end" | "center" | "stretch";
  /** CSS align-items value */
  alignItems?: "start" | "end" | "center" | "stretch" | "baseline";
  /** CSS justify-content value */
  justifyContent?: "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly";
  /** CSS align-content value */
  alignContent?: "start" | "end" | "center" | "stretch" | "space-around" | "space-between" | "space-evenly";
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IGridStyleProps, IGridStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** Child elements */
  children?: React.ReactNode;
}

Separator

Visual divider component for creating sections and grouping related content.

/**
 * Visual divider component for content separation
 */
function Separator(props: ISeparatorProps): JSX.Element;

interface ISeparatorProps {
  /** Element type to render as */
  as?: React.ElementType;
  /** Whether the separator is vertical instead of horizontal */
  vertical?: boolean;
  /** Alignment of content within the separator */
  alignContent?: "start" | "center" | "end";
  /** Custom styles */
  styles?: IStyleFunctionOrObject<ISeparatorStyleProps, ISeparatorStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
  /** Child content (usually text) */
  children?: React.ReactNode;
}

Divider

Content divider with optional text label for organizing information hierarchically.

/**
 * Content divider with optional text label
 */
function Divider(props: IDividerProps): JSX.Element;

interface IDividerProps {
  /** Element type to render as */
  as?: React.ElementType;
  /** Text to display in the divider */
  children?: React.ReactNode;
  /** Alignment of the text */
  alignContent?: "start" | "center" | "end";
  /** Whether the divider is vertical */
  vertical?: boolean;
  /** Custom styles */
  styles?: IStyleFunctionOrObject<IDividerStyleProps, IDividerStyles>;
  /** Theme provided by higher-order component */
  theme?: ITheme;
  /** Additional CSS class */
  className?: string;
}

Usage Examples:

import React from "react";
import { Grid, Separator, Divider } from "office-ui-fabric-react";

function ResponsiveGrid() {
  return (
    <Grid
      columns="repeat(auto-fit, minmax(250px, 1fr))"
      gap="20px"
      style={{ padding: "20px" }}
    >
      <div style={{ background: "#f3f2f1", padding: "20px" }}>
        Card 1
      </div>
      <div style={{ background: "#f3f2f1", padding: "20px" }}>
        Card 2
      </div>
      <div style={{ background: "#f3f2f1", padding: "20px" }}>
        Card 3
      </div>
    </Grid>
  );
}

function LayoutWithSeparators() {
  return (
    <div>
      <section>
        <h2>Section 1</h2>
        <p>Content here...</p>
      </section>
      
      <Separator />
      
      <section>
        <h2>Section 2</h2>
        <p>More content...</p>
      </section>
      
      <Divider>Related Content</Divider>
      
      <section>
        <h2>Section 3</h2>
        <p>Additional content...</p>
      </section>
    </div>
  );
}

Types

// Theme interfaces for layout components
interface IPartialTheme {
  /** Color palette */
  palette?: Partial<IPalette>;
  /** Font definitions */
  fonts?: Partial<IFontStyles>;
  /** Semantic color mappings */
  semanticColors?: Partial<ISemanticColors>;
  /** Spacing scale */
  spacing?: Partial<ISpacing>;
  /** Visual effects (shadows, borders) */
  effects?: Partial<IEffects>;
  /** Whether theme is inverted (dark) */
  isInverted?: boolean;
  /** Whether to disable global class names */
  disableGlobalClassNames?: boolean;
}

// Styling function interfaces
interface IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> {
  (props: TStylesProps): Partial<TStyleSet>;
}

interface IStyleSet<TStyleSet> {
  [P in keyof Omit<TStyleSet, keyof IStyleSet<TStyleSet>>]: IStyle;
}

interface IStyle {
  [key: string]: any;
}

Install with Tessl CLI

npx tessl i tessl/npm-office-ui-fabric-react

docs

button-components.md

data-display-components.md

index.md

input-components.md

layout-components.md

navigation-components.md

overlay-components.md

tile.json