UI5 / UI5/webcomponents

ExpandableText: allow setting `white-space`

Open
#10,504 1 comment 0 reactions 1 assignee View on GitHub

@olannyv is already working on this.

Since Jan 9, 2025.

feature request Medium Prio TOPIC RD
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

Feature Request Description

Currently it's not easily possible customizing white-space for the text in the ExpandableText component.

Before the ui5-expandable-text web component was available, we implemented our own React component in UI5 Web Components for React. There we offered a renderWhiteSpace prop, which only set white-space: pre-wrap; when active.
Now we replaced our React only component with the web component and, because of backwards compatibility, we decided to add renderWhiteSpace (i.a.) to our wrapped component. (Storybook)
Since there's no part attribute available and setting it on the ui5-expandable-text element has no effect (because ui5-text sets white-space on its own and therefore it has precedence over the inherited value), we had to rely on addCustomCSS.

But also in general, I think that setting white-space is typical for a text component and therefore should be supported.

Proposed Solution

Imo one of these two solutions would be sufficient, although I'd prefer the first one ;)

  1. Make the ui5-text inside the shadow root use white-space of the ui5-expandable-text (if possible)
  2. Offer a part attribute for the ui5-text element so it can easily be accessed via CSS
Proposed Alternatives

No response

Organization

UI5WCR

Additional Context

No response

Priority

None

Privacy Policy
  • I’m not disclosing any internal or sensitive information.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.