diff --git a/core/api.txt b/core/api.txt index 2c79b81465..23b4f5321b 100644 --- a/core/api.txt +++ b/core/api.txt @@ -731,6 +731,22 @@ ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false ion-datetime-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-datetime-button,part,native +ion-divider,shadow +ion-divider,prop,inset,boolean,false,false,false +ion-divider,prop,spacing,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | undefined,'xxsmall',false,true +ion-divider,css-prop,--margin-bottom,ionic +ion-divider,css-prop,--margin-bottom,ios +ion-divider,css-prop,--margin-bottom,md +ion-divider,css-prop,--margin-top,ionic +ion-divider,css-prop,--margin-top,ios +ion-divider,css-prop,--margin-top,md +ion-divider,css-prop,--padding-end,ionic +ion-divider,css-prop,--padding-end,ios +ion-divider,css-prop,--padding-end,md +ion-divider,css-prop,--padding-start,ionic +ion-divider,css-prop,--padding-start,ios +ion-divider,css-prop,--padding-start,md + ion-fab,shadow ion-fab,prop,activated,boolean,false,false,false ion-fab,prop,edge,boolean,false,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index cea5a27201..1ce0b2fba3 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1164,6 +1164,16 @@ export namespace Components { */ "theme"?: "ios" | "md" | "ionic"; } + interface IonDivider { + /** + * If `true`, the divider will have horizontal margins By default, it's `false` + */ + "inset": boolean; + /** + * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing. Defaults to `"xxsmall"`. + */ + "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'; + } interface IonFab { /** * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. @@ -4440,6 +4450,12 @@ declare global { prototype: HTMLIonDatetimeButtonElement; new (): HTMLIonDatetimeButtonElement; }; + interface HTMLIonDividerElement extends Components.IonDivider, HTMLStencilElement { + } + var HTMLIonDividerElement: { + prototype: HTMLIonDividerElement; + new (): HTMLIonDividerElement; + }; interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement { } var HTMLIonFabElement: { @@ -5399,6 +5415,7 @@ declare global { "ion-content": HTMLIonContentElement; "ion-datetime": HTMLIonDatetimeElement; "ion-datetime-button": HTMLIonDatetimeButtonElement; + "ion-divider": HTMLIonDividerElement; "ion-fab": HTMLIonFabElement; "ion-fab-button": HTMLIonFabButtonElement; "ion-fab-list": HTMLIonFabListElement; @@ -6619,6 +6636,16 @@ declare namespace LocalJSX { */ "theme"?: "ios" | "md" | "ionic"; } + interface IonDivider { + /** + * If `true`, the divider will have horizontal margins By default, it's `false` + */ + "inset"?: boolean; + /** + * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing. Defaults to `"xxsmall"`. + */ + "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'; + } interface IonFab { /** * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. @@ -9532,6 +9559,7 @@ declare namespace LocalJSX { "ion-content": IonContent; "ion-datetime": IonDatetime; "ion-datetime-button": IonDatetimeButton; + "ion-divider": IonDivider; "ion-fab": IonFab; "ion-fab-button": IonFabButton; "ion-fab-list": IonFabList; @@ -9634,6 +9662,7 @@ declare module "@stencil/core" { "ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes; "ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes; "ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes; + "ion-divider": LocalJSX.IonDivider & JSXBase.HTMLAttributes; "ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes; "ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes; "ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes; diff --git a/core/src/components/divider/divider.common.scss b/core/src/components/divider/divider.common.scss new file mode 100644 index 0000000000..3a86da68a1 --- /dev/null +++ b/core/src/components/divider/divider.common.scss @@ -0,0 +1,41 @@ +@import "../../themes/mixins"; + +:host { + /** + * @prop --margin-top: Top margin of the divider + * @prop --margin-bottom: Bottom margin of the divider + * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider + * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider + */ + --margin-top: 0px; + --margin-bottom: 0px; + --padding-start: 0px; + --padding-end: 0px; + + display: block; + + width: 100%; + + /* stylelint-disable */ + @include ltr() { + padding-right: calc(var(--padding-end) + var(--ion-safe-area-right, 0px)); + padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px)); + } + + @include rtl() { + padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px)); + padding-left: calc(var(--padding-end) + var(--ion-safe-area-left, 0px)); + } + /* stylelint-enable */ +} + +:host hr { + display: block; + + width: 100%; + + margin-top: var(--margin-top); + margin-bottom: var(--margin-bottom); + + border: none; +} diff --git a/core/src/components/divider/divider.ionic.scss b/core/src/components/divider/divider.ionic.scss new file mode 100644 index 0000000000..493bcb3efa --- /dev/null +++ b/core/src/components/divider/divider.ionic.scss @@ -0,0 +1,47 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@use "./divider.common.scss"; + +:host hr { + border-top: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default; +} + +// Divider Inset +// -------------------------------------------------- + +:host(.divider-inset) { + --padding-start: #{globals.$ion-space-400}; + --padding-end: #{globals.$ion-space-400}; +} + +// Divider Spacing +// -------------------------------------------------- + +:host(.divider-spacing-xsmall) { + --margin-top: #{globals.$ion-space-200}; + --margin-bottom: #{globals.$ion-space-200}; +} + +:host(.divider-spacing-small) { + --margin-top: #{globals.$ion-space-300}; + --margin-bottom: #{globals.$ion-space-300}; +} + +:host(.divider-spacing-medium) { + --margin-top: #{globals.$ion-space-400}; + --margin-bottom: #{globals.$ion-space-400}; +} + +:host(.divider-spacing-large) { + --margin-top: #{globals.$ion-space-600}; + --margin-bottom: #{globals.$ion-space-600}; +} + +:host(.divider-spacing-xlarge) { + --margin-top: #{globals.$ion-space-800}; + --margin-bottom: #{globals.$ion-space-800}; +} + +:host(.divider-spacing-xxlarge) { + --margin-top: #{globals.$ion-space-1000}; + --margin-bottom: #{globals.$ion-space-1000}; +} diff --git a/core/src/components/divider/divider.ios.scss b/core/src/components/divider/divider.ios.scss new file mode 100644 index 0000000000..b8beff625c --- /dev/null +++ b/core/src/components/divider/divider.ios.scss @@ -0,0 +1,4 @@ +@import "./divider.native.scss"; + +// iOS Divider +// -------------------------------------------------- diff --git a/core/src/components/divider/divider.md.scss b/core/src/components/divider/divider.md.scss new file mode 100644 index 0000000000..8c09e1e910 --- /dev/null +++ b/core/src/components/divider/divider.md.scss @@ -0,0 +1,4 @@ +@import "./divider.native.scss"; + +// Material Design Divider +// -------------------------------------------------- diff --git a/core/src/components/divider/divider.native.scss b/core/src/components/divider/divider.native.scss new file mode 100644 index 0000000000..14ec29f0c6 --- /dev/null +++ b/core/src/components/divider/divider.native.scss @@ -0,0 +1,46 @@ +@import "./divider.common.scss"; + +:host hr { + border-top: 1px solid #e0e0e0; +} + +// Divider Inset +// -------------------------------------------------- + +:host(.divider-inset) { + --padding-start: 16px; + --padding-end: 16px; +} + +// Divider Spacing +// -------------------------------------------------- + +:host(.divider-spacing-xsmall) { + --margin-top: 8px; + --margin-bottom: 8px; +} + +:host(.divider-spacing-small) { + --margin-top: 12px; + --margin-bottom: 12px; +} + +:host(.divider-spacing-medium) { + --margin-top: 16px; + --margin-bottom: 16px; +} + +:host(.divider-spacing-large) { + --margin-top: 24px; + --margin-bottom: 24px; +} + +:host(.divider-spacing-xlarge) { + --margin-top: 32px; + --margin-bottom: 32px; +} + +:host(.divider-spacing-xxlarge) { + --margin-top: 40px; + --margin-bottom: 40px; +} diff --git a/core/src/components/divider/divider.tsx b/core/src/components/divider/divider.tsx new file mode 100644 index 0000000000..ef3c70a06d --- /dev/null +++ b/core/src/components/divider/divider.tsx @@ -0,0 +1,50 @@ +import { getIonTheme } from '@global/ionic-global'; +import type { ComponentInterface } from '@stencil/core'; +import { Component, Prop, Host, h } from '@stencil/core'; + +@Component({ + tag: 'ion-divider', + styleUrls: { + ios: 'divider.ios.scss', + md: 'divider.md.scss', + ionic: 'divider.ionic.scss', + }, + shadow: true, +}) +export class Divider implements ComponentInterface { + /** + * Set to `"xxsmall"` for the smallest spacing. + * Set to "xsmall" for very small spacing. + * Set to `"small"` for small spacing. + * Set to "medium" for medium spacing. + * Set to "large" for large spacing. + * Set to `"xlarge"` for the largest spacing. + * + * Defaults to `"xxsmall"`. + */ + @Prop({ reflect: true }) spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' = + 'xxsmall'; + + /** + * If `true`, the divider will have horizontal margins + * By default, it's `false` + */ + @Prop() inset: boolean = false; + + render() { + const { inset, spacing } = this; + const theme = getIonTheme(this); + + return ( + +
+
+ ); + } +} diff --git a/core/src/components/divider/test/basic/divider.e2e.ts b/core/src/components/divider/test/basic/divider.e2e.ts new file mode 100644 index 0000000000..3e8867ac30 --- /dev/null +++ b/core/src/components/divider/test/basic/divider.e2e.ts @@ -0,0 +1,44 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('divider: rendering'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` +
+ top + + bottom +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`divider-basic-default`)); + }); + }); +}); + +configs({ modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('divider: inset'), () => { + test('should not have visual regressions when inset is enabled', async ({ page }) => { + await page.setContent( + ` +
+ top + + bottom +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`divider-basic-inset`)); + }); + }); +}); diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9cd4dd7932 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a51dd78b11 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..39b8b98e7c Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bad7dab1d6 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fa8835c0fd Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7ab3103c8d Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..078b5e4eba Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0f73bd7f9f Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b4b6894c99 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e8a03c16eb Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9d7ddfdc8e Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..763673be09 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2ba47496a2 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f9e2d4b24a Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..033d187d41 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Chrome-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a80270fc36 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Firefox-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c2f995e9f4 Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Safari-linux.png b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..208cd7183a Binary files /dev/null and b/core/src/components/divider/test/basic/divider.e2e.ts-snapshots/divider-basic-inset-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/basic/index.html b/core/src/components/divider/test/basic/index.html new file mode 100644 index 0000000000..8b92fed9e2 --- /dev/null +++ b/core/src/components/divider/test/basic/index.html @@ -0,0 +1,41 @@ + + + + + Divider - Basic + + + + + + + + + + + + + Divider - Basic + + + + +
+

