diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000000..6313b56c578 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 09723e72621..b1f04ad75d3 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -12,74 +12,3 @@ # This should make it easy to add new rules without breaking existing ones. * @ionic-team/framework - -# Frameworks - -## Angular - -/packages/angular/ @sean-perkins @thetaPC -/packages/angular-server @sean-perkins @thetaPC -/packages/angular/test @thetaPC - -## React - -/packages/react/ @amandaejohnston -/packages/react-router @amandaejohnston -/packages/react/test-app/ -/packages/react-router/test-app/ - -## Vue - -/packages/vue/ @liamdebeasi @thetaPC -/packages/vue-router/ @liamdebeasi @thetaPC -/packages/vue/test/ @thetaPC -/packages/vue-router/__tests__ @thetaPC - -# Components - -/core/src/components/accordion/ @liamdebeasi -/core/src/components/accordion-group/ @liamdebeasi - -/core/src/components/checkbox/ @amandaejohnston - -/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins -/core/src/components/datetime-button/ @liamdebeasi - -/core/src/components/item/ @brandyscarney - -/core/src/components/menu/ @amandaejohnston -/core/src/components/menu-toggle/ @amandaejohnston - -/core/src/components/nav/ @sean-perkins -/core/src/components/nav-link/ @sean-perkins - -/core/src/components/picker-internal/ @liamdebeasi -/core/src/components/picker-column-internal/ @liamdebeasi - -/core/src/components/radio/ @amandaejohnston -/core/src/components/radio-group/ @amandaejohnston - -/core/src/components/refresher/ @liamdebeasi -/core/src/components/refresher-content/ @liamdebeasi - -/core/src/components/searchbar/ @brandyscarney - -/core/src/components/segment/ @brandyscarney -/core/src/components/segment-button/ @brandyscarney - -/core/src/components/skeleton-text/ @brandyscarney - -# Utilities - -/core/src/utils/animation/ @liamdebeasi -/core/src/utils/content/ @sean-perkins -/core/src/utils/gesture/ @liamdebeasi -/core/src/utils/input-shims/ @liamdebeasi -/core/src/utils/keyboard/ @liamdebeasi -/core/src/utils/logging/ @amandaejohnston -/core/src/utils/sanitization/ @liamdebeasi -/core/src/utils/tap-click/ @liamdebeasi -/core/src/utils/transition/ @liamdebeasi - -/core/src/css/ @brandyscarney -/core/src/themes/ @brandyscarney diff --git a/.github/COMPONENT-GUIDE.md b/.github/COMPONENT-GUIDE.md deleted file mode 100644 index 2212d559496..00000000000 --- a/.github/COMPONENT-GUIDE.md +++ /dev/null @@ -1,756 +0,0 @@ -# Ionic Component Implementation Guide - -- [Button States](#button-states) - * [Component Structure](#component-structure) - * [Activated](#activated) - * [Disabled](#disabled) - * [Focused](#focused) - * [Hover](#hover) - * [Ripple Effect](#ripple-effect) - * [Example Components](#example-components) - * [References](#references) -- [Accessibility](#accessibility) - * [Checkbox](#checkbox) - * [Switch](#switch) - * [Accordion](#accordion) -- [Rendering Anchor or Button](#rendering-anchor-or-button) - * [Example Components](#example-components-1) - * [Component Structure](#component-structure-1) -- [Converting Scoped to Shadow](#converting-scoped-to-shadow) -- [RTL](#rtl) - -## Button States - -Any component that renders a button should have the following states: [`activated`](#activated), [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design. - -### Component Structure - -#### JavaScript - -A component that renders a native button should use the following structure: - -```jsx - - - -``` - -Any other attributes and classes that are included are irrelevant to the button states, but it's important that this structure is followed and the classes above exist. In some cases they may be named something else that makes more sense, such as in item. - - -#### CSS - -A mixin called `button-state()` has been added to make it easier to setup the states in each component. - -```scss -@mixin button-state() { - @include position(0, 0, 0, 0); - - position: absolute; - - content: ""; - - opacity: 0; -} -``` - -The following styles should be set for the CSS to work properly. Note that the `button-state()` mixin is included in the `::after` pseudo element of the native button. - -```scss -.button-native { - /** - * All other CSS in this selector is irrelevant to button states - * but the following are required styles - */ - - position: relative; - - overflow: hidden; -} - -.button-native::after { - @include button-state(); -} - -.button-inner { - /** - * All other CSS in this selector is irrelevant to button states - * but the following are required styles - */ - - position: relative; - - z-index: 1; -} -``` - - -### Activated - -The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element. - -> Make sure the component has the correct [component structure](#component-structure) before continuing. - -#### JavaScript - -The `ion-activatable` class needs to be set on an element that can be activated: - -```jsx -render() { - return ( - - - - ); -} -``` - -Once that is done, the element will get the `ion-activated` class added on press. - -In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay: - -```jsx - -``` - -#### CSS - -```css - /** - * @prop --color-activated: Color of the button when pressed - * @prop --background-activated: Background of the button when pressed - * @prop --background-activated-opacity: Opacity of the background when pressed - */ -``` - -Style the `ion-activated` class based on the spec for that element: - -```scss -:host(.ion-activated) .button-native { - color: var(--color-activated); - - &::after { - background: var(--background-activated); - - opacity: var(--background-activated-opacity); - } -} -``` - -> Order is important! Activated should be after the focused & hover states. - - -#### User Customization - -Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec. - -```css -ion-button { - --background-activated: red; - --background-activated-opacity: 1; -} -``` - - -### Disabled - -The disabled state should be set via prop on all components that render a native button. Setting a disabled state will change the opacity or color of the button and remove click events from firing. - -#### JavaScript - -The `disabled` property should be set on the component: - -```jsx -/** - * If `true`, the user cannot interact with the button. - */ -@Prop({ reflectToAttr: true }) disabled = false; -``` - -Then, the render function should add the [`aria-disabled`](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-disabled) role to the host, a class that is the element tag name followed by `disabled`, and pass the `disabled` attribute to the native button: - -```jsx -render() { - const { disabled } = this; - - return ( - - - - ); -} -``` - -> Note: if the class being added was for `ion-back-button` it would be `back-button-disabled`. - -#### CSS - -The following CSS _at the bare minimum_ should be added for the disabled class, but it should be styled to match the spec: - -```css -:host(.button-disabled) { - cursor: default; - opacity: .5; - pointer-events: none; -} -``` - -#### User Customization - -TODO - -### Focused - -The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element. - -> Make sure the component has the correct [component structure](#component-structure) before continuing. - -#### JavaScript - -The `ion-focusable` class needs to be set on an element that can be focused: - -```jsx -render() { - return ( - - - - ); -} -``` - -Once that is done, the element will get the `ion-focused` class added when the element is tabbed to. - -#### CSS - -Components should be written to include the following focused variables for styling: - -```css - /** - * @prop --color-focused: Color of the button when tabbed to with the keyboard - * @prop --background-focused: Background of the button when tabbed to with the keyboard - * @prop --background-focused-opacity: Opacity of the background when tabbed to with the keyboard - */ -``` - -Style the `ion-focused` class based on the spec for that element: - -```scss -:host(.ion-focused) .button-native { - color: var(--color-focused); - - &::after { - background: var(--background-focused); - - opacity: var(--background-focused-opacity); - } -} -``` - -> Order is important! Focused should be after the activated and before the hover state. - - -#### User Customization - -Setting the focused state on the `::after` pseudo-element allows the user to customize the focused state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on focus, or they can leave out `--background-focused-opacity` and the button will use the default focus opacity to match the spec. - -```css -ion-button { - --background-focused: red; - --background-focused-opacity: 1; -} -``` - - -### Hover - -The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover. - -> Make sure the component has the correct [component structure](#component-structure) before continuing. - -#### CSS - -Components should be written to include the following hover variables for styling: - -```css - /** - * @prop --color-hover: Color of the button on hover - * @prop --background-hover: Background of the button on hover - * @prop --background-hover-opacity: Opacity of the background on hover - */ -``` - -Style the `:hover` based on the spec for that element: - -```scss -@media (any-hover: hover) { - :host(:hover) .button-native { - color: var(--color-hover); - - &::after { - background: var(--background-hover); - - opacity: var(--background-hover-opacity); - } - } -} -``` - -> Order is important! Hover should be before the activated state. - - -#### User Customization - -Setting the hover state on the `::after` pseudo-element allows the user to customize the hover state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on hover, or they can leave out `--background-hover-opacity` and the button will use the default hover opacity to match the spec. - -```css -ion-button { - --background-hover: red; - --background-hover-opacity: 1; -} -``` - - -### Ripple Effect - -The ripple effect should be added to elements for Material Design. It *requires* the `ion-activatable` class to be set on the parent element to work, and relative positioning on the parent. - -```jsx - render() { - const mode = getIonMode(this); - -return ( - - - -); -``` - -The ripple effect can also accept a different `type`. By default it is `"bounded"` which will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`. An unbounded ripple will exceed the container, so add `overflow: hidden` to the parent to prevent this. - -Make sure to style the ripple effect for that component to accept a color: - -```css -ion-ripple-effect { - color: var(--ripple-color); -} -``` - - -### Example Components - -- [ion-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/button) -- [ion-back-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/back-button) -- [ion-menu-button](https://github.com/ionic-team/ionic/tree/main/core/src/components/menu-button) - -### References - -- [Material Design States](https://material.io/design/interaction/states.html) -- [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/) - - -## Accessibility - -### Checkbox - -#### Example Components - -- [ion-checkbox](https://github.com/ionic-team/ionic/tree/main/core/src/components/checkbox) - -#### VoiceOver - -In order for VoiceOver to work properly with a checkbox component there must be a native `input` with `type="checkbox"`, and `aria-checked` and `role="checkbox"` **must** be on the host element. The `aria-hidden` attribute needs to be added if the checkbox is disabled, preventing iOS users from selecting it: - -```tsx -render() { - const { checked, disabled } = this; - - return ( - - - ... - - ); -} -``` - -#### NVDA - -It is required to have `aria-checked` on the native input for checked to read properly and `disabled` to prevent tabbing to the input: - -```tsx -render() { - const { checked, disabled } = this; - - return ( - - - ... - - ); -} -``` - -#### Labels - -A helper function has been created to get the proper `aria-label` for the checkbox. This can be imported as `getAriaLabel` like the following: - -```tsx -const { label, labelId, labelText } = getAriaLabel(el, inputId); -``` - -where `el` and `inputId` are the following: - -```tsx -export class Checkbox implements ComponentInterface { - private inputId = `ion-cb-${checkboxIds++}`; - - @Element() el!: HTMLElement; - - ... -} -``` - -This can then be added to the `Host` like the following: - -```tsx - -``` - -In addition to that, the checkbox input should have a label added: - -```tsx - - - -``` - -#### Hidden Input - -A helper function to render a hidden input has been added, it can be added in the `render`: - -```tsx -renderHiddenInput(true, el, name, (checked ? value : ''), disabled); -``` - -> This is required for the checkbox to work with forms. - -#### Known Issues - -When using VoiceOver on macOS, Chrome will announce the following when you are focused on a checkbox: - -``` -currently on a checkbox inside of a checkbox -``` - -This is a compromise we have to make in order for it to work with the other screen readers & Safari. - - -### Switch - -#### Example Components - -- [ion-toggle](https://github.com/ionic-team/ionic/tree/main/core/src/components/toggle) - -#### Voiceover - -In order for VoiceOver to work properly with a switch component there must be a native `input` with `type="checkbox"` and `role="switch"`, and `aria-checked` and `role="switch"` **must** be on the host element. The `aria-hidden` attribute needs to be added if the switch is disabled, preventing iOS users from selecting it: - -```tsx -render() { - const { checked, disabled } = this; - - return ( - - - ... - - ); -} -``` - -#### NVDA - -It is required to have `aria-checked` on the native input for checked to read properly and `disabled` to prevent tabbing to the input: - -```tsx -render() { - const { checked, disabled } = this; - - return ( - - - ... - - ); -} -``` - -#### Labels - -A helper function has been created to get the proper `aria-label` for the switch. This can be imported as `getAriaLabel` like the following: - -```tsx -const { label, labelId, labelText } = getAriaLabel(el, inputId); -``` - -where `el` and `inputId` are the following: - -```tsx -export class Toggle implements ComponentInterface { - private inputId = `ion-tg-${toggleIds++}`; - - @Element() el!: HTMLElement; - - ... -} -``` - -This can then be added to the `Host` like the following: - -```tsx - -``` - -In addition to that, the checkbox input should have a label added: - -```tsx - - - -``` - - -#### Hidden Input - -A helper function to render a hidden input has been added, it can be added in the `render`: - -```tsx -renderHiddenInput(true, el, name, (checked ? value : ''), disabled); -``` - -> This is required for the switch to work with forms. - - -#### Known Issues - -When using VoiceOver on macOS or iOS, Chrome will announce the switch as a checked or unchecked `checkbox`: - -``` -You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space. -``` - -There is a WebKit bug open for this: https://bugs.webkit.org/show_bug.cgi?id=196354 - -### Accordion - -#### Example Components - -- [ion-accordion](https://github.com/ionic-team/ionic/tree/master/core/src/components/accordion) -- [ion-accordion-group](https://github.com/ionic-team/ionic/tree/master/core/src/components/accordion-group) - -#### NVDA - -In order to use the arrow keys to navigate the accordions, users must be in "Focus Mode". Typically, NVDA automatically switches between Browse and Focus modes when inside of a form, but not every accordion needs a form. - -You can either wrap your `ion-accordion-group` in a form, or manually toggle Focus Mode using NVDA's keyboard shortcut. - - -## Rendering Anchor or Button - -Certain components can render an `` or a ` + + + + + + `, + config + ); + + const actionSheet = page.locator('ion-action-sheet'); + + await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present()); + + await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-disabled')); + }); + }); +}); diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Chrome-linux.png index 394a235a473..489a9b80564 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Firefox-linux.png index 4a71c66ec11..b7f2df3fe6a 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Safari-linux.png index da522cfe0fe..70787af0da6 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Chrome-linux.png index ac4287f384d..139b941ec91 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Firefox-linux.png index 361492505b7..b499e0b8e03 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Safari-linux.png index 598573ece11..9fe022d6c61 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Chrome-linux.png index 2f35a0e5a84..688633c4a76 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Firefox-linux.png index c98298a739d..2a5c0c88cc6 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Safari-linux.png index 9eeaa0e1101..871b30e58ee 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Chrome-linux.png index 9a3257175fc..ac16fff642e 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Firefox-linux.png index 4f6bb73a3fd..ce27c2ade1a 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Safari-linux.png index db5935723eb..5bf6836619f 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-basic-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Chrome-linux.png index 1463893f754..933b6375f6d 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Firefox-linux.png index a77f54a0e00..926bcaa309c 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Safari-linux.png index bd6fd2e7cc2..dc49d225a7a 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Chrome-linux.png index 1463893f754..933b6375f6d 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Firefox-linux.png index a82e7ed197d..8c30b24a83a 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Safari-linux.png index bd6fd2e7cc2..dc49d225a7a 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Chrome-linux.png index a1bad57eafc..f5e9de76797 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Firefox-linux.png index e23d01d025f..dca4e2c7223 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Safari-linux.png index b5bc519589a..5f537d3069d 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Chrome-linux.png index 2c10c592179..dfeb9defa6c 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Firefox-linux.png index 1912b7ebf68..93c63cf4e07 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Safari-linux.png index fec2d5b13a4..01bd0f30fc9 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-cancel-only-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Chrome-linux.png index 6b8f97bb8d5..6bfc573aac6 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Firefox-linux.png index 1e8004da828..5386f93f3d3 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Safari-linux.png index 85354bb92d4..4359e07bb08 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Chrome-linux.png index 00a3f3617bc..1248972b1bb 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Firefox-linux.png index 73ae9ad06e4..d97a6e3fade 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Safari-linux.png index 6e0dad94bc3..2c018dc06fe 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Chrome-linux.png index 973bb91806f..1d667ac3f0c 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Firefox-linux.png index 766f19d6e31..bb19c5a3bdc 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Safari-linux.png index 1877b40b4a4..bde8911ffd8 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Chrome-linux.png index f73ae3b33b1..03486463f14 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Firefox-linux.png index 256445c0056..027d73d43f2 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Safari-linux.png index 9398e72c4ec..0c3b8c5aed9 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-custom-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9ba47655354 Binary files /dev/null and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..07807da2ac9 Binary files /dev/null and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..de84fce25af Binary files /dev/null and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f9bf5033560 Binary files /dev/null and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..065873b4478 Binary files /dev/null and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..71af754d1f0 Binary files /dev/null and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Chrome-linux.png index 8ec4cfce41f..03353e2e0c9 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Firefox-linux.png index 7325d68d1eb..2c1e5923918 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Safari-linux.png index eebc6375f8a..baab4466551 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Chrome-linux.png index 8ec4cfce41f..03353e2e0c9 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Firefox-linux.png index fee03b4ee97..6195fbb27d0 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Safari-linux.png index eebc6375f8a..b162a6d8c88 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Chrome-linux.png index cf6b16ce13b..7ccdeef0bae 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Firefox-linux.png index 6c284734c53..22d6f56994c 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Safari-linux.png index 28911397e2a..fb4f64adf98 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Chrome-linux.png index e7f8ba76ba1..a5aedff5eb0 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Firefox-linux.png index 17b6c1bec55..09df0aa91c8 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Safari-linux.png index 72ff028629e..76c7d1e5599 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scroll-without-cancel-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Chrome-linux.png index f30ca515660..2b740427fbf 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Firefox-linux.png index 82ea7f9d10f..263d1012eae 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Safari-linux.png index a626b40cf91..3bf703b2d92 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Chrome-linux.png index f30ca515660..2b740427fbf 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Firefox-linux.png index 0010271dc93..cec9b1f5809 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Safari-linux.png index a626b40cf91..b91e4903701 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Chrome-linux.png index 2932d3f8a22..a3928ee45b3 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Safari-linux.png index fb5db2f4725..f92437d0d2f 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Chrome-linux.png index 3fd0f17ea53..2553c9aa82d 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Safari-linux.png index 053767573c3..58e8dd18368 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet-rendering.e2e.ts-snapshots/action-sheet-scrollable-options-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Chrome-linux.png index 25414ea6491..c246d458d7d 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Firefox-linux.png index f5650d94c8e..9e9fe7e7d7b 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Safari-linux.png index f4006b17665..aa91910d78d 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Chrome-linux.png index 1106fcc5839..52aed3ceef7 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Safari-linux.png index 5abd5f6823f..92067b799d3 100644 Binary files a/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Safari-linux.png and b/core/src/components/action-sheet/test/basic/action-sheet.e2e.ts-snapshots/action-sheet-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx b/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx index d35de2de0a5..fce291525f2 100644 --- a/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx +++ b/core/src/components/action-sheet/test/basic/action-sheet.spec.tsx @@ -22,3 +22,40 @@ describe('action sheet: htmlAttributes inheritance', () => { await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet'); }); }); + +describe('action sheet: disabled buttons', () => { + it('regular button should be disabled', async () => { + const page = await newSpecPage({ + components: [ActionSheet], + template: () => ( + + ), + }); + + const actionSheet = page.body.querySelector('ion-action-sheet')!; + + await actionSheet.present(); + + const button = actionSheet.querySelector('.action-sheet-button')!; + await expect(button.hasAttribute('disabled')).toBe(true); + }); + + it('cancel button should not be disabled', async () => { + const page = await newSpecPage({ + components: [ActionSheet], + template: () => ( + + ), + }); + + const actionSheet = page.body.querySelector('ion-action-sheet')!; + + await actionSheet.present(); + + const cancelButton = actionSheet.querySelector('.action-sheet-cancel')!; + await expect(cancelButton.hasAttribute('disabled')).toBe(false); + }); +}); diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html index d2f94721e02..b95d43b42c7 100644 --- a/core/src/components/action-sheet/test/basic/index.html +++ b/core/src/components/action-sheet/test/basic/index.html @@ -27,24 +27,18 @@ - Basic - Alert from Action Sheet - Cancel Only - Custom CSS Class - Icons - No Backdrop Dismiss - Scrollable Options - Scroll Without Cancel - Custom Backdrop Opacity - Button data + + + + + + + + + + diff --git a/core/src/components/action-sheet/test/is-open/index.html b/core/src/components/action-sheet/test/is-open/index.html index d16430a4dc9..c606b6f96aa 100644 --- a/core/src/components/action-sheet/test/is-open/index.html +++ b/core/src/components/action-sheet/test/is-open/index.html @@ -47,11 +47,11 @@

