Using InlineCode inside 'Truncate'

[ryder-wendt]

Hello, I'm trying to use Truncate inside and InlineCode like so

<InlineCode>
  <Box maxWidth="16rem">
    <Truncate as="text" title={tableRef}>
      {tableRef}
    </Truncate>
  </Box>
</InlineCode>

But it looks like this isn't possible due to InlineCode expecting multiple children

This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.

I tried switching the nodes however that made it worse for styling purposes cutting off the end of the InlineCode.

I had to replicate the styling to make it work for my usecase, however I wanted to see if this was the expected behavior.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Truncate question - Answer (updated: 06/07/2023, similarity score: 83%)
• Broken Truncate and/or Broken Anchor Underline styling - Answer (updated: 10/15/2020, similarity score: 82%)
• Disclosure heading overflow (updated: 03/30/2021, similarity score: 82%)

[serifluous]

Hey @ryder-wendt ! Can you share more about your use case, and why you need to truncate your text?

[ryder-wendt]

Hey @serifluous 👋🏼 .
We are displaying a table reference -> the inlineCode part and the names are pretty lengthy -> truncate.
here is a link to the designs, if that helps!

[serifluous]

thank you! I've backlogged this fix for us and tagged you on the ticket.

No ETA yet unfortunately, but you can go with the cut-off box for right now, and we'll let you know when a fix is up.

[serifluous]

This was fixed with PR #4109 and will be available when #4096 is merged.