Add docs for Avatar, Icon; Reformat Badge docs #355
Conversation
docs/library/datadisplay/avatar.md
Outdated
|
|
||
| ### High Contrast | ||
|
|
||
| We use the highContrast prop to increase color contrast of the fallback text with the background. |
There was a problem hiding this comment.
| We use the highContrast prop to increase color contrast of the fallback text with the background. | |
| We use the `high_contrast` prop to increase color contrast of the fallback text with the background. |
docs/library/datadisplay/avatar.md
Outdated
|
|
||
| ### Radius | ||
|
|
||
| We use the radius prop to assign a specific radius value, ignoring the global theme. |
There was a problem hiding this comment.
| We use the radius prop to assign a specific radius value, ignoring the global theme. | |
| We use the `radius` prop to assign a specific radius value, ignoring the global theme. |
There was a problem hiding this comment.
not sure if we also want the "It can take values "none" | "small" | "medium" | "large" | "full"." bit as well
There was a problem hiding this comment.
Yes, adding them in 22d1acd
docs/library/datadisplay/avatar.md
Outdated
|
|
||
| ### Fallback | ||
|
|
||
| We use the fallback prop to modify the rendered fallback text. |
There was a problem hiding this comment.
| We use the fallback prop to modify the rendered fallback text. | |
| We use the `fallback` prop to modify the rendered fallback text. |
docs/library/datadisplay/icon.md
Outdated
| CalloutRoot.create( | ||
| CalloutIcon.create(icon(tag="check_circled", variant="solid", high_contrast=True, color="green")), | ||
| CalloutText.create("Below is a list of all available icons.", color="black", weight="bold"), | ||
| color="green", | ||
| ), |
There was a problem hiding this comment.
| CalloutRoot.create( | |
| CalloutIcon.create(icon(tag="check_circled", variant="solid", high_contrast=True, color="green")), | |
| CalloutText.create("Below is a list of all available icons.", color="black", weight="bold"), | |
| color="green", | |
| ), | |
| callout_root( | |
| callout_icon(tag="check_circled", variant="solid", high_contrast=True, color="green")), | |
| callout_text("Below is a list of all available icons.", color="black", weight="bold"), | |
| color="green", | |
| ), |
haven't tried if this actually works, but we should avoid explicitly calling .create throughout
There was a problem hiding this comment.
The creates do work. Not sure why I thought the snake cases were not defined and I needed to do creates 🤦🏼 I was using the flex, icon, etc just fine
docs/library/datadisplay/icon.md
Outdated
|
|
||
| ## Styling | ||
|
|
||
| The icons are based on the Radix primitive component, and it is unstyled. It does not accept common styling props such as `size` or `color_theme`. You can still use `width` and `height` together to control the size of the icon, and specify its `color`. |
There was a problem hiding this comment.
| The icons are based on the Radix primitive component, and it is unstyled. It does not accept common styling props such as `size` or `color_theme`. You can still use `width` and `height` together to control the size of the icon, and specify its `color`. | |
| The icons are based on the Radix primitive component, and it is unstyled. **It does not accept common styling props such as `size` or `color_scheme`**. You can still use `width` and `height` together to control the size of the icon, and specify its `color`. |
docs/library/datadisplay/icon.md
Outdated
| icon(tag="magnifying_glass", color="indigo"), | ||
| icon(tag="magnifying_glass", color="cyan"), | ||
| icon(tag="magnifying_glass", color="orange"), | ||
| icon(tag="magnifying_glass", color="crimson"), |
There was a problem hiding this comment.
are these intended to be CSS colors? or radix themes colors?
i think at least one example should show color="var(--accent-10)" to link up with radix themes values.
There was a problem hiding this comment.
I want to say these are css colors? The component itself is supposedly primitive and does not take the common props. Just tried, the radix colors work, gonna add a couple examples there.
|
revision uploaded! @masenf PTAL |
There was a problem hiding this comment.
Can we break this up into sections like radix and include a link to radix icons at the top of the file as a source.
There was a problem hiding this comment.
Also maybe make them smaller and 4 or 5 width hard to scroll through and consume all of them
Summary