Default

+ Top + + Bottom +
+
+

Inset

+ Top + + Bottom +
+
+
+ + diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts b/core/src/components/divider/test/spacing/divider.e2e.ts new file mode 100644 index 0000000000..35b903111a --- /dev/null +++ b/core/src/components/divider/test/spacing/divider.e2e.ts @@ -0,0 +1,25 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('divider: spacing'), () => { + ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'].forEach((spacing) => { + test(`should render divider with ${spacing} spacing`, async ({ page }) => { + await page.setContent( + ` +
+ top + + bottom +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`divider-spacing-${spacing}`)); + }); + }); + }); +}); diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0af4684a7c Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..835923bc1e Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c074234ede Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9bfcfbfc86 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6238aa6983 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..53879e35fb Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-large-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c3fd547399 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..77ab887502 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8a4ff74d9 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0298384c66 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..79e460d420 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8081998d64 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-medium-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3381b75189 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e233782a58 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b6ec650fcd Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a09b6e2fbb Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2031a1bb2e Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3db0347647 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-small-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ce7077a341 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c802393cac Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..dbeec485bc Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a93eb1db49 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b7d42357c0 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..21c27cfa0f Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xlarge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d5f446023f Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f7a23b125f Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..908bcb1d89 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..116f512e7f Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c5c3c4f789 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e94e4a99bc Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xsmall-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6a43af7e94 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..52c75483d1 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..13f9f97c12 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b85e4f6fc0 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0d2e516fe0 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..34ff97bd80 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxlarge-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9cd4dd7932 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a51dd78b11 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..39b8b98e7c Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Chrome-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bad7dab1d6 Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Firefox-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fa8835c0fd Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Safari-linux.png b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7ab3103c8d Binary files /dev/null and b/core/src/components/divider/test/spacing/divider.e2e.ts-snapshots/divider-spacing-xxsmall-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/divider/test/spacing/index.html b/core/src/components/divider/test/spacing/index.html new file mode 100644 index 0000000000..82562b2e2c --- /dev/null +++ b/core/src/components/divider/test/spacing/index.html @@ -0,0 +1,79 @@ + + + + + Divider - Spacing + + + + + + + + + + + + + + Divider - Spacing + + + + + + + +

