ion-note is smaller when in a card

[WhatsThatItsPat]

Ionic version: (check one with "x")
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
An ion-note within a card is smaller than one outside. This seems inconsistent.

Expected behavior:
I'd expect them to be the same, perhaps with an optional attribute (or custom css) to make them smaller.

Steps to reproduce:
http://plnkr.co/edit/zOOA0o99ul4S8NBLrrRl?p=preview

Related code:

insert any relevant code here

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages:

    @ionic/cli-plugin-cordova       : 1.6.2
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : ios 4.3.1
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 24.4.1
    Node              : v6.9.4
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b
    ios-deploy        : 1.9.1
    ios-sim           : 6.0.0
    npm               : 4.6.1

[kensodemann]

Hello, thank you for opening an issue with us! I discussed this issue with one of our designers and the styling that you see is intentional. Using our SASS based theming infrastructure it is very easy to change any of those behaviors to meet your specific needs.

Here is a link to one use case for the smaller text in the note when used in a card: http://ionicframework.com/docs/components/#card-advanced-social

[WhatsThatItsPat]

While intentional, there's an argument(s) to make that it's still incorrect. Since you're revisiting this similar issue, this one should be as well.

The problem in each is the same; you've introduced inconsistent behavior depending on use case. Is there a spec to point to saying that notes in a card should be smaller than notes in a list? If not, the decision is arbitrary.

Even if arbitrary, consistent behavior should be favored with options to alter the behavior. We shouldn't expect inconsistencies, and further expect to write custom code to resolve them.

[brandyscarney]

The size of the note should be the same for card & item in Material Design, but smaller than the item's label text:

iOS keeps the font size the same as the item's label text and it doesn't have a "card" component similar to Material Design's:

I spoke to @bensperry about this and here is what we need to do:

• Note should have the same font-size whether inside of an item or a card
• MD: the font-size should be smaller than the label’s text
• iOS: the font-size should be equal to the label’s text

Let me know if you disagree with any of this, thanks!

[WhatsThatItsPat]

Are the two MD examples really a good starting point for a decision? They are both complicated/custom avatar examples with ~5 sub-details. In these cases, a shrunken note makes the most sense.

A plain list, like the iOS example, is a far more common scenario. If we looked at that with MD styles, it might look odd were all the notes small, but as long as it's consistent. We need to find a comparably simple MD example to see if that's really the standard.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.