PropertyList component to match design system requirements

[Mahek-Vasoya]

This PR introduces a new implementation of PropertyList and Property with built-in support for multi-line clamping and expandable values.

Key Features

Layout compatibility

• Supports both horizontal and vertical orientations.
• Allows property sizing via the size prop (small, medium, large, full-width).
• Uses flexible layout to automatically wrap properties across rows.

Multi-line clamping (expandable)

• Supports configurable clampLines (default: 4).
• Displays ellipsis (...) when content overflows.
• Adds a “View more / View less” toggle when content exceeds the clamp limit.

Expand / Collapse behavior

• Expands or collapses the property value without affecting the surrounding layout.
• Toggle is self-contained within the Property component.

Notes

• Clamping is only applied when value is a string.
• Layout remains responsive using flex wrapping.

Example

<PropertyList>
  <PropertyList.Property
    size="Large"
    label="Description"
    value={longText}
    expandable
    clampLines={3}
  />
</PropertyList>

[mkrause]

I wonder if we also should have a way that we do not show the "View more" button if the text is not actually clamped. This would be hard to do however because we cannot reliably detect if the browser has cut off the text (just counting characters is not sufficient). So currently we leave it up to the consumer to not enable clamping if the text is short?

[Mahek-Vasoya]

I will try to check a few things on this. I guess we can achieve this, but that can be a follow-up issue.