stripe-apps icon indicating copy to clipboard operation
stripe-apps copied to clipboard

Allow all text overflow properties inside `Inline` just like in `Box`

Open tvanantwerp opened this issue 2 years ago • 0 comments

Is your feature request related to a problem? Please describe. I want to be able to mark specific series of words in a sentence to not have word or line breaks. (Example: think of a proper two-word name that you would prefer to always have together and never separated by text wrapping. You'd rather the whole thing get bumped to the next line than only half of it.)

This works inside Box with css={{ whiteSpace: 'nowrap' }}, but most of the overflow-related properties aren't officially supported inside Inline.

Describe the solution you'd like The css property whiteSpace is supported in the Box component, but not the Inline component. It would be helpful for it to be officially supported inside the Inline component as well.

Describe alternatives you've considered Currently, I am using this unsupported workaround which nevertheless renders as I want:

    <Inline
      css={{
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        whiteSpace: 'nowrap',
      }}
    >
      // Inline text I don't want broken by text wrapping goes here...
    </Inline>

tvanantwerp avatar Jun 02 '23 16:06 tvanantwerp