Progress circle documentation #239
Conversation
ross-pfahler
requested review from
dannify,
devongovett and
snowystinger
as code owners
|
Build successful! 🎉 |
Codecov Report
@@ Coverage Diff @@
## master #239 +/- ##
=========================================
Coverage ? 70.57%
=========================================
Files ? 206
Lines ? 3973
Branches ? 847
=========================================
Hits ? 2804
Misses ? 587
Partials ? 582
|
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| </div> | ||
| ``` | ||
|
|
||
| ### Indeterminate |
There was a problem hiding this comment.
Should we include this as part of the value section (similar to Checkbox)? @dannify
There was a problem hiding this comment.
Yeah it is an important option that needs a little explanation. Let's move it to be under value like Checkbox
…nto progress-circle-docs
|
Build successful! 🎉 |
|
Build successful! 🎉 |
…nto progress-circle-docs
|
Build successful! 🎉 |
|
Build successful! 🎉 |
…nto progress-circle-docs
|
Build successful! 🎉 |
ktabors
left a comment
ktabors
left a comment
There was a problem hiding this comment.
I think there is a build issue with https://reactspectrum.blob.core.windows.net/reactspectrum/918c97afdeae266eeb82d058965fc9e5ebf2837a/docs/react-spectrum/ProgressCircle.html. I'm not seeing progress circles.
ktabors
left a comment
ktabors
left a comment
There was a problem hiding this comment.
I think there is a build issue with https://reactspectrum.blob.core.windows.net/reactspectrum/918c97afdeae266eeb82d058965fc9e5ebf2837a/docs/react-spectrum/ProgressCircle.html. I'm not seeing progress circles.
|
|
||
| ## Value | ||
|
|
||
| By default Progress Circles are controlled with the `value` prop representing current percentage as an integer. |
There was a problem hiding this comment.
I noticed that we have Progress Circles as two words instead of one ProgressCircles throughout the docs.
|
|
||
| ### Accessibility | ||
|
|
||
| ProgressCircle requires an `aria-label` or `aria-labelledby` attribute. |
There was a problem hiding this comment.
This is very direct and clear, but I like Meter's way of saying this.
Depending on the visualization being used (i.e. depending on the showValueLabel prop), a label, aria-label, or aria-labelledby attribute are required.
…nto progress-circle-docs
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| </div> | ||
| ``` | ||
|
|
||
| If using the over background variant, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines. |
There was a problem hiding this comment.
is there a difference in your reference to the over background variant here vs. when you referenced it on line 88 but put it in backticks that time?
https://github.com/adobe-private/react-spectrum-v3/pull/239/files#diff-2900858ca68bc0d0ca2864bb6cfbc5bbR88
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
Since we used to have 'centered' prop... do we want to tell people here that they should just center it themselves (we recommend flex)? or do we just not mention it because we shouldn't teach them how to do things like that because that should be a known thing?
|
Build successful! 🎉 |
|
@snowystinger Good idea for a "FAQ" on the page maybe? |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
* * updating TableView documentation at https://react-spectrum.corp.adobe.com/components/TableView. * for issues: adobe/react-spectrum#239 adobe/react-spectrum#240 * Update TableView.mdx added explanation for needing styling * Update TableView.mdx * missing `%` in TableView.styl * changed heading to "Why doesn't my table render" instead of "Example source code" and moved code to bottom * - added style height to div in StoryBook for stories/TableView.js, so deleted stories/TableView.styl - updated TableView.mdx with simpler troubleshooting and links to examples * Update TableView.mdx * Removing link that contains contradictory documentation If we need a simpler example, we can explore that in another PR
Closes RSP-1569
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Team: