From 82457d874ba006a634e48703dcfcde423d1b1230 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Jan 2019 18:13:31 -0500 Subject: [PATCH 1/8] fix(action-sheet): remove the height shift on press and update iOS design (#16862) This changes the border into a linear gradient background image which allows us to avoid the height decrease on press and have the same border as the background color when pressed. - merges all action sheet tests to the basic directory (except standalone, translucent), references #16715 - removes the height shift on press, fixes #16790 - fixes the cancel button on iOS so it is `#ffffff` by default - gets the look of the action sheet closer to native for iOS - only applies the translucent and backdrop filter if it is supported by the browser (chrome will not show transparent anymore) - updates documentation to describe when translucent will show up - adds documentation on how to use screenshot tests --- .github/CONTRIBUTING.md | 12 +- core/src/components.d.ts | 4 +- .../action-sheet/action-sheet.ios.scss | 82 ++-- .../action-sheet/action-sheet.ios.vars.scss | 133 ++++--- .../action-sheet/action-sheet.md.vars.scss | 16 + .../components/action-sheet/action-sheet.tsx | 2 +- core/src/components/action-sheet/readme.md | 26 +- .../test/alert-from-action-sheet/e2e.ts | 29 -- .../test/alert-from-action-sheet/index.html | 71 ---- .../components/action-sheet/test/basic/e2e.ts | 84 +++- .../action-sheet/test/basic/index.html | 369 +++++++++++++++++- .../action-sheet/test/cancel-only/e2e.ts | 16 - .../action-sheet/test/cancel-only/index.html | 52 --- .../action-sheet/test/custom/e2e.ts | 16 - .../action-sheet/test/custom/index.html | 122 ------ .../components/action-sheet/test/icons/e2e.ts | 16 - .../action-sheet/test/icons/index.html | 79 ---- .../test/no-backdrop-dismiss/index.html | 61 --- .../test/scroll-without-cancel/e2e.ts | 16 - .../test/scroll-without-cancel/index.html | 106 ----- .../test/scrollable-options/e2e.ts | 16 - .../test/scrollable-options/index.html | 128 ------ .../components/action-sheet/test/spec/e2e.ts | 13 +- .../e2e.ts | 20 +- .../action-sheet/test/translucent/index.html | 2 + core/src/components/alert/alert.ios.vars.scss | 2 +- core/src/components/alert/test/basic/e2e.ts | 71 ++-- .../components/alert/test/standalone/e2e.ts | 71 ++-- .../card-header/card-header.ios.vars.scss | 2 +- .../fab-button/fab-button.ios.vars.scss | 2 +- core/src/components/input/test/basic/e2e.ts | 18 +- .../components/loading/loading.ios.vars.scss | 2 +- core/src/components/picker-column/readme.md | 6 +- .../components/picker/picker.ios.vars.scss | 2 +- .../src/components/picker/picker.md.vars.scss | 2 +- .../components/popover/popover.ios.vars.scss | 2 +- core/src/components/toast/toast.ios.vars.scss | 2 +- core/src/themes/ionic.theme.default.scss | 3 +- 38 files changed, 757 insertions(+), 919 deletions(-) delete mode 100644 core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts delete mode 100644 core/src/components/action-sheet/test/alert-from-action-sheet/index.html delete mode 100644 core/src/components/action-sheet/test/cancel-only/e2e.ts delete mode 100644 core/src/components/action-sheet/test/cancel-only/index.html delete mode 100644 core/src/components/action-sheet/test/custom/e2e.ts delete mode 100644 core/src/components/action-sheet/test/custom/index.html delete mode 100644 core/src/components/action-sheet/test/icons/e2e.ts delete mode 100644 core/src/components/action-sheet/test/icons/index.html delete mode 100644 core/src/components/action-sheet/test/no-backdrop-dismiss/index.html delete mode 100644 core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts delete mode 100644 core/src/components/action-sheet/test/scroll-without-cancel/index.html delete mode 100644 core/src/components/action-sheet/test/scrollable-options/e2e.ts delete mode 100644 core/src/components/action-sheet/test/scrollable-options/index.html rename core/src/components/action-sheet/test/{no-backdrop-dismiss => translucent}/e2e.ts (54%) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index a241f95dc69..119ec0cb2a1 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 ecfe241401c..fe896a52952 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 366375c773c..47de4855343 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 -// ----------------------------------------- +// --------------------------------------------------- + +@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-group { - background: $action-sheet-ios-translucent-background-color; - backdrop-filter: $action-sheet-ios-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 87de0419a82..17948a86cc4 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; +$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 - Border radius of the action sheet +$action-sheet-ios-border-radius: 13px !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; -/// @prop - Border radius of the action sheet -$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; + + +// 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 -$action-sheet-ios-translucent-filter: saturate(180%) 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 b4df9754753..5d1575ccc7d 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 668dcfa443e..31027e6b6e8 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 948ce96159d..7d0f23a26f4 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 4ec5d298c52..00000000000 --- 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 b3e2efda637..00000000000 --- 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 73ce17eab17..09336072fa3 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`)); - actionSheet = await page.find('ion-action-sheet'); + 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 7d7fac4ebc2..ea758fbabb7 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,13 +23,36 @@ - - 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 9088638370c..00000000000 --- 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 0a64b60a6a4..00000000000 --- 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 cdb9346a8f8..00000000000 --- 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 37d1f9f8763..00000000000 --- 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 324b1faf543..00000000000 --- 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 de3090972ce..00000000000 --- 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 77070fb13e9..00000000000 --- 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 2bef59245e8..00000000000 --- 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 abd5a6dcec7..00000000000 --- 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 be624af34c2..00000000000 --- 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 ddb99c10eb7..00000000000 --- 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 a0dcbfab2ad..d0b111ac533 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 b9e6269b808..89d268391c0 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 a2022211d85..6437b252758 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 0bc0fac9d8e..a6f7d4e6e46 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 c37870b1f39..73d226dd580 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'] - ]; - - for (const [buttonSelector, message] of alerts) { - await page.click(buttonSelector); - - const alert = await page.find('ion-alert'); - expect(alert).not.toBe(null); - await alert.waitForVisible(); - await page.waitFor(250); - - const compare = await page.compareScreenshot(message); - expect(compare).toMatchScreenshot(); - await alert.callMethod('dismiss'); - } + await page.click(selector); + let 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(); + + 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 368e4a925eb..d3bd8dedec6 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'] - ]; - - for (const [buttonSelector, message] of alerts) { - await page.click(buttonSelector); - - const alert = await page.find('ion-alert'); - expect(alert).not.toBe(null); - await alert.waitForVisible(); - await page.waitFor(250); - - const compare = await page.compareScreenshot(message); - expect(compare).toMatchScreenshot(); - await alert.callMethod('dismiss'); - } + await page.click(selector); + let 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(); + + 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 c71017f0910..b261a51f1b3 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 cec2c1ab138..da7ffa1da94 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 dbf905c3894..29df8965dd4 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 033b08ca156..75a48e85db4 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 f82f725aade..b77c7bd0706 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 0c4c9b095ea..3c70819f612 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 8b7290656be..3c8852a1e89 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 e60590caff2..f830bc623f1 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 be9c6b5f388..14a28cb3969 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 1b17f9fcb08..3ab8a4db472 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 From 418052f84b0d6a85dfd1be9590da3548418770dc Mon Sep 17 00:00:00 2001 From: Manu MA Date: Fri, 11 Jan 2019 00:58:35 +0100 Subject: [PATCH 2/8] fix(fab-button): add default padding for fab-button (#17050) --- core/src/components/fab-button/fab-button.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index 52a09248dc9..e085567b3a3 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -10,6 +10,11 @@ --border-width: 0; --border-style: none; --border-color: initial; + --padding-top: 0; + --padding-end: 0; + --padding-bottom: 0; + --padding-start: 0; + /** * @prop --background: Background of the button * @prop --background-activated: Background of the button when activated From 63e0501ae666a48f4737d2bc89d16a4505d24bca Mon Sep 17 00:00:00 2001 From: Manu MA Date: Fri, 11 Jan 2019 16:07:38 +0100 Subject: [PATCH 3/8] fix(input): disable shadow-dom for text inputs (#17043) fixes #17020 --- core/src/components/input/input.ios.scss | 7 +++++++ core/src/components/input/input.md.scss | 6 ++++++ core/src/components/input/input.scss | 5 +++++ core/src/components/input/input.tsx | 9 +++------ core/src/components/item/item.ios.scss | 11 +---------- core/src/components/item/item.md.scss | 12 +----------- core/src/components/textarea/textarea.ios.scss | 7 +++++++ core/src/components/textarea/textarea.md.scss | 7 +++++++ core/src/components/textarea/textarea.scss | 6 +++++- core/src/components/textarea/textarea.tsx | 6 ++---- 10 files changed, 44 insertions(+), 32 deletions(-) diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index d556527eb85..013f1e385bc 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -10,6 +10,13 @@ font-size: $input-ios-font-size; } +:host-context(.item-label-stacked), +:host-context(.item-label-floating) { + --padding-top: 8px; + --padding-bottom: 8px; + --padding-start: 0px; +} + .input-clear-icon { @include svg-background-image($input-ios-input-clear-icon-svg); diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 5ff32b4c99a..51bc9ce6cb1 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -14,6 +14,12 @@ font-size: $input-md-font-size; } +:host-context(.item-label-stacked), +:host-context(.item-label-floating) { + --padding-top: 8px; + --padding-bottom: 8px; + --padding-start: 0; +} .input-clear-icon { @include svg-background-image($input-md-input-clear-icon-svg); diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 41fbd63a02c..86234f94419 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -46,6 +46,10 @@ z-index: $z-index-item-input; } +:host-context(ion-item:not(.item-label)) { + --padding-start: 0; +} + :host(.ion-color) { color: current-color(base); } @@ -63,6 +67,7 @@ flex: 1; width: 100%; + height: 100%; border: 0; diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 867754ea1ad..76fdf0054a0 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,8 +1,8 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, InputChangeEventDetail, Mode, StyleEventDetail, TextFieldTypes } from '../../interface'; -import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers'; -import { createColorClasses, hostContext } from '../../utils/theme'; +import { debounceEvent, findItemLabel } from '../../utils/helpers'; +import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-input', @@ -10,7 +10,7 @@ import { createColorClasses, hostContext } from '../../utils/theme'; ios: 'input.ios.scss', md: 'input.md.scss' }, - shadow: true + scoped: true }) export class Input implements ComponentInterface { @@ -319,7 +319,6 @@ export class Input implements ComponentInterface { 'aria-disabled': this.disabled ? 'true' : null, class: { ...createColorClasses(this.color), - 'in-item': hostContext('ion-item', this.el), 'has-value': this.hasValue(), 'has-focus': this.hasFocus } @@ -328,8 +327,6 @@ export class Input implements ComponentInterface { render() { const value = this.getValue(); - renderHiddenInput(false, this.el, this.name, value, this.disabled); - const labelId = this.inputId + '-lbl'; const label = findItemLabel(this.el); if (label) { diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 5895f5c623d..5a5047f4c9d 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -152,10 +152,7 @@ --min-height: 68px; } -:host(.item-label-stacked) ::slotted(ion-input), -:host(.item-label-floating) ::slotted(ion-input), -:host(.item-label-stacked) ::slotted(ion-textarea), -:host(.item-label-floating) ::slotted(ion-textarea), +// TODO: refactor, ion-item and ion-textarea have the same CSS :host(.item-label-stacked) ::slotted(ion-select), :host(.item-label-floating) ::slotted(ion-select) { --padding-top: 8px; @@ -164,12 +161,6 @@ } -// TODO -// .item-ios.item-label-stacked .label-ios + .input + .cloned-input, -// .item-ios.item-label-floating .label-ios + .input + .cloned-input { -// @include margin-horizontal(0, null); -// } - // FROM TEXTAREA // iOS Stacked & Floating Textarea // -------------------------------------------------- diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 3de4bcacf17..1b4acb17d72 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -235,11 +235,7 @@ --min-height: 65px; } -// TODO: refactor -:host(.item-label-stacked) ::slotted(ion-input), -:host(.item-label-floating) ::slotted(ion-input), -:host(.item-label-stacked) ::slotted(ion-textarea), -:host(.item-label-floating) ::slotted(ion-textarea), +// TODO: refactor, ion-item and ion-textarea have the same CSS :host(.item-label-stacked) ::slotted(ion-select), :host(.item-label-floating) ::slotted(ion-select) { --padding-top: 8px; @@ -247,12 +243,6 @@ --padding-start: 0; } - -:host(:not(.item-label)) ::slotted(ion-input), -:host(:not(.item-label)) ::slotted(ion-textarea) { - --padding-start: 0; -} - :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked), :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) { color: $label-md-text-color-focused; diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss index 561421957b9..409d32bd8a4 100644 --- a/core/src/components/textarea/textarea.ios.scss +++ b/core/src/components/textarea/textarea.ios.scss @@ -12,3 +12,10 @@ font-size: $textarea-ios-font-size; } + +:host-context(.item-label-stacked), +:host-context(.item-label-floating) { + --padding-top: 8px; + --padding-bottom: 8px; + --padding-start: 0px; +} diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss index 7365570fbc4..f23bdf68318 100644 --- a/core/src/components/textarea/textarea.md.scss +++ b/core/src/components/textarea/textarea.md.scss @@ -12,3 +12,10 @@ font-size: $textarea-md-font-size; } + +:host-context(.item-label-stacked), +:host-context(.item-label-floating) { + --padding-top: 8px; + --padding-bottom: 8px; + --padding-start: 0; +} diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index ac4d9f02a4d..96275e5b177 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -56,10 +56,14 @@ // Textarea Within An Item // -------------------------------------------------- -:host(.in-item) { +:host-context(ion-item) { position: static; } +:host-context(ion-item:not(.item-label)) { + --padding-start: 0; +} + // Native Textarea // -------------------------------------------------- diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 905b565b16a..e7eec1fb87d 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -1,7 +1,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; import { Color, Mode, StyleEventDetail, TextareaChangeEventDetail } from '../../interface'; -import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers'; +import { debounceEvent, findItemLabel } from '../../utils/helpers'; import { createColorClasses } from '../../utils/theme'; @Component({ @@ -10,7 +10,7 @@ import { createColorClasses } from '../../utils/theme'; ios: 'textarea.ios.scss', md: 'textarea.md.scss' }, - shadow: true + scoped: true }) export class Textarea implements ComponentInterface { @@ -263,8 +263,6 @@ export class Textarea implements ComponentInterface { render() { const value = this.getValue(); - renderHiddenInput(false, this.el, this.name, value, this.disabled); - const labelId = this.inputId + '-lbl'; const label = findItemLabel(this.el); if (label) { From d2fa946c18802aeb9de056cacb43ed5e2f367dd6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 11 Jan 2019 10:37:54 -0500 Subject: [PATCH 4/8] fix(item): no lines on item should take precedence over list lines (#17049) fixes #16900 --- .../src/components/item/test/lines/index.html | 20 ++++++++++--------- core/src/components/list/list.ios.scss | 6 +++++- core/src/components/list/list.md.scss | 6 +++++- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/core/src/components/item/test/lines/index.html b/core/src/components/item/test/lines/index.html index d84346b207b..951c85ec5c7 100644 --- a/core/src/components/item/test/lines/index.html +++ b/core/src/components/item/test/lines/index.html @@ -21,9 +21,13 @@ + + Header + + - Item + Default Item Lines @@ -39,7 +43,7 @@ - Item + Default Item Lines @@ -70,12 +74,12 @@ Item - - Item - Item Inset + + Item None + @@ -88,8 +92,8 @@ Item Full - - Item + + Item None @@ -209,9 +213,7 @@

Colors

 - -