Versions Compared

Old Version 3

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 4

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Section

Link to Figma: tba

Overview

  • Section is a container used to organize and group related UI elements.
  • It arranges child components using a vertical or horizontal layout.
  • It supports internal scrolling when content exceeds the section’s dimensions.
  • It provides loading states via a loader with configurable size and cover background.
  • It is a fundamental building block for structured page layouts and nested groups.

...

  • showLoader - Programmatically displays the loading indicator over the section content. This action is useful during asynchronous operations to provide visual feedback to users that content is being processed.
  • hideLoader - Programmatically hides the loading indicator when operations are complete. This action should be called after asynchronous operations finish to restore normal section content visibility.
  • Figma: tba
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id6/1-data-grid/common/selection

Guidelines

Usage

  • Group related UI elements into a single block using elements.
  • Name the component clearly for maintainability using displayName.

...

DoDon’tArticle setting(s)
Set layout: "vertical" for forms and reading flows.Force dense forms into a cramped horizontal row.layout
Add consistent spacing via gapClass.Manually add inconsistent margins to children.gapClass
Provide defaultHeight and allow growth with canGrow.Hard-lock the Section height so content clips.defaultHeight, canGrow
Enable scrollingEnabled when content can overflow.Let content push surrounding UI or be cut off.scrollingEnabled
Show a loader during async work and size it appropriately.Leave users with a frozen area and no feedback.showLoader, hideLoader, loaderSize
Use a subtle loaderCoverBackground that preserves legibility.Pick a cover color that hides the spinner or content.loaderCoverBackground, loaderSize
Align content intentionally with alignItemsClass/justifyContentClass.Rely on default alignment that produces uneven layouts.alignItemsClass, justifyContentClass
Name the component clearly for maintainability.Keep the default generic name in the structure panel.displayNameInitialize data on mount; clean up on unmount.Start work late and leak timers/listeners.events.ON_INIT, events.ON_DESTROY

Accessibility

  • Provide a perceivable busy state using showLoader/hideLoader with an appropriate loaderSize.
  • Maintain predictable reading order via elements and layout.
  • Reduce layout shift with defaultHeight plus canGrow/canShrink.
  • Preserve loader legibility using loaderCoverBackground.
  • Keep alignment predictable with alignItemsClass and justifyContentClass.
  • Avoid color-only messaging; use the loader state rather than relying solely on loaderCoverBackground.
  • Prevent scroll jank and keep focus context stable by enabling scrollingEnabled when content can overflow.
  • Improve readability by applying adequate interior spacing with paddingClass.