feat(avatar): added size variations #4648
Conversation
|
Preview: https://patternfly-pr-4648.surge.sh A11y report: https://patternfly-pr-4648-a11y.surge.sh |
There was a problem hiding this comment.
Thanks for doing this so quickly @mcoker . Now that I'm seeing this, I wonder if the small avatar is really useful as I don't think you can fit a recognizable image there.
@mceledonia what if we got rid of the 16px variant and made 24px the smallest and bumped everything else. So XL would then be 128px?
| @@ -27,4 +40,11 @@ | |||
| --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor); | |||
| --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth); | |||
| } | |||
|
|
|||
| @each $size in $sizes { | |||
| ### Extra extra large | ||
| ```hbs | ||
| {{> avatar avatar--modifier="pf-m-2xl" avatar--attribute='src="/assets/images/img_avatar-light.svg" alt="Avatar image extra extra large"'}} | ||
| ``` | ||
|
|
There was a problem hiding this comment.
I think this isn't needed anymore?
There was a problem hiding this comment.
updated! thanks for spotting that.
| | `.pf-m-sm` | `.pf-c-avatar` | Modifies an avatar to be small. | | ||
| | `.pf-m-md` | `.pf-c-avatar` | Modifies an avatar to be medium. | | ||
| | `.pf-m-lg` | `.pf-c-avatar` | Modifies an avatar to be large. **Note:** This is the default size. | | ||
| | `.pf-m-xl` | `.pf-c-avatar` | Modifies an avatar to be extra large. | |
There was a problem hiding this comment.
Should we include "at the optional breakpoint" since we're generating all those classes?
There was a problem hiding this comment.
yep! updated with your new link.
|
This looks great @mcoker . My only issue is that you say in the documentation that |
|
@mcarrano nice catch, updated! |
|
🎉 This PR is included in version 4.177.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fixes #4647
--
this also adds back a missing page demo template file that was throwing hbs errors on a rebase.