Skip to content

Spacing: Update documentation #2408

Description

@SergejLust

Detailed description of how to reproduce the problem

  1. Open Storybook and navigate to the spacing foundations documentation page (MDX).
  2. Locate the spacing table that lists the DDS spacing scale.
  3. Observe each row of the table: spacing example (graphic) + token values (e.g. $ifx-space-… or --ifx-space-…) + Figma token name + px value + any additional columns currently present.
  4. Observe that the page does not link to the source-of-truth spacing definitions in Figma and does not point developers to the existing CSS & SCSS token documentation.

Actual behavior: The spacing table exposes dev token values and further implementation-layer columns alongside the spacing example. For the designer audience this duplicates information that is easier to read in Figma and clutters the documentation with vocabulary that lives on the code side. The page also lacks a direct link to the source-of-truth spacing definitions in Figma and does not point developers to the existing CSS & SCSS token documentation.

Expected behavior: The spacing table shows the spacing example (graphic), the corresponding Figma token name, and the px value. All other columns — including dev token values — are removed from the table. Spacing example graphics stay unchanged. A link to the Figma "Spacing" page is added so designers can jump to the source of truth in one click, and a link to the CSS & SCSS token page is added so developers reach the code-side token reference directly.

Upload a screenshot

Image

Describe the development framework

Infineon Design System (DDS) component library — Stencil-based Web Components authored in TypeScript, with styles written in SCSS. Documented and previewed in Storybook (MDX). Issue affects the spacing foundations documentation page only.

Expected behavior

  • Spacing table columns are: spacing example (graphic) + Figma token name + px value.
  • Token values removed from the table (e.g. $ifx-space-*, --ifx-space-*).
  • Any further columns currently present beyond the three above are removed.
  • px values remain in the table.
  • Spacing example graphics remain in place, unchanged.
  • Column order: spacing example → Figma token → px value.
  • Link reference to the Figma "Spacing" page added to the documentation page.
  • Link reference to the CSS & SCSS token documentation page added to the documentation page.
  • No changes to the spacing tokens themselves in code — documentation change only.
  • No API changes on any component.

Additional information

  • Documentation-only change. No component code, no SCSS variable changes, no token layer changes.
  • Rationale: Figma token names are the reference designers already use; aligning the spacing table to that vocabulary removes a redundant translation step between design and dev references. px values are kept because they remain useful for quick copy-paste in mockups and tooling that does not resolve Figma tokens. The added Figma link makes the source of truth reachable directly from the documentation page. The added CSS & SCSS token link routes developers to the code-side token reference so the page can shed dev-token vocabulary without losing the pointer for developers who need it.
  • Assumption to confirm: exact Storybook MDX page path was not specified in the input — please confirm which page (e.g. Foundations → Spacing) the change applies to, the exact Figma URL to be linked, and the exact Storybook path of the CSS & SCSS token page to be linked. The exact set of columns currently in the table was also not specified — remove any columns beyond spacing example, Figma token name, and px value at the time of implementation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingminorminor version bumprequestUser request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions