mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
1 Commits
5580-test
...
sp/angular
| Author | SHA1 | Date | |
|---|---|---|---|
|
7f861850fb |
4
.github/CODEOWNERS
vendored
4
.github/CODEOWNERS
vendored
@@ -51,8 +51,8 @@
|
||||
/core/src/components/nav/ @sean-perkins
|
||||
/core/src/components/nav-link/ @sean-perkins
|
||||
|
||||
/core/src/components/picker/ @liamdebeasi
|
||||
/core/src/components/picker-column/ @liamdebeasi
|
||||
/core/src/components/picker-internal/ @liamdebeasi
|
||||
/core/src/components/picker-column-internal/ @liamdebeasi
|
||||
|
||||
/core/src/components/radio/ @amandaejohnston
|
||||
/core/src/components/radio-group/ @amandaejohnston
|
||||
|
||||
2
.github/CONTRIBUTING.md
vendored
2
.github/CONTRIBUTING.md
vendored
@@ -163,7 +163,7 @@ npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../packages/angular
|
||||
cd ../angular
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
|
||||
12
.github/workflows/actions/build-core/action.yml
vendored
12
.github/workflows/actions/build-core/action.yml
vendored
@@ -1,10 +1,5 @@
|
||||
name: 'Build Ionic Core'
|
||||
description: 'Build Ionic Core'
|
||||
inputs:
|
||||
ionicons-version:
|
||||
description: 'The NPM tag of ionicons to install.'
|
||||
type: string
|
||||
required: false
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
@@ -16,13 +11,6 @@ runs:
|
||||
run: npm install
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
# If an Ionicons version was specified install that.
|
||||
# Otherwise just use the version defined in the package.json.
|
||||
- name: Install Ionicons Version
|
||||
if: inputs.ionicons-version != ''
|
||||
run: npm install ionicons@${{ inputs.ionicons-version }}
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- name: Build Core
|
||||
run: npm run build -- --ci
|
||||
working-directory: ./core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
node-version: 16
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
10
.github/workflows/build.yml
vendored
10
.github/workflows/build.yml
vendored
@@ -4,12 +4,6 @@ on:
|
||||
pull_request:
|
||||
branches: [ '**' ]
|
||||
merge_group:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
ionicons_npm_release_tag:
|
||||
required: false
|
||||
type: string
|
||||
description: What version of ionicons should be pulled from NPM? Use this if you want to test a custom version of Ionicons with Ionic.
|
||||
|
||||
# When pushing a new commit we should
|
||||
# cancel the previous test run to not
|
||||
@@ -24,8 +18,6 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
with:
|
||||
ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
|
||||
|
||||
test-core-clean-build:
|
||||
needs: [build-core]
|
||||
@@ -140,7 +132,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng14, ng15, ng16, ng17]
|
||||
apps: [ng14, ng15, ng16]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
339
BREAKING.md
339
BREAKING.md
@@ -4,65 +4,338 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
|
||||
## Versions
|
||||
|
||||
- [Version 8.x](#version-8x)
|
||||
- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
|
||||
- [Version 7.x](#version-7x)
|
||||
- [Version 6.x](./BREAKING_ARCHIVE/v6.md)
|
||||
- [Version 5.x](./BREAKING_ARCHIVE/v5.md)
|
||||
- [Version 4.x](./BREAKING_ARCHIVE/v4.md)
|
||||
- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
|
||||
|
||||
## Version 8.x
|
||||
## Version 7.x
|
||||
|
||||
- [Browser and Platform Support](#version-8x-browser-platform-support)
|
||||
- [Components](#version-8x-components)
|
||||
- [Content](#version-8x-content)
|
||||
- [Datetime](#version-8x-datetime)
|
||||
- [Picker](#version-8x-picker)
|
||||
- [Browser and Platform Support](#version-7x-browser-platform-support)
|
||||
- [Components](#version-7x-components)
|
||||
- [Accordion Group](#version-7x-accordion-group)
|
||||
- [Action Sheet](#version-7x-action-sheet)
|
||||
- [Back Button](#version-7x-back-button)
|
||||
- [Button](#version-7x-button)
|
||||
- [Card Header](#version-7x-card-header)
|
||||
- [Checkbox](#version-7x-checkbox)
|
||||
- [Datetime](#version-7x-datetime)
|
||||
- [Input](#version-7x-input)
|
||||
- [Item](#version-7x-item)
|
||||
- [Modal](#version-7x-modal)
|
||||
- [Overlays](#version-7x-overlays)
|
||||
- [Picker](#version-7x-picker)
|
||||
- [Radio Group](#version-7x-radio-group)
|
||||
- [Range](#version-7x-range)
|
||||
- [Searchbar](#version-7x-searchbar)
|
||||
- [Segment](#version-7x-segment)
|
||||
- [Select](#version-7x-select)
|
||||
- [Slides](#version-7x-slides)
|
||||
- [Textarea](#version-7x-textarea)
|
||||
- [Toggle](#version-7x-toggle)
|
||||
- [Virtual Scroll](#version-7x-virtual-scroll)
|
||||
- [Config](#version-7x-config)
|
||||
- [Types](#version-7x-types)
|
||||
- [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
|
||||
- [JavaScript Frameworks](#version-7x-javascript-frameworks)
|
||||
- [Angular](#version-7x-angular)
|
||||
- [React](#version-7x-react)
|
||||
- [Vue](#version-7x-vue)
|
||||
- [CSS Utilities](#version-7x-css-utilities)
|
||||
- [hidden attribute](#version-7x-hidden-attribute)
|
||||
|
||||
<h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
|
||||
<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
|
||||
|
||||
This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.
|
||||
This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
|
||||
|
||||
**Minimum Browser Versions**
|
||||
| Desktop Browser | Supported Versions |
|
||||
| --------------- | ----------------- |
|
||||
| Chrome | 89+ |
|
||||
| Safari | 15+ |
|
||||
| Firefox | 75+ |
|
||||
| Edge | 89+ |
|
||||
| Chrome | 79+ |
|
||||
| Safari | 14+ |
|
||||
| Firefox | 70+ |
|
||||
| Edge | 79+ |
|
||||
|
||||
**Minimum JavaScript Framework Versions**
|
||||
|
||||
| Framework | Supported Version |
|
||||
| --------- | --------------------- |
|
||||
| Angular | 16+ |
|
||||
| Angular | 14+ |
|
||||
| React | 17+ |
|
||||
| Vue | 3.0.6+ |
|
||||
|
||||
**Minimum Mobile Platform Versions**
|
||||
|
||||
| Platform | Supported Version |
|
||||
| -------- | ---------------------- |
|
||||
| iOS | 15+ |
|
||||
| Android | 5.1+ with Chromium 89+ |
|
||||
| iOS | 14+ |
|
||||
| Android | 5.1+ with Chromium 79+ |
|
||||
|
||||
<h2 id="version-8x-components">Components</h2>
|
||||
<h2 id="version-7x-components">Components</h2>
|
||||
|
||||
<h4 id="version-8x-content">Content</h4>
|
||||
<h4 id="version-7x-accordion-group">Accordion Group</h4>
|
||||
|
||||
- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
|
||||
|
||||
<h4 id="version-8x-datetime">Datetime</h4>
|
||||
- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
|
||||
|
||||
- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
|
||||
- Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
|
||||
```diff
|
||||
ion-datetime::part(month-year-button) {
|
||||
- --background: red;
|
||||
<h4 id="version-7x-action-sheet">Action Sheet</h4>
|
||||
|
||||
+ background: red;
|
||||
}
|
||||
```
|
||||
<h2 id="version-8x-picker">Picker</h2>
|
||||
- Action Sheet is updated to align with the design specification.
|
||||
|
||||
- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
|
||||
- Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
|
||||
- Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ---------- | -------------- | --------- |
|
||||
| `--height` | `100%` | `auto` |
|
||||
|
||||
<h4 id="version-7x-button">Button</h4>
|
||||
|
||||
- Button is updated to align with the design specification for iOS.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ---------------------------------- | -------------- | --------- |
|
||||
| `$button-ios-letter-spacing` | `-0.03em` | `0` |
|
||||
| `$button-ios-clear-letter-spacing` | `0` | Removed |
|
||||
| `$button-ios-height` | `2.8em` | `3.1em` |
|
||||
| `$button-ios-border-radius` | `10px` | `14px` |
|
||||
| `$button-ios-large-height` | `2.8em` | `3.1em` |
|
||||
| `$button-ios-large-border-radius` | `12px` | `16px` |
|
||||
|
||||
<h4 id="version-7x-back-button">Back Button</h4>
|
||||
|
||||
- Back Button is updated to align with the design specification for iOS.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ------------------- | -------------- | --------- |
|
||||
| `--icon-margin-end` | `-5px` | `1px` |
|
||||
| `--icon-font-size` | `1.85em` | `1.6em` |
|
||||
|
||||
<h4 id="version-7x-card-header">Card Header</h4>
|
||||
|
||||
- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
|
||||
|
||||
<h4 id="version-7x-checkbox">Checkbox</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
|
||||
|
||||
- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively.
|
||||
|
||||
<h4 id="version-7x-datetime">Datetime</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date.
|
||||
|
||||
- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
|
||||
|
||||
- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
|
||||
|
||||
- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
|
||||
|
||||
- The haptics when swiping the wheel picker are now enabled only on iOS.
|
||||
|
||||
<h4 id="version-7x-input">Input</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
|
||||
|
||||
- If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
|
||||
|
||||
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.5` | `0.6` |
|
||||
|
||||
<h4 id="version-7x-item">Item</h4>
|
||||
|
||||
**Design tokens**
|
||||
|
||||
iOS:
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| --------------------- | -------------- | --------- |
|
||||
| `$item-ios-font-size` | `17px` | `16px` |
|
||||
| `--inner-padding-end` | `10px` | `16px` |
|
||||
| `--padding-start` | `20px` | `16px` |
|
||||
|
||||
<h4 id="version-7x-modal">Modal</h4>
|
||||
|
||||
- The `swipeToClose` property has been removed in favor of `canDismiss`.
|
||||
- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
|
||||
|
||||
<h4 id="version-7x-overlays">Overlays</h4>
|
||||
|
||||
Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
|
||||
|
||||
<h4 id="version-7x-picker">Picker</h4>
|
||||
|
||||
- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
|
||||
|
||||
<h4 id="version-7x-radio-group">Radio Group</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group.
|
||||
|
||||
<h4 id="version-7x-range">Range</h4>
|
||||
|
||||
- Range is updated to align with the design specification for supported modes.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
iOS:
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
|
||||
| `--bar-border-radius` | `0px` | `$range-ios-bar-border-radius` (`2px` default) |
|
||||
| `--knob-size` | `28px` | `$range-ios-knob-width` (`26px` default) |
|
||||
| `$range-ios-bar-height` | `2px` | `4px` |
|
||||
| `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)` | `var(--ion-color-step-900, #e6e6e6)` |
|
||||
| `$range-ios-knob-box-shadow` | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` |
|
||||
| `$range-ios-knob-width` | `28px` | `26px` |
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows.
|
||||
- If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value.
|
||||
|
||||
- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`.
|
||||
|
||||
<h4 id="version-7x-searchbar">Searchbar</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
|
||||
|
||||
- If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
|
||||
|
||||
- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.5` | `0.6` |
|
||||
|
||||
|
||||
<h4 id="version-7x-segment">Segment</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button.
|
||||
|
||||
- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
|
||||
- Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
|
||||
|
||||
<h4 id="version-7x-select">Select</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
|
||||
|
||||
- The `icon` CSS Shadow Part now targets an `ion-icon` component.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.33` | `0.6` |
|
||||
|
||||
<h4 id="version-7x-slides">Slides</h4>
|
||||
|
||||
`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
|
||||
|
||||
Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
|
||||
|
||||
- [Angular](https://ionicframework.com/docs/angular/slides)
|
||||
- [React](https://ionicframework.com/docs/react/slides)
|
||||
- [Vue](https://ionicframework.com/docs/vue/slides)
|
||||
|
||||
<h4 id="version-7x-textarea">Textarea</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus.
|
||||
|
||||
- If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
|
||||
|
||||
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
|
||||
|
||||
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.5` | `0.6` |
|
||||
|
||||
|
||||
<h4 id="version-7x-toggle">Toggle</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
|
||||
|
||||
- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
|
||||
|
||||
<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
|
||||
|
||||
`ion-virtual-scroll` has been removed from Ionic.
|
||||
|
||||
Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
|
||||
|
||||
- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
|
||||
- [React](https://ionicframework.com/docs/react/virtual-scroll)
|
||||
- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
|
||||
|
||||
Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
|
||||
|
||||
<h2 id="version-7x-config">Config</h2>
|
||||
|
||||
- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
|
||||
|
||||
<h2 id="version-7x-types">Types</h2>
|
||||
|
||||
<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
|
||||
|
||||
`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
|
||||
<h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
|
||||
|
||||
<h4 id="version-7x-angular">Angular</h4>
|
||||
|
||||
- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
|
||||
|
||||
- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
|
||||
|
||||
- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
|
||||
|
||||
<h4 id="version-7x-react">React</h4>
|
||||
|
||||
`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
|
||||
|
||||
<h4 id="version-7x-vue">Vue</h4>
|
||||
|
||||
`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
|
||||
|
||||
<h2 id="version-7x-css-utilities">CSS Utilities</h2>
|
||||
|
||||
<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
|
||||
|
||||
The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
|
||||
|
||||
Developers can add the following CSS to their global stylesheet if they need the old behavior:
|
||||
|
||||
```css
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,331 +0,0 @@
|
||||
# Breaking Changes
|
||||
|
||||
## Version 7.x
|
||||
|
||||
- [Browser and Platform Support](#version-7x-browser-platform-support)
|
||||
- [Components](#version-7x-components)
|
||||
- [Accordion Group](#version-7x-accordion-group)
|
||||
- [Action Sheet](#version-7x-action-sheet)
|
||||
- [Back Button](#version-7x-back-button)
|
||||
- [Button](#version-7x-button)
|
||||
- [Card Header](#version-7x-card-header)
|
||||
- [Checkbox](#version-7x-checkbox)
|
||||
- [Datetime](#version-7x-datetime)
|
||||
- [Input](#version-7x-input)
|
||||
- [Item](#version-7x-item)
|
||||
- [Modal](#version-7x-modal)
|
||||
- [Overlays](#version-7x-overlays)
|
||||
- [Picker](#version-7x-picker)
|
||||
- [Radio Group](#version-7x-radio-group)
|
||||
- [Range](#version-7x-range)
|
||||
- [Searchbar](#version-7x-searchbar)
|
||||
- [Segment](#version-7x-segment)
|
||||
- [Select](#version-7x-select)
|
||||
- [Slides](#version-7x-slides)
|
||||
- [Textarea](#version-7x-textarea)
|
||||
- [Toggle](#version-7x-toggle)
|
||||
- [Virtual Scroll](#version-7x-virtual-scroll)
|
||||
- [Config](#version-7x-config)
|
||||
- [Types](#version-7x-types)
|
||||
- [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces)
|
||||
- [JavaScript Frameworks](#version-7x-javascript-frameworks)
|
||||
- [Angular](#version-7x-angular)
|
||||
- [React](#version-7x-react)
|
||||
- [Vue](#version-7x-vue)
|
||||
- [CSS Utilities](#version-7x-css-utilities)
|
||||
- [hidden attribute](#version-7x-hidden-attribute)
|
||||
|
||||
<h2 id="version-7x-browser-platform-support">Browser and Platform Support</h2>
|
||||
|
||||
This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7.
|
||||
|
||||
**Minimum Browser Versions**
|
||||
| Desktop Browser | Supported Versions |
|
||||
| --------------- | ----------------- |
|
||||
| Chrome | 79+ |
|
||||
| Safari | 14+ |
|
||||
| Firefox | 70+ |
|
||||
| Edge | 79+ |
|
||||
|
||||
**Minimum JavaScript Framework Versions**
|
||||
|
||||
| Framework | Supported Version |
|
||||
| --------- | --------------------- |
|
||||
| Angular | 14+ |
|
||||
| React | 17+ |
|
||||
| Vue | 3.0.6+ |
|
||||
|
||||
**Minimum Mobile Platform Versions**
|
||||
|
||||
| Platform | Supported Version |
|
||||
| -------- | ---------------------- |
|
||||
| iOS | 14+ |
|
||||
| Android | 5.1+ with Chromium 79+ |
|
||||
|
||||
<h2 id="version-7x-components">Components</h2>
|
||||
|
||||
<h4 id="version-7x-accordion-group">Accordion Group</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
|
||||
|
||||
- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
|
||||
|
||||
<h4 id="version-7x-action-sheet">Action Sheet</h4>
|
||||
|
||||
- Action Sheet is updated to align with the design specification.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ---------- | -------------- | --------- |
|
||||
| `--height` | `100%` | `auto` |
|
||||
|
||||
<h4 id="version-7x-button">Button</h4>
|
||||
|
||||
- Button is updated to align with the design specification for iOS.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ---------------------------------- | -------------- | --------- |
|
||||
| `$button-ios-letter-spacing` | `-0.03em` | `0` |
|
||||
| `$button-ios-clear-letter-spacing` | `0` | Removed |
|
||||
| `$button-ios-height` | `2.8em` | `3.1em` |
|
||||
| `$button-ios-border-radius` | `10px` | `14px` |
|
||||
| `$button-ios-large-height` | `2.8em` | `3.1em` |
|
||||
| `$button-ios-large-border-radius` | `12px` | `16px` |
|
||||
|
||||
<h4 id="version-7x-back-button">Back Button</h4>
|
||||
|
||||
- Back Button is updated to align with the design specification for iOS.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ------------------- | -------------- | --------- |
|
||||
| `--icon-margin-end` | `-5px` | `1px` |
|
||||
| `--icon-font-size` | `1.85em` | `1.6em` |
|
||||
|
||||
<h4 id="version-7x-card-header">Card Header</h4>
|
||||
|
||||
- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title.
|
||||
|
||||
<h4 id="version-7x-checkbox">Checkbox</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
|
||||
|
||||
- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively.
|
||||
|
||||
<h4 id="version-7x-datetime">Datetime</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date.
|
||||
|
||||
- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
|
||||
|
||||
- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
|
||||
|
||||
- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
|
||||
|
||||
- The haptics when swiping the wheel picker are now enabled only on iOS.
|
||||
|
||||
<h4 id="version-7x-input">Input</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key.
|
||||
|
||||
- If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
|
||||
|
||||
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.5` | `0.6` |
|
||||
|
||||
<h4 id="version-7x-item">Item</h4>
|
||||
|
||||
**Design tokens**
|
||||
|
||||
iOS:
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| --------------------- | -------------- | --------- |
|
||||
| `$item-ios-font-size` | `17px` | `16px` |
|
||||
| `--inner-padding-end` | `10px` | `16px` |
|
||||
| `--padding-start` | `20px` | `16px` |
|
||||
|
||||
<h4 id="version-7x-modal">Modal</h4>
|
||||
|
||||
- The `swipeToClose` property has been removed in favor of `canDismiss`.
|
||||
- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`.
|
||||
|
||||
<h4 id="version-7x-overlays">Overlays</h4>
|
||||
|
||||
Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead.
|
||||
|
||||
<h4 id="version-7x-picker">Picker</h4>
|
||||
|
||||
- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
|
||||
|
||||
<h4 id="version-7x-radio-group">Radio Group</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group.
|
||||
|
||||
<h4 id="version-7x-range">Range</h4>
|
||||
|
||||
- Range is updated to align with the design specification for supported modes.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
iOS:
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
|
||||
| `--bar-border-radius` | `0px` | `$range-ios-bar-border-radius` (`2px` default) |
|
||||
| `--knob-size` | `28px` | `$range-ios-knob-width` (`26px` default) |
|
||||
| `$range-ios-bar-height` | `2px` | `4px` |
|
||||
| `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)` | `var(--ion-color-step-900, #e6e6e6)` |
|
||||
| `$range-ios-knob-box-shadow` | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` |
|
||||
| `$range-ios-knob-width` | `28px` | `26px` |
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows.
|
||||
- If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value.
|
||||
|
||||
- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`.
|
||||
|
||||
<h4 id="version-7x-searchbar">Searchbar</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key.
|
||||
|
||||
- If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
|
||||
|
||||
- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.5` | `0.6` |
|
||||
|
||||
|
||||
<h4 id="version-7x-segment">Segment</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button.
|
||||
|
||||
- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`.
|
||||
- Developers needing to clear the checked segment item should assign a value of `''` instead of `null`.
|
||||
|
||||
<h4 id="version-7x-select">Select</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay.
|
||||
|
||||
- The `icon` CSS Shadow Part now targets an `ion-icon` component.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.33` | `0.6` |
|
||||
|
||||
<h4 id="version-7x-slides">Slides</h4>
|
||||
|
||||
`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic.
|
||||
|
||||
Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below:
|
||||
|
||||
- [Angular](https://ionicframework.com/docs/angular/slides)
|
||||
- [React](https://ionicframework.com/docs/react/slides)
|
||||
- [Vue](https://ionicframework.com/docs/vue/slides)
|
||||
|
||||
<h4 id="version-7x-textarea">Textarea</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus.
|
||||
|
||||
- If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead.
|
||||
|
||||
- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`.
|
||||
|
||||
- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately.
|
||||
|
||||
- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`.
|
||||
|
||||
- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
|
||||
**Design tokens**
|
||||
|
||||
| Token | Previous Value | New Value |
|
||||
| ----------------------- | -------------- | --------- |
|
||||
| `--placeholder-opacity` | `0.5` | `0.6` |
|
||||
|
||||
|
||||
<h4 id="version-7x-toggle">Toggle</h4>
|
||||
|
||||
- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off.
|
||||
|
||||
- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
|
||||
|
||||
<h4 id="version-7x-virtual-scroll">Virtual Scroll</h4>
|
||||
|
||||
`ion-virtual-scroll` has been removed from Ionic.
|
||||
|
||||
Developers using the component will need to migrate to a virtual scroll solution provided by their framework:
|
||||
|
||||
- [Angular](https://ionicframework.com/docs/angular/virtual-scroll)
|
||||
- [React](https://ionicframework.com/docs/react/virtual-scroll)
|
||||
- [Vue](https://ionicframework.com/docs/vue/virtual-scroll)
|
||||
|
||||
Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`.
|
||||
|
||||
<h2 id="version-7x-config">Config</h2>
|
||||
|
||||
- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content.
|
||||
|
||||
<h2 id="version-7x-types">Types</h2>
|
||||
|
||||
<h4 id="version-7x-overlay-attribute-interfaces">Overlay Attribute Interfaces</h4>
|
||||
|
||||
`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
|
||||
<h2 id="version-7x-javascript-frameworks">JavaScript Frameworks</h2>
|
||||
|
||||
<h4 id="version-7x-angular">Angular</h4>
|
||||
|
||||
- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
|
||||
|
||||
- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
|
||||
|
||||
- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
|
||||
|
||||
<h4 id="version-7x-react">React</h4>
|
||||
|
||||
`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
|
||||
|
||||
<h4 id="version-7x-vue">Vue</h4>
|
||||
|
||||
`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
|
||||
|
||||
<h2 id="version-7x-css-utilities">CSS Utilities</h2>
|
||||
|
||||
<h4 id="version-7x-hidden-attribute">`hidden` attribute</h4>
|
||||
|
||||
The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation.
|
||||
|
||||
Developers can add the following CSS to their global stylesheet if they need the old behavior:
|
||||
|
||||
```css
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
94
CHANGELOG.md
94
CHANGELOG.md
@@ -3,100 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** match MD spec on tablet ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
|
||||
* **angular:** ng add @ionic/angular in standalone projects ([#28523](https://github.com/ionic-team/ionic-framework/issues/28523)) ([c07312e](https://github.com/ionic-team/ionic-framework/commit/c07312e5ed931f6f825ccf083c9dead9fa815843)), closes [#28514](https://github.com/ionic-team/ionic-framework/issues/28514)
|
||||
* **angular:** overlays are defined when using standalone controllers ([#28560](https://github.com/ionic-team/ionic-framework/issues/28560)) ([9453132](https://github.com/ionic-team/ionic-framework/commit/9453132aa8952b4adfa1326e61138b329e254f76)), closes [#28385](https://github.com/ionic-team/ionic-framework/issues/28385)
|
||||
* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
|
||||
* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
|
||||
* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
|
||||
* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
|
||||
* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
|
||||
* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
|
||||
* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
|
||||
* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
|
||||
* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431)
|
||||
* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417)
|
||||
* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539)
|
||||
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
|
||||
* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
|
||||
* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
|
||||
* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
|
||||
* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
|
||||
* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487)
|
||||
* **angular:** remove form control side effects ([#28359](https://github.com/ionic-team/ionic-framework/issues/28359)) ([82d6309](https://github.com/ionic-team/ionic-framework/commit/82d6309ef1675c0a6e767e87c23f166d84579d8f)), closes [#28358](https://github.com/ionic-team/ionic-framework/issues/28358)
|
||||
* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90))
|
||||
* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283)
|
||||
* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341)
|
||||
* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337)
|
||||
* **angular:** export missing lifecycle interfaces for standalone package ([#28346](https://github.com/ionic-team/ionic-framework/issues/28346)) ([dd93e0b](https://github.com/ionic-team/ionic-framework/commit/dd93e0b2689511f3145606f4dbb2c30dcf4c2950)), closes [/github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a#r1356414362](https://github.com//github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a/issues/r1356414362)
|
||||
* **react:** cleanup functions are execute for lifecycle hooks ([#28319](https://github.com/ionic-team/ionic-framework/issues/28319)) ([1ba9973](https://github.com/ionic-team/ionic-framework/commit/1ba9973857503c6e47cb225b77a5b89e0a9d2718)), closes [#28186](https://github.com/ionic-team/ionic-framework/issues/28186)
|
||||
* **react:** lifecycle events are removed on page unmount ([#28316](https://github.com/ionic-team/ionic-framework/issues/28316)) ([f14a59c](https://github.com/ionic-team/ionic-framework/commit/f14a59c5e0670ed7cc9ce1a73a087a5af13266e2))
|
||||
* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
|
||||
|
||||
|
||||
|
||||
@@ -3,94 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** match MD spec on tablet ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
|
||||
* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
|
||||
* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
|
||||
* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
|
||||
* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
|
||||
* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
|
||||
* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
|
||||
|
||||
> [!NOTE]
|
||||
> Ionic Vue developers utilizing the `v-ion-change` or `v-ion-input` workaround for https://github.com/ionic-team/ionic-framework/issues/27292 should remove this workaround when updating to Ionic v7.5.5.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
|
||||
* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
|
||||
* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
|
||||
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
|
||||
* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
|
||||
* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
|
||||
* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
|
||||
* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
|
||||
* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487)
|
||||
* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90))
|
||||
* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283)
|
||||
* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341)
|
||||
* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337)
|
||||
* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
|
||||
|
||||
|
||||
|
||||
97
core/api.txt
97
core/api.txt
@@ -906,64 +906,47 @@ ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
|
||||
ion-note,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-note,css-prop,--color
|
||||
|
||||
ion-picker,shadow
|
||||
ion-picker,scoped
|
||||
ion-picker,prop,animated,boolean,true,false,false
|
||||
ion-picker,prop,backdropDismiss,boolean,true,false,false
|
||||
ion-picker,prop,buttons,PickerButton[],[],false,false
|
||||
ion-picker,prop,columns,PickerColumn[],[],false,false
|
||||
ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
|
||||
ion-picker,prop,duration,number,0,false,false
|
||||
ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
|
||||
ion-picker,prop,isOpen,boolean,false,false,false
|
||||
ion-picker,prop,keyboardClose,boolean,true,false,false
|
||||
ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-picker,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-picker,event,ionInputModeChange,PickerChangeEventDetail,true
|
||||
|
||||
ion-picker-column,shadow
|
||||
ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
|
||||
ion-picker-column,prop,disabled,boolean,false,false,false
|
||||
ion-picker-column,prop,items,PickerColumnItem[],[],false,false
|
||||
ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-picker-column,prop,value,number | string | undefined,undefined,false,false
|
||||
ion-picker-column,event,ionChange,PickerColumnItem,true
|
||||
|
||||
ion-picker-column-option,shadow
|
||||
ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
|
||||
ion-picker-column-option,prop,disabled,boolean,false,false,false
|
||||
ion-picker-column-option,prop,value,any,undefined,false,false
|
||||
|
||||
ion-picker-legacy,scoped
|
||||
ion-picker-legacy,prop,animated,boolean,true,false,false
|
||||
ion-picker-legacy,prop,backdropDismiss,boolean,true,false,false
|
||||
ion-picker-legacy,prop,buttons,PickerButton[],[],false,false
|
||||
ion-picker-legacy,prop,columns,PickerColumn[],[],false,false
|
||||
ion-picker-legacy,prop,cssClass,string | string[] | undefined,undefined,false,false
|
||||
ion-picker-legacy,prop,duration,number,0,false,false
|
||||
ion-picker-legacy,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-picker-legacy,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
|
||||
ion-picker-legacy,prop,isOpen,boolean,false,false,false
|
||||
ion-picker-legacy,prop,keyboardClose,boolean,true,false,false
|
||||
ion-picker-legacy,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-picker-legacy,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-picker-legacy,prop,showBackdrop,boolean,true,false,false
|
||||
ion-picker-legacy,prop,trigger,string | undefined,undefined,false,false
|
||||
ion-picker-legacy,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
|
||||
ion-picker-legacy,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
|
||||
ion-picker-legacy,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
ion-picker-legacy,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
ion-picker-legacy,method,present,present() => Promise<void>
|
||||
ion-picker-legacy,event,didDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker-legacy,event,didPresent,void,true
|
||||
ion-picker-legacy,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker-legacy,event,ionPickerDidPresent,void,true
|
||||
ion-picker-legacy,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker-legacy,event,ionPickerWillPresent,void,true
|
||||
ion-picker-legacy,event,willDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker-legacy,event,willPresent,void,true
|
||||
ion-picker-legacy,css-prop,--backdrop-opacity
|
||||
ion-picker-legacy,css-prop,--background
|
||||
ion-picker-legacy,css-prop,--background-rgb
|
||||
ion-picker-legacy,css-prop,--border-color
|
||||
ion-picker-legacy,css-prop,--border-radius
|
||||
ion-picker-legacy,css-prop,--border-style
|
||||
ion-picker-legacy,css-prop,--border-width
|
||||
ion-picker-legacy,css-prop,--height
|
||||
ion-picker-legacy,css-prop,--max-height
|
||||
ion-picker-legacy,css-prop,--max-width
|
||||
ion-picker-legacy,css-prop,--min-height
|
||||
ion-picker-legacy,css-prop,--min-width
|
||||
ion-picker-legacy,css-prop,--width
|
||||
ion-picker,prop,showBackdrop,boolean,true,false,false
|
||||
ion-picker,prop,trigger,string | undefined,undefined,false,false
|
||||
ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
|
||||
ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
|
||||
ion-picker,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
ion-picker,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
|
||||
ion-picker,method,present,present() => Promise<void>
|
||||
ion-picker,event,didDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker,event,didPresent,void,true
|
||||
ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker,event,ionPickerDidPresent,void,true
|
||||
ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker,event,ionPickerWillPresent,void,true
|
||||
ion-picker,event,willDismiss,OverlayEventDetail<any>,true
|
||||
ion-picker,event,willPresent,void,true
|
||||
ion-picker,css-prop,--backdrop-opacity
|
||||
ion-picker,css-prop,--background
|
||||
ion-picker,css-prop,--background-rgb
|
||||
ion-picker,css-prop,--border-color
|
||||
ion-picker,css-prop,--border-radius
|
||||
ion-picker,css-prop,--border-style
|
||||
ion-picker,css-prop,--border-width
|
||||
ion-picker,css-prop,--height
|
||||
ion-picker,css-prop,--max-height
|
||||
ion-picker,css-prop,--max-width
|
||||
ion-picker,css-prop,--min-height
|
||||
ion-picker,css-prop,--min-width
|
||||
ion-picker,css-prop,--width
|
||||
|
||||
ion-popover,shadow
|
||||
ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
|
||||
|
||||
5356
core/package-lock.json
generated
5356
core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.5.6",
|
||||
"version": "7.5.0",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,26 +31,27 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.7.2",
|
||||
"@stencil/core": "^4.4.1-dev.1697216096.18bf460",
|
||||
"ionicons": "^7.2.1",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.1",
|
||||
"@capacitor/core": "^5.5.1",
|
||||
"@axe-core/playwright": "^4.8.0",
|
||||
"@capacitor/core": "^5.5.0",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.6",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@jest/core": "^27.5.1",
|
||||
"@playwright/test": "^1.39.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/angular-output-target": "^0.8.2",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.7",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@stencil/sass": "^3.0.6",
|
||||
"@stencil/vue-output-target": "^0.8.6",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
@@ -61,10 +62,9 @@
|
||||
"eslint-plugin-custom-rules": "file:custom-rules",
|
||||
"execa": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
"jest": "^27.5.1",
|
||||
"jest-cli": "^27.5.1",
|
||||
"prettier": "^2.6.1",
|
||||
"puppeteer": "21.1.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.33.0",
|
||||
"serve": "^14.0.1",
|
||||
@@ -86,11 +86,13 @@
|
||||
"lint.sass.fix": "npm run lint.sass -- --fix",
|
||||
"lint.ts": "npm run eslint",
|
||||
"lint.ts.fix": "npm run eslint -- --fix",
|
||||
"prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
|
||||
"prerender.e2e": "node scripts/testing/prerender.js",
|
||||
"prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
|
||||
"start": "npm run build.css && stencil build --dev --watch --serve",
|
||||
"test": "npm run test.spec && npm run test.e2e",
|
||||
"test.spec": "stencil test --spec --max-workers=2",
|
||||
"test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
|
||||
"test.e2e": "npx playwright test",
|
||||
"test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
|
||||
"test.watch": "jest --watch --no-cache",
|
||||
|
||||
879
core/src/components.d.ts
vendored
879
core/src/components.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -180,16 +180,6 @@ export class AccordionGroup implements ComponentInterface {
|
||||
if (this.readonly) {
|
||||
this.readonlyChanged();
|
||||
}
|
||||
/**
|
||||
* When binding values in frameworks such as Angular
|
||||
* it is possible for the value to be set after the Web Component
|
||||
* initializes but before the value watcher is set up in Stencil.
|
||||
* As a result, the watcher callback may not be fired.
|
||||
* We work around this by manually calling the watcher
|
||||
* callback when the component has loaded and the watcher
|
||||
* is configured.
|
||||
*/
|
||||
this.valueChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { AccordionGroup } from '../../accordion-group/accordion-group';
|
||||
import { Item } from '../../item/item';
|
||||
import { Accordion } from '../accordion';
|
||||
import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
|
||||
import { Item } from '../../item/item.tsx';
|
||||
import { Accordion } from '../accordion.tsx';
|
||||
|
||||
it('should open correct accordions when accordion group value is set', async () => {
|
||||
const page = await newSpecPage({
|
||||
@@ -25,7 +25,7 @@ it('should open correct accordions when accordion group value is set', async ()
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
@@ -61,7 +61,7 @@ it('should open correct accordions when accordion value is set', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
@@ -97,7 +97,7 @@ it('should open more than one accordion when multiple="true"', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
@@ -133,7 +133,7 @@ it('should render with accordion open', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
|
||||
@@ -162,7 +162,7 @@ it('should accept a string when multiple="true"', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
|
||||
@@ -183,8 +183,8 @@ it('should set default values if not provided', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordion = accordionGroup.querySelector('ion-accordion')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordion = accordionGroup.querySelector('ion-accordion');
|
||||
|
||||
/**
|
||||
* ID is determined via an auto incrementing counter
|
||||
|
||||
@@ -58,6 +58,19 @@ $action-sheet-ios-title-font-weight: 400 !default;
|
||||
/// @prop - Font weight of the action sheet title when it has a sub title
|
||||
$action-sheet-ios-title-with-sub-title-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Border width of the action sheet title
|
||||
$action-sheet-ios-title-border-width: $hairlines-width !default;
|
||||
|
||||
/// @prop - Border style of the action sheet title
|
||||
$action-sheet-ios-title-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color alpha of the action sheet title
|
||||
$action-sheet-ios-title-border-color-alpha: .08 !default;
|
||||
|
||||
/// @prop - Border color of the action sheet title
|
||||
$action-sheet-ios-title-border-color: rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
|
||||
|
||||
|
||||
// Action Sheet Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -116,6 +129,9 @@ $action-sheet-ios-button-background-selected: var(--ion-colo
|
||||
/// @prop - Destructive text color of the action sheet button
|
||||
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default;
|
||||
|
||||
/// @prop - Background color of the action sheet cancel button
|
||||
$action-sheet-ios-button-cancel-background: $background-color !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet cancel button
|
||||
$action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
|
||||
|
||||
@@ -84,6 +84,9 @@ $action-sheet-md-button-padding-bottom: $action-sheet-md-button-
|
||||
/// @prop - Padding start of the action sheet button
|
||||
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default;
|
||||
|
||||
/// @prop - Background color of the action sheet button
|
||||
$action-sheet-md-button-background: transparent !default;
|
||||
|
||||
// Action Sheet Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -101,3 +104,6 @@ $action-sheet-md-icon-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Color of the icon in the action sheet button
|
||||
$action-sheet-md-icon-color: $action-sheet-md-title-color !default;
|
||||
|
||||
@@ -128,8 +128,8 @@
|
||||
height: 100%;
|
||||
|
||||
/* Fallback for browsers that do not support dvh */
|
||||
max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
|
||||
max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
@@ -142,22 +142,8 @@
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrollbars on mobile devices will be hidden.
|
||||
* Users can still scroll the content by swiping.
|
||||
* If a user has a fine pointing device, such as a
|
||||
* mouse or trackpad, then scrollbars will be
|
||||
* visible. This allows users to scroll the
|
||||
* content with their pointing device.
|
||||
* Otherwise, the user would have to use the
|
||||
* keyboard to navigate through the options.
|
||||
* This may not be intuitive for users who
|
||||
* are not familiar with keyboard navigation.
|
||||
*/
|
||||
@media (any-pointer: coarse) {
|
||||
.action-sheet-group::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.action-sheet-group::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-sheet-group-cancel {
|
||||
|
||||
@@ -100,69 +100,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior needs to be tested in both modes but does not vary
|
||||
* across directions due to the component only applying safe area
|
||||
* to the top and bottom
|
||||
*/
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('action-sheet: basic'), () => {
|
||||
test.describe('safe area', () => {
|
||||
test('should have padding added by the safe area', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-top: 60px;
|
||||
--ion-safe-area-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-action-sheet></ion-action-sheet>
|
||||
|
||||
<script>
|
||||
const actionSheet = document.querySelector('ion-action-sheet');
|
||||
actionSheet.header = 'Header';
|
||||
actionSheet.subHeader = 'Sub Header';
|
||||
actionSheet.buttons = [
|
||||
'Add Reaction',
|
||||
'Copy Text',
|
||||
'Share Text',
|
||||
'Copy Link to Message',
|
||||
'Remind Me',
|
||||
'Pin File',
|
||||
'Star File',
|
||||
'Mark Unread',
|
||||
'Mark Read',
|
||||
'Edit Title',
|
||||
'Erase Title',
|
||||
'Save Image',
|
||||
'Copy Image',
|
||||
'Erase Image',
|
||||
'Delete File',
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel'
|
||||
},
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
const actionSheet = page.locator('ion-action-sheet');
|
||||
|
||||
await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
|
||||
await ionActionSheetDidPresent.next();
|
||||
|
||||
await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -7,17 +7,10 @@ describe('action sheet: htmlAttributes inheritance', () => {
|
||||
it('should correctly inherit attributes on host', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
template: () => (
|
||||
<ion-action-sheet
|
||||
htmlAttributes={{
|
||||
'data-testid': 'basic-action-sheet',
|
||||
}}
|
||||
overlayIndex={1}
|
||||
></ion-action-sheet>
|
||||
),
|
||||
template: () => <ion-action-sheet htmlAttributes={{ 'data-testid': 'basic-action-sheet' }}></ion-action-sheet>,
|
||||
});
|
||||
|
||||
const actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
const actionSheet = page.body.querySelector('ion-action-sheet');
|
||||
|
||||
await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
|
||||
});
|
||||
|
||||
@@ -105,17 +105,6 @@
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-date-and-time-value {
|
||||
/**
|
||||
* 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
|
||||
* date/time inputs on iOS/Mobile Safari.
|
||||
*/
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -52,18 +52,9 @@
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: $alert-md-message-font-size;
|
||||
}
|
||||
max-height: $alert-md-content-max-height;
|
||||
|
||||
/**
|
||||
* MD Alerts on tablets can expand vertically up to
|
||||
* a total maximum height. We only want to set a max-height
|
||||
* on mobile phones.
|
||||
*/
|
||||
@include mobile-viewport() {
|
||||
.alert-message {
|
||||
max-height: $alert-md-content-max-height;
|
||||
}
|
||||
font-size: $alert-md-message-font-size;
|
||||
}
|
||||
|
||||
.alert-message:empty {
|
||||
@@ -111,24 +102,14 @@
|
||||
.alert-checkbox-group {
|
||||
position: relative;
|
||||
|
||||
max-height: $alert-md-content-max-height;
|
||||
|
||||
border-top: $alert-md-list-border-top;
|
||||
border-bottom: $alert-md-list-border-bottom;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* MD Alerts on tablets can expand vertically up to
|
||||
* a total maximum height. We only want to set a max-height
|
||||
* on mobile phones.
|
||||
*/
|
||||
@include mobile-viewport() {
|
||||
.alert-radio-group,
|
||||
.alert-checkbox-group {
|
||||
max-height: $alert-md-content-max-height;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-tappable {
|
||||
position: relative;
|
||||
|
||||
@@ -301,14 +282,3 @@
|
||||
.alert-button-inner {
|
||||
justify-content: $alert-md-button-group-justify-content;
|
||||
}
|
||||
|
||||
/**
|
||||
* MD alerts should scale up to 560px x 560px
|
||||
* on tablet dimensions.
|
||||
*/
|
||||
@include tablet-viewport() {
|
||||
:host {
|
||||
--max-width: #{$alert-md-max-width-tablet};
|
||||
--max-height: #{$alert-md-max-height-tablet};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,20 +10,6 @@ $alert-md-font-size: dynamic-font(14px) !default;
|
||||
/// @prop - Max width of the alert
|
||||
$alert-md-max-width: 280px !default;
|
||||
|
||||
/// @prop - Max width of the alert on a tablet
|
||||
/**
|
||||
* Large display requirements for MD Alert:
|
||||
* 1. Maintain a minimum of 48px distance from the leading and
|
||||
* trailing edges of the screen. (48px * 2 = 96px)
|
||||
* 2. The width can increase up to 560px.
|
||||
* 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;
|
||||
|
||||
/// @prop - Max width of the alert on a tablet
|
||||
$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default;
|
||||
|
||||
/// @prop - Border radius of the alert
|
||||
$alert-md-border-radius: 4px !default;
|
||||
|
||||
@@ -171,6 +157,9 @@ $alert-md-button-text-color: ion-color(primary, base) !default;
|
||||
/// @prop - Background color of the alert button
|
||||
$alert-md-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the alert activated button
|
||||
$alert-md-button-background-color-activated: ion-color(primary, base, .04) !default;
|
||||
|
||||
/// @prop - Border radius of the alert button
|
||||
$alert-md-button-border-radius: 2px !default;
|
||||
|
||||
|
||||
@@ -84,59 +84,17 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Alert has a maximum height in scenarios
|
||||
* such as the MD alert on tablet devices.
|
||||
* As a result, we need to make sure the inner
|
||||
* containers can scroll otherwise content
|
||||
* may be cut off.
|
||||
*/
|
||||
.alert-message,
|
||||
.alert-input-group {
|
||||
.alert-message {
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.alert-checkbox-label,
|
||||
.alert-radio-label {
|
||||
/**
|
||||
* This allows long words to wrap to the next line
|
||||
* instead of flowing outside of the container.
|
||||
*
|
||||
* The "anywhere" keyword should be used instead
|
||||
* of the "break-word" keyword since the parent
|
||||
* container is using flexbox. Flex relies on min-content and
|
||||
* max-content intrinsic sizes to structure the layout. Flex will
|
||||
* wrap content only until it reaches its min-content intrinsic size
|
||||
* which in this case is equal to the longest word in this container.
|
||||
* "break-word" does not shrink the min-content intrinsic size
|
||||
* of the flex item which causes the long word to still overflow.
|
||||
* "anywhere" on the other hand does shrink the min-content
|
||||
* intrinsic size which allows the long word to wrap to the next line.
|
||||
*/
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrollbars on mobile devices will be hidden.
|
||||
* Users can still scroll the content by swiping.
|
||||
* If a user has a fine pointing device, such as a
|
||||
* mouse or trackpad, then scrollbars will be
|
||||
* visible. This allows users to scroll the
|
||||
* content with their pointing device.
|
||||
* Otherwise, the user would have to use the
|
||||
* keyboard to navigate through the options.
|
||||
* This may not be intuitive for users who
|
||||
* are not familiar with keyboard navigation.
|
||||
*/
|
||||
@media (any-pointer: coarse) {
|
||||
.alert-checkbox-group::-webkit-scrollbar,
|
||||
.alert-radio-group::-webkit-scrollbar,
|
||||
.alert-message::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.alert-checkbox-group::-webkit-scrollbar,
|
||||
.alert-radio-group::-webkit-scrollbar,
|
||||
.alert-message::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert-input {
|
||||
|
||||
@@ -28,67 +28,6 @@ const testAria = async (
|
||||
expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
|
||||
};
|
||||
|
||||
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) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-alert header='Text Wrapping'></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'radio', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
|
||||
{ type: 'radio', value: 'b', label: 'These are separate words that should wrap' }
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`));
|
||||
});
|
||||
test('should break on words and white spaces for checkboxes', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-alert header='Text Wrapping'></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'checkbox', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
|
||||
{ type: 'checkbox', value: 'b', label: 'These are separate words that should wrap' }
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('alert: a11y'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@@ -1,7 +1,6 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { config } from '../../../global/config';
|
||||
import { Alert } from '../alert';
|
||||
import { config } from '../../../global/config';
|
||||
|
||||
describe('alert: custom html', () => {
|
||||
it('should not allow for custom html by default', async () => {
|
||||
@@ -10,7 +9,7 @@ describe('alert: custom html', () => {
|
||||
html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
|
||||
});
|
||||
|
||||
const content = page.body.querySelector('.alert-message')!;
|
||||
const content = page.body.querySelector('.alert-message');
|
||||
expect(content.textContent).toContain('Custom Text');
|
||||
expect(content.querySelector('button.custom-html')).toBe(null);
|
||||
});
|
||||
@@ -22,7 +21,7 @@ describe('alert: custom html', () => {
|
||||
html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
|
||||
});
|
||||
|
||||
const content = page.body.querySelector('.alert-message')!;
|
||||
const content = page.body.querySelector('.alert-message');
|
||||
expect(content.textContent).toContain('Custom Text');
|
||||
expect(content.querySelector('button.custom-html')).not.toBe(null);
|
||||
});
|
||||
@@ -34,7 +33,7 @@ describe('alert: custom html', () => {
|
||||
html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
|
||||
});
|
||||
|
||||
const content = page.body.querySelector('.alert-message')!;
|
||||
const content = page.body.querySelector('.alert-message');
|
||||
expect(content.textContent).toContain('Custom Text');
|
||||
expect(content.querySelector('button.custom-html')).toBe(null);
|
||||
});
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test, Viewports } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not vary across directions.
|
||||
*/
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('alert: rendering - tablet'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.setViewportSize(Viewports.tablet.portrait);
|
||||
await page.goto('/src/components/alert/test/basic', config);
|
||||
});
|
||||
|
||||
test('should expand width and height on larger displays with text', async ({ page }) => {
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const button = page.locator('#longMessage');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await button.click();
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(alert).toHaveScreenshot(screenshot('alert-tablet-text'));
|
||||
});
|
||||
|
||||
test('should expand width and height on larger displays with checkboxes', async ({ page }) => {
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const button = page.locator('#checkbox');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await button.click();
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(alert).toHaveScreenshot(screenshot('alert-tablet-checkboxes'));
|
||||
});
|
||||
|
||||
test('should expand width and height on larger displays with radios', async ({ page }) => {
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const button = page.locator('#radio');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await button.click();
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(alert).toHaveScreenshot(screenshot('alert-tablet-radios'));
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
@@ -1,6 +1,5 @@
|
||||
import type { ComponentInterface } from '@stencil/core';
|
||||
import { Build, Component, Element, Host, Method, h } from '@stencil/core';
|
||||
import type { FocusVisibleUtility } from '@utils/focus-visible';
|
||||
import { isPlatform } from '@utils/platform';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
@@ -11,7 +10,7 @@ import { getIonMode } from '../../global/ionic-global';
|
||||
styleUrl: 'app.scss',
|
||||
})
|
||||
export class App implements ComponentInterface {
|
||||
private focusVisible?: FocusVisibleUtility;
|
||||
private focusVisible?: any; // TODO(FW-2832): type
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
async function showPicker() {
|
||||
const picker = Object.assign(document.createElement('ion-picker-legacy'), {
|
||||
const picker = Object.assign(document.createElement('ion-picker'), {
|
||||
columns: [
|
||||
{
|
||||
name: 'Picker',
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
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';
|
||||
|
||||
@@ -12,6 +13,10 @@ 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.
|
||||
*/
|
||||
@@ -32,6 +37,16 @@ export class Backdrop implements ComponentInterface {
|
||||
*/
|
||||
@Event() ionBackdropTap!: EventEmitter<void>;
|
||||
|
||||
connectedCallback() {
|
||||
if (this.stopPropagation) {
|
||||
this.blocker.block();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.blocker.unblock();
|
||||
}
|
||||
|
||||
@Listen('click', { passive: false, capture: true })
|
||||
protected onMouseDown(ev: TouchEvent) {
|
||||
this.emitTap(ev);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Breadcrumb } from '../../breadcrumb/breadcrumb';
|
||||
import { Breadcrumbs } from '../breadcrumbs';
|
||||
import { Breadcrumb } from '../../breadcrumb/breadcrumb.tsx';
|
||||
import { Breadcrumbs } from '../breadcrumbs.tsx';
|
||||
|
||||
it('should correctly provide the collapsed breadcrumbs in the event payload', async () => {
|
||||
const page = await newSpecPage({
|
||||
@@ -18,8 +18,8 @@ it('should correctly provide the collapsed breadcrumbs in the event payload', as
|
||||
});
|
||||
|
||||
const onCollapsedClick = jest.fn((ev) => ev);
|
||||
const breadcrumbs = page.body.querySelector('ion-breadcrumbs')!;
|
||||
const breadcrumb = page.body.querySelectorAll('ion-breadcrumb')!;
|
||||
const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
|
||||
const breadcrumb = page.body.querySelectorAll('ion-breadcrumb');
|
||||
|
||||
breadcrumbs.addEventListener('ionCollapsedClick', onCollapsedClick);
|
||||
|
||||
@@ -46,8 +46,8 @@ it('should exclude the separator from narrators', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type')!;
|
||||
const separator = firstBreadcrumb.shadowRoot!.querySelector('[part="separator"]')!;
|
||||
const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type');
|
||||
const separator = firstBreadcrumb.shadowRoot.querySelector('[part="separator"]');
|
||||
|
||||
expect(separator.getAttribute('aria-hidden')).toBe('true');
|
||||
});
|
||||
@@ -62,7 +62,7 @@ it('should have color attribute', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const breadcrumbs = page.body.querySelector('ion-breadcrumbs')!;
|
||||
const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
|
||||
|
||||
expect(breadcrumbs.hasAttribute('color')).toBe(true);
|
||||
});
|
||||
|
||||
@@ -41,6 +41,28 @@ $button-ios-font-size: dynamic-font-max(16px, 3)
|
||||
/// @prop - Font weight of the button text
|
||||
$button-ios-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$button-ios-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$button-ios-text-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$button-ios-background-color-activated: ion-color(primary, shade) !default;
|
||||
|
||||
/// @prop - Opacity of the activated button
|
||||
$button-ios-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Opacity of the button on hover
|
||||
$button-ios-opacity-hover: .8 !default;
|
||||
|
||||
/// @prop - Background color of the focused button
|
||||
$button-ios-background-color-focused: ion-color(primary, shade) !default;
|
||||
|
||||
/// @prop - Opacity of the button when disabled
|
||||
$button-ios-opacity-disabled: .5 !default;
|
||||
|
||||
|
||||
// iOS Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -107,6 +129,30 @@ $button-ios-outline-border-style: solid !default;
|
||||
/// @prop - Border radius of the outline button
|
||||
$button-ios-outline-border-radius: $button-ios-border-radius !default;
|
||||
|
||||
/// @prop - Border color of the outline button
|
||||
$button-ios-outline-border-color: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Text color of the outline button
|
||||
$button-ios-outline-text-color: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color of the outline button
|
||||
$button-ios-outline-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the activated outline button
|
||||
$button-ios-outline-text-color-activated: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Background color of the activated outline button
|
||||
$button-ios-outline-background-color-activated: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the activated outline button
|
||||
$button-ios-outline-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Background color alpha of the focused outline button
|
||||
$button-ios-outline-background-color-alpha-focused: .25 !default;
|
||||
|
||||
/// @prop - Background color of the focused outline button
|
||||
$button-ios-outline-background-color-focused: ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default;
|
||||
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -121,12 +167,30 @@ $button-ios-clear-font-weight: normal !default;
|
||||
/// @prop - Letter spacing of the button
|
||||
$button-ios-letter-spacing: 0 !default;
|
||||
|
||||
/// @prop - Border color of the clear button
|
||||
$button-ios-clear-border-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the clear button
|
||||
$button-ios-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the activated clear button
|
||||
$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the activated clear button
|
||||
$button-ios-clear-opacity-activated: .4 !default;
|
||||
|
||||
/// @prop - Text color of the clear button on hover
|
||||
$button-ios-clear-text-color-hover: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the clear button on hover
|
||||
$button-ios-clear-opacity-hover: .6 !default;
|
||||
|
||||
/// @prop - Background color alpha of the focused clear button
|
||||
$button-ios-clear-background-color-alpha-focused: .25 !default;
|
||||
|
||||
/// @prop - Background color of the focused clear button
|
||||
$button-ios-clear-background-color-focused: ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default;
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@@ -47,9 +47,18 @@ $button-md-letter-spacing: 0.06em;
|
||||
/// @prop - Box shadow of the button
|
||||
$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Opacity of the activated button
|
||||
$button-md-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Box shadow of the activated button
|
||||
$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Background color of the ripple on the button
|
||||
$button-md-ripple-background-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Opacity of the button when disabled
|
||||
$button-md-opacity-disabled: .5 !default;
|
||||
|
||||
// Material Design Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -93,6 +102,82 @@ $button-md-small-min-height: 2.1em !default;
|
||||
/// @prop - Font size of the small button
|
||||
$button-md-small-font-size: dynamic-font(13px) !default;
|
||||
|
||||
|
||||
// Material Design Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border width of the outline button
|
||||
$button-md-outline-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the outline button
|
||||
$button-md-outline-border-style: solid !default;
|
||||
|
||||
/// @prop - Background color of the outline button
|
||||
$button-md-outline-background-color: transparent !default;
|
||||
|
||||
/// @prop - Box shadow of the outline button
|
||||
$button-md-outline-box-shadow: none !default;
|
||||
|
||||
/// @prop - Background color alpha of the outline button on hover
|
||||
$button-md-outline-background-color-alpha-hover: .1 !default;
|
||||
|
||||
/// @prop - Background color of the outline button on hover
|
||||
$button-md-outline-background-color-hover: rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default;
|
||||
|
||||
/// @prop - Background color of the activated outline button
|
||||
$button-md-outline-background-color-activated: transparent !default;
|
||||
|
||||
/// @prop - Box shadow of the activated outline button
|
||||
$button-md-outline-box-shadow-activated: none !default;
|
||||
|
||||
/// @prop - Opacity of the activated outline button
|
||||
$button-md-outline-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Background color alpha of the focused outline button
|
||||
$button-md-outline-background-color-alpha-focused: .1 !default;
|
||||
|
||||
/// @prop - Background color of the focused outline button
|
||||
$button-md-outline-background-color-focused: ion-color(primary, base, $button-md-outline-background-color-alpha-focused) !default;
|
||||
|
||||
// Material Design Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border color of the clear button
|
||||
$button-md-clear-border-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the clear button
|
||||
$button-md-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Box shadow of the clear button
|
||||
$button-md-clear-box-shadow: none !default;
|
||||
|
||||
/// @prop - Opacity of the clear button
|
||||
$button-md-clear-opacity: 1 !default;
|
||||
|
||||
/// @prop - Background color alpha of the activated clear button
|
||||
$button-md-clear-background-color-alpha-activated: .1 !default;
|
||||
|
||||
/// @prop - Background color of the activated clear button
|
||||
$button-md-clear-background-color-activated: rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default;
|
||||
|
||||
/// @prop - Box shadow of the activated clear button
|
||||
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
|
||||
|
||||
/// @prop - Background color alpha of the clear button on hover
|
||||
$button-md-clear-background-color-alpha-hover: .1 !default;
|
||||
|
||||
/// @prop - Background color of the clear button on hover
|
||||
$button-md-clear-background-color-hover: rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default;
|
||||
|
||||
/// @prop - Background color of the ripple on the clear button
|
||||
$button-md-clear-ripple-background-color: $text-color-step-600 !default;
|
||||
|
||||
/// @props - Background color of the focused clear button
|
||||
$button-md-clear-background-color-alpha-focused: .1 !default;
|
||||
|
||||
/// @props - Background color of the focused clear button
|
||||
$button-md-clear-background-color-focused: ion-color(primary, base, $button-md-clear-background-color-alpha-focused) !default;
|
||||
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Button } from '../../button';
|
||||
|
||||
describe('Button: Hidden Form Button', () => {
|
||||
@@ -16,7 +15,8 @@ describe('Button: Hidden Form Button', () => {
|
||||
return page.body.querySelectorAll('form button');
|
||||
};
|
||||
|
||||
const button = page.body.querySelector('ion-button')!;
|
||||
const form = page.body.querySelectorAll('form');
|
||||
const button = page.body.querySelector('ion-button');
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
|
||||
@@ -8,12 +8,21 @@
|
||||
/// @prop - Background color of the checkbox when off
|
||||
$checkbox-ios-background-color-off: $item-ios-background !default;
|
||||
|
||||
/// @prop - Background color of the checkbox when on
|
||||
$checkbox-ios-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for checkbox when focused
|
||||
$checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-ios-icon-size: dynamic-font-max(26px, 2.538) !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-ios-icon-border-width: dynamic-font(1px) !default;
|
||||
|
||||
@@ -23,6 +32,27 @@ $checkbox-ios-icon-border-style: solid !default;
|
||||
/// @prop - Border radius of the checkbox icon
|
||||
$checkbox-ios-icon-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Width of the checkmark border in the checkbox
|
||||
$checkbox-ios-checkmark-border-width: 1px !default;
|
||||
|
||||
/// @prop - Style of the checkmark border in the checkbox
|
||||
$checkbox-ios-checkmark-border-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkmark border in the checkbox
|
||||
$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Top of the checkmark in the checkbox
|
||||
$checkbox-ios-checkmark-top: calc($checkbox-ios-icon-size / 6) !default;
|
||||
|
||||
/// @prop - Start of the checkmark in the checkbox
|
||||
$checkbox-ios-checkmark-start: calc($checkbox-ios-icon-size / 3 + 1px) !default;
|
||||
|
||||
/// @prop - Width of the checkmark in the checkbox
|
||||
$checkbox-ios-checkmark-width: calc($checkbox-ios-icon-size / 6 + 1px) !default;
|
||||
|
||||
/// @prop - Height of the checkmark in the checkbox
|
||||
$checkbox-ios-checkmark-height: calc($checkbox-ios-icon-size * 0.5) !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
||||
|
||||
|
||||
@@ -10,20 +10,41 @@ $checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !defa
|
||||
/// @prop - Background color of the checkbox icon when off
|
||||
$checkbox-md-icon-background-color-off: $item-md-background !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for checkbox when focused
|
||||
$checkbox-md-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when on
|
||||
$checkbox-md-icon-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
/// The icon size does not use dynamic font
|
||||
/// because it does not scale in native.
|
||||
$checkbox-md-icon-size: 18px !default;
|
||||
|
||||
/// @prop - Width of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-width: 2px !default;
|
||||
|
||||
/// @prop - Style of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-style: solid !default;
|
||||
|
||||
/// @prop - Color of the checkbox icon checkmark
|
||||
$checkbox-md-icon-checkmark-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-md-icon-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox icon
|
||||
$checkbox-md-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox icon
|
||||
$checkbox-md-icon-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when on
|
||||
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Transition duration of the checkbox
|
||||
$checkbox-md-transition-duration: 180ms !default;
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('ion-checkbox: disabled', () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const checkbox = page.body.querySelector('ion-checkbox')!;
|
||||
const checkbox = page.body.querySelector('ion-checkbox');
|
||||
|
||||
expect(checkbox.checked).toBe(false);
|
||||
|
||||
|
||||
@@ -54,6 +54,10 @@
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
:host(.outer-content) {
|
||||
--background: #{$background-color-step-50};
|
||||
}
|
||||
|
||||
#background-content {
|
||||
@include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);
|
||||
|
||||
|
||||
@@ -34,24 +34,16 @@
|
||||
|
||||
// Calendar / Header / Action Buttons
|
||||
// -----------------------------------
|
||||
.calendar-month-year-toggle {
|
||||
@include padding(0px, 16px, 0px, #{$datetime-ios-padding});
|
||||
|
||||
min-height: 44px;
|
||||
:host .calendar-action-buttons ion-item {
|
||||
--padding-start: #{$datetime-ios-padding};
|
||||
--background-hover: transparent;
|
||||
--background-activated: transparent;
|
||||
|
||||
font-size: dynamic-font-max(16px, 1.6);
|
||||
font-weight: 600;
|
||||
|
||||
&.ion-focused::after {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-month-year-toggle #toggle-wrapper {
|
||||
@include margin(10px, 8px, 10px, 0);
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
|
||||
:host .calendar-action-buttons ion-item ion-icon,
|
||||
:host .calendar-action-buttons ion-buttons ion-button {
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,15 @@ $datetime-ios-border-color: 0.55px solid $background-color-step-200 !def
|
||||
/// @prop - Padding for content
|
||||
$datetime-ios-padding: 16px !default;
|
||||
|
||||
/// @prop - Height of the time picker
|
||||
$datetime-ios-time-height: 28px !default;
|
||||
|
||||
/// @prop - Width of the time picker
|
||||
$datetime-ios-time-width: 68px !default;
|
||||
|
||||
/// @prop - Border radius of the time picker
|
||||
$datetime-ios-time-border-radius: 8px !default;
|
||||
|
||||
/// @prop - The font size at which layouts may change to accommodate Dynamic Type
|
||||
$datetime-dynamic-font-breakpoint: 24px !default;
|
||||
|
||||
|
||||
@@ -30,41 +30,15 @@
|
||||
|
||||
// Calendar / Header / Action Buttons
|
||||
// -----------------------------------
|
||||
:host .datetime-calendar .calendar-action-buttons ion-item {
|
||||
--padding-start: #{$datetime-md-header-padding};
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons ion-item,
|
||||
:host .calendar-action-buttons ion-button {
|
||||
--color: #{$text-color-step-350};
|
||||
}
|
||||
|
||||
.calendar-month-year-toggle {
|
||||
@include padding(12px, 16px, 12px, #{$datetime-md-header-padding});
|
||||
|
||||
min-height: 48px;
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: #{$text-color-step-350};
|
||||
|
||||
z-index: 1;
|
||||
|
||||
&.ion-focused::after {
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-month-year-toggle ion-ripple-effect {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover {
|
||||
&::after {
|
||||
background: currentColor;
|
||||
|
||||
opacity: 0.04;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar / Header / Days of Week
|
||||
// -----------------------------------
|
||||
:host .calendar-days-of-week {
|
||||
@@ -90,6 +64,7 @@
|
||||
* if necessary.
|
||||
*/
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
|
||||
}
|
||||
|
||||
// Individual day button in month
|
||||
@@ -161,3 +136,7 @@
|
||||
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:host .datetime-view-buttons ion-button {
|
||||
color: $text-color-step-200;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@import "./datetime.vars";
|
||||
|
||||
// Datetime
|
||||
// --------------------------------------------------
|
||||
@@ -34,7 +34,7 @@
|
||||
* widest item in the column. Setting a minimum
|
||||
* width avoids this layout shifting.
|
||||
*/
|
||||
ion-picker-column {
|
||||
ion-picker-column-internal {
|
||||
min-width: 26px;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ ion-picker-column {
|
||||
}
|
||||
|
||||
/**
|
||||
* This ensures that the picker is appropriately
|
||||
* This ensures that the picker is apppropriately
|
||||
* sized and never truncates the text.
|
||||
*/
|
||||
:host(.datetime-size-fixed.datetime-prefer-wheel) {
|
||||
@@ -185,37 +185,13 @@ ion-picker-column {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(.datetime-readonly),
|
||||
:host(.datetime-disabled) {
|
||||
pointer-events: none;
|
||||
|
||||
.calendar-days-of-week,
|
||||
.datetime-time {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
:host(.datetime-readonly) {
|
||||
pointer-events: none;
|
||||
|
||||
/**
|
||||
* Allow user to navigate months
|
||||
* while in readonly mode
|
||||
*/
|
||||
.calendar-action-buttons,
|
||||
.calendar-body,
|
||||
.datetime-year {
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled buttons should have full opacity
|
||||
* in readonly mode
|
||||
*/
|
||||
|
||||
.calendar-day[disabled]:not(.calendar-day-constrained),
|
||||
.datetime-action-buttons ion-button[disabled] {
|
||||
opacity: 1;
|
||||
}
|
||||
:host(.datetime-disabled) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -267,8 +243,19 @@ ion-picker-column {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons ion-item,
|
||||
:host .calendar-action-buttons ion-button {
|
||||
--background: transparent;
|
||||
--background: translucent;
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons ion-item ion-label {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons ion-item ion-icon {
|
||||
@include padding(0, 0, 0, 4px);
|
||||
}
|
||||
|
||||
// Calendar / Header / Days of Week
|
||||
@@ -477,55 +464,6 @@ ion-picker-column {
|
||||
|
||||
// Year Picker
|
||||
// -----------------------------------
|
||||
:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
.calendar-month-year {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.calendar-month-year-toggle {
|
||||
@include text-inherit();
|
||||
|
||||
position: relative;
|
||||
|
||||
border: 0;
|
||||
|
||||
outline: none;
|
||||
|
||||
background: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
@include button-state();
|
||||
|
||||
transition: opacity 15ms linear, background-color 15ms linear;
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.ion-focused::after {
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-month-year-toggle ion-icon {
|
||||
@include padding(0, 0, 0, 4px);
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.calendar-month-year-toggle #toggle-wrapper {
|
||||
display: inline-flex;
|
||||
|
||||
align-items: center;
|
||||
:host(.show-month-and-year) .calendar-action-buttons ion-item {
|
||||
--color: #{current-color(base)};
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import type { Color, Mode, StyleEventDetail } from '../../interface';
|
||||
import type { PickerColumnItem } from '../picker-column/picker-column-interfaces';
|
||||
import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
|
||||
|
||||
import type {
|
||||
DatetimePresentation,
|
||||
@@ -104,6 +104,7 @@ import {
|
||||
export class Datetime implements ComponentInterface {
|
||||
private inputId = `ion-dt-${datetimeIds++}`;
|
||||
private calendarBodyRef?: HTMLElement;
|
||||
private monthYearToggleItemRef?: HTMLIonItemElement;
|
||||
private popoverRef?: HTMLIonPopoverElement;
|
||||
private clearFocusVisible?: () => void;
|
||||
private parsedMinuteValues?: number[];
|
||||
@@ -171,7 +172,7 @@ export class Datetime implements ComponentInterface {
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* If `true`, the datetime appears normal but the selected date cannot be changed.
|
||||
* If `true`, the datetime appears normal but is not interactive.
|
||||
*/
|
||||
@Prop() readonly = false;
|
||||
|
||||
@@ -598,14 +599,6 @@ export class Datetime implements ComponentInterface {
|
||||
};
|
||||
|
||||
private setActiveParts = (parts: DatetimeParts, removeDate = false) => {
|
||||
/** if the datetime component is in readonly mode,
|
||||
* allow browsing of the calendar without changing
|
||||
* the set value
|
||||
*/
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { multiple, minParts, maxParts, activeParts } = this;
|
||||
|
||||
/**
|
||||
@@ -1131,7 +1124,7 @@ export class Datetime implements ComponentInterface {
|
||||
* so we need to re-init behavior with the new elements.
|
||||
*/
|
||||
componentDidRender() {
|
||||
const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel, forceRenderDate } = this;
|
||||
const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel } = this;
|
||||
|
||||
/**
|
||||
* TODO(FW-2165)
|
||||
@@ -1149,20 +1142,7 @@ export class Datetime implements ComponentInterface {
|
||||
const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation);
|
||||
if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) {
|
||||
const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)');
|
||||
/**
|
||||
* We need to make sure the datetime is not in the process
|
||||
* of scrolling to a new datetime value if the value
|
||||
* is updated programmatically.
|
||||
* Otherwise, the datetime will appear to not scroll at all because
|
||||
* we are resetting the scroll position to the center of the view.
|
||||
* Prior to the datetime's value being updated programmatically,
|
||||
* the calendarBodyRef is scrolled such that the middle month is centered
|
||||
* in the view. The below code updates the scroll position so the middle
|
||||
* month is also centered in the view. Since the scroll position did not change,
|
||||
* the scroll callback in this file does not fire,
|
||||
* and the resolveForceDateScrolling promise never resolves.
|
||||
*/
|
||||
if (workingMonth && forceRenderDate === undefined) {
|
||||
if (workingMonth) {
|
||||
calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
|
||||
}
|
||||
}
|
||||
@@ -1434,13 +1414,7 @@ export class Datetime implements ComponentInterface {
|
||||
*/
|
||||
|
||||
private renderFooter() {
|
||||
const { disabled, readonly, showDefaultButtons, showClearButton } = this;
|
||||
/**
|
||||
* The cancel, clear, and confirm buttons
|
||||
* should not be interactive if the datetime
|
||||
* is disabled or readonly.
|
||||
*/
|
||||
const isButtonDisabled = disabled || readonly;
|
||||
const { showDefaultButtons, showClearButton } = this;
|
||||
const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
|
||||
if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
|
||||
return;
|
||||
@@ -1470,33 +1444,18 @@ export class Datetime implements ComponentInterface {
|
||||
<slot name="buttons">
|
||||
<ion-buttons>
|
||||
{showDefaultButtons && (
|
||||
<ion-button
|
||||
id="cancel-button"
|
||||
color={this.color}
|
||||
onClick={() => this.cancel(true)}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
<ion-button id="cancel-button" color={this.color} onClick={() => this.cancel(true)}>
|
||||
{this.cancelText}
|
||||
</ion-button>
|
||||
)}
|
||||
<div class="datetime-action-buttons-container">
|
||||
{showClearButton && (
|
||||
<ion-button
|
||||
id="clear-button"
|
||||
color={this.color}
|
||||
onClick={() => clearButtonClick()}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
<ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>
|
||||
{this.clearText}
|
||||
</ion-button>
|
||||
)}
|
||||
{showDefaultButtons && (
|
||||
<ion-button
|
||||
id="confirm-button"
|
||||
color={this.color}
|
||||
onClick={() => this.confirm(true)}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
<ion-button id="confirm-button" color={this.color} onClick={() => this.confirm(true)}>
|
||||
{this.doneText}
|
||||
</ion-button>
|
||||
)}
|
||||
@@ -1527,7 +1486,7 @@ export class Datetime implements ComponentInterface {
|
||||
forcePresentation === 'time-date'
|
||||
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
||||
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
||||
return <ion-picker>{renderArray}</ion-picker>;
|
||||
return <ion-picker-internal>{renderArray}</ion-picker-internal>;
|
||||
}
|
||||
|
||||
private renderDatePickerColumns(forcePresentation: string) {
|
||||
@@ -1537,7 +1496,7 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
|
||||
private renderCombinedDatePickerColumn() {
|
||||
const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
|
||||
const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
|
||||
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
@@ -1613,10 +1572,9 @@ export class Datetime implements ComponentInterface {
|
||||
: `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
class="date-column"
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
items={items}
|
||||
value={todayString}
|
||||
onIonChange={(ev: CustomEvent) => {
|
||||
@@ -1647,7 +1605,7 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1728,15 +1686,14 @@ export class Datetime implements ComponentInterface {
|
||||
return [];
|
||||
}
|
||||
|
||||
const { disabled, workingParts } = this;
|
||||
const { workingParts } = this;
|
||||
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
class="day-column"
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
items={days}
|
||||
value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
|
||||
onIonChange={(ev: CustomEvent) => {
|
||||
@@ -1764,7 +1721,7 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1773,15 +1730,14 @@ export class Datetime implements ComponentInterface {
|
||||
return [];
|
||||
}
|
||||
|
||||
const { disabled, workingParts } = this;
|
||||
const { workingParts } = this;
|
||||
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
class="month-column"
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
items={months}
|
||||
value={workingParts.month}
|
||||
onIonChange={(ev: CustomEvent) => {
|
||||
@@ -1809,7 +1765,7 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
private renderYearPickerColumn(years: PickerColumnItem[]) {
|
||||
@@ -1817,15 +1773,14 @@ export class Datetime implements ComponentInterface {
|
||||
return [];
|
||||
}
|
||||
|
||||
const { disabled, workingParts } = this;
|
||||
const { workingParts } = this;
|
||||
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
class="year-column"
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
items={years}
|
||||
value={workingParts.year}
|
||||
onIonChange={(ev: CustomEvent) => {
|
||||
@@ -1853,7 +1808,7 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
private renderTimePickerColumns(forcePresentation: string) {
|
||||
@@ -1891,15 +1846,14 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
|
||||
private renderHourPickerColumn(hoursData: PickerColumnItem[]) {
|
||||
const { disabled, workingParts } = this;
|
||||
const { workingParts } = this;
|
||||
if (hoursData.length === 0) return [];
|
||||
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
value={activePart.hour}
|
||||
items={hoursData}
|
||||
numericInput
|
||||
@@ -1916,19 +1870,18 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
|
||||
const { disabled, workingParts } = this;
|
||||
const { workingParts } = this;
|
||||
if (minutesData.length === 0) return [];
|
||||
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
value={activePart.minute}
|
||||
items={minutesData}
|
||||
numericInput
|
||||
@@ -1945,11 +1898,11 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
|
||||
const { disabled, workingParts } = this;
|
||||
const { workingParts } = this;
|
||||
if (dayPeriodData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
@@ -1958,10 +1911,9 @@ export class Datetime implements ComponentInterface {
|
||||
const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
<ion-picker-column-internal
|
||||
style={isDayPeriodRTL ? { order: '-1' } : {}}
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
value={activePart.ampm}
|
||||
items={dayPeriodData}
|
||||
onIonChange={(ev: CustomEvent) => {
|
||||
@@ -1981,7 +1933,7 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
></ion-picker-column>
|
||||
></ion-picker-column-internal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2005,12 +1957,11 @@ export class Datetime implements ComponentInterface {
|
||||
*/
|
||||
|
||||
private renderCalendarHeader(mode: Mode) {
|
||||
const { disabled } = this;
|
||||
const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
|
||||
const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
|
||||
|
||||
const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
|
||||
const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
|
||||
const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
|
||||
const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
|
||||
|
||||
// don't use the inheritAttributes util because it removes dir from the host, and we still need that
|
||||
const hostDir = this.el.getAttribute('dir') || undefined;
|
||||
@@ -2019,18 +1970,34 @@ export class Datetime implements ComponentInterface {
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-action-buttons">
|
||||
<div class="calendar-month-year">
|
||||
<button
|
||||
class={{
|
||||
'calendar-month-year-toggle': true,
|
||||
'ion-activatable': true,
|
||||
'ion-focusable': true,
|
||||
}}
|
||||
<ion-item
|
||||
part="month-year-button"
|
||||
disabled={disabled}
|
||||
aria-label={this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}
|
||||
onClick={() => this.toggleMonthAndYearView()}
|
||||
ref={(el) => (this.monthYearToggleItemRef = el)}
|
||||
button
|
||||
aria-label="Show year picker"
|
||||
detail={false}
|
||||
lines="none"
|
||||
onClick={() => {
|
||||
this.toggleMonthAndYearView();
|
||||
/**
|
||||
* TODO: FW-3547
|
||||
*
|
||||
* Currently there is not a way to set the aria-label on the inner button
|
||||
* on the `ion-item` and have it be reactive to changes. This is a workaround
|
||||
* until we either refactor `ion-item` to a button or Stencil adds a way to
|
||||
* have reactive props for built-in properties, such as `aria-label`.
|
||||
*/
|
||||
const { monthYearToggleItemRef } = this;
|
||||
if (monthYearToggleItemRef) {
|
||||
const btn = monthYearToggleItemRef.shadowRoot?.querySelector('.item-native');
|
||||
if (btn) {
|
||||
const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
|
||||
btn.setAttribute('aria-label', monthYearAriaLabel);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span id="toggle-wrapper">
|
||||
<ion-label>
|
||||
{getMonthAndYear(this.locale, this.workingParts)}
|
||||
<ion-icon
|
||||
aria-hidden="true"
|
||||
@@ -2038,9 +2005,8 @@ export class Datetime implements ComponentInterface {
|
||||
lazy={false}
|
||||
flipRtl={true}
|
||||
></ion-icon>
|
||||
</span>
|
||||
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</button>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
<div class="calendar-next-prev">
|
||||
@@ -2077,28 +2043,23 @@ export class Datetime implements ComponentInterface {
|
||||
);
|
||||
}
|
||||
private renderMonth(month: number, year: number) {
|
||||
const { disabled, readonly } = this;
|
||||
|
||||
const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
|
||||
const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
|
||||
const isCalMonthDisabled = !yearAllowed || !monthAllowed;
|
||||
const isDatetimeDisabled = disabled || readonly;
|
||||
const swipeDisabled =
|
||||
disabled ||
|
||||
isMonthDisabled(
|
||||
{
|
||||
month,
|
||||
year,
|
||||
day: null,
|
||||
},
|
||||
{
|
||||
// The day is not used when checking if a month is disabled.
|
||||
// Users should be able to access the min or max month, even if the
|
||||
// min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
|
||||
minParts: { ...this.minParts, day: null },
|
||||
maxParts: { ...this.maxParts, day: null },
|
||||
}
|
||||
);
|
||||
const swipeDisabled = isMonthDisabled(
|
||||
{
|
||||
month,
|
||||
year,
|
||||
day: null,
|
||||
},
|
||||
{
|
||||
// The day is not used when checking if a month is disabled.
|
||||
// Users should be able to access the min or max month, even if the
|
||||
// min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
|
||||
minParts: { ...this.minParts, day: null },
|
||||
maxParts: { ...this.maxParts, day: null },
|
||||
}
|
||||
);
|
||||
// The working month should never have swipe disabled.
|
||||
// Otherwise the CSS scroll snap will not work and the user
|
||||
// can free-scroll the calendar.
|
||||
@@ -2122,14 +2083,7 @@ export class Datetime implements ComponentInterface {
|
||||
const { el, highlightedDates, isDateEnabled, multiple } = this;
|
||||
const referenceParts = { month, day, year };
|
||||
const isCalendarPadding = day === null;
|
||||
const {
|
||||
isActive,
|
||||
isToday,
|
||||
ariaLabel,
|
||||
ariaSelected,
|
||||
disabled: isDayDisabled,
|
||||
text,
|
||||
} = getCalendarDayState(
|
||||
const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(
|
||||
this.locale,
|
||||
referenceParts,
|
||||
this.activeParts,
|
||||
@@ -2140,8 +2094,7 @@ export class Datetime implements ComponentInterface {
|
||||
);
|
||||
|
||||
const dateIsoString = convertDataToISO(referenceParts);
|
||||
|
||||
let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
|
||||
let isCalDayDisabled = isCalMonthDisabled || disabled;
|
||||
|
||||
if (!isCalDayDisabled && isDateEnabled !== undefined) {
|
||||
try {
|
||||
@@ -2160,15 +2113,6 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Some days are constrained through max & min or allowed dates
|
||||
* and also disabled because the component is readonly or disabled.
|
||||
* These need to be displayed differently.
|
||||
*/
|
||||
const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
|
||||
|
||||
const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
|
||||
|
||||
let dateStyle: DatetimeHighlightStyle | undefined = undefined;
|
||||
|
||||
/**
|
||||
@@ -2214,12 +2158,11 @@ export class Datetime implements ComponentInterface {
|
||||
data-year={year}
|
||||
data-index={index}
|
||||
data-day-of-week={dayOfWeek}
|
||||
disabled={isButtonDisabled}
|
||||
disabled={isCalDayDisabled}
|
||||
class={{
|
||||
'calendar-day-padding': isCalendarPadding,
|
||||
'calendar-day': true,
|
||||
'calendar-day-active': isActive,
|
||||
'calendar-day-constrained': isCalDayConstrained,
|
||||
'calendar-day-today': isToday,
|
||||
}}
|
||||
part={dateParts}
|
||||
@@ -2294,7 +2237,7 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
|
||||
private renderTimeOverlay() {
|
||||
const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
|
||||
const { hourCycle, isTimePopoverOpen, locale } = this;
|
||||
const computedHourCycle = getHourCycle(locale, hourCycle);
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
@@ -2308,7 +2251,6 @@ export class Datetime implements ComponentInterface {
|
||||
part={`time-button${isTimePopoverOpen ? ' active' : ''}`}
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
disabled={disabled}
|
||||
onClick={async (ev) => {
|
||||
const { popoverRef } = this;
|
||||
|
||||
@@ -2345,7 +2287,7 @@ export class Datetime implements ComponentInterface {
|
||||
* This will correctly scroll the element position to the correct time value,
|
||||
* before the popover is fully presented.
|
||||
*/
|
||||
const cols = (ev.target! as HTMLElement).querySelectorAll('ion-picker-column');
|
||||
const cols = (ev.target! as HTMLElement).querySelectorAll('ion-picker-column-internal');
|
||||
// TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
|
||||
cols.forEach((col) => col.scrollActiveItemIntoView());
|
||||
}}
|
||||
|
||||
10
core/src/components/datetime/datetime.vars.scss
Normal file
10
core/src/components/datetime/datetime.vars.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Datetime
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum width of the datetime
|
||||
$datetime-min-width: 16px !default;
|
||||
|
||||
/// @prop - Minimum height of the datetime
|
||||
$datetime-min-height: 1.2em !default;
|
||||
@@ -30,102 +30,3 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior does not differ across
|
||||
* modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('datetime: a11y'), () => {
|
||||
test('datetime should be keyboard navigable', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = page.locator('.calendar-month-year-toggle');
|
||||
const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
|
||||
const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(monthYearButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(prevButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(nextButton).toBeFocused();
|
||||
|
||||
// check value before & after selecting via keyboard
|
||||
const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
expect(initialValue).toBe('2022-02-22T16:30:00');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
expect(newValue).not.toBe('2022-02-22T16:30:00');
|
||||
});
|
||||
|
||||
test('buttons should be keyboard navigable', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
const selectedDay = page.locator('.calendar-day-active');
|
||||
|
||||
await expect(selectedDay).toHaveText('22');
|
||||
|
||||
await clearButton.focus();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(clearButton).toBeFocused();
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(selectedDay).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('should navigate through months via right arrow key', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-28"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await calendarBody.focus();
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('March 2022');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
@@ -1,6 +1,7 @@
|
||||
import type { SpecPage } from '@stencil/core/testing';
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Item } from '../../../item/item';
|
||||
import { Datetime } from '../../datetime';
|
||||
|
||||
describe('datetime', () => {
|
||||
@@ -19,14 +20,15 @@ describe('datetime', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
page = await newSpecPage({
|
||||
components: [Datetime],
|
||||
components: [Datetime, Item],
|
||||
html: `<ion-datetime></ion-datetime>`,
|
||||
});
|
||||
});
|
||||
|
||||
it('should have aria-label "Show year picker" when collapsed', async () => {
|
||||
const datetime = page.body.querySelector('ion-datetime')!;
|
||||
const monthYearToggleBtn = datetime.shadowRoot!.querySelector('.calendar-month-year .calendar-month-year-toggle');
|
||||
const item = datetime.shadowRoot!.querySelector('.calendar-month-year ion-item');
|
||||
const monthYearToggleBtn = item!.shadowRoot!.querySelector('button');
|
||||
const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');
|
||||
|
||||
expect(ariaLabel).toContain('Show year picker');
|
||||
@@ -34,18 +36,15 @@ describe('datetime', () => {
|
||||
|
||||
it('should have aria-label "Hide year picker" when expanded', async () => {
|
||||
const datetime = page.body.querySelector('ion-datetime')!;
|
||||
const monthYearToggleBtn = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
|
||||
'.calendar-month-year .calendar-month-year-toggle'
|
||||
);
|
||||
const item = datetime.shadowRoot!.querySelector<HTMLIonItemElement>('.calendar-month-year ion-item');
|
||||
|
||||
monthYearToggleBtn!.click();
|
||||
item!.click();
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
const monthYearToggleBtnAfter = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
|
||||
'.calendar-month-year .calendar-month-year-toggle'
|
||||
);
|
||||
const ariaLabel = monthYearToggleBtnAfter!.getAttribute('aria-label');
|
||||
const itemAfter = datetime.shadowRoot!.querySelector<HTMLIonItemElement>('.calendar-month-year ion-item');
|
||||
const monthYearToggleBtn = itemAfter!.shadowRoot!.querySelector<HTMLElement>('button');
|
||||
const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');
|
||||
|
||||
expect(ariaLabel).toContain('Hide year picker');
|
||||
});
|
||||
|
||||
@@ -526,20 +526,4 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-calendar-day`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe(title('datetime: calendar month toggle'), () => {
|
||||
test('should have focus styles', async ({ page }) => {
|
||||
await page.setContent('<ion-datetime value="2021-01-01"></ion-datetime>', config);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const monthYearToggle = datetime.locator('.calendar-month-year-toggle');
|
||||
|
||||
monthYearToggle.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
|
||||
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`date-month-toggle-focused`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@@ -1,22 +1,21 @@
|
||||
import type { DatetimeParts } from '../datetime-interface';
|
||||
import { isSameDay, isBefore, isAfter } from '../utils/comparison';
|
||||
|
||||
describe('isSameDay()', () => {
|
||||
it('should return correct results for month, day, and year', () => {
|
||||
const reference: DatetimeParts = { month: 1, day: 1, year: 2021 };
|
||||
const reference = { month: 1, day: 1, year: 2021 };
|
||||
|
||||
expect(isSameDay(reference, { month: 1, day: 1, year: 2021 })).toEqual(true);
|
||||
expect(isSameDay(reference, { month: 2, day: 1, year: 2021 })).toEqual(false);
|
||||
expect(isSameDay(reference, { month: 1, day: 2, year: 2021 })).toEqual(false);
|
||||
expect(isSameDay(reference, { month: 1, day: 1, year: 2022 })).toEqual(false);
|
||||
expect(isSameDay(reference, { month: 0, day: 0, year: 0 })).toEqual(false);
|
||||
expect(isSameDay(reference, { month: null, day: null, year: null } as any)).toEqual(false);
|
||||
expect(isSameDay(reference, { month: null, day: null, year: null })).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isBefore()', () => {
|
||||
it('should return correct results for month, day, and year', () => {
|
||||
const reference: DatetimeParts = { month: 1, day: 1, year: 2021 };
|
||||
const reference = { month: 1, day: 1, year: 2021 };
|
||||
|
||||
expect(isBefore(reference, { month: 1, day: 1, year: 2021 })).toEqual(false);
|
||||
expect(isBefore(reference, { month: 2, day: 1, year: 2021 })).toEqual(true);
|
||||
@@ -24,13 +23,13 @@ describe('isBefore()', () => {
|
||||
expect(isBefore(reference, { month: 1, day: 1, year: 2022 })).toEqual(true);
|
||||
expect(isBefore(reference, { month: 1, day: 1, year: 2020 })).toEqual(false);
|
||||
expect(isBefore(reference, { month: 0, day: 0, year: 0 })).toEqual(false);
|
||||
expect(isBefore(reference, { month: null, day: null, year: null } as any)).toEqual(false);
|
||||
expect(isBefore(reference, { month: null, day: null, year: null })).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isAfter()', () => {
|
||||
it('should return correct results for month, day, and year', () => {
|
||||
const reference: DatetimeParts = { month: 2, day: 2, year: 2021 };
|
||||
const reference = { month: 2, day: 2, year: 2021 };
|
||||
|
||||
expect(isAfter(reference, { month: 2, day: 2, year: 2021 })).toEqual(false);
|
||||
expect(isAfter(reference, { month: 2, day: 1, year: 2021 })).toEqual(true);
|
||||
@@ -43,6 +42,6 @@ describe('isAfter()', () => {
|
||||
* 2021 > undefined === false
|
||||
* 2021 > null === true
|
||||
*/
|
||||
expect(isAfter(reference, { month: null, day: null, year: null } as any)).toEqual(true);
|
||||
expect(isAfter(reference, { month: null, day: null, year: null })).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -52,28 +52,28 @@
|
||||
}
|
||||
|
||||
/*
|
||||
The second selectors that target ion-picker(-column)
|
||||
The second selectors that target ion-picker(-column)-internal
|
||||
directly are for styling the time picker. This is currently
|
||||
undocumented usage.
|
||||
*/
|
||||
|
||||
.custom-grid-wheel,
|
||||
ion-picker {
|
||||
ion-picker-internal {
|
||||
--wheel-highlight-background: rgb(218, 216, 255);
|
||||
--wheel-fade-background-rgb: 245, 235, 247;
|
||||
}
|
||||
|
||||
ion-picker {
|
||||
ion-picker-internal {
|
||||
background-color: rgb(245, 235, 247);
|
||||
}
|
||||
|
||||
.custom-grid-wheel::part(wheel-item),
|
||||
ion-picker-column::part(wheel-item) {
|
||||
ion-picker-column-internal::part(wheel-item) {
|
||||
color: rgb(255, 134, 154);
|
||||
}
|
||||
|
||||
.custom-grid-wheel::part(wheel-item active),
|
||||
ion-picker-column::part(wheel-item active) {
|
||||
ion-picker-column-internal::part(wheel-item active) {
|
||||
color: rgb(128, 30, 171);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { DatetimeParts } from '../datetime-interface';
|
||||
import {
|
||||
generateMonths,
|
||||
getDaysOfWeek,
|
||||
@@ -365,7 +364,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 19,
|
||||
minute: 50,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const minParts = {
|
||||
day: undefined,
|
||||
@@ -373,7 +372,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 19,
|
||||
minute: 50,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const { hours } = generateTime('en-US', refValue, 'h23', minParts);
|
||||
|
||||
@@ -388,7 +387,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 20,
|
||||
minute: 22,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const minParts = {
|
||||
day: undefined,
|
||||
@@ -396,7 +395,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 19,
|
||||
minute: 30,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const { hours, minutes } = generateTime('en-US', refValue, 'h23', minParts);
|
||||
|
||||
@@ -412,7 +411,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 20,
|
||||
minute: 30,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const minParts = {
|
||||
day: undefined,
|
||||
@@ -420,7 +419,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 19,
|
||||
minute: 30,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const maxParts = {
|
||||
day: undefined,
|
||||
@@ -428,7 +427,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 20,
|
||||
minute: 40,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const { hours } = generateTime('en-US', refValue, 'h23', minParts, maxParts);
|
||||
|
||||
@@ -442,7 +441,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 13,
|
||||
minute: 0,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const maxParts = {
|
||||
day: undefined,
|
||||
@@ -450,7 +449,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 13,
|
||||
minute: 2,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
|
||||
|
||||
@@ -464,7 +463,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 12,
|
||||
minute: 0,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const maxParts = {
|
||||
day: undefined,
|
||||
@@ -472,7 +471,7 @@ describe('generateTime()', () => {
|
||||
year: undefined,
|
||||
hour: 13,
|
||||
minute: 2,
|
||||
} as unknown as DatetimeParts;
|
||||
};
|
||||
|
||||
const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
|
||||
|
||||
@@ -483,7 +482,7 @@ describe('generateTime()', () => {
|
||||
|
||||
describe('getToday', () => {
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
jest.useFakeTimers('modern');
|
||||
// System time is zero based, 1 = February
|
||||
jest.setSystemTime(new Date(2022, 1, 21, 18, 30));
|
||||
});
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not differ across
|
||||
* modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
test.describe(title('datetime: disabled'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`));
|
||||
});
|
||||
|
||||
test('date should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
await expect(febFirstButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('month-year button should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear.locator('button')).toBeDisabled();
|
||||
});
|
||||
|
||||
test('next and prev buttons should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button');
|
||||
const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button');
|
||||
|
||||
await expect(prevMonthButton).toBeDisabled();
|
||||
await expect(nextMonthButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('clear button should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
await expect(clearButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should not navigate through months via right arrow key', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await calendarBody.focus();
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
@@ -1,39 +0,0 @@
|
||||
import { h } from '@stencil/core';
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Datetime } from '../../../datetime/datetime';
|
||||
import { PickerColumn } from '../../../picker-column/picker-column';
|
||||
import { Picker } from '../../../picker/picker';
|
||||
|
||||
describe('ion-datetime disabled', () => {
|
||||
beforeEach(() => {
|
||||
// IntersectionObserver isn't available in test environment
|
||||
const mockIntersectionObserver = jest.fn();
|
||||
mockIntersectionObserver.mockReturnValue({
|
||||
observe: () => null,
|
||||
unobserve: () => null,
|
||||
disconnect: () => null,
|
||||
});
|
||||
global.IntersectionObserver = mockIntersectionObserver;
|
||||
});
|
||||
|
||||
it('picker should be disabled in prefer wheel mode', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Datetime, PickerColumn, Picker],
|
||||
template: () => (
|
||||
<ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
|
||||
),
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
const datetime = page.body.querySelector('ion-datetime')!;
|
||||
const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column');
|
||||
|
||||
await expect(columns.length).toEqual(4);
|
||||
|
||||
columns.forEach((column) => {
|
||||
expect(column.disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,82 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Datetime - Disabled</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(250px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #6f7378;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ion-datetime {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Datetime - Disabled</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Inline - Default Value</h2>
|
||||
<ion-datetime id="inline-datetime-value" disabled value="2022-04-21T00:00:00"></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline</h2>
|
||||
<ion-datetime
|
||||
id="inline-datetime"
|
||||
presentation="date"
|
||||
disabled
|
||||
show-default-buttons="true"
|
||||
show-clear-button="true"
|
||||
multiple="true"
|
||||
></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline - No Default Value</h2>
|
||||
<ion-datetime id="inline-datetime-no-value" disabled></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline - Prefer Wheel</h2>
|
||||
<ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
<script>
|
||||
const firstDatetime = document.querySelector('#inline-datetime');
|
||||
firstDatetime.value = ['2023-08-03', '2023-08-13', '2023-08-29'];
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { DatetimeParts } from '../datetime-interface';
|
||||
import {
|
||||
generateDayAriaLabel,
|
||||
getMonthAndDay,
|
||||
@@ -110,7 +109,7 @@ describe('getLocalizedDayPeriod', () => {
|
||||
|
||||
describe('getLocalizedTime', () => {
|
||||
it('should localize the time to PM', () => {
|
||||
const datetimeParts: DatetimeParts = {
|
||||
const datetimeParts = {
|
||||
day: 1,
|
||||
month: 1,
|
||||
year: 2022,
|
||||
@@ -122,7 +121,7 @@ describe('getLocalizedTime', () => {
|
||||
});
|
||||
|
||||
it('should localize the time to AM', () => {
|
||||
const datetimeParts: DatetimeParts = {
|
||||
const datetimeParts = {
|
||||
day: 1,
|
||||
month: 1,
|
||||
year: 2022,
|
||||
@@ -134,7 +133,7 @@ describe('getLocalizedTime', () => {
|
||||
});
|
||||
|
||||
it('should avoid Chromium bug when using 12 hour time in a 24 hour locale', () => {
|
||||
const datetimeParts: DatetimeParts = {
|
||||
const datetimeParts = {
|
||||
day: 1,
|
||||
month: 1,
|
||||
year: 2022,
|
||||
@@ -145,12 +144,12 @@ describe('getLocalizedTime', () => {
|
||||
expect(getLocalizedTime('en-GB', datetimeParts, 'h12')).toEqual('12:00 am');
|
||||
});
|
||||
it('should parse time-only values correctly', () => {
|
||||
const datetimeParts: Partial<DatetimeParts> = {
|
||||
const datetimeParts = {
|
||||
hour: 22,
|
||||
minute: 40,
|
||||
};
|
||||
|
||||
expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h12')).toEqual('10:40 PM');
|
||||
expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h23')).toEqual('22:40');
|
||||
expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
|
||||
expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { DatetimeParts } from '../datetime-interface';
|
||||
import {
|
||||
getPreviousYear,
|
||||
getNextYear,
|
||||
@@ -104,31 +103,31 @@ describe('getInternalHourValue()', () => {
|
||||
|
||||
describe('calculateHourFromAMPM()', () => {
|
||||
it('should correctly convert from AM to PM', () => {
|
||||
expect(calculateHourFromAMPM({ hour: 12, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(12);
|
||||
expect(calculateHourFromAMPM({ hour: 1, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(13);
|
||||
expect(calculateHourFromAMPM({ hour: 2, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(14);
|
||||
expect(calculateHourFromAMPM({ hour: 3, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(15);
|
||||
expect(calculateHourFromAMPM({ hour: 4, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(16);
|
||||
expect(calculateHourFromAMPM({ hour: 5, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(17);
|
||||
expect(calculateHourFromAMPM({ hour: 6, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(18);
|
||||
expect(calculateHourFromAMPM({ hour: 7, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(19);
|
||||
expect(calculateHourFromAMPM({ hour: 8, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(20);
|
||||
expect(calculateHourFromAMPM({ hour: 9, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(21);
|
||||
expect(calculateHourFromAMPM({ hour: 10, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(22);
|
||||
expect(calculateHourFromAMPM({ hour: 11, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(23);
|
||||
expect(calculateHourFromAMPM({ hour: 12, ampm: 'am' }, 'pm')).toEqual(12);
|
||||
expect(calculateHourFromAMPM({ hour: 1, ampm: 'am' }, 'pm')).toEqual(13);
|
||||
expect(calculateHourFromAMPM({ hour: 2, ampm: 'am' }, 'pm')).toEqual(14);
|
||||
expect(calculateHourFromAMPM({ hour: 3, ampm: 'am' }, 'pm')).toEqual(15);
|
||||
expect(calculateHourFromAMPM({ hour: 4, ampm: 'am' }, 'pm')).toEqual(16);
|
||||
expect(calculateHourFromAMPM({ hour: 5, ampm: 'am' }, 'pm')).toEqual(17);
|
||||
expect(calculateHourFromAMPM({ hour: 6, ampm: 'am' }, 'pm')).toEqual(18);
|
||||
expect(calculateHourFromAMPM({ hour: 7, ampm: 'am' }, 'pm')).toEqual(19);
|
||||
expect(calculateHourFromAMPM({ hour: 8, ampm: 'am' }, 'pm')).toEqual(20);
|
||||
expect(calculateHourFromAMPM({ hour: 9, ampm: 'am' }, 'pm')).toEqual(21);
|
||||
expect(calculateHourFromAMPM({ hour: 10, ampm: 'am' }, 'pm')).toEqual(22);
|
||||
expect(calculateHourFromAMPM({ hour: 11, ampm: 'am' }, 'pm')).toEqual(23);
|
||||
|
||||
expect(calculateHourFromAMPM({ hour: 13, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(1);
|
||||
expect(calculateHourFromAMPM({ hour: 14, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(2);
|
||||
expect(calculateHourFromAMPM({ hour: 15, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(3);
|
||||
expect(calculateHourFromAMPM({ hour: 16, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(4);
|
||||
expect(calculateHourFromAMPM({ hour: 17, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(5);
|
||||
expect(calculateHourFromAMPM({ hour: 18, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(6);
|
||||
expect(calculateHourFromAMPM({ hour: 19, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(7);
|
||||
expect(calculateHourFromAMPM({ hour: 20, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(8);
|
||||
expect(calculateHourFromAMPM({ hour: 21, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(9);
|
||||
expect(calculateHourFromAMPM({ hour: 22, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(10);
|
||||
expect(calculateHourFromAMPM({ hour: 23, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(11);
|
||||
expect(calculateHourFromAMPM({ hour: 0, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(12);
|
||||
expect(calculateHourFromAMPM({ hour: 13, ampm: 'pm' }, 'am')).toEqual(1);
|
||||
expect(calculateHourFromAMPM({ hour: 14, ampm: 'pm' }, 'am')).toEqual(2);
|
||||
expect(calculateHourFromAMPM({ hour: 15, ampm: 'pm' }, 'am')).toEqual(3);
|
||||
expect(calculateHourFromAMPM({ hour: 16, ampm: 'pm' }, 'am')).toEqual(4);
|
||||
expect(calculateHourFromAMPM({ hour: 17, ampm: 'pm' }, 'am')).toEqual(5);
|
||||
expect(calculateHourFromAMPM({ hour: 18, ampm: 'pm' }, 'am')).toEqual(6);
|
||||
expect(calculateHourFromAMPM({ hour: 19, ampm: 'pm' }, 'am')).toEqual(7);
|
||||
expect(calculateHourFromAMPM({ hour: 20, ampm: 'pm' }, 'am')).toEqual(8);
|
||||
expect(calculateHourFromAMPM({ hour: 21, ampm: 'pm' }, 'am')).toEqual(9);
|
||||
expect(calculateHourFromAMPM({ hour: 22, ampm: 'pm' }, 'am')).toEqual(10);
|
||||
expect(calculateHourFromAMPM({ hour: 23, ampm: 'pm' }, 'am')).toEqual(11);
|
||||
expect(calculateHourFromAMPM({ hour: 0, ampm: 'pm' }, 'am')).toEqual(12);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -109,8 +109,12 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
await page.click('.time-body');
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
|
||||
const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) .picker-item:not(.picker-item-empty)');
|
||||
const hours = page.locator(
|
||||
'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)'
|
||||
);
|
||||
const minutes = page.locator(
|
||||
'ion-popover ion-picker-column-internal:nth-child(2) .picker-item:not(.picker-item-empty)'
|
||||
);
|
||||
|
||||
expect(await hours.count()).toBe(12);
|
||||
expect(await minutes.count()).toBe(60);
|
||||
@@ -215,7 +219,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
);
|
||||
|
||||
const hourPickerItems = page.locator(
|
||||
'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'
|
||||
'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'
|
||||
);
|
||||
await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']);
|
||||
});
|
||||
@@ -239,7 +243,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
);
|
||||
|
||||
const hourPickerItems = page.locator(
|
||||
'ion-datetime ion-picker-column:first-of-type .picker-item:not(.picker-item-empty)'
|
||||
'ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'
|
||||
);
|
||||
await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
|
||||
});
|
||||
@@ -356,7 +360,9 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
const hours = page.locator('ion-popover ion-picker-column:nth-child(1) .picker-item:not(.picker-item-empty)');
|
||||
const hours = page.locator(
|
||||
'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)'
|
||||
);
|
||||
|
||||
await expect(await hours.count()).toBe(4);
|
||||
});
|
||||
|
||||
@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
const datetimeFooter = page.locator('#date-time .datetime-footer');
|
||||
await expect(datetimeFooter).toBeVisible();
|
||||
|
||||
const pickerButton = page.locator('#date-time .calendar-month-year > .calendar-month-year-toggle');
|
||||
const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
|
||||
await pickerButton.click();
|
||||
await page.waitForChanges();
|
||||
await expect(datetimeFooter).not.toBeVisible();
|
||||
|
||||
@@ -42,8 +42,7 @@ describe('parseDate()', () => {
|
||||
* See https://github.com/ionic-team/ionic-framework/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a
|
||||
*/
|
||||
it('should return the correct time zone offset', () => {
|
||||
// Casting as any since `tzOffset` does not exist on DatetimeParts
|
||||
expect((parseDate('2022-12-15T13:47:30-02:00') as any)?.tzOffset).toEqual(undefined);
|
||||
expect(parseDate('2022-12-15T13:47:30-02:00').tzOffset).toEqual(undefined);
|
||||
});
|
||||
|
||||
it('should parse an array of dates', () => {
|
||||
@@ -163,8 +162,8 @@ describe('parseMinParts()', () => {
|
||||
minute: 4,
|
||||
hour: 2,
|
||||
};
|
||||
expect(parseMinParts(undefined as any, today)).toEqual(undefined);
|
||||
expect(parseMinParts(null as any, today)).toEqual(undefined);
|
||||
expect(parseMinParts(undefined, today)).toEqual(undefined);
|
||||
expect(parseMinParts(null, today)).toEqual(undefined);
|
||||
expect(parseMinParts('foo', today)).toEqual(undefined);
|
||||
});
|
||||
});
|
||||
@@ -226,8 +225,8 @@ describe('parseMaxParts()', () => {
|
||||
minute: 4,
|
||||
hour: 2,
|
||||
};
|
||||
expect(parseMaxParts(undefined as any, today)).toEqual(undefined);
|
||||
expect(parseMaxParts(null as any, today)).toEqual(undefined);
|
||||
expect(parseMaxParts(undefined, today)).toEqual(undefined);
|
||||
expect(parseMaxParts(null, today)).toEqual(undefined);
|
||||
expect(parseMaxParts('foo', today)).toEqual(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -308,7 +308,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const columns = page.locator('ion-picker-column');
|
||||
const columns = page.locator('ion-picker-column-internal');
|
||||
|
||||
await expect(columns.nth(0)).toHaveClass(/month-column/);
|
||||
await expect(columns.nth(1)).toHaveClass(/day-column/);
|
||||
@@ -329,7 +329,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const columns = page.locator('ion-picker-column');
|
||||
const columns = page.locator('ion-picker-column-internal');
|
||||
|
||||
await expect(columns.nth(0)).toHaveClass(/day-column/);
|
||||
await expect(columns.nth(1)).toHaveClass(/month-column/);
|
||||
|
||||
@@ -227,7 +227,7 @@ class TimePickerFixture {
|
||||
}
|
||||
|
||||
async expectTime(hour: number, minute: number, ampm: string) {
|
||||
const pickerColumns = this.timePicker.locator('ion-picker-column');
|
||||
const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
|
||||
|
||||
await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
|
||||
await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
|
||||
|
||||
@@ -1,167 +0,0 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not differ across
|
||||
* modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
test.describe(title('datetime: readonly'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-readonly`));
|
||||
});
|
||||
|
||||
test('date should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
await expect(febFirstButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should navigate months via month-year button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await calendarMonthYear.click();
|
||||
await page.waitForChanges();
|
||||
await page.locator('.month-column .picker-item[data-value="3"]').click();
|
||||
await page.waitForChanges();
|
||||
await expect(calendarMonthYear).toHaveText('March 2022');
|
||||
|
||||
await expect(ionChange).not.toHaveReceivedEvent();
|
||||
});
|
||||
|
||||
test('should open picker using keyboard navigation', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthYearButton = page.locator('.calendar-month-year-toggle');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(monthYearButton).toBeFocused();
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
|
||||
await expect(marchPickerItem).toBeVisible();
|
||||
});
|
||||
|
||||
test('should view next month via next button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button');
|
||||
await nextMonthButton.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('March 2022');
|
||||
await expect(ionChange).not.toHaveReceivedEvent();
|
||||
});
|
||||
|
||||
test('should not change value when the month is changed via keyboard navigation', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = page.locator('.calendar-month-year-toggle');
|
||||
const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
|
||||
const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(monthYearButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(prevButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(nextButton).toBeFocused();
|
||||
|
||||
// check value before & after selecting via keyboard
|
||||
const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
expect(initialValue).toBe('2022-02-22T16:30:00');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('January 2022');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
// should not have changed
|
||||
expect(newValue).toBe('2022-02-22T16:30:00');
|
||||
});
|
||||
|
||||
test('clear button should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
await expect(clearButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user