fix(#2722): docs update - input prop textalign

[syedszeeshan]

Task: GovAlta/ui-components#2793
Story: GovAlta/ui-components#2722

Updated Video (after changes suggested by Thomas)

Task2793-For-Story-2722-Docs-Examples-Updated.mp4

[netlify]

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	c003ddc
🔍 Latest deploy log	https://app.netlify.com/projects/abgov-ui-component-docs/deploys/684ca71684d9e300086cadb1
😎 Deploy Preview	https://deploy-preview-383--abgov-ui-component-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[vanessatran-ddi]

content should be 6 now

[syedszeeshan]

PR updated, WIP.

[vanessatran-ddi]

I see duplicated code snippet for new angular

[syedszeeshan]

PR will be updated shortly.

[vanessatran-ddi]

I see no code snippet for new React

[syedszeeshan]

PR will be updated shortly

[twjeffery]

Hi @syedszeeshan, a few content and formatting changes needed to the example. Should be just properties to update, let me know if you have any questions:

• Full name: align Full Name to the left and remove helper text. We would not align full name like this to the right, so it's a bit confusing. Showing a left aligned input in the field set is useful as well to show the different variations. Also, change the width of the full name input to 100%.
• Account number: change account number field to use normal input type (default). We would not add an account number as a type number for the user as it can be hard to enter in large numbers. Keep the field right aligned. Change helper text to: "This input is right aligned."
• Price: add trailing content: "per item". Set width to 7ch. Change helper text to: "The input number component is right aligned by default."
• Quantity: change helper text to: "You can set a number input to be left aligned."
• Change gap between fields to XL

[syedszeeshan]

@twjeffery @vanessatran-ddi @ArakTaiRoth
I have made the changes as requested, I have also updated all the code snippets to reflect the same behavior.

Video also updated for reference.

Ready for testing.

[vanessatran-ddi]

QA:

Angular lts code, I run it and the price input isn't shown. (event based example)

Stackblitz link: https://stackblitz.com/~/github.com/vanessatran-ddi/ui-components-angular-sandbox/tree/doc-383-lts?file=src/app/app.component.html
Same with reactive form code snippet angular lts. it doesn't work.

[vanessatran-ddi]

QA React
New React code snippet:

The price and quantity has 0 as initial value while the sandbox of the document doesn't.

The same happens with lts React code.

[syedszeeshan]

QA React New React code snippet:

The price and quantity has 0 as initial value while the sandbox of the document doesn't.

The same happens with lts React code.

I have removed the initial value of 0. PR will be updated shortly.

[syedszeeshan]

QA:

Angular lts code, I run it and the price input isn't shown. (event based example) Stackblitz link: https://stackblitz.com/~/github.com/vanessatran-ddi/ui-components-angular-sandbox/tree/doc-383-lts?file=src/app/app.component.html Same with reactive form code snippet angular lts. it doesn't work.

Since we dont have angular wrappers in LTS, I have removed the last 2 (i.e. Price and Quantity) from the examples and from the code snippet when the Angular and LTS is selected. PR will be updated shortly.

[syedszeeshan]

@twjeffery @ArakTaiRoth
The goab-input-number works for Angular/current.... but not for LTS (there is no Angular wrapper). Therefore, I have made a small change, when Angular and LTS version is selected, then the last 2 examples i.e. Price and Quantity will not be shown.

However, in this case, if you want me to show a different example e.g. using <goa-input type="number" then please let me know....alongwith the text for 'helper text'.