docs(#1783): radio and checkbox slot description and example#147
Conversation
✅ Deploy Preview for abgov-ui-component-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| <goa-form-item label="How would you like to be contacted?"> | ||
| <goa-checkbox checked="true" name="item" text="Phone"> | ||
| <div slot="description"> | ||
| <goa-form-item mt="m" label="Phone number"> |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
Aha! That answers one of my questions:
I'll update the example code. |
bdfranck
force-pushed
the
docs-1783
branch
3 times, most recently
from
64b1f4c to
2caacad
Compare
|
I tested it and it appears to work. Is there an effective way to test the sample code? 🤔
|
|
The Angular version... |
|
I noticed the stray React |
|
I noticed other example files had tab spacing of 2 instead of 4. I updated my example with 2 space tabs. |
|
Wait- the issue is for the radio, not the checkbox. But we still can use the example in checkbox. I'll add a commit for the radio. |
bdfranck
changed the title
|
I've checked how the radio example looks in Angular... ...and In React: |
|
For radio -> angular, there is an react GoAInput tag in angular code, please see screenshot
|
|
Thanks, @lizhuomeng71! I've updated the React examples with |
|
Hi @bdfranck , sorry, I probably highlighted an wrong item on my previous comment, the point of previous comment is there is an line of react code in angular example.
|
| <goa-form-item mt="m" label="Input label"> | ||
| <goa-input name="phoneNumber" (_change)="onChange($event)" /> | ||
| </goa-form-item> |
There was a problem hiding this comment.
@lizhuomeng71 Got it! I've replaced the stray React component with an Angular one in the Angular sample code.
There was a problem hiding this comment.
Same thing here for the text based description.
|
@lizhuomeng71 Any other questions or concerns? Thanks! |
This comment was marked as resolved.
This comment was marked as resolved.
|
Issue is verified for React and Angular |
| <goa-checkbox checked="true" name="phone" text="Phone"> | ||
| <div slot="description"> | ||
| <goa-form-item mt="m" label="Phone number"> | ||
| <goa-input name="phoneNumber" (_change)="onChange($event)" /> |
There was a problem hiding this comment.
The description should only contain plain / stylized text. After talking to @twjeffery I found that it is planned to introduce a reveal slot something in the near future that would be used to contain components like this.
So can you revert the description to something text based?
| <goa-form-item mt="m" label="Input label"> | ||
| <goa-input name="phoneNumber" (_change)="onChange($event)" /> | ||
| </goa-form-item> |
There was a problem hiding this comment.
Same thing here for the text based description.
|
I've changed the example to a common scenario from my ministry: putting a link in the help text. @twjeffery Any concerns with this direction? Obviously, I don't want to endorse any anti-patterns in our official documentation. 😂 
|
4 participants
This PR for GovAlta/ui-components#1783 has the following documentation changes to radio and checkbox: