How can I specify size for AtlasKit FieldText

Atlassian Ecosystem Design
,
1

Hi, I’m trying to increase the width of the FieldText, but I seems to couldn’t find a proper way, it’s not mentioned in AtlasKit docs. But in ADG3, text field should be available in different width.

I have tried with styled-components extends.

const LongFieldText = FieldText.extend`
  "max-width": 500;
`

But I got error as a result of that:

Uncaught TypeError: k.default.extend is not a function

What I can do? The last resort I would try would be specify a css class, and try to overwrite it, but the random generated class might get in the way as well. Furthermore, this is not recommended by styled-component as well (styled-components: Advanced Usage)

1 Like
2

Perhaps a bit late my answer, but leaving it here in case someone else find it helpful :slight_smile:
Wrap the field in a container and with styled-components you should be able to set the max-width for that wrapper. Keep in mind to set the FieldText shouldFitContainer prop as true E.g:

<FieldForm>
    <FieldText ...  shouldFitContainer  />
</FieldForm>

const FieldForm = styled.div`
    max-width: 500px;
`;
1 Like