Included component for an icon with a circle around it, in small, med…

[jgiardino]

Addresses icon with circle

Summary of changes:

• Included parameter in icon component for adding a decorator class, which in this case is one of the following classes:
  • pficon-circle-sm
  • pficon-circle-md
  • pficon-circle-lg

[jgiardino]

When updates in _pf-basic-icons.scss are included in patternfly.css, do I also check in patternfly.css, or only _pf-basic-icons.scss? I excluded patternfly.css from my checkin since I wasn't sure.

[srambach]

I like calculating based on rem or maybe actually em? Why not do that for -lg and -md?

[jgiardino]

I thought about that. I would need to use specific rem values instead of variables like $font-size-relative-lg. What does everyone think?

[srambach]

This looks nice. Code looks good on inspection but I haven't tried it out.

[andresgalante]

For our class names we'll use BEM, following the structure: {{pf-block}}__{{element}}--{{modifier}}
The size is a modifier, but is circle and element?
@jgiardino @srambach: what do you think? ?

[srambach]

Good call. I think circle is a modifier of icon.

[andresgalante]

Oh, yes! I've haven't though it that way. If we decouple them `pf-icon--circleandpf-icon--lg``and``pf-icon-sm``. then we'll make it even more modular.
What do you think?

[jgiardino]

I agree that circle is a modifier. And I wasn't sure about the use of double dashes, is that something I should include?

I like the idea of separating icon size from the circle. I think that would look like this:

.pf-icon--circle {
width: calc(2em + 4px);
height: calc(2em + 4px);
line-height: 2em;
text-align: center;
border: 2px solid $color-pf-blue-300;
border-radius: 50%;
}
.pf-icon--lg {
font-size: $icon-size-lg;
}
.pf-icon--md {
font-size: $icon-size-md;
}

I don't think this is necessary:
.pf-icon--base {
font-size: $font-size-relative-base;
}

[andresgalante]

👍 excellent and I agree that --base is not neccesary

[jgiardino]

@andresgalante @srambach Let me know if you have anymore suggestions. Thanks!

[srambach]

I like it even better now :-)

[andresgalante]

I've tested and it looks great. Thanks @jgiardino great job!

The only thing I'd add is separate doc section for icon-size than icon-circle, following the way we show btns or pagination.

Or if we want to keep them together name the file 01-icon-variations and show examples for icons in different sizes with and without circles

[andresgalante]

@jgiardino thanks a lot, you are the best!