Box resolution

Run Stop Open full page

Read as Markdown

Resolve padding, percentages, and a constrained box with typed diagnostics.

APIs demonstrated

• LayoutDiagnostic from @pibbl/core
• layoutDiagnostic from @pibbl/core
• normalizeEdges from @pibbl/core
• resolveBox from @pibbl/core
• resolveLength from @pibbl/core
• BoxStyle from @pibbl/core
• Constraints from @pibbl/core
• EdgeValues from @pibbl/core
• Edges from @pibbl/core
• LayoutBox from @pibbl/core
• LayoutDiagnosticContext from @pibbl/core
• LayoutDiagnosticInput from @pibbl/core
• Length from @pibbl/core
• Percentage from @pibbl/core
• ResolvedBoxStyle from @pibbl/core
• Size from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import {
  LayoutDiagnostic,
  layoutDiagnostic,
  normalizeEdges,
  resolveBox,
  resolveLength,
  type BoxStyle,
  type Constraints,
  type EdgeValues,
  type Edges,
  type LayoutBox,
  type LayoutDiagnosticContext,
  type LayoutDiagnosticInput,
  type Length,
  type Percentage,
  type ResolvedBoxStyle,
  type Size,
} from "@pibbl/core";

const percentage: Percentage = "50%";
const width: Length = percentage;
const edgeInput: EdgeValues = { top: 8, right: 12, bottom: 8, left: 12 };
const edges: Edges = normalizeEdges(edgeInput, "padding");
const constraints: Constraints = {
  minWidth: 0,
  maxWidth: 320,
  minHeight: 0,
  maxHeight: 220,
};
const style: BoxStyle = { width, height: 80, padding: edgeInput };
const context: LayoutDiagnosticContext = { component: "Badge", constraints };
const box: ResolvedBoxStyle = resolveBox(style, constraints, context);
const outer: LayoutBox = box.borderBox;
const inner: Size = box.contentBox;
const half = resolveLength(width, constraints.maxWidth, "width", context);
const input: LayoutDiagnosticInput = {
  ...context,
  property: "width",
  value: width,
  reason: "requires a definite containing width",
};
const diagnostic: LayoutDiagnostic = layoutDiagnostic(input);
const output = document.createElement("pre");
output.textContent = JSON.stringify(
  { edges, outer, inner, half, diagnostic: diagnostic.message },
  null,
  2,
);
document.body.append(output);

Usage notes

• Displays resolved edges and box geometry in the document.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.