Default

- Open ActionSheet +

Open, then close after 500ms

- Open ActionSheet +
diff --git a/core/src/components/action-sheet/test/standalone/index.html b/core/src/components/action-sheet/test/standalone/index.html index 15f099912cf..b40c03c53c2 100644 --- a/core/src/components/action-sheet/test/standalone/index.html +++ b/core/src/components/action-sheet/test/standalone/index.html @@ -18,28 +18,16 @@ window.actionSheetController = actionSheetController; - - - - - - - - - - +
+ + + + + + + + +
+ + - - diff --git a/core/src/components/action-sheet/test/trigger/index.html b/core/src/components/action-sheet/test/trigger/index.html index 53a8236e4c2..17f4cc829b0 100644 --- a/core/src/components/action-sheet/test/trigger/index.html +++ b/core/src/components/action-sheet/test/trigger/index.html @@ -47,11 +47,11 @@

Default

- Open ActionSheet +

Open, then close after 500ms

- Open ActionSheet +
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index f3bdcb04da0..259d00e0112 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -95,6 +95,8 @@ background-color: $alert-ios-input-background-color; appearance: none; + font-size: dynamic-font(16px); + &::placeholder { color: $alert-ios-input-placeholder-color; @@ -108,10 +110,10 @@ &::-webkit-date-and-time-value { /** - * The -webkit-date-and-time-value pseudo element is used + * The -webkit-date-and-time-value pseudo element is used * to style the date/time input on iOS/Mobile Safari. * To avoid layout shift between an empty state and a selected state, - * we set the height `18px` to match the native input height for + * we set the height `18px` to match the native input height for * date/time inputs on iOS/Mobile Safari. */ height: 18px; diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index a96e0c6cb81..ed913bf88d4 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -6,136 +6,136 @@ // -------------------------------------------------- /// @prop - Font size of the alert -$alert-ios-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-font-size: dynamic-font-min(1, 14px); /// @prop - Max width of the alert -$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default; +$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2); /// @prop - Border radius of the alert -$alert-ios-border-radius: 13px !default; +$alert-ios-border-radius: 13px; /// @prop - Background color of the alert -$alert-ios-background-color: $overlay-ios-background-color !default; +$alert-ios-background-color: $overlay-ios-background-color; /// @prop - Background color alpha of the alert when translucent -$alert-ios-translucent-background-color-alpha: .9 !default; +$alert-ios-translucent-background-color-alpha: .9; /// @prop - Background color of the alert when translucent -$alert-ios-translucent-background-color: rgba($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); /// @prop - Box shadow of the alert -$alert-ios-box-shadow: none !default; +$alert-ios-box-shadow: none; /// @prop - Padding top of the alert head -$alert-ios-head-padding-top: 12px !default; +$alert-ios-head-padding-top: 12px; /// @prop - Padding end of the alert head -$alert-ios-head-padding-end: 16px !default; +$alert-ios-head-padding-end: 16px; /// @prop - Padding bottom of the alert head -$alert-ios-head-padding-bottom: 7px !default; +$alert-ios-head-padding-bottom: 7px; /// @prop - Padding start of the alert head -$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; +$alert-ios-head-padding-start: $alert-ios-head-padding-end; /// @prop - Text align of the alert head -$alert-ios-head-text-align: center !default; +$alert-ios-head-text-align: center; /// @prop - Color of the alert title -$alert-ios-title-color: $text-color !default; +$alert-ios-title-color: $text-color; /// @prop - Margin top of the alert title -$alert-ios-title-margin-top: 8px !default; +$alert-ios-title-margin-top: 8px; /// @prop - Font size of the alert title -$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-title-font-size: dynamic-font-min(1, 17px); /// @prop - Font weight of the alert title -$alert-ios-title-font-weight: 600 !default; +$alert-ios-title-font-weight: 600; /// @prop - Font size of the alert sub title -$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px); /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-color-step-400 !default; +$alert-ios-sub-title-text-color: $text-color-step-400; /// @prop - Padding top of the alert message -$alert-ios-message-padding-top: 0 !default; +$alert-ios-message-padding-top: 0; /// @prop - Padding end of the alert message -$alert-ios-message-padding-end: 16px !default; +$alert-ios-message-padding-end: 16px; /// @prop - Padding bottom of the alert message -$alert-ios-message-padding-bottom: 21px !default; +$alert-ios-message-padding-bottom: 21px; /// @prop - Padding start of the alert message -$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; +$alert-ios-message-padding-start: $alert-ios-message-padding-end; /// @prop - Font size of the alert message -$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default; +$alert-ios-message-font-size: dynamic-font-min(1, 13px); /// @prop - Text align of the alert message -$alert-ios-message-text-align: center !default; +$alert-ios-message-text-align: center; /// @prop - Text color of the alert message -$alert-ios-message-text-color: $text-color !default; +$alert-ios-message-text-color: $text-color; /// @prop - Padding top of the alert empty message -$alert-ios-message-empty-padding-top: 0 !default; +$alert-ios-message-empty-padding-top: 0; /// @prop - Padding end of the alert empty message -$alert-ios-message-empty-padding-end: 0 !default; +$alert-ios-message-empty-padding-end: 0; /// @prop - Padding bottom of the alert empty message -$alert-ios-message-empty-padding-bottom: 12px !default; +$alert-ios-message-empty-padding-bottom: 12px; /// @prop - Padding start of the alert empty message -$alert-ios-message-empty-padding-start: 0 !default; +$alert-ios-message-empty-padding-start: 0; /// @prop - Maximum height of the alert content -$alert-ios-content-max-height: 240px !default; +$alert-ios-content-max-height: 240px; /// @prop - Margin top of the alert input -$alert-ios-input-margin-top: 10px !default; +$alert-ios-input-margin-top: 10px; /// @prop - Padding top on the alert input -$alert-ios-input-padding-top: 6px !default; +$alert-ios-input-padding-top: 7px; /// @prop - Padding end on the alert input -$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-end: $alert-ios-input-padding-top; /// @prop - Padding bottom on the alert input -$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top; /// @prop - Padding start on the alert input -$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; +$alert-ios-input-padding-start: $alert-ios-input-padding-end; /// @prop - Placeholder Color for input -$alert-ios-input-placeholder-color: $placeholder-text-color !default; +$alert-ios-input-placeholder-color: $placeholder-text-color; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-color-step-250 !default; +$alert-ios-input-border-color: $background-color-step-250; /// @prop - Border of the alert input -$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; +$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color; /// @prop - Border radius of the alert input -$alert-ios-input-border-radius: 4px !default; +$alert-ios-input-border-radius: 7px; /// @prop - Background color of the alert input -$alert-ios-input-background-color: $background-color !default; +$alert-ios-input-background-color: $background-color; /// @prop - Flex wrap of the alert button group -$alert-ios-button-group-flex-wrap: wrap !default; +$alert-ios-button-group-flex-wrap: wrap; /// @prop - Flex of the alert button -$alert-ios-button-flex: 1 1 auto !default; +$alert-ios-button-flex: 1 1 auto; /// @prop - Margin of the alert button -$alert-ios-button-margin: 0 !default; +$alert-ios-button-margin: 0; /// @prop - Min width of the alert button -$alert-ios-button-min-width: 50% !default; +$alert-ios-button-min-width: 50%; /// @prop - Height of the alert button /** @@ -147,172 +147,172 @@ $alert-ios-button-min-width: 50% !default; * a hairline (<1px) width, this will cause subpixel rendering * differences across browsers. */ -$alert-ios-button-height: dynamic-font-min(1, 44px) !default; +$alert-ios-button-height: dynamic-font-min(1, 44px); /// @prop - Padding of the alert button -$alert-ios-button-padding: 8px !default; +$alert-ios-button-padding: 8px; /// @prop - Font size of the alert button -$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-button-font-size: dynamic-font-min(1, 17px); /// @prop - Color of the text in the alert button -$alert-ios-button-text-color: ion-color(primary, base) !default; +$alert-ios-button-text-color: ion-color(primary, base); /// @prop - Destructive text color of the alert button -$alert-ios-button-destructive-text-color: ion-color(danger, base) !default; +$alert-ios-button-destructive-text-color: ion-color(danger, base); /// @prop - Background color of the alert button -$alert-ios-button-background-color: transparent !default; +$alert-ios-button-background-color: transparent; /// @prop - Background color alpha of the alert activated button -$alert-ios-button-background-color-alpha-activated: .1 !default; +$alert-ios-button-background-color-alpha-activated: .1; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default; +$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated); /// @prop - Border width of the alert button -$alert-ios-button-border-width: $hairlines-width !default; +$alert-ios-button-border-width: $hairlines-width; /// @prop - Border style of the alert button -$alert-ios-button-border-style: solid !default; +$alert-ios-button-border-style: solid; /// @prop - Border color alpha of the alert button -$alert-ios-button-border-color-alpha: .2 !default; +$alert-ios-button-border-color-alpha: .2; /// @prop - Border color of the alert button -$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default; +$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha); /// @prop - Border radius of the alert button -$alert-ios-button-border-radius: 0 !default; +$alert-ios-button-border-radius: 0; /// @prop - Font weight of the main text on the alert button -$alert-ios-button-main-font-weight: bold !default; +$alert-ios-button-main-font-weight: bold; /// @prop - Border top of the alert list -$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; +$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; /// @prop - Padding top on the label for the radio alert -$alert-ios-radio-label-padding-top: 13px !default; +$alert-ios-radio-label-padding-top: 13px; /// @prop - Padding end on the label for the radio alert -$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top; /// @prop - Padding bottom on the label for the radio alert -$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top; /// @prop - Padding start on the label for the radio alert -$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end; /// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: $text-color !default; +$alert-ios-radio-label-text-color: $text-color; /// @prop - Text color of the label for the checked radio alert -$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color; /// @prop - Min width of the radio alert -$alert-ios-radio-min-width: 30px !default; +$alert-ios-radio-min-width: 30px; /// @prop - Top of the icon in the radio alert -$alert-ios-radio-icon-top: -7px !default; +$alert-ios-radio-icon-top: -7px; /// @prop - Start of the icon in the radio alert -$alert-ios-radio-icon-start: 7px !default; +$alert-ios-radio-icon-start: 7px; /// @prop - Width of the icon in the radio alert -$alert-ios-radio-icon-width: 6px !default; +$alert-ios-radio-icon-width: 6px; /// @prop - Height of the icon in the radio alert -$alert-ios-radio-icon-height: 12px !default; +$alert-ios-radio-icon-height: 12px; /// @prop - Border width of the icon in the radio alert -$alert-ios-radio-icon-border-width: 2px !default; +$alert-ios-radio-icon-border-width: 2px; /// @prop - Border style of the icon in the radio alert -$alert-ios-radio-icon-border-style: solid !default; +$alert-ios-radio-icon-border-style: solid; /// @prop - Border color of the icon in the radio alert -$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; +$alert-ios-radio-icon-border-color: $alert-ios-button-text-color; /// @prop - Transform of the icon in the radio alert -$alert-ios-radio-icon-transform: rotate(45deg) !default; +$alert-ios-radio-icon-transform: rotate(45deg); /// @prop - Padding top of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-top: 13px !default; +$alert-ios-checkbox-label-padding-top: 13px; /// @prop - Padding end of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top; /// @prop - Padding start of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; +$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end; /// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: $text-color !default; +$alert-ios-checkbox-label-text-color: $text-color; /// @prop - Margin top of the checkbox in the alert -$alert-ios-checkbox-margin-top: 10px !default; +$alert-ios-checkbox-margin-top: 10px; /// @prop - Margin end of the checkbox in the alert -$alert-ios-checkbox-margin-end: 6px !default; +$alert-ios-checkbox-margin-end: 6px; /// @prop - Margin bottom of the checkbox in the alert -$alert-ios-checkbox-margin-bottom: 10px !default; +$alert-ios-checkbox-margin-bottom: 10px; /// @prop - Margin start of the checkbox in the alert -$alert-ios-checkbox-margin-start: 16px !default; +$alert-ios-checkbox-margin-start: 16px; /// @prop - Size of the checkbox in the alert -$alert-ios-checkbox-size: dynamic-font-max(24px, 2.75) !default; +$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538); /// @prop - Border width of the checkbox in the alert -$alert-ios-checkbox-border-width: dynamic-font(1px) !default; +$alert-ios-checkbox-border-width: dynamic-font(2px); /// @prop - Border style of the checkbox in the alert -$alert-ios-checkbox-border-style: solid !default; +$alert-ios-checkbox-border-style: solid; /// @prop - Border radius of the checkbox in the alert -$alert-ios-checkbox-border-radius: 50% !default; +$alert-ios-checkbox-border-radius: 50%; /// @prop - Border color of the checkbox in the alert when off -$alert-ios-checkbox-border-color-off: $item-ios-border-color !default; +$alert-ios-checkbox-border-color-off: $item-ios-border-color; /// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-border-color-on: ion-color(primary, base); /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $item-ios-background !default; +$alert-ios-checkbox-background-color-off: $item-ios-background; /// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-background-color-on: ion-color(primary, base); /// @prop - Top of the icon in the checkbox alert -$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 6) !default; +$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8); /// @prop - Start of the icon in the checkbox alert -$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3 + 1px) !default; +$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3); /// @prop - Width of the icon in the checkbox alert -$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default; +$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px); /// @prop - Height of the icon in the checkbox alert -$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default; +$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5); /// @prop - Border width of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; +$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width; /// @prop - Border style of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; +$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style; /// @prop - Border color of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-color: $background-color !default; +$alert-ios-checkbox-icon-border-color: $background-color; /// @prop - Transform of the icon in the checkbox alert -$alert-ios-checkbox-icon-transform: rotate(45deg) !default; +$alert-ios-checkbox-icon-transform: rotate(45deg); /// @prop - Filter of the translucent alert -$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; +$alert-ios-translucent-filter: saturate(180%) blur(20px); /// @prop - Height of the tappable inputs in the checkbox alert -$alert-ios-tappable-height: $item-ios-min-height !default; +$alert-ios-tappable-height: $item-ios-min-height; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 725f708f7b2..5f56d9161da 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Font size of the alert -$alert-md-font-size: dynamic-font(14px) !default; +$alert-md-font-size: dynamic-font(14px); /// @prop - Max width of the alert -$alert-md-max-width: 280px !default; +$alert-md-max-width: 280px; /// @prop - Max width of the alert on a tablet /** @@ -19,313 +19,313 @@ $alert-md-max-width: 280px !default; * 3. The height can increase up to 560px. * Source: https://m2.material.io/components/dialogs#behavior */ -$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default; +$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px); /// @prop - Max width of the alert on a tablet -$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default; +$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px); /// @prop - Border radius of the alert -$alert-md-border-radius: 4px !default; +$alert-md-border-radius: 4px; /// @prop - Background color of the alert -$alert-md-background-color: $overlay-md-background-color !default; +$alert-md-background-color: $overlay-md-background-color; /// @prop - Box shadow color of the alert -$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default; +$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12); /// @prop - Padding top of the alert head -$alert-md-head-padding-top: 20px !default; +$alert-md-head-padding-top: 20px; /// @prop - Padding end of the alert head -$alert-md-head-padding-end: 23px !default; +$alert-md-head-padding-end: 23px; /// @prop - Padding bottom of the alert head -$alert-md-head-padding-bottom: 15px !default; +$alert-md-head-padding-bottom: 15px; /// @prop - Padding start of the alert head -$alert-md-head-padding-start: $alert-md-head-padding-end !default; +$alert-md-head-padding-start: $alert-md-head-padding-end; /// @prop - Text align of the alert head -$alert-md-head-text-align: start !default; +$alert-md-head-text-align: start; /// @prop - Color of the alert title -$alert-md-title-color: $text-color !default; +$alert-md-title-color: $text-color; /// @prop - Font size of the alert title -$alert-md-title-font-size: dynamic-font(20px) !default; +$alert-md-title-font-size: dynamic-font(20px); /// @prop - Font weight of the alert title -$alert-md-title-font-weight: 500 !default; +$alert-md-title-font-weight: 500; /// @prop - Font size of the alert sub title -$alert-md-sub-title-font-size: dynamic-font(16px) !default; +$alert-md-sub-title-font-size: dynamic-font(16px); /// @prop - Text color of the alert sub title -$alert-md-sub-title-text-color: $text-color !default; +$alert-md-sub-title-text-color: $text-color; /// @prop - Padding top of the alert message -$alert-md-message-padding-top: 20px !default; +$alert-md-message-padding-top: 20px; /// @prop - Padding end of the alert message -$alert-md-message-padding-end: 24px !default; +$alert-md-message-padding-end: 24px; /// @prop - Padding bottom of the alert message -$alert-md-message-padding-bottom: $alert-md-message-padding-top !default; +$alert-md-message-padding-bottom: $alert-md-message-padding-top; /// @prop - Padding start of the alert message -$alert-md-message-padding-start: $alert-md-message-padding-end !default; +$alert-md-message-padding-start: $alert-md-message-padding-end; /// @prop - Font size of the alert message -$alert-md-message-font-size: dynamic-font(16px) !default; +$alert-md-message-font-size: dynamic-font(16px); /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-color-step-450 !default; +$alert-md-message-text-color: $text-color-step-450; /// @prop - Padding top of the alert empty message -$alert-md-message-empty-padding-top: 0 !default; +$alert-md-message-empty-padding-top: 0; /// @prop - Padding end of the alert empty message -$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top; /// @prop - Padding bottom of the alert empty message -$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top; /// @prop - Padding start of the alert empty message -$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end; /// @prop - Maximum height of the alert content -$alert-md-content-max-height: 266px !default; +$alert-md-content-max-height: 266px; /// @prop - Border width of the alert input -$alert-md-input-border-width: 1px !default; +$alert-md-input-border-width: 1px; /// @prop - Border style of the alert input -$alert-md-input-border-style: solid !default; +$alert-md-input-border-style: solid; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-color-step-150 !default; +$alert-md-input-border-color: $background-color-step-150; /// @prop - Text color of the alert input -$alert-md-input-text-color: $text-color !default; +$alert-md-input-text-color: $text-color; /// @prop - Border width of the alert input when focused -$alert-md-input-border-width-focused: 2px !default; +$alert-md-input-border-width-focused: 2px; /// @prop - Border style of the alert input when focused -$alert-md-input-border-style-focused: $alert-md-input-border-style !default; +$alert-md-input-border-style-focused: $alert-md-input-border-style; /// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: ion-color(primary, base) !default; +$alert-md-input-border-color-focused: ion-color(primary, base); /// @prop - Margin top of the alert input -$alert-md-input-margin-top: 5px !default; +$alert-md-input-margin-top: 5px; /// @prop - Margin end of the alert input -$alert-md-input-margin-end: 0 !default; +$alert-md-input-margin-end: 0; /// @prop - Margin bottom of the alert input -$alert-md-input-margin-bottom: 5px !default; +$alert-md-input-margin-bottom: 5px; /// @prop - Margin start of the alert input -$alert-md-input-margin-start: 0 !default; +$alert-md-input-margin-start: 0; /// @prop - Placeholder Color for input -$alert-md-input-placeholder-color: $placeholder-text-color !default; +$alert-md-input-placeholder-color: $placeholder-text-color; /// @prop - Flex wrap of the alert button group -$alert-md-button-group-flex-wrap: wrap-reverse !default; +$alert-md-button-group-flex-wrap: wrap-reverse; /// @prop - Justify content of the alert button group -$alert-md-button-group-justify-content: flex-end !default; +$alert-md-button-group-justify-content: flex-end; /// @prop - Padding top of the alert button -$alert-md-button-padding-top: 10px !default; +$alert-md-button-padding-top: 10px; /// @prop - Padding end of the alert button -$alert-md-button-padding-end: $alert-md-button-padding-top !default; +$alert-md-button-padding-end: $alert-md-button-padding-top; /// @prop - Padding bottom of the alert button -$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; +$alert-md-button-padding-bottom: $alert-md-button-padding-top; /// @prop - Padding start of the alert button -$alert-md-button-padding-start: $alert-md-button-padding-end !default; +$alert-md-button-padding-start: $alert-md-button-padding-end; /// @prop - Margin top of the alert button -$alert-md-button-margin-top: 0 !default; +$alert-md-button-margin-top: 0; /// @prop - Margin end of the alert button -$alert-md-button-margin-end: 8px !default; +$alert-md-button-margin-end: 8px; /// @prop - Margin bottom of the alert button -$alert-md-button-margin-bottom: 0 !default; +$alert-md-button-margin-bottom: 0; /// @prop - Margin start of the alert button -$alert-md-button-margin-start: 0 !default; +$alert-md-button-margin-start: 0; /// @prop - Font weight of the alert button -$alert-md-button-font-weight: 500 !default; +$alert-md-button-font-weight: 500; /// @prop - Text color of the alert button -$alert-md-button-text-color: ion-color(primary, base) !default; +$alert-md-button-text-color: ion-color(primary, base); /// @prop - Background color of the alert button -$alert-md-button-background-color: transparent !default; +$alert-md-button-background-color: transparent; /// @prop - Border radius of the alert button -$alert-md-button-border-radius: 2px !default; +$alert-md-button-border-radius: 2px; /// @prop - Text transform of the alert button -$alert-md-button-text-transform: uppercase !default; +$alert-md-button-text-transform: uppercase; /// @prop - Text align of the alert button -$alert-md-button-text-align: end !default; +$alert-md-button-text-align: end; /// @prop - Border top of the alert list -$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; +$alert-md-list-border-top: 1px solid $alert-md-input-border-color; /// @prop - Border bottom of the alert list -$alert-md-list-border-bottom: $alert-md-list-border-top !default; +$alert-md-list-border-bottom: $alert-md-list-border-top; /// @prop - Top of the alert radio -$alert-md-radio-top: 0 !default; +$alert-md-radio-top: 0; /// @prop - Left of the alert radio -$alert-md-radio-left: 26px !default; +$alert-md-radio-left: 26px; /// @prop - Width of the alert radio -$alert-md-radio-width: 20px !default; +$alert-md-radio-width: 20px; /// @prop - Height of the alert radio -$alert-md-radio-height: $alert-md-radio-width !default; +$alert-md-radio-height: $alert-md-radio-width; /// @prop - Border width of the alert radio -$alert-md-radio-border-width: 2px !default; +$alert-md-radio-border-width: 2px; /// @prop - Border style of the alert radio -$alert-md-radio-border-style: solid !default; +$alert-md-radio-border-style: solid; /// @prop - Border radius of the alert radio -$alert-md-radio-border-radius: 50% !default; +$alert-md-radio-border-radius: 50%; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $text-color-step-450 !default; +$alert-md-radio-border-color-off: $background-color-step-550; /// @prop - Border color of the alert radio when on -$alert-md-radio-border-color-on: $alert-md-button-text-color !default; +$alert-md-radio-border-color-on: $alert-md-button-text-color; /// @prop - Width of the icon in the alert radio -$alert-md-radio-icon-width: $alert-md-radio-width * 0.5 !default; +$alert-md-radio-icon-width: $alert-md-radio-width * 0.5; /// @prop - Height of the icon in the alert radio -$alert-md-radio-icon-height: $alert-md-radio-icon-width !default; +$alert-md-radio-icon-height: $alert-md-radio-icon-width; /// @prop - Top of the icon in the alert radio -$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default; +$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5; /// @prop - Start of the icon in the radio alert -$alert-md-radio-icon-start: $alert-md-radio-icon-top !default; +$alert-md-radio-icon-start: $alert-md-radio-icon-top; /// @prop - Border radius of the icon in the alert radio -$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; +$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius; /// @prop - Transform of the icon in the alert radio when off -$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; +$alert-md-radio-icon-transform-off: scale3d(0, 0, 0); /// @prop - Transform of the icon in the alert radio when on -$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; +$alert-md-radio-icon-transform-on: scale3d(1, 1, 1); /// @prop - Transition of the icon in the alert radio -$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; +$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1); /// @prop - Padding top on the label for the radio alert -$alert-md-radio-label-padding-top: 13px !default; +$alert-md-radio-label-padding-top: 13px; /// @prop - Padding end on the label for the radio alert -$alert-md-radio-label-padding-end: 26px !default; +$alert-md-radio-label-padding-end: 26px; /// @prop - Padding bottom on the label for the radio alert -$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top; /// @prop - Padding start on the label for the radio alert -$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default; +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px; /// @prop - Font size of the label for the radio alert -$alert-md-radio-label-font-size: dynamic-font(16px) !default; +$alert-md-radio-label-font-size: dynamic-font(16px); /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-color-step-150 !default; +$alert-md-radio-label-text-color: $text-color-step-150; /// @prop - Text color of the label for the checked radio alert -$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default; +$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color; /// @prop - Top of the checkbox in the alert -$alert-md-checkbox-top: 0 !default; +$alert-md-checkbox-top: 0; /// @prop - Left of the checkbox in the alert -$alert-md-checkbox-left: 26px !default; +$alert-md-checkbox-left: 26px; /// @prop - Width of the checkbox in the alert -$alert-md-checkbox-width: 16px !default; +$alert-md-checkbox-width: 16px; /// @prop - Height of the checkbox in the alert -$alert-md-checkbox-height: 16px !default; +$alert-md-checkbox-height: 16px; /// @prop - Border width of the checkbox in the alert -$alert-md-checkbox-border-width: 2px !default; +$alert-md-checkbox-border-width: 2px; /// @prop - Border style of the checkbox in the alert -$alert-md-checkbox-border-style: solid !default; +$alert-md-checkbox-border-style: solid; /// @prop - Border radius of the checkbox in the alert -$alert-md-checkbox-border-radius: 2px !default; +$alert-md-checkbox-border-radius: 2px; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $text-color-step-450 !default; +$alert-md-checkbox-border-color-off: $background-color-step-550; /// @prop - Border color of the checkbox in the alert when on -$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; +$alert-md-checkbox-border-color-on: $alert-md-button-text-color; /// @prop - Top of the icon in the checkbox alert -$alert-md-checkbox-icon-top: 0 !default; +$alert-md-checkbox-icon-top: 0; /// @prop - Start of the icon in the checkbox alert -$alert-md-checkbox-icon-start: 3px !default; +$alert-md-checkbox-icon-start: 3px; /// @prop - Width of the icon in the checkbox alert -$alert-md-checkbox-icon-width: 6px !default; +$alert-md-checkbox-icon-width: 6px; /// @prop - Height of the icon in the checkbox alert -$alert-md-checkbox-icon-height: 10px !default; +$alert-md-checkbox-icon-height: 10px; /// @prop - Border width of the icon in the checkbox alert -$alert-md-checkbox-icon-border-width: 2px !default; +$alert-md-checkbox-icon-border-width: 2px; /// @prop - Border style of the icon in the checkbox alert -$alert-md-checkbox-icon-border-style: solid !default; +$alert-md-checkbox-icon-border-style: solid; /// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default; +$alert-md-checkbox-icon-border-color: ion-color(primary, contrast); /// @prop - Transform of the icon in the checkbox alert -$alert-md-checkbox-icon-transform: rotate(45deg) !default; +$alert-md-checkbox-icon-transform: rotate(45deg); /// @prop - Padding top of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-top: 13px !default; +$alert-md-checkbox-label-padding-top: 13px; /// @prop - Padding end of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default; +$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; +$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top; /// @prop - Padding start of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default; +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150 !default; +$alert-md-checkbox-label-text-color: $text-color-step-150; /// @prop - Font size of the label for the checkbox in the alert -$alert-md-checkbox-label-font-size: dynamic-font(16px) !default; +$alert-md-checkbox-label-font-size: dynamic-font(16px); /// @prop - Height of the tappable inputs in the checkbox alert -$alert-md-tappable-height: $item-md-min-height !default; +$alert-md-tappable-height: $item-md-min-height; diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 3d5a64200c3..a29f4e0fe13 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -5,6 +5,7 @@ import type { Gesture } from '@utils/gesture'; import { createButtonActiveGesture } from '@utils/gesture/button-active'; import { raf } from '@utils/helpers'; import { createLockController } from '@utils/lock-controller'; +import { printIonWarning } from '@utils/logging'; import { createDelegateController, createTriggerController, @@ -237,6 +238,18 @@ export class Alert implements ComponentInterface, OverlayInterface { return; } + /** + * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button. + */ + if (ev.target.classList.contains('alert-wrapper')) { + if (ev.key === 'Tab' && ev.shiftKey) { + ev.preventDefault(); + const lastChildBtn = this.wrapperEl?.querySelector('.alert-button:last-child') as HTMLButtonElement; + lastChildBtn.focus(); + return; + } + } + // The only inputs we want to navigate between using arrow keys are the radios // ignore the keydown event if it is not on a radio button if ( @@ -306,8 +319,8 @@ export class Alert implements ComponentInterface, OverlayInterface { // checkboxes and inputs are all accepted, but they cannot be mixed. const inputTypes = new Set(inputs.map((i) => i.type)); if (inputTypes.has('checkbox') && inputTypes.has('radio')) { - console.warn( - `Alert cannot mix input types: ${Array.from(inputTypes.values()).join( + printIonWarning( + `[ion-alert] - Alert cannot mix input types: ${Array.from(inputTypes.values()).join( '/' )}. Please see alert docs for more info.` ); @@ -341,7 +354,9 @@ export class Alert implements ComponentInterface, OverlayInterface { } componentWillLoad() { - setOverlayId(this.el); + if (!this.htmlAttributes?.id) { + setOverlayId(this.el); + } this.inputsChanged(); this.buttonsChanged(); } @@ -398,23 +413,34 @@ export class Alert implements ComponentInterface, OverlayInterface { await this.delegateController.attachViewToDom(); - await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation); + await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => { + /** + * Check if alert has only one button and no inputs. + * If so, then focus on the button. Otherwise, focus the alert wrapper. + * This will map to the default native alert behavior. + */ + if (this.buttons.length === 1 && this.inputs.length === 0) { + const queryBtn = this.wrapperEl?.querySelector('.alert-button') as HTMLButtonElement; + queryBtn.focus(); + } else { + this.wrapperEl?.focus(); + } + }); unlock(); } /** * Dismiss the alert overlay after it has been presented. + * This is a no-op if the overlay has not been presented yet. If you want + * to remove an overlay from the DOM that was never presented, use the + * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method. * * @param data Any data to emit in the dismiss events. * @param role The role of the element that is dismissing the alert. * This can be useful in a button handler for determining which button was - * clicked to dismiss the alert. - * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. - * - * This is a no-op if the overlay has not been presented yet. If you want - * to remove an overlay from the DOM that was never presented, use the - * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method. + * clicked to dismiss the alert. Some examples include: + * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`. */ @Method() async dismiss(data?: any, role?: string): Promise { @@ -723,24 +749,21 @@ export class Alert implements ComponentInterface, OverlayInterface { const { overlayIndex, header, subHeader, message, htmlAttributes } = this; const mode = getIonMode(this); const hdrId = `alert-${overlayIndex}-hdr`; - const subHdrId = `alert-${overlayIndex}-sub-hdr`; const msgId = `alert-${overlayIndex}-msg`; + const subHdrId = `alert-${overlayIndex}-sub-hdr`; const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'; /** - * If the header is defined, use that. Otherwise, fall back to the subHeader. - * If neither is defined, don't set aria-labelledby. + * Use both the header and subHeader ids if they are defined. + * If only the header is defined, use the header id. + * If only the subHeader is defined, use the subHeader id. + * If neither are defined, do not set aria-labelledby. */ - const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null; + const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null; return ( -
- -
(this.wrapperEl = el)}> + + +
(this.wrapperEl = el)} + {...(htmlAttributes as any)} + >
{header && (

{header}

)} - {subHeader && ( + {/* If no header exists, subHeader should be the highest heading level, h2 */} + {subHeader && !header && (

{subHeader}

)} + {/* If a header exists, subHeader should be one level below it, h3 */} + {subHeader && header && ( +

+ {subHeader} +

+ )}
{this.renderAlertMessage(msgId)} @@ -777,7 +816,7 @@ export class Alert implements ComponentInterface, OverlayInterface { {this.renderAlertButtons()}
-
+ ); } diff --git a/core/src/components/alert/alert.vars.scss b/core/src/components/alert/alert.vars.scss index c37269f65cb..b996b03dcf6 100644 --- a/core/src/components/alert/alert.vars.scss +++ b/core/src/components/alert/alert.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Minimum width of the alert -$alert-min-width: 250px !default; +$alert-min-width: 250px; /// @prop - Maximum height of the alert -$alert-max-height: 90% !default; +$alert-max-height: 90%; /// @prop - Line height of the alert button -$alert-button-line-height: dynamic-font(20px) !default; +$alert-button-line-height: dynamic-font(20px); /// @prop - Font size of the alert button -$alert-button-font-size: dynamic-font(14px) !default; +$alert-button-font-size: dynamic-font(14px); /// @prop - Minimum height of a textarea in the alert -$alert-input-min-height: 37px !default; +$alert-input-min-height: 37px; diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts index a5e454e7583..50a39fdccf0 100644 --- a/core/src/components/alert/test/a11y/alert.e2e.ts +++ b/core/src/components/alert/test/a11y/alert.e2e.ts @@ -16,18 +16,69 @@ const testAria = async ( await didPresent.next(); const alert = page.locator('ion-alert'); + const alertwrapper = alert.locator('.alert-wrapper'); + + const header = alert.locator('.alert-title'); + const subHeader = alert.locator('.alert-sub-title'); + + // If a header exists, it should be an h2 element + if ((await header.count()) > 0) { + const headerTagName = await header.evaluate((el) => el.tagName); + expect(headerTagName).toBe('H2'); + } + + // If a header and subHeader exist, the subHeader should be an h3 element + if ((await header.count()) > 0 && (await subHeader.count()) > 0) { + const subHeaderTagName = await subHeader.evaluate((el) => el.tagName); + expect(subHeaderTagName).toBe('H3'); + } + + // If a subHeader exists without a header, the subHeader should be an h2 element + if ((await header.count()) === 0 && (await subHeader.count()) > 0) { + const subHeaderTagName = await subHeader.evaluate((el) => el.tagName); + expect(subHeaderTagName).toBe('H2'); + } /** * expect().toHaveAttribute() can't check for a null value, so grab and check * the values manually instead. */ - const ariaLabelledBy = await alert.getAttribute('aria-labelledby'); - const ariaDescribedBy = await alert.getAttribute('aria-describedby'); + const ariaLabelledBy = await alertwrapper.getAttribute('aria-labelledby'); + const ariaDescribedBy = await alertwrapper.getAttribute('aria-describedby'); expect(ariaLabelledBy).toBe(expectedAriaLabelledBy); expect(ariaDescribedBy).toBe(expectedAriaDescribedBy); }; +configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => { + test.describe(title('alert: Axe testing'), () => { + test('should not have accessibility violations when header and message are defined', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + const alert = page.locator('ion-alert'); + + await alert.evaluate((el: HTMLIonAlertElement) => el.present()); + await ionAlertDidPresent.next(); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + }); +}); + configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('alert: text wrapping'), () => { test('should break on words and white spaces for radios', async ({ page }, testInfo) => { @@ -94,28 +145,25 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => { test.beforeEach(async ({ page }) => { await page.goto(`/src/components/alert/test/a11y`, config); }); - test('should not have accessibility violations when header and message are defined', async ({ page }) => { - const didPresent = await page.spyOnEvent('ionAlertDidPresent'); - const button = page.locator('#bothHeaders'); - await button.click(); - await didPresent.next(); + test('should have aria-labelledby set to both when header and subHeader are set', async ({ page }) => { + await testAria(page, 'bothHeadersOnly', 'alert-1-hdr alert-1-sub-hdr', null); + }); - // TODO FW-4375 - const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze(); - expect(results.violations).toEqual([]); + test('should have aria-labelledby set when only header is set', async ({ page }) => { + await testAria(page, 'headerOnly', 'alert-1-hdr', null); }); - test('should have aria-labelledby when header is set', async ({ page }) => { - await testAria(page, 'noMessage', 'alert-1-hdr', null); + test('should fall back to subHeader for aria-labelledby if header is not defined', async ({ page }) => { + await testAria(page, 'subHeaderOnly', 'alert-1-sub-hdr', null); }); test('should have aria-describedby when message is set', async ({ page }) => { await testAria(page, 'noHeaders', null, 'alert-1-msg'); }); - test('should fall back to subHeader for aria-labelledby if header is not defined', async ({ page }) => { - await testAria(page, 'subHeaderOnly', 'alert-1-sub-hdr', 'alert-1-msg'); + test('should have aria-labelledby and aria-describedby when headers and message are set', async ({ page }) => { + await testAria(page, 'headersAndMessage', 'alert-1-hdr alert-1-sub-hdr', 'alert-1-msg'); }); test('should allow for manually specifying aria attributes', async ({ page }) => { @@ -162,7 +210,10 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => { */ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('alert: font scaling'), () => { - test('should scale text on larger font sizes', async ({ page }) => { + test('should scale text on larger font sizes', async ({ page, skip }) => { + // TODO(ROU-8158): unskip this test when a solution is found + skip.browser('chromium', 'Rendering is flaky in Chrome.'); + await page.setContent( ` - @@ -35,8 +22,8 @@ - - + + diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Chrome-linux.png index adccd61fd6a..99b9ab613cf 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Firefox-linux.png index 5c3849cb920..31fad8f86a3 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png index 26612e5a5ac..b3cac9c4078 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Chrome-linux.png index 265d8af2189..5cb4b8153fb 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Firefox-linux.png index 707623d2df6..2f5000d59e9 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png index fa79dfc3f18..043212b23b4 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Chrome-linux.png index 5f5086c0973..5f17e5fabe5 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Firefox-linux.png index 4a53aef6720..84a81e8c938 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png index 894648f9628..562cdd4bad2 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Chrome-linux.png index e92dc9f4493..dd305e62607 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Firefox-linux.png index 16f07aa54f4..ee5173b6a18 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png index 6fd0036eb1d..8fd57550b7a 100644 Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/standalone/index.html b/core/src/components/alert/test/standalone/index.html index 5c1232b6b42..c0413f6fc09 100644 --- a/core/src/components/alert/test/standalone/index.html +++ b/core/src/components/alert/test/standalone/index.html @@ -12,53 +12,6 @@ - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
- - - -
-

- - -

-
- - - - - - + + + + +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + +
+
+

+ + +

+
+ + + + +
+ +
+ + - - diff --git a/core/src/components/alert/test/trigger/index.html b/core/src/components/alert/test/trigger/index.html index f3a11ef91c1..f1f3ef79270 100644 --- a/core/src/components/alert/test/trigger/index.html +++ b/core/src/components/alert/test/trigger/index.html @@ -11,19 +11,6 @@ - diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx index 44a67d2a156..f7aba5fb152 100644 --- a/core/src/components/app/app.tsx +++ b/core/src/components/app/app.tsx @@ -1,7 +1,7 @@ import type { ComponentInterface } from '@stencil/core'; import { Build, Component, Element, Host, Method, h } from '@stencil/core'; import type { FocusVisibleUtility } from '@utils/focus-visible'; -import { shoudUseCloseWatcher } from '@utils/hardware-back-button'; +import { shouldUseCloseWatcher } from '@utils/hardware-back-button'; import { printIonWarning } from '@utils/logging'; import { isPlatform } from '@utils/platform'; @@ -36,7 +36,7 @@ export class App implements ComponentInterface { import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform)); } const hardwareBackButtonModule = await import('../../utils/hardware-back-button'); - const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher(); + const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher(); if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) { hardwareBackButtonModule.startHardwareBackButton(); } else { @@ -44,9 +44,9 @@ export class App implements ComponentInterface { * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true * then the close watcher will not be used. */ - if (shoudUseCloseWatcher()) { + if (shouldUseCloseWatcher()) { printIonWarning( - 'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.' + '[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.' ); } @@ -61,7 +61,6 @@ export class App implements ComponentInterface { } /** - * @internal * Used to set focus on an element that uses `ion-focusable`. * Do not use this if focusing the element as a result of a keyboard * event as the focus utility should handle this for us. This method @@ -69,6 +68,8 @@ export class App implements ComponentInterface { * a result of another user action. (Ex: We focus the first element * inside of a popover when the user presents it, but the popover is not always * presented as a result of keyboard action.) + * + * @param elements An array of HTML elements to set focus on. */ @Method() async setFocus(elements: HTMLElement[]) { diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png index fed20db34de..51197814d40 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png index 02f3bf94f0a..d6978bd6ab2 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png index 4fb8f167b0b..7b6912a77b6 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png index 0445c4ca7fb..9bdb2a0050d 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png index 9bc20f116d5..2160bf71c71 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png index 4f3167dea13..e18e09840ac 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png index d83c063bb30..2925d01cc40 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png index eba0d1c0fcf..625d61957f4 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png index a23b2f76e7f..636bbd74326 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png index 9f9dd6cea22..6bf467070f7 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png index 2a05f82f3a0..31175c53c52 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png index cc1a67c64df..d1e17793401 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png index 1647acf5861..a72dc772243 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png index 29b4ecac8e5..6796d9a484f 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png index 070d59bee8b..2d747790320 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png index 0a5741ebccb..dd8e90750f3 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png index ac8da5bf8c9..eaa50d6e5fb 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png index f38555535b9..a291fe4c078 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png index 8c3a2cbbc80..2217a13a189 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png index 89c282f406f..6d49226ac1d 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png index 54e438f3fd8..3619f94220f 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png index 9e8e90ecba9..69df91ae522 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png index 73dd9d600f7..e8afb2df67d 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png index bdaf88ace03..fd6120b1681 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/index.html b/core/src/components/app/test/safe-area/index.html index 5c6a2b3650b..4ad7e6beed4 100644 --- a/core/src/components/app/test/safe-area/index.html +++ b/core/src/components/app/test/safe-area/index.html @@ -20,50 +20,6 @@ --ion-safe-area-left: 40px; } - @@ -97,10 +53,10 @@ Card - Show Action Sheet - Show Menu - Show Picker - Show Toast + + + + @@ -143,5 +99,50 @@ + + diff --git a/core/src/components/avatar/avatar.ios.vars.scss b/core/src/components/avatar/avatar.ios.vars.scss index 4a8a931c7b7..29794686501 100644 --- a/core/src/components/avatar/avatar.ios.vars.scss +++ b/core/src/components/avatar/avatar.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-ios-width: 48px !default; +$avatar-ios-width: 48px; /// @prop - Height of the avatar -$avatar-ios-height: $avatar-ios-width !default; +$avatar-ios-height: $avatar-ios-width; /// @prop - Border radius of the avatar -$avatar-ios-border-radius: 50% !default; +$avatar-ios-border-radius: 50%; diff --git a/core/src/components/avatar/avatar.md.vars.scss b/core/src/components/avatar/avatar.md.vars.scss index f397e61c4bb..87e2afd1f30 100644 --- a/core/src/components/avatar/avatar.md.vars.scss +++ b/core/src/components/avatar/avatar.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-md-width: 64px !default; +$avatar-md-width: 64px; /// @prop - Height of the avatar -$avatar-md-height: $avatar-md-width !default; +$avatar-md-height: $avatar-md-width; /// @prop - Border radius of the avatar -$avatar-md-border-radius: 50% !default; +$avatar-md-border-radius: 50%; diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png index 1543c734337..256c2936c30 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png index e3780e12dc1..6fce3859b47 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png index c145cde04be..0e4513150df 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png index d508629c262..2edc83f9735 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Chrome-linux.png index 1d12a83763c..41097ef63ec 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Safari-linux.png index d654ce82748..fa2a4406ac0 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Chrome-linux.png index 70b78874da3..96d07c000af 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Safari-linux.png index ad0c5ae8ba8..87939fcad87 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-end-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Chrome-linux.png index a8e38fc01bf..6f192fed085 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Safari-linux.png index 7325d72646e..083a75e25eb 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Chrome-linux.png index 4467931af99..d76b9b12a22 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Safari-linux.png index e4d2e08c977..88dbf07f710 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-item-start-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss index 8793d741f28..a63366c5686 100644 --- a/core/src/components/back-button/back-button.ios.vars.scss +++ b/core/src/components/back-button/back-button.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Z index of the back button -$back-button-ios-button-z-index: $z-index-toolbar-buttons !default; +$back-button-ios-button-z-index: $z-index-toolbar-buttons; /// @prop - Text color of the back button -$back-button-ios-color: ion-color(primary, base) !default; +$back-button-ios-color: ion-color(primary, base); diff --git a/core/src/components/back-button/back-button.md.vars.scss b/core/src/components/back-button/back-button.md.vars.scss index c7ce25cbb9d..36ad7abe80e 100644 --- a/core/src/components/back-button/back-button.md.vars.scss +++ b/core/src/components/back-button/back-button.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Text color of the back button -$back-button-md-color: currentColor !default; +$back-button-md-color: currentColor; diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts b/core/src/components/back-button/test/a11y/back-button.e2e.ts index 6c0cd8fdf18..8c179192372 100644 --- a/core/src/components/back-button/test/a11y/back-button.e2e.ts +++ b/core/src/components/back-button/test/a11y/back-button.e2e.ts @@ -1,6 +1,32 @@ +import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +/** + * Only ios mode uses ion-color() for the back button + */ +configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => { + test.describe(title('back-button: a11y for ion-color()'), () => { + test('should not have accessibility violations', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + }); +}); + configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('back-button: font scaling'), () => { test('should scale text on larger font sizes', async ({ page }) => { diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Chrome-linux.png index 8a978fb8725..1e3c8035764 100644 Binary files a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Firefox-linux.png index cff12d6ac26..20f270a3200 100644 Binary files a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Safari-linux.png index 4396fd32627..47dae46080b 100644 Binary files a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Chrome-linux.png index 98f8c5b7785..f2cf349aaf3 100644 Binary files a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Safari-linux.png index 3226a315579..a64a84cb0af 100644 Binary files a/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/back-button/test/a11y/back-button.e2e.ts-snapshots/back-button-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png index 471ac3c3630..230ed44dd6d 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png index 5247e41a048..18dbe8d3210 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png index 25a75eee5be..e9c98eca66f 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png index 0ffc92fc7cb..9f32f15d802 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png index 15a041ad344..527d15f5a5c 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png index 23fe8002ae0..248aa474069 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png index af87a98e9ae..2780c6fd7c5 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png index 183b8a29518..af15b8b401d 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png index 4a2120d7b9a..fb4d1316cce 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png index 39006b7f90d..742c60235f5 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png index a8a832c69ed..23614868a69 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png index 53e8e63bd16..2a9d7b860d5 100644 Binary files a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html index c43335fb69b..af2d4ef59f1 100644 --- a/core/src/components/back-button/test/basic/index.html +++ b/core/src/components/back-button/test/basic/index.html @@ -125,7 +125,7 @@

Custom

- + Hidden diff --git a/core/src/components/back-button/test/host-element/index.html b/core/src/components/back-button/test/host-element/index.html index b9faabd00c0..bebf7264768 100644 --- a/core/src/components/back-button/test/host-element/index.html +++ b/core/src/components/back-button/test/host-element/index.html @@ -28,7 +28,7 @@

Page One

- Go to Page Two + `; @@ -51,7 +51,7 @@

Page One

Page Two

- Go to Page Three +
@@ -75,7 +75,7 @@

Page Two

Page Three

- Go to Page Four +
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png index c1604366116..f29c55fd573 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png index 51841b6e281..50272e40b37 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png index c43b9089bdf..14c874b9d04 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png index 239debacdae..f8e7d00d447 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png index ece857045ef..957d4ed0ce0 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png index 1e1ef324936..4b1862a9893 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png index 345aed3fe66..1688d04491d 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png index 7109f14d5c7..e18699a443a 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png index 131e6c13a1d..4615f318440 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png index 0c99e59aea2..f8f7ae69abc 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png index 8d0735d7f03..169a5cc1c61 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png index f0405ed264b..e3f13352dc0 100644 Binary files a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx index 1e566a4bc81..9468f02526c 100644 --- a/core/src/components/backdrop/backdrop.tsx +++ b/core/src/components/backdrop/backdrop.tsx @@ -1,6 +1,5 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Event, Host, Listen, Prop, h } from '@stencil/core'; -import { GESTURE_CONTROLLER } from '@utils/gesture'; import { getIonMode } from '../../global/ionic-global'; @@ -13,10 +12,6 @@ import { getIonMode } from '../../global/ionic-global'; shadow: true, }) export class Backdrop implements ComponentInterface { - private blocker = GESTURE_CONTROLLER.createBlocker({ - disableScroll: true, - }); - /** * If `true`, the backdrop will be visible. */ @@ -37,16 +32,6 @@ export class Backdrop implements ComponentInterface { */ @Event() ionBackdropTap!: EventEmitter; - connectedCallback() { - if (this.stopPropagation) { - this.blocker.block(); - } - } - - disconnectedCallback() { - this.blocker.unblock(); - } - @Listen('click', { passive: false, capture: true }) protected onMouseDown(ev: TouchEvent) { this.emitTap(ev); @@ -66,7 +51,6 @@ export class Backdrop implements ComponentInterface { const mode = getIonMode(this); return (