diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index a241f95dc6..119ec0cb2a 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -86,9 +86,19 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic 1. Locate the test to modify inside the `test/` folder in the component's directory. 2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added. -3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (if it exists). +3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file). 4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test. +##### Screenshot Tests + +1. If the test exists in screenshot, there will be a file named `e2e.ts` in the directory of the test. +2. A screenshot test can be added by including this file and adding one or more `test()` calls that include a call to `page.compareScreenshot()`. See [Stencil end-to-end testing](https://stenciljs.com/docs/end-to-end-testing) and existing tests in `core/` for examples. +3. **Important:** each `test()` should have only one screenshot (`page.compareScreenshot()`) call **or** it should check the expect at the end of each test. If there is a mismatch it will fail the test which will prevent the rest of the test from running, i.e. if the first screenshot fails the remaining screenshot calls would not be called _unless_ they are in a separate test or all of the expects are called at the end. +4. To run screenshot locally, use the following command: `npm run test.screenshot`. + - To run screenshot for a specific test, pass the path to the test or a string to search for. + - For example, running all `alert` tests: `npm run test.screenshot alert`. + - Or, running the basic `alert` tests: `npm run test.screenshot src/components/alert/test/basic/e2e.ts`. + #### Building Changes diff --git a/core/src/components.d.ts b/core/src/components.d.ts index ecfe241401..fe896a5295 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -156,7 +156,7 @@ export namespace Components { */ 'subHeader'?: string; /** - * If `true`, the action sheet will be translucent. + * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. */ 'translucent': boolean; } @@ -218,7 +218,7 @@ export namespace Components { */ 'subHeader'?: string; /** - * If `true`, the action sheet will be translucent. + * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. */ 'translucent'?: boolean; } diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index 366375c773..47de485534 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -2,11 +2,11 @@ @import "./action-sheet.ios.vars"; // iOS Action Sheet -// -------------------------------------------------- +// --------------------------------------------------- :host { --background: #{$action-sheet-ios-background-color}; - --background-selected: #{var(--background, $action-sheet-ios-button-background-selected)}; + --background-selected: #{$action-sheet-ios-button-background-selected)}; --background-activated: #{$action-sheet-ios-button-background-activated}; text-align: $action-sheet-ios-text-align; @@ -18,7 +18,7 @@ // iOS Action Sheet Container -// ----------------------------------------- +// --------------------------------------------------- .action-sheet-container { @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start); @@ -26,11 +26,13 @@ // iOS Action Sheet Group -// ----------------------------------------- +// --------------------------------------------------- .action-sheet-group { @include border-radius($action-sheet-ios-border-radius); @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null); + + overflow: hidden; } .action-sheet-group:first-child { @@ -43,22 +45,63 @@ // iOS Translucent Action Sheet -// ----------------------------------------- +// --------------------------------------------------- -:host(.action-sheet-translucent) .action-sheet-group { - background: $action-sheet-ios-translucent-background-color; - backdrop-filter: $action-sheet-ios-translucent-filter; +@supports (backdrop-filter: blur(0)) { + :host(.action-sheet-translucent) .action-sheet-group { + background-color: transparent; + backdrop-filter: $action-sheet-ios-group-translucent-filter; + } + + :host(.action-sheet-translucent) .action-sheet-title, + :host(.action-sheet-translucent) .action-sheet-button { + background-color: transparent; + background-image: + linear-gradient(0deg, $action-sheet-ios-translucent-background-color, $action-sheet-ios-translucent-background-color 100%), + linear-gradient(0deg, $action-sheet-ios-translucent-border-color, $action-sheet-ios-translucent-border-color 50%, $action-sheet-ios-translucent-background-color 50%); + background-repeat: no-repeat; + + /* stylelint-disable-next-line all */ + background-position: top, bottom; + + background-size: 100% calc(100% - 1px), 100% 1px; + backdrop-filter: $action-sheet-ios-button-translucent-filter; + } + + :host(.action-sheet-translucent) .action-sheet-button.activated { + background-color: $action-sheet-ios-translucent-background-color-activated; + background-image: none; + } + + :host(.action-sheet-translucent) .action-sheet-cancel { + background: var(--background-selected); + } +} + +// iOS Action Sheet Border +// --------------------------------------------------- +// Border is made with a linear gradient in order +// to get the proper color and iOS blur effect + +.action-sheet-title, +.action-sheet-button { + background-color: transparent; + background-image: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%); + background-repeat: no-repeat; + + /* stylelint-disable-next-line all */ + background-position: bottom; + + background-size: 100% 1px; } // iOS Action Sheet Title -// ----------------------------------------- +// --------------------------------------------------- .action-sheet-title { @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start); - border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color; - color: var(--color, $action-sheet-ios-title-color); font-size: $action-sheet-ios-title-font-size; @@ -75,17 +118,13 @@ // iOS Action Sheet Buttons -// ----------------------------------------- +// --------------------------------------------------- .action-sheet-button { - @include margin(0); @include padding($action-sheet-ios-button-padding); height: $action-sheet-ios-button-height; - border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color; - - background: transparent; color: var(--color, $action-sheet-ios-button-text-color); font-size: $action-sheet-ios-button-font-size; @@ -100,17 +139,12 @@ } .action-sheet-button:last-child { - border-bottom-color: transparent; -} - -.action-sheet-button.activated { - @include margin(-$action-sheet-ios-button-border-width, null, null, null); - - border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style var(--background-activated); - border-bottom-color: var(--background-activated); + background-image: none; } .action-sheet-selected { + background: var(--background-selected); + font-weight: bold; } diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 87de0419a8..17948a86cc 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -4,142 +4,173 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-ios-text-align: center !default; +$action-sheet-ios-text-align: center !default; /// @prop - Padding top of the action sheet -$action-sheet-ios-padding-top: 0 !default; +$action-sheet-ios-padding-top: 0 !default; /// @prop - Padding end of the action sheet -$action-sheet-ios-padding-end: 10px !default; +$action-sheet-ios-padding-end: 8px !default; /// @prop - Padding bottom of the action sheet -$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; +$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; /// @prop - Padding start of the action sheet -$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; +$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; /// @prop - Top margin of the action sheet button group -$action-sheet-ios-group-margin-top: 10px !default; +$action-sheet-ios-group-margin-top: 10px !default; /// @prop - Bottom margin of the action sheet button group -$action-sheet-ios-group-margin-bottom: 10px !default; +$action-sheet-ios-group-margin-bottom: 10px !default; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $overlay-ios-background-color !default; - -/// @prop - Background color alpha of the action sheet when translucent -$action-sheet-ios-translucent-background-color-alpha: .8 !default; - -/// @prop - Background color of the action sheet when translucent -$action-sheet-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $action-sheet-ios-translucent-background-color-alpha) !default; +$action-sheet-ios-background-color: $overlay-ios-background-color !default; /// @prop - Border radius of the action sheet -$action-sheet-ios-border-radius: 13px !default; +$action-sheet-ios-border-radius: 13px !default; + + +// Action Sheet Title +// -------------------------------------------------- /// @prop - Padding top of the action sheet title -$action-sheet-ios-title-padding-top: 14px !default; +$action-sheet-ios-title-padding-top: 14px !default; /// @prop - Padding end of the action sheet title -$action-sheet-ios-title-padding-end: $action-sheet-ios-title-padding-top !default; +$action-sheet-ios-title-padding-end: 10px !default; /// @prop - Padding bottom of the action sheet title -$action-sheet-ios-title-padding-bottom: 13px !default; +$action-sheet-ios-title-padding-bottom: 13px !default; /// @prop - Padding start of the action sheet title -$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; +$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-color-step-600 !default; +$action-sheet-ios-title-color: $text-color-step-600 !default; /// @prop - Font size of the action sheet title -$action-sheet-ios-title-font-size: 13px !default; +$action-sheet-ios-title-font-size: 13px !default; /// @prop - Font weight of the action sheet title -$action-sheet-ios-title-font-weight: 400 !default; +$action-sheet-ios-title-font-weight: 400 !default; /// @prop - Border width of the action sheet title -$action-sheet-ios-title-border-width: $hairlines-width !default; +$action-sheet-ios-title-border-width: $hairlines-width !default; /// @prop - Border style of the action sheet title -$action-sheet-ios-title-border-style: solid !default; +$action-sheet-ios-title-border-style: solid !default; /// @prop - Border color alpha of the action sheet title -$action-sheet-ios-title-border-color-alpha: .2 !default; +$action-sheet-ios-title-border-color-alpha: .08 !default; /// @prop - Border color of the action sheet title -$action-sheet-ios-title-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-title-border-color-alpha) !default; +$action-sheet-ios-title-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-title-border-color-alpha) !default; + + +// Action Sheet Subtitle +// -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-ios-sub-title-font-size: 12px !default; +$action-sheet-ios-sub-title-font-size: 12px !default; /// @prop - Padding top of the action sheet sub title -$action-sheet-ios-sub-title-padding-top: 15px !default; +$action-sheet-ios-sub-title-padding-top: 15px !default; /// @prop - Padding end of the action sheet sub title -$action-sheet-ios-sub-title-padding-end: 0 !default; +$action-sheet-ios-sub-title-padding-end: 0 !default; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-ios-sub-title-padding-bottom: 0 !default; +$action-sheet-ios-sub-title-padding-bottom: 0 !default; /// @prop - Padding start of the action sheet sub title -$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; +$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; + + +// Action Sheet Button +// -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-ios-button-height: 56px !default; +$action-sheet-ios-button-height: 56px !default; /// @prop - Padding of the action sheet button -$action-sheet-ios-button-padding: 18px !default; +$action-sheet-ios-button-padding: 18px !default; /// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: ion-color(primary, base) !default; +$action-sheet-ios-button-text-color: ion-color(primary, base) !default; /// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: 28px !default; +$action-sheet-ios-button-icon-font-size: 28px !default; /// @prop - Padding right of the action sheet button icon -$action-sheet-ios-button-icon-padding-right: .1em !default; +$action-sheet-ios-button-icon-padding-right: .1em !default; /// @prop - Height of the action sheet button icon -$action-sheet-ios-button-icon-height: .7em !default; +$action-sheet-ios-button-icon-height: .7em !default; /// @prop - Margin top of the action sheet button icon -$action-sheet-ios-button-icon-margin-top: -10px !default; +$action-sheet-ios-button-icon-margin-top: -10px !default; /// @prop - Font size of the action sheet button -$action-sheet-ios-button-font-size: 20px !default; +$action-sheet-ios-button-font-size: 20px !default; /// @prop - Border width of the action sheet button -$action-sheet-ios-button-border-width: $hairlines-width !default; +$action-sheet-ios-button-border-width: $hairlines-width !default; /// @prop - Border style of the action sheet button -$action-sheet-ios-button-border-style: solid !default; +$action-sheet-ios-button-border-style: solid !default; /// @prop - Border color alpha of the action sheet button -$action-sheet-ios-button-border-color-alpha: .2 !default; +$action-sheet-ios-button-border-color-alpha: .08 !default; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-border-color-alpha) !default; +$action-sheet-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-border-color-alpha) !default; /// @prop - Background color of the action sheet button -$action-sheet-ios-button-background: transparent !default; +$action-sheet-ios-button-background: transparent !default; /// @prop - Background color alpha of the activated action sheet button -$action-sheet-ios-button-background-alpha-activated: .1 !default; +$action-sheet-ios-button-background-alpha-activated: .08 !default; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-background-alpha-activated) !default; +$action-sheet-ios-button-background-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-background-alpha-activated) !default; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: $background-color !default; +$action-sheet-ios-button-background-selected: $background-color !default; /// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; +$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; /// @prop - Background color of the action sheet cancel button -$action-sheet-ios-button-cancel-background: $background-color !default; +$action-sheet-ios-button-cancel-background: $background-color !default; /// @prop - Font weight of the action sheet cancel button -$action-sheet-ios-button-cancel-font-weight: 600 !default; +$action-sheet-ios-button-cancel-font-weight: 600 !default; -/// @prop - Filter of the translucent action-sheet -$action-sheet-ios-translucent-filter: saturate(180%) blur(20px) !default; + +// Action Sheet Translucent +// -------------------------------------------------- + +/// @prop - Background color alpha of the action sheet when translucent +$action-sheet-ios-translucent-background-color-alpha: .8 !default; + +/// @prop - Background color of the action sheet when translucent +$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default; + +/// @prop - Border color alpha of the action sheet when translucent +$action-sheet-ios-translucent-border-color-alpha: .4 !default; + +/// @prop - Border color of the action sheet when translucent +$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default; + +/// @prop - Background color alpha of the activated action sheet when translucent +$action-sheet-ios-translucent-background-color-activated-alpha: .7 !default; + +/// @prop - Background color of the activated action sheet when translucent +$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default; + +/// @prop - Filter of the translucent action-sheet group +$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default; + +/// @prop - Filter of the translucent action-sheet button +$action-sheet-ios-button-translucent-filter: saturate(120%) !default; diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index b4df975475..5d1575ccc7 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -15,6 +15,10 @@ $action-sheet-md-padding-top: 0 !default; /// @prop - Padding bottom of the action sheet $action-sheet-md-padding-bottom: 0 !default; + +// Action Sheet Title +// -------------------------------------------------- + /// @prop - Height of the action sheet title $action-sheet-md-title-height: 60px !default; @@ -36,6 +40,10 @@ $action-sheet-md-title-padding-bottom: 17px !default; /// @prop - Padding start of the action sheet title $action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; + +// Action Sheet Subtitle +// -------------------------------------------------- + /// @prop - Font size of the action sheet sub title $action-sheet-md-sub-title-font-size: 14px !default; @@ -51,6 +59,10 @@ $action-sheet-md-sub-title-padding-bottom: 0 !default; /// @prop - Padding start of the action sheet sub title $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; + +// Action Sheet Button +// -------------------------------------------------- + /// @prop - Minimum height of the action sheet button $action-sheet-md-button-height: 52px !default; @@ -81,6 +93,10 @@ $action-sheet-md-button-background-activated: $background-color-step-5 /// @prop - Background color of the selected action sheet button $action-sheet-md-button-background-selected: null !default; + +// Action Sheet Icon +// -------------------------------------------------- + /// @prop - Font size of the icon in the action sheet button $action-sheet-md-icon-font-size: 24px !default; diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 668dcfa443..31027e6b6e 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -75,7 +75,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { @Prop() subHeader?: string; /** - * If `true`, the action sheet will be translucent. + * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. */ @Prop() translucent = false; diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 948ce96159..7d0f23a26f 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -126,19 +126,19 @@ async function presentActionSheet() { ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` _(required)_ | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the action sheet will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` _(required)_ | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean` | `false` | ## Events diff --git a/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts b/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts deleted file mode 100644 index 4ec5d298c5..0000000000 --- a/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('action-sheet: alertFromActionSheet', async () => { - const page = await newE2EPage({ - url: `/src/components/action-sheet/test/alert-from-action-sheet?ionic:_testing=true` - }); - - const presentBtn = await page.find('#alertFromActionSheet'); - await presentBtn.click(); - - const actionSheet = await page.find('ion-action-sheet'); - await actionSheet.waitForVisible(); - - let compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); - - const openAlertBtn = await page.find({ text: 'Open Alert' }); - await openAlertBtn.click(); - - const alert = await page.find('ion-alert'); - await alert.waitForVisible(); - await page.waitFor(250); - - compare = await page.compareScreenshot(`alert open`); - expect(compare).toMatchScreenshot(); - - const alertOkayBtn = await page.find({ contains: 'Okay' }); - await alertOkayBtn.click(); -}); diff --git a/core/src/components/action-sheet/test/alert-from-action-sheet/index.html b/core/src/components/action-sheet/test/alert-from-action-sheet/index.html deleted file mode 100644 index b3e2efda63..0000000000 --- a/core/src/components/action-sheet/test/alert-from-action-sheet/index.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - Action Sheet - Alert From Action Sheet - - - - - - - - - - - - - - - Action Sheet - Alert From Action Sheet - - - - - - Alert from Action Sheet - - - - - - - - - diff --git a/core/src/components/action-sheet/test/basic/e2e.ts b/core/src/components/action-sheet/test/basic/e2e.ts index 73ce17eab1..09336072fa 100644 --- a/core/src/components/action-sheet/test/basic/e2e.ts +++ b/core/src/components/action-sheet/test/basic/e2e.ts @@ -1,27 +1,91 @@ import { newE2EPage } from '@stencil/core/testing'; test('action-sheet: basic', async () => { + await openActionSheet('#basic'); +}); + +test('action-sheet: basic, alert from action sheet', async () => { + await openActionSheet('#alertFromActionSheet'); +}); + +test('action-sheet: basic, cancel only', async () => { + await openActionSheet('#cancelOnly'); +}); + +test('action-sheet: basic, custom', async () => { + await openActionSheet('#custom'); +}); + +test('action-sheet: basic, icons', async () => { + await openActionSheet('#icons'); +}); + +test('action-sheet: basic, no backdrop dismiss', async () => { + await openActionSheet('#noBackdropDismiss'); +}); + +test('action-sheet: basic, scrollable options', async () => { + await openActionSheet('#scrollableOptions'); +}); + +test('action-sheet: basic, scroll without cancel', async () => { + await openActionSheet('#scrollWithoutCancel'); +}); + +// Opens an action sheet on button click +async function openActionSheet(selector: string) { const page = await newE2EPage({ url: `/src/components/action-sheet/test/basic?ionic:_testing=true` }); - const presentBtn = await page.find('#basic'); - await presentBtn.click(); + const compares = []; + + await page.click(selector); let actionSheet = await page.find('ion-action-sheet'); + expect(actionSheet).not.toBe(null); await actionSheet.waitForVisible(); - let compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); + compares.push(await page.compareScreenshot()); - await actionSheet.callMethod('dismiss'); + if (selector === '#alertFromActionSheet') { + const openAlertBtn = await page.find({ text: 'Open Alert' }); + await openAlertBtn.click(); - await actionSheet.waitForNotVisible(); + const alert = await page.find('ion-alert'); + await alert.waitForVisible(); + await page.waitFor(250); - compare = await page.compareScreenshot(`dismissed`); - expect(compare).toMatchScreenshot(); + compares.push(await page.compareScreenshot(`alert open`)); + + const alertOkayBtn = await page.find({ contains: 'Okay' }); + await alertOkayBtn.click(); + } + + if (selector === '#noBackdropDismiss') { + const backdrop = await page.find('ion-backdrop'); + await backdrop.click(); + + compares.push(await page.compareScreenshot(`dismissed`)); + + const isVisible = await actionSheet.isVisible(); + expect(isVisible).toBe(true); + + const cancel = await page.find('.action-sheet-cancel'); + await cancel.click(); + + await actionSheet.waitForNotVisible(); + } else { + await actionSheet.callMethod('dismiss'); + await actionSheet.waitForNotVisible(); + + compares.push(await page.compareScreenshot(`dismissed`)); + } actionSheet = await page.find('ion-action-sheet'); - expect(actionSheet).toBe(null); -}); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } +} diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html index 7d7fac4ebc..ea758fbabb 100644 --- a/core/src/components/action-sheet/test/basic/index.html +++ b/core/src/components/action-sheet/test/basic/index.html @@ -13,6 +13,8 @@ + + @@ -21,19 +23,188 @@ - - Basic + Alert from Action Sheet + Cancel Only + Custom CSS Class + Icons + No Backdrop Dismiss + Scrollable Options + Scroll Without Cancel + diff --git a/core/src/components/action-sheet/test/cancel-only/e2e.ts b/core/src/components/action-sheet/test/cancel-only/e2e.ts deleted file mode 100644 index 9088638370..0000000000 --- a/core/src/components/action-sheet/test/cancel-only/e2e.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('action-sheet: cancelOnly', async () => { - const page = await newE2EPage({ - url: `/src/components/action-sheet/test/cancel-only?ionic:_testing=true` - }); - - const presentBtn = await page.find('#cancelOnly'); - await presentBtn.click(); - - const actionSheet = await page.find('ion-action-sheet'); - await actionSheet.waitForVisible(); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/action-sheet/test/cancel-only/index.html b/core/src/components/action-sheet/test/cancel-only/index.html deleted file mode 100644 index 0a64b60a6a..0000000000 --- a/core/src/components/action-sheet/test/cancel-only/index.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - Action Sheet - Cancel Only - - - - - - - - - - - - - Action Sheet - Cancel Only - - - - - - - Cancel Only - - - - - - - - - diff --git a/core/src/components/action-sheet/test/custom/e2e.ts b/core/src/components/action-sheet/test/custom/e2e.ts deleted file mode 100644 index cdb9346a8f..0000000000 --- a/core/src/components/action-sheet/test/custom/e2e.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('action-sheet: custom', async () => { - const page = await newE2EPage({ - url: `/src/components/action-sheet/test/custom?ionic:_testing=true` - }); - - const presentBtn = await page.find('#custom'); - await presentBtn.click(); - - const actionSheet = await page.find('ion-action-sheet'); - await actionSheet.waitForVisible(); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/action-sheet/test/custom/index.html b/core/src/components/action-sheet/test/custom/index.html deleted file mode 100644 index 37d1f9f876..0000000000 --- a/core/src/components/action-sheet/test/custom/index.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - Action Sheet - Custom CSS Class - - - - - - - - - - - - - Action Sheet - Custom CSS Class - - - - - - - Custom CSS Class - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur - sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur - sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur - sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur - sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
- - - - - - - - - - diff --git a/core/src/components/action-sheet/test/icons/e2e.ts b/core/src/components/action-sheet/test/icons/e2e.ts deleted file mode 100644 index 324b1faf54..0000000000 --- a/core/src/components/action-sheet/test/icons/e2e.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('action-sheet: icons', async () => { - const page = await newE2EPage({ - url: `/src/components/action-sheet/test/icons?ionic:_testing=true` - }); - - const presentBtn = await page.find('#icons'); - await presentBtn.click(); - - const actionSheet = await page.find('ion-action-sheet'); - await actionSheet.waitForVisible(); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/action-sheet/test/icons/index.html b/core/src/components/action-sheet/test/icons/index.html deleted file mode 100644 index de3090972c..0000000000 --- a/core/src/components/action-sheet/test/icons/index.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - Action Sheet - Icons - - - - - - - - - - - - - Action Sheet - Icons - - - - - - - Icons - - - - - - - - diff --git a/core/src/components/action-sheet/test/no-backdrop-dismiss/index.html b/core/src/components/action-sheet/test/no-backdrop-dismiss/index.html deleted file mode 100644 index 77070fb13e..0000000000 --- a/core/src/components/action-sheet/test/no-backdrop-dismiss/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - Action Sheet - No Backdrop Dismiss - - - - - - - - - - - - - Action Sheet - No Backdrop Dismiss - - - - - - - No Backdrop Dismiss - - - - - - - - diff --git a/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts b/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts deleted file mode 100644 index 2bef59245e..0000000000 --- a/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('action-sheet: scrollWithoutCancel', async () => { - const page = await newE2EPage({ - url: `/src/components/action-sheet/test/scroll-without-cancel?ionic:_testing=true` - }); - - const presentBtn = await page.find('#scrollWithoutCancel'); - await presentBtn.click(); - - const actionSheet = await page.find('ion-action-sheet'); - await actionSheet.waitForVisible(); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/action-sheet/test/scroll-without-cancel/index.html b/core/src/components/action-sheet/test/scroll-without-cancel/index.html deleted file mode 100644 index abd5a6dcec..0000000000 --- a/core/src/components/action-sheet/test/scroll-without-cancel/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - Action Sheet - Scroll Without Cancel - - - - - - - - - - - - - Action Sheet - Scroll Without Cancel - - - - - - - Scroll Without Cancel - - - - - - - - diff --git a/core/src/components/action-sheet/test/scrollable-options/e2e.ts b/core/src/components/action-sheet/test/scrollable-options/e2e.ts deleted file mode 100644 index be624af34c..0000000000 --- a/core/src/components/action-sheet/test/scrollable-options/e2e.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('action-sheet: scrollableOptions', async () => { - const page = await newE2EPage({ - url: `/src/components/action-sheet/test/scrollable-options?ionic:_testing=true` - }); - - const presentBtn = await page.find('#scrollableOptions'); - await presentBtn.click(); - - const actionSheet = await page.find('ion-action-sheet'); - await actionSheet.waitForVisible(); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/action-sheet/test/scrollable-options/index.html b/core/src/components/action-sheet/test/scrollable-options/index.html deleted file mode 100644 index ddb99c10eb..0000000000 --- a/core/src/components/action-sheet/test/scrollable-options/index.html +++ /dev/null @@ -1,128 +0,0 @@ - - - - - - Action Sheet - Scrollable Options - - - - - - - - - - - - - Action Sheet - Scrollable Options - - - - - - - Scrollable Options - - - - - - - - diff --git a/core/src/components/action-sheet/test/spec/e2e.ts b/core/src/components/action-sheet/test/spec/e2e.ts index a0dcbfab2a..d0b111ac53 100644 --- a/core/src/components/action-sheet/test/spec/e2e.ts +++ b/core/src/components/action-sheet/test/spec/e2e.ts @@ -11,17 +11,18 @@ test('action-sheet: spec', async () => { let actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); - let compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); + const compares = []; + compares.push(await page.compareScreenshot()); await actionSheet.callMethod('dismiss'); - await actionSheet.waitForNotVisible(); - compare = await page.compareScreenshot(`dismissed`); - expect(compare).toMatchScreenshot(); + compares.push(await page.compareScreenshot(`dismissed`)); actionSheet = await page.find('ion-action-sheet'); - expect(actionSheet).toBe(null); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } }); diff --git a/core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts b/core/src/components/action-sheet/test/translucent/e2e.ts similarity index 54% rename from core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts rename to core/src/components/action-sheet/test/translucent/e2e.ts index b9e6269b80..89d268391c 100644 --- a/core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts +++ b/core/src/components/action-sheet/test/translucent/e2e.ts @@ -1,11 +1,11 @@ import { newE2EPage } from '@stencil/core/testing'; -test('action-sheet: noBackdropDismiss', async () => { +test('action-sheet: translucent', async () => { const page = await newE2EPage({ - url: `/src/components/action-sheet/test/no-backdrop-dismiss?ionic:_testing=true` + url: `/src/components/action-sheet/test/translucent?ionic:_testing=true` }); - const presentBtn = await page.find('#noBackdropDismiss'); + const presentBtn = await page.find('#basic'); await presentBtn.click(); let actionSheet = await page.find('ion-action-sheet'); @@ -14,20 +14,14 @@ test('action-sheet: noBackdropDismiss', async () => { let compare = await page.compareScreenshot(); expect(compare).toMatchScreenshot(); - const backdrop = await page.find('ion-backdrop'); - await backdrop.click(); + await actionSheet.callMethod('dismiss'); + + await actionSheet.waitForNotVisible(); compare = await page.compareScreenshot(`dismissed`); expect(compare).toMatchScreenshot(); - const isVisible = await actionSheet.isVisible(); - expect(isVisible).toBe(true); - - const cancel = await page.find('.action-sheet-cancel'); - await cancel.click(); - - await actionSheet.waitForNotVisible(); - actionSheet = await page.find('ion-action-sheet'); + expect(actionSheet).toBe(null); }); diff --git a/core/src/components/action-sheet/test/translucent/index.html b/core/src/components/action-sheet/test/translucent/index.html index a2022211d8..6437b25275 100644 --- a/core/src/components/action-sheet/test/translucent/index.html +++ b/core/src/components/action-sheet/test/translucent/index.html @@ -156,6 +156,7 @@ } }, { text: 'Copy Text', + cssClass: 'activated', handler: () => { console.log('Copy Text clicked'); } @@ -191,6 +192,7 @@ } }, { text: 'Edit Title', + cssClass: 'activated', handler: () => { console.log('Edit Title clicked'); } diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index 0bc0fac9d8..a6f7d4e6e4 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -20,7 +20,7 @@ $alert-ios-background-color: $overlay-ios-background- $alert-ios-translucent-background-color-alpha: .9 !default; /// @prop - Background color of the alert when translucent -$alert-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $alert-ios-translucent-background-color-alpha) !default; +$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha) !default; /// @prop - Box shadow of the alert $alert-ios-box-shadow: none !default; diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts index c37870b1f3..73d226dd58 100644 --- a/core/src/components/alert/test/basic/e2e.ts +++ b/core/src/components/alert/test/basic/e2e.ts @@ -1,32 +1,55 @@ import { newE2EPage } from '@stencil/core/testing'; -test('alert: basic', async () => { +async function openAlert(selector: string) { const page = await newE2EPage({ url: '/src/components/alert/test/basic?ionic:_testing=true' }); - const alerts = [ - ['#basic'], - ['#longMessage', 'long message'], - ['#multipleButtons', 'multiple buttons'], - ['#noMessage', 'no message'], - ['#confirm', 'confirm'], - ['#prompt', 'prompt'], - ['#radio', 'radio'], - ['#checkbox', 'checkbox'] - ]; + await page.click(selector); - for (const [buttonSelector, message] of alerts) { - await page.click(buttonSelector); + let alert = await page.find('ion-alert'); + expect(alert).not.toBe(null); + await alert.waitForVisible(); + await page.waitFor(250); - const alert = await page.find('ion-alert'); - expect(alert).not.toBe(null); - await alert.waitForVisible(); - await page.waitFor(250); + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); - const compare = await page.compareScreenshot(message); - expect(compare).toMatchScreenshot(); - await alert.callMethod('dismiss'); - } + await alert.callMethod('dismiss'); + await alert.waitForNotVisible(); + alert = await page.find('ion-alert'); + expect(alert).toBe(null); +} + +test(`alert: basic`, async () => { + await openAlert('#basic'); +}); + +test(`alert: basic, long message`, async () => { + await openAlert('#longMessage'); +}); + +test(`alert: basic, multiple buttons`, async () => { + await openAlert('#multipleButtons'); +}); + +test(`alert: basic, no message`, async () => { + await openAlert('#noMessage'); +}); + +test(`alert: basic, confirm`, async () => { + await openAlert('#confirm'); +}); + +test(`alert: basic, prompt`, async () => { + await openAlert('#prompt'); +}); + +test(`alert: basic, radio`, async () => { + await openAlert('#radio'); +}); + +test(`alert: basic, checkbox`, async () => { + await openAlert('#checkbox'); }); diff --git a/core/src/components/alert/test/standalone/e2e.ts b/core/src/components/alert/test/standalone/e2e.ts index 368e4a925e..d3bd8dedec 100644 --- a/core/src/components/alert/test/standalone/e2e.ts +++ b/core/src/components/alert/test/standalone/e2e.ts @@ -1,32 +1,55 @@ import { newE2EPage } from '@stencil/core/testing'; -test('alert: standalone', async () => { +async function openAlert(selector: string) { const page = await newE2EPage({ url: '/src/components/alert/test/standalone?ionic:_testing=true' }); - const alerts = [ - ['#basic'], - ['#longMessage', 'long message'], - ['#multipleButtons', 'multiple buttons'], - ['#noMessage', 'no message'], - ['#confirm', 'confirm'], - ['#prompt', 'prompt'], - ['#radio', 'radio'], - ['#checkbox', 'checkbox'] - ]; + await page.click(selector); - for (const [buttonSelector, message] of alerts) { - await page.click(buttonSelector); + let alert = await page.find('ion-alert'); + expect(alert).not.toBe(null); + await alert.waitForVisible(); + await page.waitFor(250); - const alert = await page.find('ion-alert'); - expect(alert).not.toBe(null); - await alert.waitForVisible(); - await page.waitFor(250); + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); - const compare = await page.compareScreenshot(message); - expect(compare).toMatchScreenshot(); - await alert.callMethod('dismiss'); - } + await alert.callMethod('dismiss'); + await alert.waitForNotVisible(); + alert = await page.find('ion-alert'); + expect(alert).toBe(null); +} + +test(`alert: standalone`, async () => { + await openAlert('#basic'); +}); + +test(`alert: standalone, long message`, async () => { + await openAlert('#longMessage'); +}); + +test(`alert: standalone, multiple buttons`, async () => { + await openAlert('#multipleButtons'); +}); + +test(`alert: standalone, no message`, async () => { + await openAlert('#noMessage'); +}); + +test(`alert: standalone, confirm`, async () => { + await openAlert('#confirm'); +}); + +test(`alert: standalone, prompt`, async () => { + await openAlert('#prompt'); +}); + +test(`alert: standalone, radio`, async () => { + await openAlert('#radio'); +}); + +test(`alert: standalone, checkbox`, async () => { + await openAlert('#checkbox'); }); diff --git a/core/src/components/card-header/card-header.ios.vars.scss b/core/src/components/card-header/card-header.ios.vars.scss index c71017f091..b261a51f1b 100644 --- a/core/src/components/card-header/card-header.ios.vars.scss +++ b/core/src/components/card-header/card-header.ios.vars.scss @@ -19,7 +19,7 @@ $card-ios-header-padding-start: $card-ios-header-padding $card-ios-header-translucent-background-color-alpha: .9 !default; /// @prop - Filter of the translucent card header background color -$card-ios-header-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $card-ios-header-translucent-background-color-alpha) !default; +$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha) !default; /// @prop - Filter of the translucent card header $card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; diff --git a/core/src/components/fab-button/fab-button.ios.vars.scss b/core/src/components/fab-button/fab-button.ios.vars.scss index cec2c1ab13..da7ffa1da9 100755 --- a/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/core/src/components/fab-button/fab-button.ios.vars.scss @@ -55,7 +55,7 @@ $fab-ios-list-button-icon-font-size: 18px !default; $fab-ios-list-button-translucent-background-color-alpha: .8 !default; /// @prop - Background color of the button in a list -$fab-ios-list-button-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $fab-ios-list-button-translucent-background-color-alpha) !default; +$fab-ios-list-button-translucent-background-color: rgba($background-color-rgb, $fab-ios-list-button-translucent-background-color-alpha) !default; /// @prop - Filter of the translucent fab $fab-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/core/src/components/input/test/basic/e2e.ts b/core/src/components/input/test/basic/e2e.ts index dbf905c389..29df8965dd 100644 --- a/core/src/components/input/test/basic/e2e.ts +++ b/core/src/components/input/test/basic/e2e.ts @@ -5,8 +5,9 @@ test('input: basic', async () => { url: '/src/components/input/test/basic?ionic:_testing=true' }); - let compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); + const compares = []; + + compares.push(await page.compareScreenshot()); const fullInput = await page.find('#fullInput'); await fullInput.click(); @@ -14,8 +15,7 @@ test('input: basic', async () => { const fullItem = await page.find('#fullItem'); expect(fullItem).toHaveClass('item-has-focus'); - compare = await page.compareScreenshot('full input focused'); - expect(compare).toMatchScreenshot(); + compares.push(await page.compareScreenshot('full input focused')); const insetInput = await page.find('#insetInput'); await insetInput.click(); @@ -23,8 +23,7 @@ test('input: basic', async () => { const insetItem = await page.find('#insetItem'); expect(insetItem).toHaveClass('item-has-focus'); - compare = await page.compareScreenshot('inset input focused'); - expect(compare).toMatchScreenshot(); + compares.push(await page.compareScreenshot('inset input focused')); const noneInput = await page.find('#noneInput'); await noneInput.click(); @@ -32,6 +31,9 @@ test('input: basic', async () => { const noneItem = await page.find('#noneItem'); expect(noneItem).toHaveClass('item-has-focus'); - compare = await page.compareScreenshot('no lines input focused'); - expect(compare).toMatchScreenshot(); + compares.push(await page.compareScreenshot('no lines input focused')); + + for (const compare of compares) { + expect(compare).toMatchScreenshot(); + } }); diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 033b08ca15..75a48e85db 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -37,7 +37,7 @@ $loading-ios-background-color: $background-color-step-50 !d $loading-ios-translucent-background-color-alpha: .8 !default; /// @prop - Background color of the translucent loading wrapper -$loading-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $loading-ios-translucent-background-color-alpha) !default; +$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha) !default; /// @prop - Font weight of the loading content $loading-ios-content-font-weight: bold !default; diff --git a/core/src/components/picker-column/readme.md b/core/src/components/picker-column/readme.md index f82f725aad..b77c7bd070 100644 --- a/core/src/components/picker-column/readme.md +++ b/core/src/components/picker-column/readme.md @@ -7,9 +7,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------- | ------------------ | -------------- | ----------- | -| `col` _(required)_ | -- | Picker column data | `PickerColumn` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ------------------ | -------------- | ----------- | +| `col` | -- | Picker column data | `PickerColumn` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/picker/picker.ios.vars.scss b/core/src/components/picker/picker.ios.vars.scss index 0c4c9b095e..3c70819f61 100644 --- a/core/src/components/picker/picker.ios.vars.scss +++ b/core/src/components/picker/picker.ios.vars.scss @@ -19,7 +19,7 @@ $picker-ios-top-background-color: var(--background, $picker-ios- $picker-ios-bottom-background-color-alpha: .8 !default; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-ios-bottom-background-color: rgba(var(--background-rgb, var(--ion-background-color-rgb, $background-color-rgb)), $picker-ios-bottom-background-color-alpha) !default; +$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default; /// @prop - Height of the picker toolbar $picker-ios-toolbar-height: 44px !default; diff --git a/core/src/components/picker/picker.md.vars.scss b/core/src/components/picker/picker.md.vars.scss index 8b7290656b..3c8852a1e8 100644 --- a/core/src/components/picker/picker.md.vars.scss +++ b/core/src/components/picker/picker.md.vars.scss @@ -19,7 +19,7 @@ $picker-md-top-background-color: $picker-md-background-color $picker-md-bottom-background-color-alpha: .8 !default; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-md-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-md-bottom-background-color-alpha) !default; +$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default; /// @prop - Height of the picker toolbar $picker-md-toolbar-height: 44px !default; diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index e60590caff..f830bc623f 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -19,7 +19,7 @@ $popover-ios-border-radius: 10px !default; $popover-ios-translucent-background-color-alpha: .8 !default; /// @prop - Background color of the popover content -$popover-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $popover-ios-translucent-background-color-alpha) !default; +$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha) !default; /// @prop - Filter of the translucent popover $popover-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index be9c6b5f38..14a28cb396 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -10,7 +10,7 @@ $toast-ios-background-color: $background-color-step-50 !def $toast-ios-translucent-background-color-alpha: .8 !default; /// @prop - Background Color of the toast wrapper when translucent -$toast-ios-translucent-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $toast-ios-translucent-background-color-alpha) !default; +$toast-ios-translucent-background-color: rgba($background-color-rgb, $toast-ios-translucent-background-color-alpha) !default; /// @prop - Border radius of the toast wrapper $toast-ios-border-radius: 14px !default; diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 1b17f9fcb0..3ab8a4db47 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -84,12 +84,13 @@ $colors: ( // Used internally to calculate the default steps $background-color-value: #fff !default; -$background-color-rgb: 255, 255, 255 !default; +$background-color-rgb-value: 255, 255, 255 !default; $text-color-value: #000 !default; $text-color-rgb: 0, 0, 0 !default; $background-color: var(--ion-background-color, $background-color-value) !default; +$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default; $text-color: var(--ion-text-color, $text-color-value) !default; // Default Foreground and Background Step Colors