feat(#2132): drop down - added more contextual examples#420
Conversation
✅ Deploy Preview for abgov-ui-component-docs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
bdfranck
left a comment
bdfranck
left a comment
There was a problem hiding this comment.
I looked in the deployment preview...
- ✅ I see the correct number of examples in the Dropdown examples tab
- ✅ I see an example for a simple dropdown
- ✅ I see an example for a filterable dropdown
- ✅ I see an example for a basic question page
- ✅ I see that LTS example code uses
goaprefixes while latest examples usesgoabprefixes.
bdfranck
left a comment
bdfranck
left a comment
There was a problem hiding this comment.
Looks good! You just need to replace the .back-link items with a goa-ink. 👍
| tags="angular" | ||
| allowCopy={true} | ||
| code={` | ||
| <a href="#" className="back-link"> |
There was a problem hiding this comment.
We don't need the custom CSS anymore because we now have the goa-link component that lets you add a leading or trailing icon to a link. We can change it to something like the following:
<goa-link action="back" leadingicon="chevron-back" mb="2xl">
<a href="#">Back</a>
</goa-link>| tags="angular" | ||
| allowCopy={true} | ||
| code={` | ||
| <a href="#" className="back-link"> |
There was a problem hiding this comment.
Use a goa-link component here too.
| tags="react" | ||
| allowCopy={true} | ||
| code={` | ||
| <a href="#" className="back-link"> |
There was a problem hiding this comment.
Use a goa-link component here too.
| tags="react" | ||
| allowCopy={true} | ||
| code={` | ||
| <a href="#" className="back-link"> |
There was a problem hiding this comment.
Use a goa-link component here too.
| `} | ||
| />} | ||
|
|
||
| <a href="#" className="back-link"> |
There was a problem hiding this comment.
Use a goa-link component here too.
| lang="css" | ||
| allowCopy={true} | ||
| code={` | ||
| a.back-link::before { |
There was a problem hiding this comment.
You can remove all this .back-link CSS once you've switched to a goa-link.
bdfranck
left a comment
bdfranck
left a comment
There was a problem hiding this comment.
I looked at the code changes...
- ✅ I see the Link component is being used for "Back" actions
- ✅ I see the custom CSS for the back action is removed
I looked at the deploy preview...
- ✅ I see the "Back" action looks as expected
Looks good to me! 👍
2 participants
Added the following examples to the dropdown page: