Lists or paragraphs in a Text component?

Forge
1

I’m trying to put some formatted information on a SpacePage in a Confluence app, and I’d really like to include a list of steps, but I don’t see any components in UI Kit to render one. Is there a way to do that? Or at least separate paragraphs so I can fake it?

2

Hi @FinnEllis,

When using UI Kit, there aren’t any bullet or numbered lists components.

If a paragraph with a manual definition of a list is a viable alternative, you can use multiple Text components in UI kit. Just make sure to wrap them in a <Fragment> component, this is required because each function must only return one top-level component.

With an example:

<Fragment>
  <Text>1. First line</Text>
  <Text>2. Second line</Text>
</Fragment>

The other option is to use Custom UI instead.

Hope this helps,
Caterina

1 Like
3

I ended up using a component like this, with a literal non-breaking space in the code:

const FakeParagraph = ({ children }) => {
  return (
    <Fragment>
      <Text> </Text> // <-- that's a non-breaking space
      <Text>{children}</Text>
    </Fragment>
  )
}

I’m disappointed how few UI elements are in the app option called “UI Kit,” though. It seems like any nontrivial content needs to be in a custom UI app to render properly, and I really wish that had been clearer when I was making that choice. It’s too late now to start the project over with a new architecture; it’s just going to have to look unprofessional.