diff --git a/BREAKING.md b/BREAKING.md index 5745996c981..fa3bf471a3a 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -464,6 +464,7 @@ The following breaking changes apply to `ion-note`: 1. `--color` has been replaced. [1](#version-10x-note-replaced-css-variables) 2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. [2](#version-10x-note-hue) 3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. [3](#version-10x-note-mode-classes) +4. The `ios` note is larger and has a set line height and letter spacing. [4](#version-10x-note-ios-typography)
Replaced CSS variables
@@ -493,6 +494,14 @@ When `color` is set, the note color now reads from a token instead of `--ion-col Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`. +
iOS typography
+ +In the `ios` theme, the note now matches the detail text of an iOS list row, in accordance with the iOS guidelines: + +- The font size is now `17px` instead of `16px`. To revert to the previous appearance, set `IonNote.font.size` to `max(14px, 1rem)` for global styles, or `--ion-note-font-size` for component-specific styles. +- 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. +

Radio Group

Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). diff --git a/core/api.txt b/core/api.txt index 77e4dc3ca05..36d32ce20ae 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1907,6 +1907,8 @@ ion-note,css-prop,--ion-note-hue-bold-default-color ion-note,css-prop,--ion-note-hue-bold-semantic-default-color ion-note,css-prop,--ion-note-hue-subtle-default-color ion-note,css-prop,--ion-note-hue-subtle-semantic-default-color +ion-note,css-prop,--ion-note-letter-spacing +ion-note,css-prop,--ion-note-line-height ion-picker,shadow ion-picker,prop,mode,"ios" | "md",undefined,false,false diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png index 02013818e71..e119963b5fb 100644 Binary files a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png index 3fe45ac31b0..bf80d85ec68 100644 Binary files a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png index 8ce1401bfd6..584539e3409 100644 Binary files a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/_note.docs.scss b/core/src/components/note/_note.docs.scss index 62b5b8ff2e7..795e4220b03 100644 --- a/core/src/components/note/_note.docs.scss +++ b/core/src/components/note/_note.docs.scss @@ -5,4 +5,6 @@ * @prop --ion-note-hue-bold-semantic-default-color: Text color of the `bold` hue when a semantic color is applied * @prop --ion-note-hue-subtle-default-color: Text color of the `subtle` hue * @prop --ion-note-hue-subtle-semantic-default-color: Text color of the `subtle` hue when a semantic color is applied + * @prop --ion-note-letter-spacing: Letter spacing of the note + * @prop --ion-note-line-height: Line height of the note */ diff --git a/core/src/components/note/note.interface.ts b/core/src/components/note/note.interface.ts index 445d8e0f777..3b589c4447f 100644 --- a/core/src/components/note/note.interface.ts +++ b/core/src/components/note/note.interface.ts @@ -20,6 +20,12 @@ export type IonNoteRecipe = { }; }; }; + + letterSpacing?: string; + + line?: { + height?: string; + }; }; export type IonNoteConfig = { diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss index 25c5a6e874d..f64c23a292b 100644 --- a/core/src/components/note/note.scss +++ b/core/src/components/note/note.scss @@ -8,6 +8,10 @@ font-family: var(--ion-note-font-family, inherit); font-size: var(--ion-note-font-size); + + letter-spacing: var(--ion-note-letter-spacing); + + line-height: var(--ion-note-line-height); } // Note: Hue diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Chrome-linux.png index 6c634c7a75a..31868df1d8a 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Firefox-linux.png index e16f9e82aa2..ab85e40c936 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Safari-linux.png index 7f4011186f2..fad993b13e2 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png index 6d917491ad6..40af10482c2 100644 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png index a68fb0a5bf0..91519abcf2c 100644 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png index efe81cd7094..5d1705e166b 100644 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png index 41342dd128e..22bc159a6af 100644 Binary files a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Firefox-linux.png index 3d8c8d88176..23ccc601135 100644 Binary files a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png index 99bbc246001..193b3067103 100644 Binary files a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png index 41342dd128e..22bc159a6af 100644 Binary files a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Firefox-linux.png index 3d8c8d88176..23ccc601135 100644 Binary files a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png index 99bbc246001..193b3067103 100644 Binary files a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index 11bc3906368..d6747a085fc 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -871,7 +871,7 @@ export const defaultTheme: DefaultTheme = { IonNote: { font: { family: 'var(--ion-font-family)', - size: dynamicFontMin(global.root, 0.875, 16), + size: dynamicFontMin(global.root, 0.875, 17), }, hue: { @@ -899,6 +899,12 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + letterSpacing: '-0.0235em', + + line: { + height: '1.294', + }, }, IonProgressBar: {