docs: Fix miscellaneous content issues with MDX docs #1304
Conversation
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
| @@ -23,8 +23,10 @@ import { | |||
| # Canvas Kit Pagination | |||
|
|
|||
| `Pagination` is a | |||
| [compound component](/getting-started/for-developers/resources/compound-components/) for handling | |||
| navigation between pages in a range. | |||
| [compound component](/getting-started/for-developers/resources/compound-components/) that allows | |||
There was a problem hiding this comment.
Subtle touch up here, I like it.
| @@ -20,8 +20,8 @@ import { | |||
| # Canvas Kit Tabs | |||
|
|
|||
| `Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/) | |||
| which can be composed in a variety of different ways. It follows the | |||
| [W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel). | |||
| that allows users to navigate between related views of content while remaining in context of the | |||
| // Configuration | ||
| <Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}>{/* Subcomponents */}</Tabs>; | ||
| <Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}> | ||
| {/* Child components */} |
There was a problem hiding this comment.
Thinking on this along with all the other JSX changes that turned /* Subcomponents */ into /* Child components */ and I think I prefer these commented as "subcomponents." As a React developer I understand them to be "child components" based on their placement in the JSX. I feel like indicating that this is specifically where the subcomponents go connects the dots very directly, but if it says child components, there's a small but necessary mental connection to be made, that might not be completely obvious.
There was a problem hiding this comment.
That's a good point @willklein. I changed the language from /* Subcomponents */ to /* Child components */ to be more technically correct since it's possible for children to not be Subcomponents (for example, the wrapper <div> around the tab panels in the Basic Tabs Example). I wonder if it would make sense to sacrifice a bit of correctness here in exchange for a more educational example.
Or maybe there's language which is both correct and does a good job of tying container components to their subcomponents? /* Subcomponents (and other child components) */ or /* Child components (including subcomponents) */?
Summary
Fixes #1305.
Checklist
<button>instead ofbutton)