diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index d32ed1e756..d247fc444c 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -5,16 +5,20 @@ // -------------------------------------------------- :host { - --background: #{$item-ios-divider-background}; - --color: #{$item-ios-divider-color}; - --padding-start: #{$item-ios-divider-padding-start}; - --inner-padding-end: #{$item-ios-divider-padding-end / 2}; + --background: #{$item-divider-ios-background}; + --color: #{$item-divider-ios-color}; + --padding-start: #{$item-divider-ios-padding-start}; + --inner-padding-end: #{$item-divider-ios-padding-end / 2}; @include border-radius(0); position: relative; - font-size: $item-ios-divider-font-size; + min-height: $item-divider-ios-min-height; + + font-size: $item-divider-ios-font-size; + + font-weight: $item-divider-ios-font-weight; } @@ -35,14 +39,6 @@ } -// Material Design Slotted Label -// -------------------------------------------------- - -::slotted(ion-label) { - @include margin(10px, 8px, 10px, 0); -} - - // iOS Item Divider Content // -------------------------------------------------- diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index 6173f89dfe..f2ce8ace35 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -4,17 +4,23 @@ // iOS Item Divider // -------------------------------------------------- +/// @prop - Minimum height for the divider +$item-divider-ios-min-height: 28px !default; + /// @prop - Font size of the item -$item-ios-divider-font-size: 17px !default; +$item-divider-ios-font-size: 17px !default; + +/// @prop - Font weight of the item +$item-divider-ios-font-weight: 600 !default; /// @prop - Background for the divider -$item-ios-divider-background: $background-color-step-50 !default; +$item-divider-ios-background: $background-color-step-100 !default; /// @prop - Color for the divider -$item-ios-divider-color: $text-color-step-150 !default; +$item-divider-ios-color: $text-color-step-150 !default; /// @prop - Padding start for the divider -$item-ios-divider-padding-start: $item-ios-padding-start !default; +$item-divider-ios-padding-start: $item-ios-padding-start !default; /// @prop - Padding end for the divider -$item-ios-divider-padding-end: $item-ios-padding-end !default; +$item-divider-ios-padding-end: $item-ios-padding-end !default; diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 662208d5bd..d6f19f27a0 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -5,14 +5,16 @@ // -------------------------------------------------- :host { - --background: #{$item-md-divider-background}; - --color: #{$item-md-divider-color}; - --padding-start: #{$item-md-divider-padding-start}; - --inner-padding-end: #{$item-md-divider-padding-end}; + --background: #{$item-divider-md-background}; + --color: #{$item-divider-md-color}; + --padding-start: #{$item-divider-md-padding-start}; + --inner-padding-end: #{$item-divider-md-padding-end}; - border-bottom: $item-md-divider-border-bottom; + min-height: $item-divider-md-min-height; - font-size: $item-md-divider-font-size; + border-bottom: $item-divider-md-border-bottom; + + font-size: $item-divider-md-font-size; } diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 1554a7f398..a2c5576a4e 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -4,20 +4,23 @@ // Material Design Item Divider // -------------------------------------------------- +/// @prop - Minimum height for the divider +$item-divider-md-min-height: 30px !default; + /// @prop - Color for the divider -$item-md-divider-color: $text-color-step-600 !default; +$item-divider-md-color: $text-color-step-600 !default; /// @prop - Background for the divider -$item-md-divider-background: $background-color !default; +$item-divider-md-background: $background-color !default; /// @prop - Font size for the divider -$item-md-divider-font-size: 14px !default; +$item-divider-md-font-size: 14px !default; /// @prop - Border bottom for the divider -$item-md-divider-border-bottom: 1px solid $item-md-border-color !default; +$item-divider-md-border-bottom: 1px solid $item-md-border-color !default; /// @prop - Padding start for the divider -$item-md-divider-padding-start: $item-md-padding-start !default; +$item-divider-md-padding-start: $item-md-padding-start !default; /// @prop - Padding end for the divider -$item-md-divider-padding-end: 0 !default; +$item-divider-md-padding-end: 0 !default; diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index dfeeac13ac..1c6fc63f86 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -44,7 +44,6 @@ justify-content: space-between; width: 100%; - min-height: $item-divider-min-height; background: var(--background); color: var(--color); diff --git a/core/src/components/item-divider/test/spec/e2e.ts b/core/src/components/item-divider/test/spec/e2e.ts new file mode 100644 index 0000000000..def8ecfe96 --- /dev/null +++ b/core/src/components/item-divider/test/spec/e2e.ts @@ -0,0 +1,19 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('item-divider: spec', async () => { + const page = await newE2EPage({ + url: '/src/components/item-divider/test/spec?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); + +test('item-divider: spec-rtl', async () => { + const page = await newE2EPage({ + url: '/src/components/item-divider/test/spec?ionic:_testing=true&rtl=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/item-divider/test/spec/index.html b/core/src/components/item-divider/test/spec/index.html new file mode 100644 index 0000000000..46b2b2901e --- /dev/null +++ b/core/src/components/item-divider/test/spec/index.html @@ -0,0 +1,121 @@ + + + +
+ +