Personal Research

sap-fiori-ui5

4 min read

SAP Fiori / UI5

1. Why this system is relevant

SAP Fiori is a mature enterprise system with an explicit application-wide density choice designed around touch versus mouse/keyboard use. It is unusually clear about when densities may coexist: implementation can resolve density from ancestors, but design guidance says not to mix cozy and compact within one page hierarchy.

2. Density terminology

The two terms are cozy and compact. Cozy is normally the default and touch-oriented; compact is optimized for mouse and keyboard and higher information density. Older SAPUI5 uses sapUiSizeCozy / sapUiSizeCompact; current UI5 Web Components supports data-ui5-compact-size or .ui5-content-density-compact. Fiori density guidance UI5 Web Components compact mode

3. Density model

  • The intended unit of choice is the application. Touch devices use cozy; pointer/keyboard devices use compact; hybrid-device users may persist a preference.
  • All Fiori controls are expected to support both.
  • Official guidance says never combine cozy and compact in the same hierarchy or page.
  • Current Web Components can technically scope compact mode to a component or ancestor region. getEffectiveContentDensity.ts walks/uses component context; CSS container style queries react to --ui5_content_density: compact. This technical capability is broader than the design guidance.
  • Individual controls can also expose special overrides; for example, icon tab bar guidance documents Cozy, Compact, and Inherit. Fiori density guidance UI5 styling

4. Token architecture

The observed Web Components path is:

application/ancestor density marker → --ui5_content_density → CSS style-container query → private component variables → SAP global theme variables → rendered control

Base parameter files alias public SAP theme parameters such as --sapElement_Height and --sapFontSize into component-private properties. Component CSS switches selected private values inside @container style(--ui5_content_density: compact) blocks. Color theme and content density are related through shared theme variables but are not the same axis.

Public guidance gives the most stable cross-component metrics:

MetricCozyCompact
Default touch/control area2.75rem / 44pxreduced
Typical rows/toolbars2.75rem / 44px2rem / 32px
Default control textsamesame

Pinned Web Components source shows component-level changes including:

  • Input minimum inline size: 2.75rem normally and 2rem in compact.
  • Input icon area: 2.25rem normally and 2rem in compact.
  • Buttons, list items, selects, table rows, and dialogs switch height, padding, margin, or alignment through compact container-query branches.
  • Base parameters bind component height and text to theme variables such as --sapElement_Height and --sapFontSize.

Fiori metrics Input.css Input-parameters.css

6. Typography behaviour

Compact mode keeps the same font size and instead reduces control dimensions and spacing. That is an explicit design rule, not merely an observation in one component. It preserves readable text while increasing information density through geometry. Fiori density metrics

7. Representative component examples

  • Button/input/select: share theme height parameters; compact branches tighten minimum width, icon slots, padding, and spacing.
  • List/table: compact changes row geometry while retaining the same type size.
  • Dialog: Fiori guidance distinguishes cozy and compact dialogs; desktop guidance uses compact spacing, while smartphone dialogs can become full screen.
  • Navigation/tab bar: can inherit global density or explicitly request a density for that control, an exception to the otherwise application-level rule. Dialog guidance Tab density guidance

8. Design/Figma implementation

SAP’s published Figma kit documentation provides two separate libraries/files: S/4HANA Web UI Kit – Compact for non-touch L/XL screens and S/4HANA Web UI Kit – Cozy for touch S/M screens. This is evidence of a separate-library design-tool strategy, not a verified variable-mode implementation. SAP Figma kit

9. Code implementation

Current Web Components supports ancestor or local activation:

<body data-ui5-compact-size>
  <ui5-button>Save</ui5-button>
</body>

The legacy equivalent is an ancestor sapUiSizeCompact class. In current component CSS, activation becomes a style query rather than every selector duplicating the ancestor class. getEffectiveContentDensity.ts Web Components compact mode

10. Accessibility constraints

Cozy targets touch use and starts from a 44px area. SAP explicitly notes that the visible UI element can be smaller than its touchable area. Compact assumes mouse and keyboard, so its 32px rows/toolbars are not positioned as touch targets. rem sizing supports browser zoom, and Fiori guidance combines density with responsive/adaptive layouts rather than using density as a substitute for reflow. Fiori density guidance Fiori accessibility

11. Limitations / unavailable evidence

  • Global --sap* theme values are produced by SAP theming packages outside the captured Web Components repository; the local snapshot shows their consumption boundary.
  • Current code can scope compact regions, but official design guidance prohibits mixed application-page hierarchies; technical possibility should not be mistaken for design approval.
  • Figma evidence is for separate published libraries, not internal authoring details.

Graph View

Backlinks