feat(note): sync the md theme with Material Design 2

BREAKING.md

@@ -465,6 +465,7 @@ The following breaking changes apply to `ion-note`:
 2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. <sup>[2](#version-10x-note-hue)</sup>
 3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. <sup>[3](#version-10x-note-mode-classes)</sup>
 4. The `ios` note is larger and has a set line height and letter spacing. <sup>[4](#version-10x-note-ios-typography)</sup>
+5. The `md` note is smaller and has a set line height and letter spacing. <sup>[5](#version-10x-note-md-typography)</sup>
 
 <h5 id="version-10x-note-replaced-css-variables">Replaced CSS variables</h5>
 
@@ -502,6 +503,16 @@ In the `ios` theme, the note now matches the detail text of an iOS list row, in
 - The line height is now `1.294` (`22px` at `17px`) instead of inherited. To revert to the previous appearance, set `IonNote.line.height` to `inherit` for global styles, or `--ion-note-line-height` for component-specific styles.
 - The letter spacing is now `-0.0235em` (`-0.4px` at `17px`) instead of inherited. To revert to the previous appearance, set `IonNote.letterSpacing` to `inherit` for global styles, or `--ion-note-letter-spacing` for component-specific styles.
 
+<h5 id="version-10x-note-md-typography">Material Design typography</h5>
+
+In the `md` theme, the note now uses the caption style of a Material Design list's metadata, in accordance with the Material Design guidelines:
+
+- The font size is now `12px` instead of `14px`. To revert to the previous appearance, set `IonNote.font.size` for global styles, or `--ion-note-font-size` for component-specific styles.
+- In items and item dividers, the font size is now `12px` instead of `11px`, the same as anywhere else. To revert to the previous appearance, set `--ion-note-font-size` on those notes, such as `ion-item ion-note`.
+- The line height is now `1rem` (`16px`) instead of inherited. To revert to the previous appearance, set `IonNote.line.height` to `inherit` for global styles, or `--ion-note-line-height` for component-specific styles.
+- The letter spacing is now `0.0333em` (`0.4px` at `12px`) instead of inherited. To revert to the previous appearance, set `IonNote.letterSpacing` to `inherit` for global styles, or `--ion-note-letter-spacing` for component-specific styles.
+- In items and item dividers, the note no longer has `10px` of space below it.
+
 <h4 id="version-10x-radio-group">Radio Group</h4>
 
 Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

core/api.txt

@@ -1501,11 +1501,6 @@ ion-item-divider,css-prop,--ion-item-divider-label-margin-start
 ion-item-divider,css-prop,--ion-item-divider-label-margin-top
 ion-item-divider,css-prop,--ion-item-divider-min-height
 ion-item-divider,css-prop,--ion-item-divider-note-align-self
-ion-item-divider,css-prop,--ion-item-divider-note-font-size
-ion-item-divider,css-prop,--ion-item-divider-note-margin-bottom
-ion-item-divider,css-prop,--ion-item-divider-note-margin-end
-ion-item-divider,css-prop,--ion-item-divider-note-margin-start
-ion-item-divider,css-prop,--ion-item-divider-note-margin-top
 ion-item-divider,css-prop,--ion-item-divider-note-padding-bottom
 ion-item-divider,css-prop,--ion-item-divider-note-padding-end
 ion-item-divider,css-prop,--ion-item-divider-note-padding-start

core/src/components/item-divider/item-divider.interface.ts

@@ -84,11 +84,6 @@ export type IonItemDividerRecipe = {
       self?: string;
     };
 
-    font?: {
-      size?: string;
-    };
-
-    margin?: IonMargin;
     padding?: IonPadding;
   };
 

core/src/components/item-divider/item-divider.scss

@@ -51,12 +51,7 @@
    * @prop --ion-item-divider-icon-end-slotted-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-icon when it is in the end slot of the item divider
    *
    * Slotted Note
-   * @prop --ion-item-divider-note-margin-top: Top margin of the slotted ion-note
-   * @prop --ion-item-divider-note-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted ion-note
-   * @prop --ion-item-divider-note-margin-bottom: Bottom margin of the slotted ion-note
-   * @prop --ion-item-divider-note-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the slotted ion-note
    * @prop --ion-item-divider-note-align-self: Align self of the slotted ion-note
-   * @prop --ion-item-divider-note-font-size: Font size of the slotted ion-note
    * @prop --ion-item-divider-note-padding-top: Top padding of the slotted ion-note when it has a slot
    * @prop --ion-item-divider-note-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the slotted ion-note when it has a slot
    * @prop --ion-item-divider-note-padding-bottom: Bottom padding of the slotted ion-note when it has a slot
@@ -258,16 +253,7 @@
 
 // Note
 ::slotted(ion-note) {
-  @include mixins.margin(
-    var(--ion-item-divider-note-margin-top),
-    var(--ion-item-divider-note-margin-end),
-    var(--ion-item-divider-note-margin-bottom),
-    var(--ion-item-divider-note-margin-start)
-  );
-
   align-self: var(--ion-item-divider-note-align-self);
-
-  font-size: var(--ion-item-divider-note-font-size, revert-layer);
 }
 
 ::slotted(ion-note[slot]) {

core/src/components/item/item.md.scss

@@ -147,8 +147,6 @@
   @include margin(0);
 
   align-self: flex-start;
-
-  font-size: $item-md-note-slot-font-size;
 }
 
 ::slotted(ion-note[slot]) {

core/src/components/item/item.md.vars.scss

@@ -141,17 +141,14 @@ $item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end;
 // Note Slots
 // --------------------------------------------------
 
-/// @prop - Font size of a note in the start/end slot
-$item-md-note-slot-font-size: dynamic-font(11px);
-
 /// @prop - Padding top for a note in the start/end slot
-$item-md-note-slot-padding-top: 18px;
+$item-md-note-slot-padding-top: 16px;
 
 /// @prop - Padding end for a note in the start/end slot
 $item-md-note-slot-padding-end: 0;
 
 /// @prop - Padding bottom for a note in the start/end slot
-$item-md-note-slot-padding-bottom: 10px;
+$item-md-note-slot-padding-bottom: 0;
 
 /// @prop - Padding start for a note in the start/end slot
 $item-md-note-slot-padding-start: $item-md-note-slot-padding-end;

core/src/components/note/test/basic/index.html

@@ -75,6 +75,23 @@
             <ion-note slot="end">Really really long note</ion-note>
           </ion-item>
         </ion-list>
+
+        <ion-list>
+          <ion-item-divider>
+            <ion-label>Item Divider Note</ion-label>
+            <ion-note slot="end">99</ion-note>
+          </ion-item-divider>
+
+          <ion-item-divider>
+            <ion-label>Primary Note</ion-label>
+            <ion-note slot="end" color="primary">99</ion-note>
+          </ion-item-divider>
+
+          <ion-item-divider>
+            <ion-label>Warning Note</ion-label>
+            <ion-note slot="start" color="warning">99</ion-note>
+          </ion-item-divider>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>

core/src/components/note/test/basic/note.e2e.ts

@@ -55,10 +55,24 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
 });
 
 /**
- * Only MD ion-item-divider has ion-note specific logic
+ * Only MD and ionic ion-item-divider have ion-note specific logic
  */
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('note: item-divider'), () => {
+    test('should not have visual regressions when next to a label in an item-divider', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-item-divider>
+          <ion-label>Label</ion-label>
+          <ion-note slot="end">99</ion-note>
+        </ion-item-divider>
+      `,
+        config
+      );
+      const itemDivider = page.locator('ion-item-divider');
+      await expect(itemDivider).toHaveScreenshot(screenshot(`note-item-divider-label`));
+    });
+
     test('should not have visual regressions when in the start slot of an item-divider', async ({ page }) => {
       await page.setContent(
         `

core/src/themes/ionic/default.tokens.ts

@@ -756,22 +756,11 @@ export const defaultTheme: DefaultTheme = {
           self: 'flex-start',
         },
 
-        font: {
-          size: dynamicFont(global.root, components.item.note.slot.font.size),
-        },
-
-        margin: {
-          top: 'var(--ion-spacing-0)',
-          end: 'var(--ion-spacing-0)',
-          bottom: 'var(--ion-spacing-0)',
-          start: 'var(--ion-spacing-0)',
-        },
-
         padding: {
           top: components.item.note.slot.padding.top,
-          end: components.item.note.slot.padding.end,
+          end: 'var(--ion-spacing-0)',
           bottom: components.item.note.slot.padding.bottom,
-          start: components.item.note.slot.padding.start,
+          start: 'var(--ion-spacing-0)',
         },
       },
 

core/src/themes/ionic/shared.tokens.ts

@@ -81,15 +81,9 @@ export const components = {
 
     note: {
       slot: {
-        font: {
-          size: 11,
-        },
-
         padding: {
           top: 'var(--ion-spacing-450)',
-          end: 'var(--ion-spacing-0)',
           bottom: 'var(--ion-spacing-250)',
-          start: 'var(--ion-spacing-0)',
         },
       },
     },

core/src/themes/md/default.tokens.ts

@@ -892,23 +892,12 @@ export const defaultTheme: DefaultTheme = {
           self: 'flex-start',
         },
 
-        font: {
-          size: dynamicFont(global.root, components.item.note.slot.font.size),
-        },
-
-        margin: {
-          top: 'var(--ion-spacing-0)',
+        padding: {
+          top: components.item.note.slot.padding.top,
           end: 'var(--ion-spacing-0)',
           bottom: 'var(--ion-spacing-0)',
           start: 'var(--ion-spacing-0)',
         },
-
-        padding: {
-          top: components.item.note.slot.padding.top,
-          end: components.item.note.slot.padding.end,
-          bottom: components.item.note.slot.padding.bottom,
-          start: components.item.note.slot.padding.start,
-        },
       },
 
       avatar: {
@@ -987,7 +976,7 @@ export const defaultTheme: DefaultTheme = {
     IonNote: {
       font: {
         family: 'var(--ion-font-family)',
-        size: dynamicFont(global.root, 14),
+        size: dynamicFont(global.root, 12),
       },
 
       hue: {
@@ -1015,6 +1004,12 @@ export const defaultTheme: DefaultTheme = {
           },
         },
       },
+
+      letterSpacing: '0.0333em',
+
+      line: {
+        height: dynamicFont(global.root, 16),
+      },
     },
 
     IonProgressBar: {

core/src/themes/md/shared.tokens.ts

@@ -87,15 +87,8 @@ export const components = {
 
     note: {
       slot: {
-        font: {
-          size: 11,
-        },
-
         padding: {
-          top: 'var(--ion-spacing-450)',
-          end: 'var(--ion-spacing-0)',
-          bottom: 'var(--ion-spacing-250)',
-          start: 'var(--ion-spacing-0)',
+          top: 'var(--ion-spacing-400)',
         },
       },
     },