diff --git a/BREAKING.md b/BREAKING.md index a2ec3ec4e9d..5745996c981 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -30,6 +30,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Input Otp](#version-10x-input-otp) - [Item Divider](#version-10x-item-divider) - [Menu Toggle](#version-10x-menu-toggle) + - [Note](#version-10x-note) - [Radio Group](#version-10x-radio-group) - [Ripple Effect](#version-10x-ripple-effect) - [Router Link](#version-10x-router-link) @@ -456,6 +457,42 @@ The following breaking changes apply to `ion-menu-toggle`: Remove any instances that target the mode classes: `ion-menu-toggle.md`, `ion-menu-toggle.ios`. +

Note

+ +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) + +
Replaced CSS variables
+ +Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides: + +| Old (9.x) | New token (global) | New CSS variable (component-specific) | +|---|---|---| +| `--color` | `IonNote.hue.bold.default.color` | `--ion-note-hue-bold-default-color` | + +> [!NOTE] +> A note with `hue="subtle"` reads `IonNote.hue.subtle.default.color` for global styles, or `--ion-note-hue-subtle-default-color` for component-specific styles. + +
New hue property and color tokens
+ +A new `hue` property selects between vibrant and muted color variants. It defaults to `"bold"`. + +When `color` is set, a bold note now uses the color's `foreground` variant instead of `base`, which is darker so the text stays readable on the page. To revert to the previous appearance, set `IonNote.hue.bold.semantic.default.color` to `var(--ion-color-base)` for global styles, or `--ion-note-hue-bold-semantic-default-color` for component-specific styles. + +When `color` is set, the note color now reads from a token instead of `--ion-color-base` directly. Global overrides should use the theme tokens; component-specific overrides use the corresponding CSS variables: + +| Hue | Token (global) | CSS variable (component-specific) | +|---|---|---| +| `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` | +| `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` | + +
Mode classes
+ +Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`. +

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 c5db473b61e..77e4dc3ca05 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1899,11 +1899,14 @@ ion-nav-link,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-note,shadow ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true +ion-note,prop,hue,"bold" | "subtle" | undefined,undefined,false,false ion-note,prop,mode,"ios" | "md",undefined,false,false -ion-note,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-note,css-prop,--color,ionic -ion-note,css-prop,--color,ios -ion-note,css-prop,--color,md +ion-note,css-prop,--ion-note-font-family +ion-note,css-prop,--ion-note-font-size +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-picker,shadow ion-picker,prop,mode,"ios" | "md",undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 242252987da..b7bc4d644b2 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2703,13 +2703,13 @@ export namespace Components { */ "color"?: Color; /** - * The mode determines the platform behaviors of the component. + * Set to `"bold"` for a note with vibrant, bold colors or to `"subtle"` for a note with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset. */ - "mode"?: "ios" | "md"; + "hue"?: Hue; /** - * The theme determines the visual appearance of the component. + * The mode determines the platform behaviors of the component. */ - "theme"?: "ios" | "md" | "ionic"; + "mode"?: "ios" | "md"; } interface IonPicker { "exitInputMode": () => Promise; @@ -8560,13 +8560,13 @@ declare namespace LocalJSX { */ "color"?: Color; /** - * The mode determines the platform behaviors of the component. + * Set to `"bold"` for a note with vibrant, bold colors or to `"subtle"` for a note with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset. */ - "mode"?: "ios" | "md"; + "hue"?: Hue; /** - * The theme determines the visual appearance of the component. + * The mode determines the platform behaviors of the component. */ - "theme"?: "ios" | "md" | "ionic"; + "mode"?: "ios" | "md"; } interface IonPicker { /** @@ -10897,6 +10897,7 @@ declare namespace LocalJSX { } interface IonNoteAttributes { "color": Color; + "hue": Hue; } interface IonPickerColumnAttributes { "disabled": boolean; diff --git a/core/src/components/note/_note.docs.scss b/core/src/components/note/_note.docs.scss new file mode 100644 index 00000000000..62b5b8ff2e7 --- /dev/null +++ b/core/src/components/note/_note.docs.scss @@ -0,0 +1,8 @@ +/** + * @prop --ion-note-font-family: Font family of the note + * @prop --ion-note-font-size: Font size of the note + * @prop --ion-note-hue-bold-default-color: Text color of the `bold` hue + * @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 + */ diff --git a/core/src/components/note/note.interface.ts b/core/src/components/note/note.interface.ts new file mode 100644 index 00000000000..445d8e0f777 --- /dev/null +++ b/core/src/components/note/note.interface.ts @@ -0,0 +1,27 @@ +import type { Hue } from '../../themes/themes.interfaces'; + +export type IonNoteRecipe = { + font?: { + family?: string; + size?: string; + }; + + hue?: { + [K in Hue]?: { + default?: { + color?: string; + }; + + /** Any of the semantic colors like primary, secondary, etc. */ + semantic?: { + default?: { + color?: string; + }; + }; + }; + }; +}; + +export type IonNoteConfig = { + hue?: Hue; +}; diff --git a/core/src/components/note/note.ios.scss b/core/src/components/note/note.ios.scss deleted file mode 100644 index 2d2581928d3..00000000000 --- a/core/src/components/note/note.ios.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "./note.ios.vars"; -@import "./note"; - -// iOS Note -// -------------------------------------------------- - -:host { - --color: #{$note-ios-color}; - - font-size: $note-ios-font-size; -} diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss deleted file mode 100644 index 75836d251b7..00000000000 --- a/core/src/components/note/note.ios.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../themes/native/native.globals.ios"; - -// iOS Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-ios-color: $text-color-step-650; - -/// @prop - Font size of the note -$note-ios-font-size: dynamic-font-min(0.875, 16px); diff --git a/core/src/components/note/note.md.scss b/core/src/components/note/note.md.scss deleted file mode 100644 index 7698c60a013..00000000000 --- a/core/src/components/note/note.md.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "./note.md.vars"; -@import "./note"; - -// Material Design Note -// -------------------------------------------------- - -:host { - --color: #{$note-md-color}; - - font-size: $note-md-font-size; -} diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss deleted file mode 100644 index b733c522f8c..00000000000 --- a/core/src/components/note/note.md.vars.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../themes/native/native.globals.md"; - -// Material Design Note -// -------------------------------------------------- - -/// @prop - Text color of the note -$note-md-color: $text-color-step-400; - -/// @prop - Font size of the note -$note-md-font-size: dynamic-font(14px); diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss index 5646e0a36bf..25c5a6e874d 100644 --- a/core/src/components/note/note.scss +++ b/core/src/components/note/note.scss @@ -1,19 +1,30 @@ -@import "./note.ios.vars"; +@use "./note.docs"; -// iOS Note +// Note // -------------------------------------------------- :host { - /** - * @prop --color: Color of the note - */ - color: var(--color); + box-sizing: border-box; - font-family: $font-family-base; + font-family: var(--ion-note-font-family, inherit); + font-size: var(--ion-note-font-size); +} - box-sizing: border-box; +// Note: Hue +// -------------------------------------------------- + +:host(.note-hue-bold) { + color: var(--ion-note-hue-bold-default-color); +} + +:host(.note-hue-subtle) { + color: var(--ion-note-hue-subtle-default-color); +} + +:host(.note-hue-bold.ion-color) { + color: var(--ion-note-hue-bold-semantic-default-color); } -:host(.ion-color) { - color: #{current-color(base)}; +:host(.note-hue-subtle.ion-color) { + color: var(--ion-note-hue-subtle-semantic-default-color); } diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx index e694ad94a73..26690bb47d5 100644 --- a/core/src/components/note/note.tsx +++ b/core/src/components/note/note.tsx @@ -2,20 +2,16 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, Prop, h } from '@stencil/core'; import { createColorClasses } from '@utils/theme'; -import { getIonTheme } from '../../global/ionic-global'; +import { config } from '../../global/config'; import type { Color } from '../../interface'; +import type { Hue } from '../../themes/themes.interfaces'; /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. */ @Component({ tag: 'ion-note', - styleUrls: { - ios: 'note.ios.scss', - md: 'note.md.scss', - ionic: 'note.md.scss', - }, + styleUrl: 'note.scss', shadow: true, }) export class Note implements ComponentInterface { @@ -26,12 +22,31 @@ export class Note implements ComponentInterface { */ @Prop({ reflect: true }) color?: Color; + /** + * Set to `"bold"` for a note with vibrant, bold colors or to `"subtle"` for + * a note with muted, subtle colors. + * + * Defaults to `"bold"` if both the hue property and theme config are unset. + */ + @Prop() hue?: Hue; + + /** + * Gets the note hue. Uses the `hue` property if set, otherwise + * checks the theme config and falls back to 'bold' if neither is provided. + */ + get hueValue(): Hue { + const hueConfig = config.getObjectValue('IonNote.hue', 'bold') as Hue; + + return this.hue || hueConfig; + } + render() { - const theme = getIonTheme(this); + const { color, hueValue } = this; + return ( diff --git a/core/src/components/note/test/basic/note.e2e.ts b/core/src/components/note/test/basic/note.e2e.ts index b0fea3322f8..276d07e571b 100644 --- a/core/src/components/note/test/basic/note.e2e.ts +++ b/core/src/components/note/test/basic/note.e2e.ts @@ -16,17 +16,6 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti const note = page.locator('ion-note'); await expect(note).toHaveScreenshot(screenshot(`note-diff`)); }); - - test('should render color correctly', async ({ page }) => { - await page.setContent( - ` - 99 - `, - config - ); - const note = page.locator('ion-note'); - await expect(note).toHaveScreenshot(screenshot(`note-color`)); - }); }); }); diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index bbd670a6166..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 4a4d1d29996..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index f0c59ea46d5..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 03ae047c793..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 37ffeddd971..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 79460f1f957..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 4246f0c09ba..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 34978ea14ce..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index f0c59ea46d5..00000000000 Binary files a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/note/test/hue/note.e2e.ts b/core/src/components/note/test/hue/note.e2e.ts new file mode 100644 index 00000000000..4173cc8f2e8 --- /dev/null +++ b/core/src/components/note/test/hue/note.e2e.ts @@ -0,0 +1,35 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +import { HUES } from '../../../../themes/themes.interfaces'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('note: hue'), () => { + HUES.forEach((hue) => { + test(`should render ${hue} notes`, async ({ page }) => { + await page.setContent( + ` + + +
+ Default + Danger +
+ `, + config + ); + + const container = page.locator('.container'); + + await expect(container).toHaveScreenshot(screenshot(`note-hue-${hue}`)); + }); + }); + }); +}); diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fd53c734c8e Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..8cb8a6fdf48 Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..63b20731eee Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-ionic-md-ltr-light-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 new file mode 100644 index 00000000000..41342dd128e Binary files /dev/null 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 new file mode 100644 index 00000000000..3d8c8d88176 Binary files /dev/null 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 new file mode 100644 index 00000000000..99bbc246001 Binary files /dev/null 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-bold-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dd08d116afd Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e0e839417f9 Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0662b4c5e37 Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-bold-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fd53c734c8e Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..8cb8a6fdf48 Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..63b20731eee Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-ionic-md-ltr-light-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 new file mode 100644 index 00000000000..41342dd128e Binary files /dev/null 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 new file mode 100644 index 00000000000..3d8c8d88176 Binary files /dev/null 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 new file mode 100644 index 00000000000..99bbc246001 Binary files /dev/null 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/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dd08d116afd Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e0e839417f9 Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0662b4c5e37 Binary files /dev/null and b/core/src/components/note/test/hue/note.e2e.ts-snapshots/note-hue-subtle-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/test/note.spec.ts b/core/src/components/note/test/note.spec.ts new file mode 100644 index 00000000000..a9a093f8a20 --- /dev/null +++ b/core/src/components/note/test/note.spec.ts @@ -0,0 +1,65 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { config } from '../../../global/config'; +import { Note } from '../note'; + +describe('note: classes', () => { + it('should add the color classes when color is set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('ion-color')).toBe(true); + expect(page.root!.classList.contains('ion-color-primary')).toBe(true); + }); + + it('should add the bold hue class when hue is not set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-bold')).toBe(true); + }); + + it('should add the hue class when hue is set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-subtle')).toBe(true); + expect(page.root!.classList.contains('note-hue-bold')).toBe(false); + }); +}); + +describe('note: config', () => { + beforeEach(() => { + config.reset({ + customTheme: { config: { components: { IonNote: { hue: 'subtle' } } } }, + }); + }); + + afterEach(() => { + config.reset({}); + }); + + it('should use the config hue when the prop is not set', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-subtle')).toBe(true); + }); + + it('should use the hue prop over the config value', async () => { + const page = await newSpecPage({ + components: [Note], + html: `Note`, + }); + + expect(page.root!.classList.contains('note-hue-bold')).toBe(true); + }); +}); diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index f9865f28cfd..7f7b69c2801 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -34,6 +34,10 @@ export const defaultTheme: DefaultTheme = { size: 'large', }, + IonNote: { + hue: 'bold', + }, + IonProgressBar: { shape: 'round', }, @@ -844,6 +848,39 @@ export const defaultTheme: DefaultTheme = { }, }, + IonNote: { + font: { + family: 'var(--ion-font-family)', + size: dynamicFont(global.root, 14), + }, + + hue: { + bold: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground'), + }, + }, + }, + + subtle: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground', { subtle: true }), + }, + }, + }, + }, + }, + IonProgressBar: { height: 'var(--ion-scaling-100)', diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index d86d7acfc60..11bc3906368 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -45,6 +45,10 @@ export const defaultTheme: DefaultTheme = { size: 'large', }, + IonNote: { + hue: 'bold', + }, + IonProgressBar: { shape: 'round', }, @@ -864,6 +868,39 @@ export const defaultTheme: DefaultTheme = { }, }, + IonNote: { + font: { + family: 'var(--ion-font-family)', + size: dynamicFontMin(global.root, 0.875, 16), + }, + + hue: { + bold: { + default: { + color: `var(--ion-text-color-step-650, ${mix(baseColors.white, baseColors.black, '35%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground'), + }, + }, + }, + + subtle: { + default: { + color: `var(--ion-text-color-step-650, ${mix(baseColors.white, baseColors.black, '35%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground', { subtle: true }), + }, + }, + }, + }, + }, + IonProgressBar: { height: 'var(--ion-scaling-100)', diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts index 90b1861adb8..3b8615282c9 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -39,6 +39,10 @@ export const defaultTheme: DefaultTheme = { size: 'large', }, + IonNote: { + hue: 'bold', + }, + IonProgressBar: { shape: 'rectangular', }, @@ -980,6 +984,39 @@ export const defaultTheme: DefaultTheme = { }, }, + IonNote: { + font: { + family: 'var(--ion-font-family)', + size: dynamicFont(global.root, 14), + }, + + hue: { + bold: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground'), + }, + }, + }, + + subtle: { + default: { + color: `var(--ion-text-color-step-400, ${mix(baseColors.white, baseColors.black, '60%')})`, + }, + + semantic: { + default: { + color: currentColor('foreground', { subtle: true }), + }, + }, + }, + }, + }, + IonProgressBar: { height: 'var(--ion-scaling-100)', diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index e3acc5190d8..16ee3fe6d30 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -6,6 +6,7 @@ import type { IonContentRecipe } from '../components/content/content.interface'; import type { IonGalleryRecipe } from '../components/gallery/gallery.interface'; import type { IonGridRecipe } from '../components/grid/grid.interface'; import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interface'; +import type { IonNoteConfig, IonNoteRecipe } from '../components/note/note.interface'; import type { IonProgressBarConfig, IonProgressBarRecipe } from '../components/progress-bar/progress-bar.interface'; import type { IonRippleEffectRecipe } from '../components/ripple-effect/ripple-effect.interface'; import type { IonRouterLinkConfig, IonRouterLinkRecipe } from '../components/router-link/router-link.interface'; @@ -258,6 +259,7 @@ export type IonicConfig = IonicGlobalConfig & { components?: { IonBadge?: IonBadgeConfig; IonChip?: IonChipConfig; + IonNote?: IonNoteConfig; IonProgressBar?: IonProgressBarConfig; IonRouterLink?: IonRouterLinkConfig; IonSpinner?: IonSpinnerConfig; @@ -308,6 +310,7 @@ type Components = { IonGallery?: IonGalleryRecipe; IonGrid?: IonGridRecipe; IonItemDivider?: IonItemDividerRecipe; + IonNote?: IonNoteRecipe; IonProgressBar?: IonProgressBarRecipe; IonRippleEffect?: IonRippleEffectRecipe; IonRouterLink?: IonRouterLinkRecipe; diff --git a/packages/angular/src/lazy/directives/proxies.ts b/packages/angular/src/lazy/directives/proxies.ts index 1c113469e40..78b0a8ce9e3 100644 --- a/packages/angular/src/lazy/directives/proxies.ts +++ b/packages/angular/src/lazy/directives/proxies.ts @@ -1699,14 +1699,14 @@ export declare interface IonNavLink extends Components.IonNavLink {} @ProxyCmp({ - inputs: ['color', 'mode', 'theme'] + inputs: ['color', 'hue', 'mode'] }) @Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'theme'], + inputs: ['color', 'hue', 'mode'], standalone: false }) export class IonNote { diff --git a/packages/angular/src/standalone/directives/ion-note.ts b/packages/angular/src/standalone/directives/ion-note.ts index 460870d2d64..f3e8da07cd8 100644 --- a/packages/angular/src/standalone/directives/ion-note.ts +++ b/packages/angular/src/standalone/directives/ion-note.ts @@ -10,14 +10,14 @@ import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion @ProxyCmp({ defineCustomElementFn: defineIonNote, - inputs: ['color', 'mode', 'theme'] + inputs: ['color', 'hue', 'mode'] }) @Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'theme'], + inputs: ['color', 'hue', 'mode'], }) export class IonNote { protected el: HTMLIonNoteElement; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index feeeadddac1..d9039024913 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -724,7 +724,8 @@ export const IonNavLink: StencilVueComponent = /*@__PURE__*/ def export const IonNote: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-note', defineIonNote, [ - 'color' + 'color', + 'hue' ]);