Repository navigation
chore: Add missing components to the heroshot example - #5129
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5129 +/- ##
=======================================
Coverage 97.71% 97.71%
=======================================
Files 991 991
Lines 31842 31842
Branches 11760 11761 +1
=======================================
Hits 31114 31114
+ Misses 721 682 -39
- Partials 7 46 +39 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
The static dropdown composition used role="menu" with SelectableItem rows, which render role="option", so the options had no valid parent and the menu had disallowed children. The frame also clipped the dropdown, turning the options list into a scrollable region with no focusable content. Switch the list to role="listbox" to match what SelectableItem renders, and stretch the dropdown height so it is not constrained by the frame. Axe now reports no violations on the heroshot overview page.
The frame was added in #5065 but got dropped while the list was re-sorted to insert the new frames. Restore it unchanged, in its alphabetical position.
| /> | ||
| </Heroshot> | ||
|
|
||
| <Heroshot id="hands-on-tutorials" label="Tutorial components" padding={0} contentSize={ANNOTATION_CONTENT_SIZE}> |
There was a problem hiding this comment.
nit: just calling out this is going to be the same as the annotation context hero shot. so same image is going to be produced.
There was a problem hiding this comment.
This is intentional, for the cards used as a group, it will the thumbnail of one of the children items.
| <Heroshot id="charts" label="Charts" stretch={true}> | ||
| <BarChart | ||
| height={110} | ||
| hideFilter={true} | ||
| hideLegend={true} | ||
| xScaleType="categorical" | ||
| series={[{ title: 'Requests', type: 'bar', data: timeSeries }]} | ||
| /> | ||
| </Heroshot> | ||
|
|
||
| <Heroshot id="charts-legacy" label="Charts (Legacy)" stretch={true}> | ||
| <BarChart | ||
| height={110} | ||
| hideFilter={true} | ||
| hideLegend={true} | ||
| xScaleType="categorical" | ||
| series={[{ title: 'Requests', type: 'bar', data: timeSeries }]} | ||
| /> | ||
| </Heroshot> | ||
|
|
There was a problem hiding this comment.
nit: these 2 are also the same. we have greyscale on the current thumbnails we use for the legacy one.
| </Heroshot> | ||
|
|
||
| <Heroshot id="collection-preferences" label="CollectionPreferences"> | ||
| <CollectionPreferences |
There was a problem hiding this comment.
Fair point, I updated it to display the actual collection preferences modal
45ab31c to
afaae82
Compare

Description
This PR adds missing components to the heroshot examples on top of the #5065.
Related links, issue #, if available: n/a
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.