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

Global font-family style breaks other fonts #603

Closed
ilyakonrad opened this issue Apr 25, 2024 · 3 comments · Fixed by #604
Closed

Global font-family style breaks other fonts #603

ilyakonrad opened this issue Apr 25, 2024 · 3 comments · Fixed by #604

Comments

@ilyakonrad
Copy link

ilyakonrad commented Apr 25, 2024

While creating a custom channelHeaderInfoTemplate that on click opens a popup with channel members, I've faced an issue related to Angular Material icon-buttons. The font was broken:

image

It turns out to be the result of this CSS:

image

Here's my channel-header-info-template.component.html:

<app-fade-in *ngIf="channel">
  <button class="open-member-list-button" (click)="openMembersList()">
    {{ channel.data?.member_count }} {{ channel.data?.member_count === 1 ? 'member' : 'members' }}
    {{ channel.state?.watcher_count || 0 }} {{ 'chat.online' | translate }}
  </button>

  <app-popup
    *ngIf="membersListPopup.open"
    [loading]="membersListPopup.loading"
    (popupClose)="membersListPopup.open = false"
  >
    <h3 class="popup__header">
      <span>Members</span>
      <div class="popup__header-button-wrapper">
        <div class="popup__header-buttons">
          <button mat-icon-button (click)="membersListPopup.open = false">
             <mat-icon>close</mat-icon>
          </button>
        </div>
      </div>
    </h3>
    ...
  </app-popup>
</app-fade-in>
@szuperaz
Copy link
Contributor

Thanks for reporting the issue, it's indeed unnecessary to have the extra * in the font-family selector. I'll fix it, you'll be notified through this issue when it's released.

szuperaz added a commit to GetStream/stream-chat-css that referenced this issue Apr 25, 2024
…#292)

### 🎯 Goal

Fix this issue:
GetStream/stream-chat-angular#603

### 🛠 Implementation details

The `font-family` setting is inherited, so there is no need for the
extra ` *` selector, which can make integrators' lives harder.

### 🎨 UI Changes

_Add relevant screenshots_

Make sure to test with both Angular and React (with both `MessageList`
and `VirtualizedMessageList` components) SDKs
szuperaz added a commit that referenced this issue Apr 25, 2024
fix: too specific font-family setting #603
github-actions bot pushed a commit that referenced this issue Apr 25, 2024
## [4.66.4](v4.66.3...v4.66.4) (2024-04-25)

### Bug Fixes

* too specific font-family setting [#603](#603) ([2c53eb1](2c53eb1))
Copy link

🎉 This issue has been resolved in version 4.66.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this issue Apr 25, 2024
# [5.0.0-v5.12](v5.0.0-v5.11...v5.0.0-v5.12) (2024-04-25)

### Bug Fixes

* too specific font-family setting [#603](#603) ([2c53eb1](2c53eb1))
Copy link

🎉 This issue has been resolved in version 5.0.0-v5.12 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants