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

Mat-Badge size small ist too small #15251

Closed
DaSchTour opened this issue Feb 20, 2019 · 2 comments · Fixed by #15280
Closed

Mat-Badge size small ist too small #15251

DaSchTour opened this issue Feb 20, 2019 · 2 comments · Fixed by #15280
Assignees
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@DaSchTour
Copy link
Contributor

DaSchTour commented Feb 20, 2019

What is the expected behavior?

MatBadgeSize=small creates a readable result

What is the current behavior?

MatBadgeSize=small is too small

Size is calculated from base of 12px by dividing with 2. I think small should not be half that big but maybe just 10%. But 6px is definitely not usable. And maybe the badge itself could be 2times smaller but the font-size may not be reduced that much.

What are the steps to reproduce?

Create a matBadge with matBadgeSize=small

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.3.1
Node: 8.10.0
OS: darwin x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/.DS_Store         <error>
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.3.1
@angular/.DS_Store                <error>
@angular/cdk                      7.3.1
@angular/cli                      7.3.1
@angular/material                 7.3.1
@ngtools/.DS_Store                <error>
@ngtools/webpack                  7.3.1
@schematics/.DS_Store             <error>
@schematics/angular               7.3.1
@schematics/update                0.13.1
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

Is there anything else we should know?

@crisbeto crisbeto self-assigned this Feb 22, 2019
@crisbeto crisbeto added has pr P4 A relatively minor issue that is not relevant to core functions labels Feb 22, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 22, 2019
Bumps the font size of the small badge, because the current one is too small.

Fixes angular#15251.
@eTallang
Copy link

eTallang commented Feb 25, 2019

The large size doesn't look good either imo. If the badge contains two digits, they overflow. This is a pretty common use case.
https://stackblitz.com/edit/angular-upbq3s

andrewseguin pushed a commit that referenced this issue Mar 20, 2019
Bumps the font size of the small badge, because the current one is too small.

Fixes #15251.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants