docs(spinner): add example showcasing $as prop #3111
Conversation
sandgraham
requested review from
chasestarr,
gergelyke,
nadiia and
tajo
as code owners
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/uber-ui-platform/baseweb/j0g8gsjm9 |
|
|
||
| export default () => ( | ||
| <p> | ||
| <StyledSpinnerNext $as="span" $style={{display: 'block'}} /> |
There was a problem hiding this comment.
I'd incline not to use $style in the examples. Can we replace it with withStyle?
There was a problem hiding this comment.
just out of curiosity, what's wrong with $style? we document it on the styletron website (https://www.styletron.org/react/#style-prop), so I think one would assume it's part of the public API?
There was a problem hiding this comment.
I know that we document it in Styletron docs, but it's not a part of the base web API we've been encouraging people to use. I also think it may create more confusion around how and when one would use it. It's more of an internal implementation imho.
| <SpinnerNextSpan /> | ||
| </Example> | ||
|
|
||
| By default the spinner styles a single `div` element. You can change the underlying element type by using the `$as` prop. In this example we change it to a `span` and add `display: block`. This allows us to use the `Spinner` inside of a `p` element. Note, we could also set `display: inline-block` to prevent the spinner from wrapping to a new line. |
There was a problem hiding this comment.
While helping someone who brought up the issue mentioned here ^ I also notices that the API for this styled element is different from the current Spinner component but we didn't document it anywhere. Could you add it here as well?
|
@nadiia I changed this up a bit. I added Also considering if the default should be |
* docs(spinner): add example showcasing $as prop * feat(spinner): add explicit display property * docs(spinner): rework examples
* docs(spinner): add example showcasing $as prop * feat(spinner): add explicit display property * docs(spinner): rework examples
Adds a new example to the
Spinnerdocs to show how you can manipulate the underlyingStyledSpinnerNextelement.