Personal Research

patternfly

4 min read

PatternFly

1. Why this system is relevant

PatternFly is a data-heavy enterprise system that applies compactness where it is useful rather than as a global theme. Tables, data lists, description lists, toggle groups, and cards have component modifiers, while other components do not. Its generated component custom properties make the local override mechanism unusually inspectable.

2. Density terminology

PatternFly uses compact and default for several component variants. Cards additionally expose a large display treatment. The system does not document a global application density mode. PatternFly table guidance PatternFly card guidance

3. Density model

  • Density is component-specific and opt-in.
  • Compact table/data-list guidance is tied to showing more rows, reducing pagination, and fitting simple data into constrained spaces such as modals or wizards.
  • Default spacing is preferred for richer visual data and readability.
  • Components with compact support use a local BEM modifier (.pf-m-compact) and React prop; unsupported components remain unchanged.
  • Compact and default components can coexist on a page because activation is local.

4. Token architecture

The path is:

React compact prop/variant → .pf-m-compact → component custom-property remap → global semantic tokens → rendered component

PatternFly has base/global and semantic token layers shared between Figma and CSS. A component defines default variables plus --m-compact variables; the modifier reassigns the live component variables. It is therefore tokenized locally without replacing the global spacing scale. Token overview Tokens for developers

Pinned global values include xs=0.25rem/4px, sm=0.5rem/8px, md=1rem/16px, lg=1.5rem/24px, and xl=2rem/32px. Body small is 0.75rem/12px, default 0.875rem/14px, and large 1rem/16px.

Selected component remaps:

ComponentDefaultCompact
Data-list cell vertical paddinglg / 24pxsm / 8px
Data-list body fontdefault / 14pxsmall / 12px
Table body cell vertical paddingmd / 16pxsm / 8px
Table compact action vertical padding—xs / 4px
Card inset paddinglg / 24pxmd / 16px
Card compact footer typedefault / 14pxsmall / 12px

This is not a multiplier: each component maps selected internal variables to different semantic steps. tokens-default.scss data-list.scss table.scss card.scss

6. Typography behaviour

Typography changes only where the component defines it. Compact DataList steps body text from 14px to 12px; compact Card keeps its title and body roles but reduces footer text to 12px. Compact Table keeps its normal 14px body text and chiefly changes padding. PatternFly therefore has no single “compact typography” rule.

7. Representative component examples

  • Table: React accepts variant="compact"; CSS remaps header/cell/action padding. Compact is not compatible with every complex table feature, including some expandable combinations.
  • Data list / description list / toggle group: React exposes isCompact; each component decides its own metric remaps.
  • Card: .pf-m-compact changes padding and selected type; .pf-m-display-lg expands padding/type for lower-density display contexts.
  • Button/input/navigation/dialog: no system-wide compact inheritance was found in the captured source. Button uses its own size/variant styles rather than participating in one density context.

Table.tsx DataList.tsx

8. Design/Figma implementation

PatternFly publishes Figma libraries backed by variables/styles and component properties. Public token guidance documents variable modes for themes, but no global density variable mode. Compact behavior is represented by component configurations/variants where available. Tokens for designers

9. Code implementation

<Table variant="compact">…</Table>
<DataList isCompact>…</DataList>
<DescriptionList isCompact>…</DescriptionList>
<ToggleGroup isCompact>…</ToggleGroup>

React maps the prop to .pf-m-compact. Component Sass then rebinds its own custom properties, preserving the global token values and unrelated components.

10. Accessibility constraints

PatternFly’s compact-table guidance explicitly trades some readability for row count and recommends it for simple data. Responsive tables stack columns into attribute/value pairs on narrow screens rather than relying on dense desktop rows. Dense interactive cells still need target-size, focus, and keyboard review; a compact modifier is not itself an accessibility guarantee. Table spacing guidance WCAG target minimum

11. Limitations / unavailable evidence

  • Compact support is not universal and compatibility varies by component feature.
  • Current source is definitive for values, while some of the clearest usage rationale remains in archived PatternFly 4 guidance; the architectural pattern continues in PatternFly 6 source.
  • No public global density provider or Figma density mode was found.
  • Local choice makes coexistence easy but does not enforce a coherent product-wide density on its own.

Graph View

Backlinks