Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: avatar text font-size with calc()? Possible to eliminate? #5592

Closed
mmilano opened this issue Jul 20, 2020 · 2 comments · Fixed by #5768
Closed

Question: avatar text font-size with calc()? Possible to eliminate? #5592

mmilano opened this issue Jul 20, 2020 · 2 comments · Fixed by #5768
Assignees
Projects

Comments

@mmilano
Copy link
Contributor

mmilano commented Jul 20, 2020

When the avatar component is used, and text is specified e.g. initials

<b-avatar rounded text="DF"></b-avatar>

the resulting element gets inline font-size css:

<span class="b-avatar-text" style="font-size: calc(1em);"><span>DF</span></span>

Questions:

  1. Why the seemingly redundant second around the text itself, inside the .b-avatar-text?
  2. Is there a way to completely disable the creation of the inline css? Is that method of implementation necessary as a design decision (on the part of the library)?

Not only do I wish to not have the inline-css (as principle), I am already styling the text with custom css.
On a page with many avatars, the overhead is undesirable.

In general, this seems like it would be better addressed by styles in the scss.

(For that matter, the inline css on the .b-avatar element is equally undesirable).

  • inquiring.
@mmilano mmilano changed the title Question: avatar text font-size with calc() Question: avatar text font-size with calc()? Jul 20, 2020
@mmilano mmilano changed the title Question: avatar text font-size with calc()? Question: avatar text font-size with calc()? Possible to eliminate? Jul 20, 2020
@jacobmllr95
Copy link
Member

jacobmllr95 commented Jul 22, 2020

Maybe it would be a good idea to apply classes for the sm and lg sizes to <b-avatar> and make them configurable via SCSS variables. By default (:size="null"), no size class would be applied and a width and height of 2.5em would be set via CSS.

The .b-avatar-text class would apply a font-size: 40%;.

When the user defines a size as number or with a unit we would apply the CSS inline styles as done currently.

@mmilano
Copy link
Contributor Author

mmilano commented Jul 23, 2020

In general shape, your proposal sounds good!

As I use BsVue more, I notice that the inline styles are used in a number of places, components.
Perhaps it is possible to consider a more general behavior across the library that would be something like this ?:

  • When the size is defined as number or with a unit, apply the CSS inline styles as done currently.
  • if the size is defined as boolean false e.g. :size=false, no inline size styles are output. CSS rules would control styling entirely.

From there, the existing SCSS variables and definitions can be used to control appearance, either accepting the defaults or via custom overrides.

@jacobmllr95 jacobmllr95 added this to To do in v2.17.0 via automation Jul 24, 2020
@jacobmllr95 jacobmllr95 self-assigned this Aug 20, 2020
@jacobmllr95 jacobmllr95 moved this from To do to In progress in v2.17.0 Sep 13, 2020
v2.17.0 automation moved this from In progress to Done Sep 13, 2020
jacobmllr95 added a commit that referenced this issue Sep 13, 2020
… (#5768)

* feat(b-avatar): add size classes for `sm` and `lg`

* Update avatar.js

* Update avatar.js

* Update avatar.js

* Update avatar-group.spec.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.17.0
  
Done
Development

Successfully merging a pull request may close this issue.

2 participants