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

[Slide-toogle] Font size is different from others components (eg : checkbox) #10552

Closed
WizardPC opened this issue Mar 24, 2018 · 3 comments · Fixed by #10688
Closed

[Slide-toogle] Font size is different from others components (eg : checkbox) #10552

WizardPC opened this issue Mar 24, 2018 · 3 comments · Fixed by #10688
Assignees

Comments

@WizardPC
Copy link

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Slide-toggle label as the same font size of a checkbox label

What is the current behavior?

Slide-toggle label as a specific font size

What are the steps to reproduce?

https://stackblitz.com/edit/angular-yllug9

What is the use-case or motivation for changing an existing behavior?

Labels of differents sizes are not pretty, especially when you have a mix of checkbox and slide-toggle next to each other...

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

See SB

@raygervais
Copy link
Contributor

I'd like to correct this. I do agree that differing sizes of form elements text can be obtrusive when not used properly. It appears in the spec that the font is the same, so I'd say this is a bug: https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button

@josephperrott josephperrott self-assigned this Mar 26, 2018
@raygervais
Copy link
Contributor

raygervais commented Apr 2, 2018

After doing some research, it appears that the slider-toggle component makes it's text content follow the body-1 style, which uses 14px. This means that either it is following proper conventions and the check / radio components are not, or it should not be following the body-1 styling for it's content.

Opinions?

https://github.com/angular/material2/blob/master/src/lib/core/typography/_typography.scss#L33

My guess is that it's supposed to also use the input class instead. The evidence which points me towards this is this function which is using body-1 https://github.com/angular/material2/blob/master/src/lib/slide-toggle/_slide-toggle-theme.scss#L91

@mixin mat-slide-toggle-typography($config) {
  .mat-slide-toggle-content {
    @include mat-typography-level-to-styles($config, body-1);
  }
}

@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 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
3 participants