No Inset

+
+ +

With Inset

+
+
+
+
+
+ + + diff --git a/packages/angular/src/directives/proxies-list.ts b/packages/angular/src/directives/proxies-list.ts index b61d09669c..76325ada4d 100644 --- a/packages/angular/src/directives/proxies-list.ts +++ b/packages/angular/src/directives/proxies-list.ts @@ -25,6 +25,7 @@ export const DIRECTIVES = [ d.IonContent, d.IonDatetime, d.IonDatetimeButton, + d.IonDivider, d.IonFab, d.IonFabButton, d.IonFabList, diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 44480e1b89..7aabf55c70 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -703,6 +703,28 @@ export class IonDatetimeButton { export declare interface IonDatetimeButton extends Components.IonDatetimeButton {} +@ProxyCmp({ + inputs: ['inset', 'spacing'] +}) +@Component({ + selector: 'ion-divider', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['inset', 'spacing'], +}) +export class IonDivider { + protected el: HTMLIonDividerElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IonDivider extends Components.IonDivider {} + + @ProxyCmp({ inputs: ['activated', 'edge', 'horizontal', 'mode', 'theme', 'vertical'], methods: ['close'] diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 055393b5f0..532da1596e 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -27,6 +27,7 @@ import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js'; import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js'; import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js'; +import { defineCustomElement as defineIonDivider } from '@ionic/core/components/ion-divider.js'; import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js'; import { defineCustomElement as defineIonFabButton } from '@ionic/core/components/ion-fab-button.js'; import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js'; @@ -732,6 +733,30 @@ export class IonDatetimeButton { export declare interface IonDatetimeButton extends Components.IonDatetimeButton {} +@ProxyCmp({ + defineCustomElementFn: defineIonDivider, + inputs: ['inset', 'spacing'] +}) +@Component({ + selector: 'ion-divider', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['inset', 'spacing'], + standalone: true +}) +export class IonDivider { + protected el: HTMLIonDividerElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IonDivider extends Components.IonDivider {} + + @ProxyCmp({ defineCustomElementFn: defineIonFab, inputs: ['activated', 'edge', 'horizontal', 'mode', 'theme', 'vertical'], diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts index a9f1416ee2..4bb4ff8958 100644 --- a/packages/react/src/components/proxies.ts +++ b/packages/react/src/components/proxies.ts @@ -22,6 +22,7 @@ import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion- import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js'; import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js'; import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js'; +import { defineCustomElement as defineIonDivider } from '@ionic/core/components/ion-divider.js'; import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js'; import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js'; import { defineCustomElement as defineIonFooter } from '@ionic/core/components/ion-footer.js'; @@ -94,6 +95,7 @@ export const IonCol = /*@__PURE__*/createReactComponent('ion-content', undefined, undefined, defineIonContent); export const IonDatetime = /*@__PURE__*/createReactComponent('ion-datetime', undefined, undefined, defineIonDatetime); export const IonDatetimeButton = /*@__PURE__*/createReactComponent('ion-datetime-button', undefined, undefined, defineIonDatetimeButton); +export const IonDivider = /*@__PURE__*/createReactComponent('ion-divider', undefined, undefined, defineIonDivider); export const IonFab = /*@__PURE__*/createReactComponent('ion-fab', undefined, undefined, defineIonFab); export const IonFabList = /*@__PURE__*/createReactComponent('ion-fab-list', undefined, undefined, defineIonFabList); export const IonFooter = /*@__PURE__*/createReactComponent('ion-footer', undefined, undefined, defineIonFooter); diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index fe28254a3f..48c3a2444e 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -25,6 +25,7 @@ import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion- import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js'; import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js'; import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js'; +import { defineCustomElement as defineIonDivider } from '@ionic/core/components/ion-divider.js'; import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js'; import { defineCustomElement as defineIonFabButton } from '@ionic/core/components/ion-fab-button.js'; import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js'; @@ -372,6 +373,12 @@ export const IonDatetimeButton: StencilVueComponent = /*@ ]); +export const IonDivider: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-divider', defineIonDivider, [ + 'spacing', + 'inset' +]); + + export const IonFab: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-fab', defineIonFab, [ 'horizontal', 'vertical',