feat: LimitedInput component WIP

[ndv99]

Done

• Created "LimitedInput" component

QA steps

• Ensure the component is displayed correctly across all breakpoints
• Ensure the immutableText cannot be modified by typing in the input field
• Ensure the input still works as intended
• Ensure the element positioning is still correct when a label is not present

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[ndv99]

I'm aware that this isn't a perfect solution, but for now it's workable as advised by @petermakowski. I'll create a jira ticket to investigate this implementation and find something better, but for now this should unblock canonical/maas-ui#5420

[ndv99]

I've discovered a bug when using this in maas-ui where the immutableText only shows up in the form after one of the fields has been focused and blurred. Investigating now

[ndv99]

I've discovered a bug when using this in maas-ui where the immutableText only shows up in the form after one of the fields has been focused and blurred. Investigating now

I've fixed this now, which also fixed the immutable text not showing in the component docs.

[ndv99]

There's some visual issues that only occur when viewing this component in storybook that can't be replicated if this component is implemented directly in maas-ui. You can replicate this by maximising your browser window, and the placeholder text should seem misaligned. Opening and closing dev tools also causes misalignment, and importing this component into maas-ui also causes the immutableText to not register on first render.

For now, I'm implementing this component directly in maas-ui, but I've created a jira ticket to eventually upstream it to maas-react-components and fix these bugs. For now though, this has been blocking the reserved IPs work, so I'm putting this PR on hold