mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00
chore(): sync with main
This commit is contained in:
Liam DeBeasi
222
CHANGELOG.md
222
CHANGELOG.md
@ -3,16 +3,49 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
|
||||
# [6.6.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
|
||||
* **modal:** dialog styles work on old chrome versions ([#26746](https://github.com/ionic-team/ionic-framework/issues/26746)) ([00d10f5](https://github.com/ionic-team/ionic-framework/commit/00d10f5f6ad53850505bdad94b659b8801a3309d)), closes [#26745](https://github.com/ionic-team/ionic-framework/issues/26745)
|
||||
|
||||
### Features
|
||||
|
||||
|
||||
* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic-framework/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic-framework/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de))
|
||||
* **picker-column:** assign custom aria-labels to column options ([#26749](https://github.com/ionic-team/ionic-framework/issues/26749)) ([daa89a2](https://github.com/ionic-team/ionic-framework/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63))
|
||||
* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic-framework/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic-framework/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
|
||||
* **content:** fullscreen values are recomputed on visible content ([#26847](https://github.com/ionic-team/ionic-framework/issues/26847)) ([6dcd98b](https://github.com/ionic-team/ionic-framework/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf)), closes [#26844](https://github.com/ionic-team/ionic-framework/issues/26844)
|
||||
* **modal:** keyboard listener removed on dismiss ([#26856](https://github.com/ionic-team/ionic-framework/issues/26856)) ([b4bcba3](https://github.com/ionic-team/ionic-framework/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0))
|
||||
* **overlays:** focus trap refs cleared on dismiss ([#26855](https://github.com/ionic-team/ionic-framework/issues/26855)) ([8d1d0fa](https://github.com/ionic-team/ionic-framework/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **content:** adjust transition shadow to match new iOS version ([#26839](https://github.com/ionic-team/ionic-framework/issues/26839)) ([f006e4b](https://github.com/ionic-team/ionic-framework/commit/f006e4bc09fcdcb5a34da4e17eb6037bf1e2445c))
|
||||
**content:** adjust transition shadow to match new iOS version ([#26839](https://github.com/ionic-team/ionic-framework/issues/26839)) ([f006e4b](https://github.com/ionic-team/ionic-framework/commit/f006e4bc09fcdcb5a34da4e17eb6037bf1e2445c))
|
||||
* **form:** shadow components using aria-labelledby do not use modern syntax ([#26836](https://github.com/ionic-team/ionic-framework/issues/26836)) ([fcfdd9e](https://github.com/ionic-team/ionic-framework/commit/fcfdd9e9ba9969947d8b9dfefbea4522d08753ed)), closes [#26829](https://github.com/ionic-team/ionic-framework/issues/26829)
|
||||
* **scroll-padding:** correct padding is added ([#26810](https://github.com/ionic-team/ionic-framework/issues/26810)) ([eefd17d](https://github.com/ionic-team/ionic-framework/commit/eefd17d492f2fe24639cf20603fac04d6eb94e3f)), closes [#26803](https://github.com/ionic-team/ionic-framework/issues/26803)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic-framework/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic-framework/commit/1dee16f3a25dedf831afc09f9c400a42e861beea))
|
||||
@ -30,7 +63,7 @@ The dev-preview `environmentInjector` property has been removed from `ion-tabs`
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
@ -40,189 +73,6 @@ The dev-preview `environmentInjector` property has been removed from `ion-tabs`
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **checkbox, radio:** label is announced once on ios ([#26770](https://github.com/ionic-team/ionic-framework/issues/26770)) ([87bc749](https://github.com/ionic-team/ionic-framework/commit/87bc7490404b0406b511833a85b686f1db791f66)), closes [#26769](https://github.com/ionic-team/ionic-framework/issues/26769)
|
||||
* **form:** legacy deprecation is logged correctly ([#26784](https://github.com/ionic-team/ionic-framework/issues/26784)) ([180ee63](https://github.com/ionic-team/ionic-framework/commit/180ee63ff7d93f8800756d732e565123a59bcd3a))
|
||||
* **many:** resolve import errors with stencil apps ([#26781](https://github.com/ionic-team/ionic-framework/issues/26781)) ([1eea054](https://github.com/ionic-team/ionic-framework/commit/1eea054c127146999302888180fd1585e1021783)), closes [#26778](https://github.com/ionic-team/ionic-framework/issues/26778)
|
||||
* **range:** allow overflow on range bar container ([#26751](https://github.com/ionic-team/ionic-framework/issues/26751)) ([edf696c](https://github.com/ionic-team/ionic-framework/commit/edf696cac9e4a35545750f99bcd49a87ec504905))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **textarea:** add legacy prop ([#26783](https://github.com/ionic-team/ionic-framework/issues/26783)) ([f7f6f1d](https://github.com/ionic-team/ionic-framework/commit/f7f6f1d9f9ffd30afbdccfb558bd73f42b112715))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic-framework/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input, textarea:** bottom content is rendered correctly ([#26739](https://github.com/ionic-team/ionic-framework/issues/26739)) ([39009ac](https://github.com/ionic-team/ionic-framework/commit/39009ac6eff0e51707efc3ef3981e1b7614eb2e3)), closes [#26737](https://github.com/ionic-team/ionic-framework/issues/26737)
|
||||
* **input:** update disabled opacity of md input ([#26514](https://github.com/ionic-team/ionic-framework/issues/26514)) ([90f4995](https://github.com/ionic-team/ionic-framework/commit/90f4995aa63c730d3feb1fc88582f034153c9b9c))
|
||||
* **radio:** remove radio min-height sizing ([#26719](https://github.com/ionic-team/ionic-framework/issues/26719)) ([2a6bba0](https://github.com/ionic-team/ionic-framework/commit/2a6bba0cb60666a4a97da427fa7d179aab49f148))
|
||||
* **range:** assign auto increment id by default ([#26740](https://github.com/ionic-team/ionic-framework/issues/26740)) ([92b06f2](https://github.com/ionic-team/ionic-framework/commit/92b06f2eb6f6980561c584193cb70157bedec12b))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **gesture:** reduce delay with adding and removing activated states ([#26741](https://github.com/ionic-team/ionic-framework/issues/26741)) ([4cff442](https://github.com/ionic-team/ionic-framework/commit/4cff442c4f25596e76a674f18e79d0531a464fbf)), closes [#23691](https://github.com/ionic-team/ionic-framework/issues/23691)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **range:** The `name` property on `ion-range` defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of the component.
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic-framework/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input, textarea, select:** do not show highlight in item ([#26689](https://github.com/ionic-team/ionic-framework/issues/26689)) ([16b60a6](https://github.com/ionic-team/ionic-framework/commit/16b60a612c1c8053cec3509749ad9e9b185b93be)), closes [#26687](https://github.com/ionic-team/ionic-framework/issues/26687)
|
||||
* **many:** legacy form control does not warn when using aria-labelledby ([#26699](https://github.com/ionic-team/ionic-framework/issues/26699)) ([63f8525](https://github.com/ionic-team/ionic-framework/commit/63f8525284abf2792305aebb27b9b439a8921bcf)), closes [#26698](https://github.com/ionic-team/ionic-framework/issues/26698)
|
||||
* **textarea:** textarea wrapper inherits height ([#26707](https://github.com/ionic-team/ionic-framework/issues/26707)) ([e6c7c57](https://github.com/ionic-team/ionic-framework/commit/e6c7c574665897d8fd2184797bc4017f688a2b0e))
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* revert base components feature ([#26692](https://github.com/ionic-team/ionic-framework/issues/26692)) ([b78b454](https://github.com/ionic-team/ionic-framework/commit/b78b454e089462afa866972b97bb06faa84bd319))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** do not adjust incorrect values ([#26086](https://github.com/ionic-team/ionic-framework/issues/26086)) ([e2cbeeb](https://github.com/ionic-team/ionic-framework/commit/e2cbeeb8ace969d49e16ccdc496adc559e40b1f2))
|
||||
* **action-sheet:** container animates in correctly ([#26347](https://github.com/ionic-team/ionic-framework/issues/26347)) ([1e855e7](https://github.com/ionic-team/ionic-framework/commit/1e855e7699a0b5c3792a9ef84e863df6fe552437)), closes [#25368](https://github.com/ionic-team/ionic-framework/issues/25368)
|
||||
* **angular:** inline overlays are exported ([#26333](https://github.com/ionic-team/ionic-framework/issues/26333)) ([f23fb34](https://github.com/ionic-team/ionic-framework/commit/f23fb342b279cd4646b432dd420b457f6c41ac12))
|
||||
* **angular:** null values are not converted to falsy value ([#26341](https://github.com/ionic-team/ionic-framework/issues/26341)) ([ce2e37b](https://github.com/ionic-team/ionic-framework/commit/ce2e37b1a172722630953dcb9560f334048c5b72))
|
||||
* **back-button:** update style for ios spec ([#26395](https://github.com/ionic-team/ionic-framework/issues/26395)) ([1a840c4](https://github.com/ionic-team/ionic-framework/commit/1a840c43e90a65a910877599f6a2d52ccc65db6b)), closes [#26393](https://github.com/ionic-team/ionic-framework/issues/26393)
|
||||
* **breadcrumb:** add aria-label to collapsed indicator ([#26615](https://github.com/ionic-team/ionic-framework/issues/26615)) ([f8a2c79](https://github.com/ionic-team/ionic-framework/commit/f8a2c7948894e82b1bc41fa45e1716bc733b087c))
|
||||
* **card-header:** reverse order of title and subtitle on ios ([#26084](https://github.com/ionic-team/ionic-framework/issues/26084)) ([2080890](https://github.com/ionic-team/ionic-framework/commit/2080890c11539938dd96c0f2ed08785100112587))
|
||||
* **datetime:** do not report timezone in ionChange ([#26183](https://github.com/ionic-team/ionic-framework/issues/26183)) ([3fb4caf](https://github.com/ionic-team/ionic-framework/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a)), closes [#25577](https://github.com/ionic-team/ionic-framework/issues/25577)
|
||||
* **datetime:** haptics are enabled only on ios ([#26370](https://github.com/ionic-team/ionic-framework/issues/26370)) ([8eec197](https://github.com/ionic-team/ionic-framework/commit/8eec1974da3dd4820d29126f17d1e14b5132c9f4)), closes [#25508](https://github.com/ionic-team/ionic-framework/issues/25508)
|
||||
* **input, searchbar, select, textarea:** placeholder has improved contrast ([#26486](https://github.com/ionic-team/ionic-framework/issues/26486)) ([6c82435](https://github.com/ionic-team/ionic-framework/commit/6c824350257fce45ce3b8c166a864efe6789c505))
|
||||
* **input, textarea:** inputs now scroll into view when tapping labels ([#25848](https://github.com/ionic-team/ionic-framework/issues/25848)) ([cb265d6](https://github.com/ionic-team/ionic-framework/commit/cb265d6cc6d4890608d2873a5726f5d7d37adae6))
|
||||
* **input, textarea:** padding is now added to content so inputs scroll above keyboard ([#25849](https://github.com/ionic-team/ionic-framework/issues/25849)) ([ba6b539](https://github.com/ionic-team/ionic-framework/commit/ba6b5396754151d884fa276a7227facd28a431df)), closes [#18532](https://github.com/ionic-team/ionic-framework/issues/18532)
|
||||
* **input:** clearOnEdit clears input when user initially types ([#26005](https://github.com/ionic-team/ionic-framework/issues/26005)) ([bf5e118](https://github.com/ionic-team/ionic-framework/commit/bf5e1183135d1d56a7ba0f63723724521f9d51d0))
|
||||
* **input:** highlight color does not apply to text ([#26352](https://github.com/ionic-team/ionic-framework/issues/26352)) ([e6f2a1f](https://github.com/ionic-team/ionic-framework/commit/e6f2a1f6a17df4c7718375d70afedcb42de4430c))
|
||||
* **input:** label receives focus when floating or stacked ([#26574](https://github.com/ionic-team/ionic-framework/issues/26574)) ([162c3f0](https://github.com/ionic-team/ionic-framework/commit/162c3f076a06dd0e5f97d6647255d67e7f4f3416))
|
||||
* **input:** min height is set on host ([#26495](https://github.com/ionic-team/ionic-framework/issues/26495)) ([0cd6e91](https://github.com/ionic-team/ionic-framework/commit/0cd6e918e83ff4c2cdc41e1e9da05fefe6ca5c84))
|
||||
* **item:** align iOS font size to spec ([#26445](https://github.com/ionic-team/ionic-framework/issues/26445)) ([eea91bb](https://github.com/ionic-team/ionic-framework/commit/eea91bbbe1a4ccc4797742ee4e2c320dba6d9517))
|
||||
* **item:** ios mode has correct padding ([#26511](https://github.com/ionic-team/ionic-framework/issues/26511)) ([96147ec](https://github.com/ionic-team/ionic-framework/commit/96147ec1b0fcfd31e48d450201fc32b58105dea7))
|
||||
* **many:** component wrappers inherit height ([#26611](https://github.com/ionic-team/ionic-framework/issues/26611)) ([e612253](https://github.com/ionic-team/ionic-framework/commit/e612253fc6297b92855b44810cb7531917b9318e))
|
||||
* **overlays:** dismiss on keydown to avoid chrome for windows and firefox bug ([#25811](https://github.com/ionic-team/ionic-framework/issues/25811)) ([a1ec9aa](https://github.com/ionic-team/ionic-framework/commit/a1ec9aabd806964206010000294b8781c516c4f3)), closes [#25802](https://github.com/ionic-team/ionic-framework/issues/25802)
|
||||
* **overlays:** triggerController warns about missing triggers ([#26651](https://github.com/ionic-team/ionic-framework/issues/26651)) ([a7c2c55](https://github.com/ionic-team/ionic-framework/commit/a7c2c555f34795a3a9349987141eef929ad88807))
|
||||
* **range:** range matches iOS design specification ([#25873](https://github.com/ionic-team/ionic-framework/issues/25873)) ([da05ffe](https://github.com/ionic-team/ionic-framework/commit/da05ffe462b36ce6fd6cdaeb25cf0f8f4b0e7ef2)), closes [#25872](https://github.com/ionic-team/ionic-framework/issues/25872)
|
||||
* **segment:** click event triggers ionChange ([#26162](https://github.com/ionic-team/ionic-framework/issues/26162)) ([70781e4](https://github.com/ionic-team/ionic-framework/commit/70781e4c9f93e8e58917083da43536389ac5332e))
|
||||
* **select:** chevron icon is now an ionicon ([#26484](https://github.com/ionic-team/ionic-framework/issues/26484)) ([0823c09](https://github.com/ionic-team/ionic-framework/commit/0823c09d9c5f4f07a847fecfd3d3c1915eeb1ddf))
|
||||
* **select:** modern component takes up full line ([#26670](https://github.com/ionic-team/ionic-framework/issues/26670)) ([4d24b32](https://github.com/ionic-team/ionic-framework/commit/4d24b328e2021f0d14b278df7535c9bdb9851952))
|
||||
* **textarea:** add correct state styles ([#26676](https://github.com/ionic-team/ionic-framework/issues/26676)) ([1e1d3fb](https://github.com/ionic-team/ionic-framework/commit/1e1d3fbddca3bb83233322d42979ae68b26c11a5))
|
||||
* **textarea:** clearOnEdit clears textarea when user initially types ([#26006](https://github.com/ionic-team/ionic-framework/issues/26006)) ([f7176bb](https://github.com/ionic-team/ionic-framework/commit/f7176bbb44c230d6f20b023942c577236e676b02))
|
||||
* **textarea:** render icon for clearing input ([3271ecf](https://github.com/ionic-team/ionic-framework/commit/3271ecf1dec4f9baf238ea94e4047f2c26835b4b))
|
||||
* **toggle:** emitStyles only fires with legacy control ([#26507](https://github.com/ionic-team/ionic-framework/issues/26507)) ([ec9f8cd](https://github.com/ionic-team/ionic-framework/commit/ec9f8cd5f1228e321b1c44aa0081c3c507278a8c))
|
||||
* **vue:** loading is created as an inline component ([#26191](https://github.com/ionic-team/ionic-framework/issues/26191)) ([84990ce](https://github.com/ionic-team/ionic-framework/commit/84990cec88461f20d802356ceed7659de189a353))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **config:** remove stencil extras ([#26461](https://github.com/ionic-team/ionic-framework/issues/26461)) ([bd4027b](https://github.com/ionic-team/ionic-framework/commit/bd4027b0fa1494c58e4ab7c804acfa053c63113a))
|
||||
* **core:** remove global hidden attribute ([#25829](https://github.com/ionic-team/ionic-framework/issues/25829)) ([f5a6b5a](https://github.com/ionic-team/ionic-framework/commit/f5a6b5a4c434167cafd9060911ccbfda2a89734c)), closes [#17583](https://github.com/ionic-team/ionic-framework/issues/17583)
|
||||
* **modal:** remove swipeToClose in favor of canDismiss ([#26050](https://github.com/ionic-team/ionic-framework/issues/26050)) ([1f3ddf2](https://github.com/ionic-team/ionic-framework/commit/1f3ddf2370c29f0fd2dd96aa9b3927ef96bdc5ae))
|
||||
* **picker:** remove refresh key ([#26340](https://github.com/ionic-team/ionic-framework/issues/26340)) ([0fbcc5b](https://github.com/ionic-team/ionic-framework/commit/0fbcc5b9a97861dc31742db80b187d077a0d6750))
|
||||
* **react:** only ship es modules ([#26044](https://github.com/ionic-team/ionic-framework/issues/26044)) ([c946af2](https://github.com/ionic-team/ionic-framework/commit/c946af29d3d65e4e78c03f0bbcb2376fd9d8c469))
|
||||
* **types:** remove overlay attribute interfaces ([#26181](https://github.com/ionic-team/ionic-framework/issues/26181)) ([322a1db](https://github.com/ionic-team/ionic-framework/commit/322a1dbcd00fc1f3db17fb9fb46ba91ba164acd3))
|
||||
* **vue:** only ship es modules ([#26054](https://github.com/ionic-team/ionic-framework/issues/26054)) ([86bbed0](https://github.com/ionic-team/ionic-framework/commit/86bbed07fc51fa1e3771f0198211c5064606e5bb)), closes [#25104](https://github.com/ionic-team/ionic-framework/issues/25104)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **accordion:** ionChange will only emit from user committed changes ([#25922](https://github.com/ionic-team/ionic-framework/issues/25922)) ([4eea9fa](https://github.com/ionic-team/ionic-framework/commit/4eea9fa5c07d2a48bf5d224cd9b9e63453125b77))
|
||||
* **action-sheet:** use action sheet overlay inline ([#26172](https://github.com/ionic-team/ionic-framework/issues/26172)) ([92b763a](https://github.com/ionic-team/ionic-framework/commit/92b763a538f1c935e10d90c3f4af1debf1cab2c3))
|
||||
* **alert:** add ability to use alert inline ([#26316](https://github.com/ionic-team/ionic-framework/issues/26316)) ([08c0a55](https://github.com/ionic-team/ionic-framework/commit/08c0a5520a4f9be19d88644df26f4d38587985fa))
|
||||
* **base-components:** add ability to remove ios and md theme ([#26669](https://github.com/ionic-team/ionic-framework/issues/26669)) ([18f109c](https://github.com/ionic-team/ionic-framework/commit/18f109c7dae97d4e74bee9b72a341aeafd95b222))
|
||||
* **checkbox:** component can be used outside ion-item ([#26518](https://github.com/ionic-team/ionic-framework/issues/26518)) ([9d52e70](https://github.com/ionic-team/ionic-framework/commit/9d52e703610d0211667f0152e6c2b90ec6f13198))
|
||||
* **checkbox:** ionChange fires on user interaction ([#25923](https://github.com/ionic-team/ionic-framework/issues/25923)) ([a6b2629](https://github.com/ionic-team/ionic-framework/commit/a6b2629ede9f2b0e16343b9afabf68eb53cacc17))
|
||||
* **datetime:** ionChange will only emit from user committed changes ([#26083](https://github.com/ionic-team/ionic-framework/issues/26083)) ([cc2af20](https://github.com/ionic-team/ionic-framework/commit/cc2af202a95c049c9dd11ffd50c0dec3c84bf3c0)), closes [#20873](https://github.com/ionic-team/ionic-framework/issues/20873) [#24452](https://github.com/ionic-team/ionic-framework/issues/24452)
|
||||
* **input, textarea:** change default debounce to undefined ([#26073](https://github.com/ionic-team/ionic-framework/issues/26073)) ([c45d054](https://github.com/ionic-team/ionic-framework/commit/c45d05476b34648b59dc8d407a8a1c9f8bd4f409))
|
||||
* **input, textarea:** ionInput and ionChange pass event and value ([#26176](https://github.com/ionic-team/ionic-framework/issues/26176)) ([eea6ba9](https://github.com/ionic-team/ionic-framework/commit/eea6ba996ce0f71546f5a14109d0d279400a27e5))
|
||||
* **input, toggle:** add escape hatch property ([#26416](https://github.com/ionic-team/ionic-framework/issues/26416)) ([1278a29](https://github.com/ionic-team/ionic-framework/commit/1278a292f37a27533b07b78f1be6d266b37976c7))
|
||||
* **input:** component can be used outside of ion-item ([#26283](https://github.com/ionic-team/ionic-framework/issues/26283)) ([44472ae](https://github.com/ionic-team/ionic-framework/commit/44472aeb9f12585d7b5d40b5721d4281b66b5004)), closes [#20153](https://github.com/ionic-team/ionic-framework/issues/20153) [#19084](https://github.com/ionic-team/ionic-framework/issues/19084) [#22736](https://github.com/ionic-team/ionic-framework/issues/22736)
|
||||
* **input:** debounce controls the timing to delay the ionInput event ([#25969](https://github.com/ionic-team/ionic-framework/issues/25969)) ([35041b2](https://github.com/ionic-team/ionic-framework/commit/35041b2f3c99135d292500a662b889bdaaec6876))
|
||||
* **input:** ionChange will only emit from user committed changes ([#25858](https://github.com/ionic-team/ionic-framework/issues/25858)) ([8732b7b](https://github.com/ionic-team/ionic-framework/commit/8732b7bdb76320d5eeba1121ac5f5eefa343526f)), closes [#20106](https://github.com/ionic-team/ionic-framework/issues/20106) [#20061](https://github.com/ionic-team/ionic-framework/issues/20061)
|
||||
* **loading:** use loading overlay inline ([#26153](https://github.com/ionic-team/ionic-framework/issues/26153)) ([34ca337](https://github.com/ionic-team/ionic-framework/commit/34ca337b8af27b144fb44428c8ed8cf07fc79bfc))
|
||||
* **picker:** add ability to use picker inline ([#26336](https://github.com/ionic-team/ionic-framework/issues/26336)) ([c0a8501](https://github.com/ionic-team/ionic-framework/commit/c0a85016572956149ed4f01109f11154d7b5cb57))
|
||||
* **radio-group:** ionChange will only emit from user committed changes ([#26223](https://github.com/ionic-team/ionic-framework/issues/26223)) ([c299d36](https://github.com/ionic-team/ionic-framework/commit/c299d3666aae96d0e67ce4d2c70efbe95bee81da))
|
||||
* **radio:** component can be used outside of ion-item ([#26582](https://github.com/ionic-team/ionic-framework/issues/26582)) ([9761b0a](https://github.com/ionic-team/ionic-framework/commit/9761b0a092e50ac4cc9176b6bcd5b9d29a5b22b3))
|
||||
* **range:** component can be used outside of ion-item ([#26479](https://github.com/ionic-team/ionic-framework/issues/26479)) ([49baad8](https://github.com/ionic-team/ionic-framework/commit/49baad8ee6cfe7e26068f4c9954d4a59d343b339))
|
||||
* **range:** ionChange will only emit from user committed changes ([#26089](https://github.com/ionic-team/ionic-framework/issues/26089)) ([d1fb7b0](https://github.com/ionic-team/ionic-framework/commit/d1fb7b039b8e11e9d9ede850f90b977a46b52de8))
|
||||
* **searchbar:** ionChange will only emit from user committed changes ([#26026](https://github.com/ionic-team/ionic-framework/issues/26026)) ([b052d3b](https://github.com/ionic-team/ionic-framework/commit/b052d3b2622b795cde102591f0191338e15b14a0))
|
||||
* **segment:** ionChange will only emit from user committed changes ([#25934](https://github.com/ionic-team/ionic-framework/issues/25934)) ([a03c8af](https://github.com/ionic-team/ionic-framework/commit/a03c8afb3dc4e6672beae680c61c89477478f28b))
|
||||
* **select:** component can be used outside ion-item ([#26572](https://github.com/ionic-team/ionic-framework/issues/26572)) ([02640b5](https://github.com/ionic-team/ionic-framework/commit/02640b5795c4fb8a46f0cdc8903f2a08abfa9135))
|
||||
* **select:** ionChange will only emit from user committed changes ([#26066](https://github.com/ionic-team/ionic-framework/issues/26066)) ([34c4137](https://github.com/ionic-team/ionic-framework/commit/34c41378682a202d4fab11aad171df7f55f4c243))
|
||||
* **slides:** remove ion-slide, ion-slides, and IonicSwiper module ([#25868](https://github.com/ionic-team/ionic-framework/issues/25868)) ([d478e03](https://github.com/ionic-team/ionic-framework/commit/d478e03914fed15766c893738d6386d7623d066d))
|
||||
* **textarea:** component can be used outside of ion-item ([#26674](https://github.com/ionic-team/ionic-framework/issues/26674)) ([8d3edd0](https://github.com/ionic-team/ionic-framework/commit/8d3edd049dfdb2a781d80da810a5bee3b490b7b6))
|
||||
* **textarea:** ionChange will only emit from user committed changes ([#25953](https://github.com/ionic-team/ionic-framework/issues/25953)) ([68bae80](https://github.com/ionic-team/ionic-framework/commit/68bae80a51dae70c4cd7e598c1f2eabb025f173e))
|
||||
* **toast:** add ability to use toast inline ([#26215](https://github.com/ionic-team/ionic-framework/issues/26215)) ([003de44](https://github.com/ionic-team/ionic-framework/commit/003de44d9283d23ecfdf1ab5fada2b7a372a4ca9))
|
||||
* **toggle:** component can be used outside of ion-item ([#26357](https://github.com/ionic-team/ionic-framework/issues/26357)) ([c74901c](https://github.com/ionic-team/ionic-framework/commit/c74901c973c153ce1954646ef7944f7db193ea28)), closes [#25570](https://github.com/ionic-team/ionic-framework/issues/25570) [#23213](https://github.com/ionic-team/ionic-framework/issues/23213)
|
||||
* **toggle:** ionChange will only emit from user committed changes ([#26078](https://github.com/ionic-team/ionic-framework/issues/26078)) ([85d3bd9](https://github.com/ionic-team/ionic-framework/commit/85d3bd99be3ae0f33a480e256381f7125f3389fd))
|
||||
* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic-framework/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic-framework/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **item:** remove delegatesFocus patch for iOS 13 ([#25822](https://github.com/ionic-team/ionic-framework/issues/25822)) ([ee3467c](https://github.com/ionic-team/ionic-framework/commit/ee3467c9f1aa415ff6bda19e460b5c3482b94efc))
|
||||
* **many:** reduce delay when performing overlay or page transitions ([#26189](https://github.com/ionic-team/ionic-framework/issues/26189)) ([30e3a14](https://github.com/ionic-team/ionic-framework/commit/30e3a1485d9bc94b31c297bdd05fa847b4bcfb56)), closes [#24346](https://github.com/ionic-team/ionic-framework/issues/24346)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **config:** The supported version of Firefox for Ionic v7 has changed to Firefox v70+
|
||||
* **input, searchbar, select, textarea:** The default value for the `--placeholder-opacity` CSS Variable on `ion-input`, `ion-searchbar`, `ion-select`, and `ion-textarea` has been updated to `0.6`.
|
||||
* **select:** The `icon` CSS Shadow Part for `ion-select` now targets an `ion-icon` component.
|
||||
* **datetime:** The haptics when swiping the wheel picker are now enabled only on iOS.
|
||||
* **toggle:** The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
|
||||
* **angular:** Datetime:
|
||||
|
||||
Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
|
||||
|
||||
Angular:
|
||||
|
||||
`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`.
|
||||
* **picker:** The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view.
|
||||
* **input, textarea:** The `detail` payload for the `ionInput` event on `ion-input` and `ion-textarea` now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
* **datetime:** 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.
|
||||
* **types:** `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
* **card-header:** - 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.
|
||||
* **accordion-group:** 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.
|
||||
* **select:** `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.
|
||||
* **react:** `@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.
|
||||
* **vue:** `@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.
|
||||
* **modal:** - 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`.
|
||||
* **checkbox:** `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.
|
||||
* **accordion:** `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.
|
||||
* **core:** 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;
|
||||
}
|
||||
```
|
||||
* **overlays:** 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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic-framework/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
@ -3,9 +3,28 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de))
|
||||
* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
### Features
|
||||
|
||||
* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic/commit/1dee16f3a25dedf831afc09f9c400a42e861beea))
|
||||
@ -23,102 +42,6 @@ The dev-preview `environmentInjector` property has been removed from `ion-tabs`
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **textarea:** add legacy prop ([#26783](https://github.com/ionic-team/ionic/issues/26783)) ([f7f6f1d](https://github.com/ionic-team/ionic/commit/f7f6f1d9f9ffd30afbdccfb558bd73f42b112715))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* revert base components feature ([#26692](https://github.com/ionic-team/ionic/issues/26692)) ([b78b454](https://github.com/ionic-team/ionic/commit/b78b454e089462afa866972b97bb06faa84bd319))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** inline overlays are exported ([#26333](https://github.com/ionic-team/ionic/issues/26333)) ([f23fb34](https://github.com/ionic-team/ionic/commit/f23fb342b279cd4646b432dd420b457f6c41ac12))
|
||||
* **angular:** null values are not converted to falsy value ([#26341](https://github.com/ionic-team/ionic/issues/26341)) ([ce2e37b](https://github.com/ionic-team/ionic/commit/ce2e37b1a172722630953dcb9560f334048c5b72))
|
||||
* **input:** clearOnEdit clears input when user initially types ([#26005](https://github.com/ionic-team/ionic/issues/26005)) ([bf5e118](https://github.com/ionic-team/ionic/commit/bf5e1183135d1d56a7ba0f63723724521f9d51d0))
|
||||
* **textarea:** clearOnEdit clears textarea when user initially types ([#26006](https://github.com/ionic-team/ionic/issues/26006)) ([f7176bb](https://github.com/ionic-team/ionic/commit/f7176bbb44c230d6f20b023942c577236e676b02))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **modal:** remove swipeToClose in favor of canDismiss ([#26050](https://github.com/ionic-team/ionic/issues/26050)) ([1f3ddf2](https://github.com/ionic-team/ionic/commit/1f3ddf2370c29f0fd2dd96aa9b3927ef96bdc5ae))
|
||||
* **types:** remove overlay attribute interfaces ([#26181](https://github.com/ionic-team/ionic/issues/26181)) ([322a1db](https://github.com/ionic-team/ionic/commit/322a1dbcd00fc1f3db17fb9fb46ba91ba164acd3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **accordion:** ionChange will only emit from user committed changes ([#25922](https://github.com/ionic-team/ionic/issues/25922)) ([4eea9fa](https://github.com/ionic-team/ionic/commit/4eea9fa5c07d2a48bf5d224cd9b9e63453125b77))
|
||||
* **base-components:** add ability to remove ios and md theme ([#26669](https://github.com/ionic-team/ionic/issues/26669)) ([18f109c](https://github.com/ionic-team/ionic/commit/18f109c7dae97d4e74bee9b72a341aeafd95b222))
|
||||
* **checkbox:** component can be used outside ion-item ([#26518](https://github.com/ionic-team/ionic/issues/26518)) ([9d52e70](https://github.com/ionic-team/ionic/commit/9d52e703610d0211667f0152e6c2b90ec6f13198))
|
||||
* **checkbox:** ionChange fires on user interaction ([#25923](https://github.com/ionic-team/ionic/issues/25923)) ([a6b2629](https://github.com/ionic-team/ionic/commit/a6b2629ede9f2b0e16343b9afabf68eb53cacc17))
|
||||
* **datetime:** ionChange will only emit from user committed changes ([#26083](https://github.com/ionic-team/ionic/issues/26083)) ([cc2af20](https://github.com/ionic-team/ionic/commit/cc2af202a95c049c9dd11ffd50c0dec3c84bf3c0)), closes [#20873](https://github.com/ionic-team/ionic/issues/20873) [#24452](https://github.com/ionic-team/ionic/issues/24452)
|
||||
* **input, textarea:** ionInput and ionChange pass event and value ([#26176](https://github.com/ionic-team/ionic/issues/26176)) ([eea6ba9](https://github.com/ionic-team/ionic/commit/eea6ba996ce0f71546f5a14109d0d279400a27e5))
|
||||
* **input, toggle:** add escape hatch property ([#26416](https://github.com/ionic-team/ionic/issues/26416)) ([1278a29](https://github.com/ionic-team/ionic/commit/1278a292f37a27533b07b78f1be6d266b37976c7))
|
||||
* **input:** component can be used outside of ion-item ([#26283](https://github.com/ionic-team/ionic/issues/26283)) ([44472ae](https://github.com/ionic-team/ionic/commit/44472aeb9f12585d7b5d40b5721d4281b66b5004)), closes [#20153](https://github.com/ionic-team/ionic/issues/20153) [#19084](https://github.com/ionic-team/ionic/issues/19084) [#22736](https://github.com/ionic-team/ionic/issues/22736)
|
||||
* **input:** ionChange will only emit from user committed changes ([#25858](https://github.com/ionic-team/ionic/issues/25858)) ([8732b7b](https://github.com/ionic-team/ionic/commit/8732b7bdb76320d5eeba1121ac5f5eefa343526f)), closes [#20106](https://github.com/ionic-team/ionic/issues/20106) [#20061](https://github.com/ionic-team/ionic/issues/20061)
|
||||
* **picker:** add ability to use picker inline ([#26336](https://github.com/ionic-team/ionic/issues/26336)) ([c0a8501](https://github.com/ionic-team/ionic/commit/c0a85016572956149ed4f01109f11154d7b5cb57))
|
||||
* **radio:** component can be used outside of ion-item ([#26582](https://github.com/ionic-team/ionic/issues/26582)) ([9761b0a](https://github.com/ionic-team/ionic/commit/9761b0a092e50ac4cc9176b6bcd5b9d29a5b22b3))
|
||||
* **range:** component can be used outside of ion-item ([#26479](https://github.com/ionic-team/ionic/issues/26479)) ([49baad8](https://github.com/ionic-team/ionic/commit/49baad8ee6cfe7e26068f4c9954d4a59d343b339))
|
||||
* **range:** ionChange will only emit from user committed changes ([#26089](https://github.com/ionic-team/ionic/issues/26089)) ([d1fb7b0](https://github.com/ionic-team/ionic/commit/d1fb7b039b8e11e9d9ede850f90b977a46b52de8))
|
||||
* **searchbar:** ionChange will only emit from user committed changes ([#26026](https://github.com/ionic-team/ionic/issues/26026)) ([b052d3b](https://github.com/ionic-team/ionic/commit/b052d3b2622b795cde102591f0191338e15b14a0))
|
||||
* **select:** component can be used outside ion-item ([#26572](https://github.com/ionic-team/ionic/issues/26572)) ([02640b5](https://github.com/ionic-team/ionic/commit/02640b5795c4fb8a46f0cdc8903f2a08abfa9135))
|
||||
* **select:** ionChange will only emit from user committed changes ([#26066](https://github.com/ionic-team/ionic/issues/26066)) ([34c4137](https://github.com/ionic-team/ionic/commit/34c41378682a202d4fab11aad171df7f55f4c243))
|
||||
* **slides:** remove ion-slide, ion-slides, and IonicSwiper module ([#25868](https://github.com/ionic-team/ionic/issues/25868)) ([d478e03](https://github.com/ionic-team/ionic/commit/d478e03914fed15766c893738d6386d7623d066d))
|
||||
* **textarea:** component can be used outside of ion-item ([#26674](https://github.com/ionic-team/ionic/issues/26674)) ([8d3edd0](https://github.com/ionic-team/ionic/commit/8d3edd049dfdb2a781d80da810a5bee3b490b7b6))
|
||||
* **textarea:** ionChange will only emit from user committed changes ([#25953](https://github.com/ionic-team/ionic/issues/25953)) ([68bae80](https://github.com/ionic-team/ionic/commit/68bae80a51dae70c4cd7e598c1f2eabb025f173e))
|
||||
* **toggle:** component can be used outside of ion-item ([#26357](https://github.com/ionic-team/ionic/issues/26357)) ([c74901c](https://github.com/ionic-team/ionic/commit/c74901c973c153ce1954646ef7944f7db193ea28)), closes [#25570](https://github.com/ionic-team/ionic/issues/25570) [#23213](https://github.com/ionic-team/ionic/issues/23213)
|
||||
* **toggle:** ionChange will only emit from user committed changes ([#26078](https://github.com/ionic-team/ionic/issues/26078)) ([85d3bd9](https://github.com/ionic-team/ionic/commit/85d3bd99be3ae0f33a480e256381f7125f3389fd))
|
||||
* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **many:** reduce delay when performing overlay or page transitions ([#26189](https://github.com/ionic-team/ionic/issues/26189)) ([30e3a14](https://github.com/ionic-team/ionic/commit/30e3a1485d9bc94b31c297bdd05fa847b4bcfb56)), closes [#24346](https://github.com/ionic-team/ionic/issues/24346)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **toggle:** The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
|
||||
* **angular:** Datetime:
|
||||
|
||||
Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value.
|
||||
|
||||
Angular:
|
||||
|
||||
`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`.
|
||||
* **input, textarea:** The `detail` payload for the `ionInput` event on `ion-input` and `ion-textarea` now contains an object with the current `value` as well as the native event that triggered `ionInput`.
|
||||
* **types:** `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
* **select:** `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.
|
||||
* **modal:** - 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`.
|
||||
* **checkbox:** `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.
|
||||
* **accordion:** `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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
@ -657,7 +657,7 @@ Set `scrollEvents` to `true` to enable.
|
||||
|
||||
|
||||
@ProxyCmp({
|
||||
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
|
||||
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
|
||||
methods: ['confirm', 'reset', 'cancel']
|
||||
})
|
||||
@Component({
|
||||
@ -665,7 +665,7 @@ Set `scrollEvents` to `true` to enable.
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: '<ng-content></ng-content>',
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
||||
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
|
||||
inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
|
||||
})
|
||||
export class IonDatetime {
|
||||
protected el: HTMLElement;
|
||||
@ -2257,7 +2257,7 @@ export declare interface IonTitle extends Components.IonTitle {}
|
||||
|
||||
|
||||
@ProxyCmp({
|
||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
|
||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
|
||||
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
|
||||
})
|
||||
@Component({
|
||||
@ -2265,7 +2265,7 @@ export declare interface IonTitle extends Components.IonTitle {}
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: '<ng-content></ng-content>',
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
|
||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger'],
|
||||
})
|
||||
export class IonToast {
|
||||
protected el: HTMLElement;
|
||||
|
||||
@ -124,6 +124,7 @@ export {
|
||||
TextareaCustomEvent,
|
||||
ToastOptions,
|
||||
ToastButton,
|
||||
ToastLayout,
|
||||
ToggleChangeEventDetail,
|
||||
ToggleCustomEvent,
|
||||
} from '@ionic/core';
|
||||
|
||||
@ -3,6 +3,37 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** dialog styles work on old chrome versions ([#26746](https://github.com/ionic-team/ionic/issues/26746)) ([00d10f5](https://github.com/ionic-team/ionic/commit/00d10f5f6ad53850505bdad94b659b8801a3309d)), closes [#26745](https://github.com/ionic-team/ionic/issues/26745)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de))
|
||||
* **picker-column:** assign custom aria-labels to column options ([#26749](https://github.com/ionic-team/ionic/issues/26749)) ([daa89a2](https://github.com/ionic-team/ionic/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63))
|
||||
* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **content:** fullscreen values are recomputed on visible content ([#26847](https://github.com/ionic-team/ionic/issues/26847)) ([6dcd98b](https://github.com/ionic-team/ionic/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf)), closes [#26844](https://github.com/ionic-team/ionic/issues/26844)
|
||||
* **modal:** keyboard listener removed on dismiss ([#26856](https://github.com/ionic-team/ionic/issues/26856)) ([b4bcba3](https://github.com/ionic-team/ionic/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0))
|
||||
* **overlays:** focus trap refs cleared on dismiss ([#26855](https://github.com/ionic-team/ionic/issues/26855)) ([8d1d0fa](https://github.com/ionic-team/ionic/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
|
||||
|
||||
@ -392,6 +392,7 @@ ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,fal
|
||||
ion-datetime,prop,disabled,boolean,false,false,false
|
||||
ion-datetime,prop,doneText,string,'Done',false,false
|
||||
ion-datetime,prop,firstDayOfWeek,number,0,false,false
|
||||
ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
|
||||
ion-datetime,prop,hourCycle,"h12" | "h23" | undefined,undefined,false,false
|
||||
ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
|
||||
ion-datetime,prop,isDateEnabled,((dateIsoString: string) => boolean) | undefined,undefined,false,false
|
||||
@ -1420,6 +1421,7 @@ ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,fals
|
||||
ion-toast,prop,icon,string | undefined,undefined,false,false
|
||||
ion-toast,prop,isOpen,boolean,false,false,false
|
||||
ion-toast,prop,keyboardClose,boolean,false,false,false
|
||||
ion-toast,prop,layout,"baseline" | "stacked",'baseline',false,false
|
||||
ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
|
||||
ion-toast,prop,mode,"ios" | "md",undefined,false,false
|
||||
|
||||
1
core/package-lock.json
generated
1
core/package-lock.json
generated
@ -48,7 +48,6 @@
|
||||
}
|
||||
},
|
||||
"custom-rules": {
|
||||
"name": "eslint-plugin-custom-rules",
|
||||
"version": "1.0.0",
|
||||
"dev": true
|
||||
},
|
||||
|
||||
40
core/src/components.d.ts
vendored
40
core/src/components.d.ts
vendored
@ -6,7 +6,7 @@
|
||||
*/
|
||||
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
|
||||
import { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
|
||||
import { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
|
||||
import { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, OverlayEventDetail as OverlayEventDetail1, StyleEventDetail, TextFieldTypes, ToastButton } from "./interface";
|
||||
import { ActionSheetButton } from "./components/action-sheet/action-sheet-interface";
|
||||
import { OverlayEventDetail } from "./utils/overlays-interface";
|
||||
import { IonicSafeString } from "./utils/sanitization";
|
||||
@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
|
||||
import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
|
||||
import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
|
||||
import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
|
||||
import { DatetimeChangeEventDetail, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
import { SpinnerTypes } from "./components/spinner/spinner-configs";
|
||||
import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
|
||||
import { CounterFormatter } from "./components/item/item-interface";
|
||||
@ -39,10 +39,10 @@ import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
|
||||
import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
import { ToastButton, ToastPosition } from "./components/toast/toast-interface";
|
||||
import { ToastLayout, ToastPosition } from "./components/toast/toast-interface";
|
||||
import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
|
||||
export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
|
||||
export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
|
||||
export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, OverlayEventDetail as OverlayEventDetail1, StyleEventDetail, TextFieldTypes, ToastButton } from "./interface";
|
||||
export { ActionSheetButton } from "./components/action-sheet/action-sheet-interface";
|
||||
export { OverlayEventDetail } from "./utils/overlays-interface";
|
||||
export { IonicSafeString } from "./utils/sanitization";
|
||||
@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
|
||||
export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
|
||||
export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
|
||||
export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
|
||||
export { DatetimeChangeEventDetail, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
export { SpinnerTypes } from "./components/spinner/spinner-configs";
|
||||
export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
|
||||
export { CounterFormatter } from "./components/item/item-interface";
|
||||
@ -75,7 +75,7 @@ export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
|
||||
export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
export { ToastButton, ToastPosition } from "./components/toast/toast-interface";
|
||||
export { ToastLayout, ToastPosition } from "./components/toast/toast-interface";
|
||||
export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
|
||||
export namespace Components {
|
||||
interface IonAccordion {
|
||||
@ -854,6 +854,10 @@ export namespace Components {
|
||||
* The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
|
||||
*/
|
||||
"firstDayOfWeek": number;
|
||||
/**
|
||||
* Used to apply custom text and background colors to specific dates. Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors. Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
|
||||
*/
|
||||
"highlightedDates"?: DatetimeHighlight[] | DatetimeHighlightCallback;
|
||||
/**
|
||||
* The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
|
||||
*/
|
||||
@ -3105,6 +3109,10 @@ export namespace Components {
|
||||
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
||||
*/
|
||||
"keyboardClose": boolean;
|
||||
/**
|
||||
* Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
|
||||
*/
|
||||
"layout": ToastLayout;
|
||||
/**
|
||||
* Animation to use when the toast is dismissed.
|
||||
*/
|
||||
@ -3120,11 +3128,11 @@ export namespace Components {
|
||||
/**
|
||||
* Returns a promise that resolves when the toast did dismiss.
|
||||
*/
|
||||
"onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
|
||||
"onDidDismiss": <T = any>() => Promise<OverlayEventDetail1<T>>;
|
||||
/**
|
||||
* Returns a promise that resolves when the toast will dismiss.
|
||||
*/
|
||||
"onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
|
||||
"onWillDismiss": <T = any>() => Promise<OverlayEventDetail1<T>>;
|
||||
"overlayIndex": number;
|
||||
/**
|
||||
* The position of the toast on the screen.
|
||||
@ -4844,6 +4852,10 @@ declare namespace LocalJSX {
|
||||
* The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
|
||||
*/
|
||||
"firstDayOfWeek"?: number;
|
||||
/**
|
||||
* Used to apply custom text and background colors to specific dates. Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors. Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
|
||||
*/
|
||||
"highlightedDates"?: DatetimeHighlight[] | DatetimeHighlightCallback;
|
||||
/**
|
||||
* The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
|
||||
*/
|
||||
@ -7193,6 +7205,10 @@ declare namespace LocalJSX {
|
||||
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
||||
*/
|
||||
"keyboardClose"?: boolean;
|
||||
/**
|
||||
* Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
|
||||
*/
|
||||
"layout"?: ToastLayout;
|
||||
/**
|
||||
* Animation to use when the toast is dismissed.
|
||||
*/
|
||||
@ -7208,7 +7224,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss.
|
||||
*/
|
||||
"onDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
|
||||
"onDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail1>) => void;
|
||||
/**
|
||||
* Emitted after the toast has presented. Shorthand for ionToastWillDismiss.
|
||||
*/
|
||||
@ -7216,7 +7232,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted after the toast has dismissed.
|
||||
*/
|
||||
"onIonToastDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
|
||||
"onIonToastDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail1>) => void;
|
||||
/**
|
||||
* Emitted after the toast has presented.
|
||||
*/
|
||||
@ -7224,7 +7240,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted before the toast has dismissed.
|
||||
*/
|
||||
"onIonToastWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
|
||||
"onIonToastWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail1>) => void;
|
||||
/**
|
||||
* Emitted before the toast has presented.
|
||||
*/
|
||||
@ -7232,7 +7248,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss.
|
||||
*/
|
||||
"onWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
|
||||
"onWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail1>) => void;
|
||||
/**
|
||||
* Emitted before the toast has presented. Shorthand for ionToastWillPresent.
|
||||
*/
|
||||
|
||||
@ -151,6 +151,16 @@ export class Content implements ComponentInterface {
|
||||
}
|
||||
|
||||
this.resizeTimeout = setTimeout(() => {
|
||||
/**
|
||||
* Resize should only happen
|
||||
* if the content is visible.
|
||||
* When the content is hidden
|
||||
* then offsetParent will be null.
|
||||
*/
|
||||
if (this.el.offsetParent === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.resize();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
@ -20,3 +20,17 @@ export interface DatetimeParts {
|
||||
export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
|
||||
|
||||
export type TitleSelectedDatesFormatter = (selectedDates: string[]) => string;
|
||||
|
||||
export type DatetimeHighlightStyle =
|
||||
| {
|
||||
textColor: string;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
| {
|
||||
textColor?: string;
|
||||
backgroundColor: string;
|
||||
};
|
||||
|
||||
export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
|
||||
|
||||
export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
|
||||
|
||||
@ -92,14 +92,22 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
:host .calendar-day:after {
|
||||
.calendar-day:focus .calendar-day-highlight,
|
||||
.calendar-day.calendar-day-active .calendar-day-highlight {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
:host .calendar-day:focus:after {
|
||||
.calendar-day.calendar-day-active .calendar-day-highlight {
|
||||
background: current-color(base);
|
||||
}
|
||||
|
||||
// !important is needed here to overwrite custom highlight background, which is inline.
|
||||
// Does not apply to the active state because highlights aren't applied at all there.
|
||||
.calendar-day:focus .calendar-day-highlight {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
background: current-color(base) !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Day that today but not selected
|
||||
* should have ion-color for text color.
|
||||
@ -119,10 +127,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:host .calendar-day.calendar-day-active:after {
|
||||
background: current-color(base);
|
||||
}
|
||||
|
||||
/**
|
||||
* Day that is selected and is today
|
||||
* should have white color.
|
||||
@ -131,7 +135,7 @@
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
:host .calendar-day.calendar-day-today.calendar-day-active:after {
|
||||
.calendar-day.calendar-day-today.calendar-day-active .calendar-day-highlight {
|
||||
background: current-color(base);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
font-size: $datetime-md-calendar-item-font-size;
|
||||
}
|
||||
|
||||
:host .calendar-day:focus:after {
|
||||
.calendar-day:focus .calendar-day-highlight {
|
||||
background: current-color(base, 0.2);
|
||||
|
||||
box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
|
||||
@ -88,7 +88,7 @@
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
:host .calendar-day.calendar-day-today:after {
|
||||
.calendar-day.calendar-day-today .calendar-day-highlight {
|
||||
border: 1px solid current-color(base);
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
color: current-color(contrast);
|
||||
}
|
||||
|
||||
:host .calendar-day.calendar-day-active:after {
|
||||
.calendar-day.calendar-day-active .calendar-day-highlight {
|
||||
border: 1px solid current-color(base);
|
||||
|
||||
background: current-color(base);
|
||||
|
||||
@ -356,7 +356,7 @@ ion-picker-column-internal {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
:host .calendar-day:after {
|
||||
.calendar-day-highlight {
|
||||
@include border-radius(32px, 32px, 32px, 32px);
|
||||
@include padding(4px, 4px, 4px, 4px);
|
||||
|
||||
@ -365,8 +365,6 @@ ion-picker-column-internal {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
content: " ";
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@ -12,10 +12,13 @@ import { createColorClasses } from '../../utils/theme';
|
||||
import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
|
||||
|
||||
import type {
|
||||
TitleSelectedDatesFormatter,
|
||||
DatetimePresentation,
|
||||
DatetimeChangeEventDetail,
|
||||
DatetimeParts,
|
||||
TitleSelectedDatesFormatter,
|
||||
DatetimeHighlight,
|
||||
DatetimeHighlightStyle,
|
||||
DatetimeHighlightCallback,
|
||||
} from './datetime-interface';
|
||||
import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
|
||||
import {
|
||||
@ -58,6 +61,7 @@ import {
|
||||
} from './utils/parse';
|
||||
import {
|
||||
getCalendarDayState,
|
||||
getHighlightStyles,
|
||||
isDayDisabled,
|
||||
isMonthDisabled,
|
||||
isNextMonthDisabled,
|
||||
@ -321,6 +325,17 @@ export class Datetime implements ComponentInterface {
|
||||
*/
|
||||
@Prop() multiple = false;
|
||||
|
||||
/**
|
||||
* Used to apply custom text and background colors to specific dates.
|
||||
*
|
||||
* Can be either an array of objects containing ISO strings and colors,
|
||||
* or a callback that receives an ISO string and returns the colors.
|
||||
*
|
||||
* Only applies to the `date`, `date-time`, and `time-date` presentations,
|
||||
* with `preferWheel="false"`.
|
||||
*/
|
||||
@Prop() highlightedDates?: DatetimeHighlight[] | DatetimeHighlightCallback;
|
||||
|
||||
/**
|
||||
* The value of the datetime as a valid ISO 8601 datetime string.
|
||||
* This should be an array of strings only when `multiple="true"`.
|
||||
@ -1239,7 +1254,7 @@ export class Datetime implements ComponentInterface {
|
||||
};
|
||||
|
||||
componentWillLoad() {
|
||||
const { el, multiple, presentation, preferWheel } = this;
|
||||
const { el, highlightedDates, multiple, presentation, preferWheel } = this;
|
||||
|
||||
if (multiple) {
|
||||
if (presentation !== 'date') {
|
||||
@ -1251,6 +1266,19 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
if (highlightedDates !== undefined) {
|
||||
if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
|
||||
printIonWarning(
|
||||
'The highlightedDates property is only supported with the date, date-time, and time-date presentations.',
|
||||
el
|
||||
);
|
||||
}
|
||||
|
||||
if (preferWheel) {
|
||||
printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
|
||||
}
|
||||
}
|
||||
|
||||
this.processMinParts();
|
||||
this.processMaxParts();
|
||||
const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
|
||||
@ -2000,7 +2028,7 @@ export class Datetime implements ComponentInterface {
|
||||
<div class="calendar-month-grid">
|
||||
{getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
|
||||
const { day, dayOfWeek } = dateObject;
|
||||
const { isDateEnabled, multiple } = this;
|
||||
const { el, highlightedDates, isDateEnabled, multiple } = this;
|
||||
const referenceParts = { month, day, year };
|
||||
const isCalendarPadding = day === null;
|
||||
const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(
|
||||
@ -2013,6 +2041,7 @@ export class Datetime implements ComponentInterface {
|
||||
this.parsedDayValues
|
||||
);
|
||||
|
||||
const dateIsoString = convertDataToISO(referenceParts);
|
||||
let isCalDayDisabled = isCalMonthDisabled || disabled;
|
||||
|
||||
if (!isCalDayDisabled && isDateEnabled !== undefined) {
|
||||
@ -2022,15 +2051,26 @@ export class Datetime implements ComponentInterface {
|
||||
* to prevent exceptions in the user's function from
|
||||
* interrupting the calendar rendering.
|
||||
*/
|
||||
isCalDayDisabled = !isDateEnabled(convertDataToISO(referenceParts));
|
||||
isCalDayDisabled = !isDateEnabled(dateIsoString);
|
||||
} catch (e) {
|
||||
printIonError(
|
||||
'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.',
|
||||
el,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let dateStyle: DatetimeHighlightStyle | undefined = undefined;
|
||||
|
||||
/**
|
||||
* Custom highlight styles should not override the style for selected dates,
|
||||
* nor apply to "filler days" at the start of the grid.
|
||||
*/
|
||||
if (highlightedDates !== undefined && !isActive && day !== null) {
|
||||
dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
tabindex="-1"
|
||||
@ -2046,6 +2086,11 @@ export class Datetime implements ComponentInterface {
|
||||
'calendar-day-active': isActive,
|
||||
'calendar-day-today': isToday,
|
||||
}}
|
||||
style={
|
||||
dateStyle && {
|
||||
color: dateStyle.textColor,
|
||||
}
|
||||
}
|
||||
aria-hidden={isCalendarPadding ? 'true' : null}
|
||||
aria-selected={ariaSelected}
|
||||
aria-label={ariaLabel}
|
||||
@ -2081,6 +2126,12 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="calendar-day-highlight"
|
||||
style={{
|
||||
backgroundColor: dateStyle?.backgroundColor,
|
||||
}}
|
||||
></div>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('datetime: highlightedDates', () => {
|
||||
test.beforeEach(async ({ page, skip }) => {
|
||||
skip.rtl();
|
||||
|
||||
await page.setContent(`
|
||||
<ion-datetime value="2023-01-01" locale="en-US"></ion-datetime>
|
||||
`);
|
||||
});
|
||||
|
||||
test('should render highlights correctly when using an array', async ({ page }) => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => {
|
||||
el.highlightedDates = [
|
||||
{
|
||||
date: '2023-01-01', // ensure selected date style overrides highlight
|
||||
textColor: '#800080',
|
||||
backgroundColor: '#ffc0cb',
|
||||
},
|
||||
{
|
||||
date: '2023-01-02',
|
||||
textColor: '#b22222',
|
||||
backgroundColor: '#fa8072',
|
||||
},
|
||||
{
|
||||
date: '2023-01-03',
|
||||
textColor: '#0000ff',
|
||||
backgroundColor: '#add8e6',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
expect(await datetime.screenshot()).toMatchSnapshot(
|
||||
`datetime-highlightedDates-array-${page.getSnapshotSettings()}.png`
|
||||
);
|
||||
});
|
||||
|
||||
test('should render highlights correctly when using a callback', async ({ page }) => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => {
|
||||
el.highlightedDates = (isoString) => {
|
||||
const date = new Date(isoString);
|
||||
const utcDay = date.getUTCDate();
|
||||
|
||||
// ensure selected date style overrides highlight
|
||||
if (utcDay === 1) {
|
||||
return {
|
||||
textColor: '#b22222',
|
||||
backgroundColor: '#fa8072',
|
||||
};
|
||||
}
|
||||
|
||||
if (utcDay % 5 === 0) {
|
||||
return {
|
||||
textColor: '#800080',
|
||||
backgroundColor: '#ffc0cb',
|
||||
};
|
||||
}
|
||||
|
||||
if (utcDay % 3 === 0) {
|
||||
return {
|
||||
textColor: '#0000ff',
|
||||
backgroundColor: '#add8e6',
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
expect(await datetime.screenshot()).toMatchSnapshot(
|
||||
`datetime-highlightedDates-callback-${page.getSnapshotSettings()}.png`
|
||||
);
|
||||
});
|
||||
|
||||
test('should render highlights correctly when only using one color or the other', async ({ page }) => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => {
|
||||
el.highlightedDates = [
|
||||
{
|
||||
date: '2023-01-02',
|
||||
backgroundColor: '#fa8072',
|
||||
},
|
||||
{
|
||||
date: '2023-01-03',
|
||||
textColor: '#0000ff',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
await page.waitForChanges();
|
||||
expect(await datetime.screenshot()).toMatchSnapshot(
|
||||
`datetime-highlightedDates-single-color-${page.getSnapshotSettings()}.png`
|
||||
);
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
110
core/src/components/datetime/test/highlightedDates/index.html
Normal file
110
core/src/components/datetime/test/highlightedDates/index.html
Normal file
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Datetime - highlightedDates</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: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #6f7378;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
ion-datetime {
|
||||
box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.25);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Datetime - highlightedDates</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>With Array</h2>
|
||||
<ion-datetime locale="en-US" id="withArray" presentation="date" value="2023-01-01"></ion-datetime>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<h2>With Callback</h2>
|
||||
<ion-datetime locale="en-US" id="withCallback" presentation="date" value="2023-01-01"></ion-datetime>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<h2>Highlight Today</h2>
|
||||
<ion-datetime locale="en-US" id="highlightToday" presentation="date"></ion-datetime>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
document.querySelector('#withArray').highlightedDates = [
|
||||
{
|
||||
date: '2023-01-02',
|
||||
textColor: 'purple',
|
||||
backgroundColor: 'pink',
|
||||
},
|
||||
{
|
||||
date: '2023-01-04',
|
||||
textColor: 'firebrick',
|
||||
backgroundColor: 'salmon',
|
||||
},
|
||||
{
|
||||
date: '2023-01-06',
|
||||
textColor: 'blue',
|
||||
backgroundColor: 'lightblue',
|
||||
},
|
||||
];
|
||||
|
||||
document.querySelector('#withCallback').highlightedDates = (isoString) => {
|
||||
const date = new Date(isoString);
|
||||
const utcDay = date.getUTCDate();
|
||||
if (utcDay % 5 === 0) {
|
||||
return {
|
||||
textColor: 'purple',
|
||||
backgroundColor: 'pink',
|
||||
};
|
||||
}
|
||||
|
||||
if (utcDay % 3 === 0) {
|
||||
return {
|
||||
textColor: 'blue',
|
||||
backgroundColor: 'lightblue',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelector('#highlightToday').highlightedDates = [
|
||||
{
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
textColor: 'purple',
|
||||
backgroundColor: 'pink',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -108,45 +108,42 @@ test.describe('datetime: presentation', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: FW-3018
|
||||
test.skip('datetime: presentation: time', () => {
|
||||
let timePickerFixture: TimePickerFixture;
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
timePickerFixture = new TimePickerFixture(page);
|
||||
await timePickerFixture.goto();
|
||||
test.describe('datetime: presentation: time', () => {
|
||||
test.beforeEach(async ({ skip }) => {
|
||||
skip.rtl();
|
||||
skip.mode('md');
|
||||
});
|
||||
|
||||
test('changing value from AM to AM should update the text', async () => {
|
||||
await timePickerFixture.setValue('04:20:00');
|
||||
await timePickerFixture.expectTime('4', '20', 'AM');
|
||||
test('changing value from AM to AM should update the text', async ({ page }) => {
|
||||
const timePickerFixture = new TimePickerFixture(page);
|
||||
await timePickerFixture.goto('04:20:00');
|
||||
|
||||
await timePickerFixture.setValue('11:03:00');
|
||||
await timePickerFixture.expectTime('11', '03', 'AM');
|
||||
await timePickerFixture.expectTime(11, 3, 'am');
|
||||
});
|
||||
|
||||
test('changing value from AM to PM should update the text', async () => {
|
||||
await timePickerFixture.setValue('05:30:00');
|
||||
await timePickerFixture.expectTime('5', '30', 'AM');
|
||||
test('changing value from AM to PM should update the text', async ({ page }) => {
|
||||
const timePickerFixture = new TimePickerFixture(page);
|
||||
await timePickerFixture.goto('05:30:00');
|
||||
|
||||
await timePickerFixture.setValue('16:40:00');
|
||||
await timePickerFixture.expectTime('4', '40', 'PM');
|
||||
await timePickerFixture.expectTime(16, 40, 'pm');
|
||||
});
|
||||
|
||||
test('changing the value from PM to AM should update the text', async () => {
|
||||
await timePickerFixture.setValue('16:40:00');
|
||||
await timePickerFixture.expectTime('4', '40', 'PM');
|
||||
test('changing the value from PM to AM should update the text', async ({ page }) => {
|
||||
const timePickerFixture = new TimePickerFixture(page);
|
||||
await timePickerFixture.goto('16:40:00');
|
||||
|
||||
await timePickerFixture.setValue('04:20:00');
|
||||
await timePickerFixture.expectTime('4', '20', 'AM');
|
||||
await timePickerFixture.expectTime(4, 20, 'am');
|
||||
});
|
||||
|
||||
test('changing the value from PM to PM should update the text', async () => {
|
||||
await timePickerFixture.setValue('16:40:00');
|
||||
await timePickerFixture.expectTime('4', '40', 'PM');
|
||||
test('changing the value from PM to PM should update the text', async ({ page }) => {
|
||||
const timePickerFixture = new TimePickerFixture(page);
|
||||
await timePickerFixture.goto('16:40:00');
|
||||
|
||||
await timePickerFixture.setValue('19:32:00');
|
||||
await timePickerFixture.expectTime('7', '32', 'PM');
|
||||
await timePickerFixture.expectTime(19, 32, 'pm');
|
||||
});
|
||||
});
|
||||
|
||||
@ -159,9 +156,9 @@ class TimePickerFixture {
|
||||
this.page = page;
|
||||
}
|
||||
|
||||
async goto() {
|
||||
async goto(value: string) {
|
||||
await this.page.setContent(`
|
||||
<ion-datetime presentation="time" value="2022-03-10T13:00:00"></ion-datetime>
|
||||
<ion-datetime presentation="time" value="${value}"></ion-datetime>
|
||||
`);
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
this.timePicker = this.page.locator('ion-datetime');
|
||||
@ -172,19 +169,14 @@ class TimePickerFixture {
|
||||
el.value = newValue;
|
||||
}, value);
|
||||
|
||||
// Changing the value can take longer than the default 100ms to repaint
|
||||
await this.page.waitForChanges(300);
|
||||
await this.page.waitForChanges();
|
||||
}
|
||||
|
||||
async expectTime(hour: string, minute: string, ampm: string) {
|
||||
expect(
|
||||
await this.timePicker.locator('ion-picker-column-internal:nth-child(1) .picker-item-active').textContent()
|
||||
).toBe(hour);
|
||||
expect(
|
||||
await this.timePicker.locator('ion-picker-column-internal:nth-child(2) .picker-item-active').textContent()
|
||||
).toBe(minute);
|
||||
expect(
|
||||
await this.timePicker.locator('ion-picker-column-internal:nth-child(3) .picker-item-active').textContent()
|
||||
).toBe(ampm);
|
||||
async expectTime(hour: number, minute: number, ampm: string) {
|
||||
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);
|
||||
await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,11 @@
|
||||
import type { DatetimeParts } from '../datetime-interface';
|
||||
import { printIonError } from '@utils/logging';
|
||||
|
||||
import type {
|
||||
DatetimeHighlight,
|
||||
DatetimeHighlightCallback,
|
||||
DatetimeHighlightStyle,
|
||||
DatetimeParts,
|
||||
} from '../datetime-interface';
|
||||
|
||||
import { isAfter, isBefore, isSameDay } from './comparison';
|
||||
import { generateDayAriaLabel, getDay } from './format';
|
||||
@ -182,3 +189,41 @@ export const isNextMonthDisabled = (refParts: DatetimeParts, maxParts?: Datetime
|
||||
maxParts,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Given the value of the highlightedDates property
|
||||
* and an ISO string, return the styles to use for
|
||||
* that date, or undefined if none are found.
|
||||
*/
|
||||
export const getHighlightStyles = (
|
||||
highlightedDates: DatetimeHighlight[] | DatetimeHighlightCallback,
|
||||
dateIsoString: string,
|
||||
el: HTMLIonDatetimeElement
|
||||
): DatetimeHighlightStyle | undefined => {
|
||||
if (Array.isArray(highlightedDates)) {
|
||||
const dateStringWithoutTime = dateIsoString.split('T')[0];
|
||||
const matchingHighlight = highlightedDates.find((hd) => hd.date === dateStringWithoutTime);
|
||||
if (matchingHighlight) {
|
||||
return {
|
||||
textColor: matchingHighlight.textColor,
|
||||
backgroundColor: matchingHighlight.backgroundColor,
|
||||
} as DatetimeHighlightStyle;
|
||||
}
|
||||
} else {
|
||||
/**
|
||||
* Wrap in a try-catch to prevent exceptions in the user's function
|
||||
* from interrupting the calendar's rendering.
|
||||
*/
|
||||
try {
|
||||
return highlightedDates(dateIsoString);
|
||||
} catch (e) {
|
||||
printIonError(
|
||||
'Exception thrown from provided `highlightedDates` callback. Please check your function and try again.',
|
||||
el,
|
||||
e
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
@ -453,29 +453,16 @@ export class Modal implements ComponentInterface, OverlayInterface {
|
||||
backdropBreakpoint: this.backdropBreakpoint,
|
||||
});
|
||||
|
||||
const hasCardModal = presentingElement !== undefined;
|
||||
|
||||
/**
|
||||
* We need to change the status bar at the
|
||||
* start of the animation so that it completes
|
||||
* by the time the card animation is done.
|
||||
*/
|
||||
if (hasCardModal && getIonMode(this) === 'ios') {
|
||||
// Cache the original status bar color before the modal is presented
|
||||
this.statusBarStyle = await StatusBar.getStyle();
|
||||
setCardStatusBarDark();
|
||||
}
|
||||
|
||||
await this.currentTransition;
|
||||
|
||||
if (this.isSheetModal) {
|
||||
this.initSheetGesture();
|
||||
} else if (hasCardModal) {
|
||||
await this.initSwipeToClose();
|
||||
}
|
||||
|
||||
/* tslint:disable-next-line */
|
||||
if (typeof window !== 'undefined') {
|
||||
/**
|
||||
* This needs to be setup before any
|
||||
* non-transition async work so it can be dereferenced
|
||||
* in the dismiss method. The dismiss method
|
||||
* only waits for the entering transition
|
||||
* to finish. It does not wait for all of the `present`
|
||||
* method to resolve.
|
||||
*/
|
||||
this.keyboardOpenCallback = () => {
|
||||
if (this.gesture) {
|
||||
/**
|
||||
@ -498,6 +485,27 @@ export class Modal implements ComponentInterface, OverlayInterface {
|
||||
window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
||||
}
|
||||
|
||||
const hasCardModal = presentingElement !== undefined;
|
||||
|
||||
/**
|
||||
* We need to change the status bar at the
|
||||
* start of the animation so that it completes
|
||||
* by the time the card animation is done.
|
||||
*/
|
||||
if (hasCardModal && getIonMode(this) === 'ios') {
|
||||
// Cache the original status bar color before the modal is presented
|
||||
this.statusBarStyle = await StatusBar.getStyle();
|
||||
setCardStatusBarDark();
|
||||
}
|
||||
|
||||
await this.currentTransition;
|
||||
|
||||
if (this.isSheetModal) {
|
||||
this.initSheetGesture();
|
||||
} else if (hasCardModal) {
|
||||
this.initSwipeToClose();
|
||||
}
|
||||
|
||||
this.currentTransition = undefined;
|
||||
}
|
||||
|
||||
@ -638,6 +646,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
|
||||
/* tslint:disable-next-line */
|
||||
if (typeof window !== 'undefined' && this.keyboardOpenCallback) {
|
||||
window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
||||
this.keyboardOpenCallback = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -363,7 +363,6 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
|
||||
render() {
|
||||
const col = this.col;
|
||||
const Button = 'button' as any;
|
||||
const mode = getIonMode(this);
|
||||
return (
|
||||
<Host
|
||||
@ -385,9 +384,13 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
)}
|
||||
<div class="picker-opts" style={{ maxWidth: col.optionsWidth! }} ref={(el) => (this.optsEl = el)}>
|
||||
{col.options.map((o, index) => (
|
||||
<Button type="button" class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }} opt-index={index}>
|
||||
<button
|
||||
aria-label={o.ariaLabel}
|
||||
class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }}
|
||||
opt-index={index}
|
||||
>
|
||||
{o.text}
|
||||
</Button>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{col.suffix && (
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import { h } from '@stencil/core';
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { PickerColumnCmp } from '../picker-column';
|
||||
/**
|
||||
* Stencil has an issue where having multiple spec tests in the same file,
|
||||
* will cause an exception to be thrown. This test is located in a separate file
|
||||
* to avoid this issue: https://github.com/ionic-team/stencil/issues/4053
|
||||
*/
|
||||
describe('picker-column', () => {
|
||||
it('should add aria-label to the picker column option', async () => {
|
||||
const col = {
|
||||
options: [
|
||||
{
|
||||
text: 'C#',
|
||||
ariaLabel: 'C Sharp',
|
||||
},
|
||||
{
|
||||
text: 'Java',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const page = await newSpecPage({
|
||||
components: [PickerColumnCmp],
|
||||
template: () => <ion-picker-column col={col}></ion-picker-column>,
|
||||
});
|
||||
|
||||
const firstOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(1)');
|
||||
const secondOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(2)');
|
||||
|
||||
expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
|
||||
expect(secondOption.getAttribute('aria-label')).toBe(null);
|
||||
});
|
||||
});
|
||||
@ -1,5 +1,6 @@
|
||||
import { h } from '@stencil/core';
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { PickerColumnCmp } from '../picker-column';
|
||||
|
||||
describe('picker-column', () => {
|
||||
|
||||
@ -46,4 +46,8 @@ export interface PickerColumnOption {
|
||||
duration?: number;
|
||||
transform?: string;
|
||||
selected?: boolean;
|
||||
/**
|
||||
* The optional text to assign as the aria-label on the picker column option.
|
||||
*/
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import type { E2EPage } from '@utils/test/playwright';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
import { openPopover, screenshotPopover } from '../test.utils';
|
||||
@ -38,145 +37,93 @@ test.describe('popover: focus trap', async () => {
|
||||
});
|
||||
|
||||
test('should focus the first ion-item on ArrowDown', async ({ page }) => {
|
||||
const item0 = page.locator('ion-popover ion-item:nth-of-type(1)');
|
||||
|
||||
await openPopover(page, 'basic-popover');
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
await expectActiveElementTextToEqual(page, 'Item 0');
|
||||
await expect(item0).toBeFocused();
|
||||
});
|
||||
|
||||
test('should trap focus', async ({ page, browserName }) => {
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
const items = page.locator('ion-popover ion-item');
|
||||
|
||||
await openPopover(page, 'basic-popover');
|
||||
|
||||
await page.keyboard.press('Tab');
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(items.nth(0)).toBeFocused();
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 0');
|
||||
await page.keyboard.press(`Shift+${tabKey}`);
|
||||
await expect(items.nth(3)).toBeFocused();
|
||||
|
||||
await page.keyboard.down('Shift');
|
||||
if (browserName === 'webkit') {
|
||||
await page.keyboard.down('Alt');
|
||||
}
|
||||
await page.keyboard.press('Tab');
|
||||
await page.keyboard.up('Shift');
|
||||
if (browserName === 'webkit') {
|
||||
await page.keyboard.up('Alt');
|
||||
}
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 3');
|
||||
|
||||
await page.keyboard.press('Tab');
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 0');
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(items.nth(0)).toBeFocused();
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 1');
|
||||
await expect(items.nth(1)).toBeFocused();
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 2');
|
||||
await expect(items.nth(2)).toBeFocused();
|
||||
|
||||
await page.keyboard.press('Home');
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 0');
|
||||
await expect(items.nth(0)).toBeFocused();
|
||||
|
||||
await page.keyboard.press('End');
|
||||
|
||||
await expectActiveElementTextToEqual(page, 'Item 3');
|
||||
await expect(items.nth(3)).toBeFocused();
|
||||
});
|
||||
|
||||
test('should not override keyboard interactions for textarea elements', async ({ page, browserName }) => {
|
||||
await openPopover(page, 'popover-with-textarea');
|
||||
await page.waitForFunction(() => document.activeElement?.tagName === 'ION-POPOVER');
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
const popover = page.locator('ion-popover');
|
||||
const innerNativeTextarea = page.locator('ion-textarea textarea');
|
||||
const vanillaTextarea = page.locator('ion-textarea + textarea');
|
||||
|
||||
await page.keyboard.press('Tab');
|
||||
await openPopover(page, 'popover-with-textarea');
|
||||
|
||||
/**
|
||||
* Focusing happens async inside of popover so we need
|
||||
* to wait for the requestAnimationFrame to fire.
|
||||
*/
|
||||
await expect(popover).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
|
||||
// for Firefox, ion-textarea is focused first
|
||||
// need to tab again to get to native input
|
||||
if (browserName === 'firefox') {
|
||||
await page.keyboard.press('Tab');
|
||||
await page.keyboard.press(tabKey);
|
||||
}
|
||||
|
||||
let activeElementTagName = await page.evaluate(() => document.activeElement!.tagName);
|
||||
let scrollTop = null;
|
||||
let selectionStart = null;
|
||||
let previousSelectionStart = null;
|
||||
|
||||
// This is the native textarea within ion-textarea
|
||||
expect(activeElementTagName).toBe('TEXTAREA');
|
||||
|
||||
selectionStart = await getActiveElementSelectionStart(page);
|
||||
expect(selectionStart).toBe(0);
|
||||
await expect(innerNativeTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
selectionStart = await getActiveElementSelectionStart(page);
|
||||
expect(selectionStart).toBeGreaterThan(0);
|
||||
previousSelectionStart = selectionStart;
|
||||
await expect(innerNativeTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
await page.keyboard.press('ArrowUp');
|
||||
|
||||
selectionStart = await getActiveElementSelectionStart(page);
|
||||
expect(selectionStart).toBeGreaterThan(previousSelectionStart!);
|
||||
await expect(innerNativeTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('Tab');
|
||||
await page.keyboard.press(tabKey);
|
||||
// Checking within HTML textarea
|
||||
|
||||
// Reset tracking variables as the focus element has changed
|
||||
scrollTop = null;
|
||||
selectionStart = null;
|
||||
previousSelectionStart = null;
|
||||
|
||||
activeElementTagName = await page.evaluate(() => document.activeElement!.tagName);
|
||||
expect(activeElementTagName).toBe('TEXTAREA');
|
||||
|
||||
selectionStart = await getActiveElementSelectionStart(page);
|
||||
expect(selectionStart).toBe(0);
|
||||
await expect(vanillaTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
selectionStart = await getActiveElementSelectionStart(page);
|
||||
expect(selectionStart).toBeGreaterThan(0);
|
||||
previousSelectionStart = selectionStart;
|
||||
await expect(vanillaTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('ArrowDown');
|
||||
await page.keyboard.press('ArrowUp');
|
||||
|
||||
selectionStart = await getActiveElementSelectionStart(page);
|
||||
expect(selectionStart).toBeGreaterThan(previousSelectionStart!);
|
||||
await expect(vanillaTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('Home');
|
||||
|
||||
scrollTop = await getActiveElementScrollTop(page);
|
||||
expect(scrollTop).toBeGreaterThan(0);
|
||||
|
||||
const previousScrollTop = scrollTop;
|
||||
await expect(vanillaTextarea).toBeFocused();
|
||||
|
||||
await page.keyboard.press('End');
|
||||
|
||||
scrollTop = await getActiveElementScrollTop(page);
|
||||
expect(scrollTop).toBeGreaterThanOrEqual(previousScrollTop);
|
||||
await expect(vanillaTextarea).toBeFocused();
|
||||
});
|
||||
});
|
||||
|
||||
// TODO(FW-1424): convert these to Playwright assertions where possible
|
||||
|
||||
/**
|
||||
* Focusing happens async inside of popover so we need
|
||||
* to wait for the requestAnimationFrame to fire.
|
||||
*/
|
||||
const expectActiveElementTextToEqual = async (page: E2EPage, textValue: string) => {
|
||||
await page.evaluate((text) => document.activeElement!.textContent === text, textValue);
|
||||
};
|
||||
|
||||
const getActiveElementSelectionStart = (page: E2EPage) => {
|
||||
return page.evaluate(() =>
|
||||
document.activeElement instanceof HTMLTextAreaElement ? document.activeElement.selectionStart : null
|
||||
);
|
||||
};
|
||||
|
||||
const getActiveElementScrollTop = (page: E2EPage) => {
|
||||
return page.evaluate(() => {
|
||||
// Returns the closest ion-textarea or active element
|
||||
const target = document.activeElement!.closest('ion-textarea') ?? document.activeElement;
|
||||
return target!.scrollTop;
|
||||
});
|
||||
};
|
||||
|
||||
57
core/src/components/toast/test/layout/index.html
Normal file
57
core/src/components/toast/test/layout/index.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Toast - Layout</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toast - Layout</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</ion-button>
|
||||
<ion-button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</ion-button>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
async function openToast(opts) {
|
||||
const toast = await toastController.create(opts);
|
||||
await toast.present();
|
||||
}
|
||||
|
||||
const baselineConfig = {
|
||||
icon: 'globe',
|
||||
header: 'Toast Header',
|
||||
message: 'This is an inline layout toast.',
|
||||
buttons: [
|
||||
{ side: 'start', text: 'Start Button', icon: 'alarm' },
|
||||
{ side: 'end', text: 'End Button', icon: 'bonfire' },
|
||||
],
|
||||
};
|
||||
|
||||
const stackedConfig = {
|
||||
...baselineConfig,
|
||||
message: 'This is a stacked layout toast.',
|
||||
layout: 'stacked',
|
||||
};
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
15
core/src/components/toast/test/layout/toast.e2e.ts
Normal file
15
core/src/components/toast/test/layout/toast.e2e.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('toast: stacked layout', () => {
|
||||
test('should render stacked buttons', async ({ page }) => {
|
||||
await page.goto('/src/components/toast/test/layout');
|
||||
const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
|
||||
|
||||
await page.click('#stacked');
|
||||
await ionToastDidPresent.next();
|
||||
|
||||
const toastWrapper = page.locator('ion-toast .toast-wrapper');
|
||||
expect(await toastWrapper.screenshot()).toMatchSnapshot(`toast-stacked-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@ -12,6 +12,7 @@ export interface ToastOptions {
|
||||
animated?: boolean;
|
||||
icon?: string;
|
||||
htmlAttributes?: { [key: string]: any };
|
||||
layout?: ToastLayout;
|
||||
|
||||
color?: Color;
|
||||
mode?: Mode;
|
||||
@ -22,6 +23,8 @@ export interface ToastOptions {
|
||||
leaveAnimation?: AnimationBuilder;
|
||||
}
|
||||
|
||||
export type ToastLayout = 'baseline' | 'stacked';
|
||||
|
||||
export interface ToastButton {
|
||||
text?: string;
|
||||
icon?: string;
|
||||
|
||||
@ -49,14 +49,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.toast-button-group-start {
|
||||
.toast-layout-baseline .toast-button-group-start {
|
||||
@include margin(null, null, null, 8px);
|
||||
}
|
||||
|
||||
.toast-button-group-end {
|
||||
.toast-layout-stacked .toast-button-group-start {
|
||||
@include margin(8px, 8px, null, null);
|
||||
}
|
||||
|
||||
.toast-layout-baseline .toast-button-group-end {
|
||||
@include margin(null, 8px, null, null);
|
||||
}
|
||||
|
||||
.toast-layout-stacked .toast-button-group-end {
|
||||
@include margin(null, 8px, 8px, null);
|
||||
}
|
||||
|
||||
.toast-button {
|
||||
@include padding($toast-md-button-padding-top, $toast-md-button-padding-end, $toast-md-button-padding-bottom, $toast-md-button-padding-start);
|
||||
|
||||
|
||||
@ -112,7 +112,11 @@
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
.toast-layout-stacked .toast-container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toast-layout-baseline .toast-content {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
@ -134,6 +138,12 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toast-layout-stacked .toast-button-group {
|
||||
justify-content: end;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toast-button {
|
||||
border: 0;
|
||||
|
||||
|
||||
@ -3,7 +3,15 @@ import { Watch, Component, Element, Event, h, Host, Method, Prop } from '@stenci
|
||||
|
||||
import { config } from '../../global/config';
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
|
||||
import type {
|
||||
AnimationBuilder,
|
||||
Color,
|
||||
CssClassMap,
|
||||
OverlayEventDetail,
|
||||
OverlayInterface,
|
||||
ToastButton,
|
||||
} from '../../interface';
|
||||
import { printIonWarning } from '../../utils/logging';
|
||||
import {
|
||||
createDelegateController,
|
||||
createTriggerController,
|
||||
@ -23,7 +31,7 @@ import { iosEnterAnimation } from './animations/ios.enter';
|
||||
import { iosLeaveAnimation } from './animations/ios.leave';
|
||||
import { mdEnterAnimation } from './animations/md.enter';
|
||||
import { mdLeaveAnimation } from './animations/md.leave';
|
||||
import type { ToastButton, ToastPosition } from './toast-interface';
|
||||
import type { ToastButton, ToastPosition, ToastLayout } from './toast-interface';
|
||||
|
||||
// TODO(FW-2832): types
|
||||
|
||||
@ -99,6 +107,15 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Prop() header?: string;
|
||||
|
||||
/**
|
||||
* Defines how the message and buttons are laid out in the toast.
|
||||
* 'baseline': The message and the buttons will appear on the same line.
|
||||
* Message text may wrap within the message container.
|
||||
* 'stacked': The buttons containers and message will stack on top
|
||||
* of each other. Use this if you have long text in your buttons.
|
||||
*/
|
||||
@Prop() layout: ToastLayout = 'baseline';
|
||||
|
||||
/**
|
||||
* Message to be shown in the toast.
|
||||
*/
|
||||
@ -391,6 +408,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { layout, el } = this;
|
||||
const allButtons = this.getButtons();
|
||||
const startButtons = allButtons.filter((b) => b.side === 'start');
|
||||
const endButtons = allButtons.filter((b) => b.side !== 'start');
|
||||
@ -398,9 +416,21 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
||||
const wrapperClass = {
|
||||
'toast-wrapper': true,
|
||||
[`toast-${this.position}`]: true,
|
||||
[`toast-layout-${layout}`]: true,
|
||||
};
|
||||
const role = allButtons.length > 0 ? 'dialog' : 'status';
|
||||
|
||||
/**
|
||||
* Stacked buttons are only meant to be
|
||||
* used with one type of button.
|
||||
*/
|
||||
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
||||
printIonWarning(
|
||||
'This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.',
|
||||
el
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Host
|
||||
aria-live="polite"
|
||||
|
||||
@ -164,7 +164,7 @@ html.ios ion-modal.modal-card .ion-page {
|
||||
* These changes allow certain dimension values
|
||||
* such as fit-content to work correctly.
|
||||
*/
|
||||
ion-modal .ion-page:not(ion-nav .ion-page) {
|
||||
ion-modal > .ion-page {
|
||||
position: relative;
|
||||
|
||||
contain: layout style;
|
||||
|
||||
@ -8,7 +8,7 @@ export interface OverlayEventDetail<T = any> {
|
||||
}
|
||||
|
||||
export interface OverlayInterface {
|
||||
el: HTMLElement;
|
||||
el: HTMLIonOverlayElement;
|
||||
animated: boolean;
|
||||
keyboardClose: boolean;
|
||||
overlayIndex: number;
|
||||
|
||||
@ -525,6 +525,14 @@ export const dismiss = async <OverlayDismissOptions>(
|
||||
*/
|
||||
overlay.el.classList.add('overlay-hidden');
|
||||
overlay.el.style.removeProperty('pointer-events');
|
||||
|
||||
/**
|
||||
* Clear any focus trapping references
|
||||
* when the overlay is dismissed.
|
||||
*/
|
||||
if (overlay.el.lastFocus !== undefined) {
|
||||
overlay.el.lastFocus = undefined;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
@ -104,7 +104,8 @@ test.describe('overlays: dismiss', () => {
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('overlays: focus', () => {
|
||||
// TODO FW-3536
|
||||
test.describe.skip('overlays: focus', () => {
|
||||
test.beforeEach(({ skip }) => {
|
||||
skip.rtl();
|
||||
});
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic-docs/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
@ -11,23 +12,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic-docs/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
# [6.6.0](https://github.com/ionic-team/ionic-docs/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic-docs/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic-docs/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic-docs/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic-docs/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
## [6.5.7](https://github.com/ionic-team/ionic-docs/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/docs
|
||||
|
||||
|
||||
@ -3,6 +3,22 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
|
||||
@ -21,33 +37,6 @@ The dev-preview `environmentInjector` property has been removed from `ion-tabs`
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular-server
|
||||
|
||||
@ -3,7 +3,15 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
\
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
|
||||
@ -11,38 +19,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **react:** only ship es modules ([#26044](https://github.com/ionic-team/ionic/issues/26044)) ([c946af2](https://github.com/ionic-team/ionic/commit/c946af29d3d65e4e78c03f0bbcb2376fd9d8c469))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **many:** reduce delay when performing overlay or page transitions ([#26189](https://github.com/ionic-team/ionic/issues/26189)) ([30e3a14](https://github.com/ionic-team/ionic/commit/30e3a1485d9bc94b31c297bdd05fa847b4bcfb56)), closes [#24346](https://github.com/ionic-team/ionic/issues/24346)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **react:** `@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.
|
||||
**Note:** Version bump only for package @ionic/react-router
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,8 +3,26 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
### Features
|
||||
|
||||
|
||||
* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
### Features
|
||||
|
||||
@ -19,57 +37,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* revert base components feature ([#26692](https://github.com/ionic-team/ionic/issues/26692)) ([b78b454](https://github.com/ionic-team/ionic/commit/b78b454e089462afa866972b97bb06faa84bd319))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **react:** only ship es modules ([#26044](https://github.com/ionic-team/ionic/issues/26044)) ([c946af2](https://github.com/ionic-team/ionic/commit/c946af29d3d65e4e78c03f0bbcb2376fd9d8c469))
|
||||
* **types:** remove overlay attribute interfaces ([#26181](https://github.com/ionic-team/ionic/issues/26181)) ([322a1db](https://github.com/ionic-team/ionic/commit/322a1dbcd00fc1f3db17fb9fb46ba91ba164acd3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **action-sheet:** use action sheet overlay inline ([#26172](https://github.com/ionic-team/ionic/issues/26172)) ([92b763a](https://github.com/ionic-team/ionic/commit/92b763a538f1c935e10d90c3f4af1debf1cab2c3))
|
||||
* **alert:** add ability to use alert inline ([#26316](https://github.com/ionic-team/ionic/issues/26316)) ([08c0a55](https://github.com/ionic-team/ionic/commit/08c0a5520a4f9be19d88644df26f4d38587985fa))
|
||||
* **base-components:** add ability to remove ios and md theme ([#26669](https://github.com/ionic-team/ionic/issues/26669)) ([18f109c](https://github.com/ionic-team/ionic/commit/18f109c7dae97d4e74bee9b72a341aeafd95b222))
|
||||
* **loading:** use loading overlay inline ([#26153](https://github.com/ionic-team/ionic/issues/26153)) ([34ca337](https://github.com/ionic-team/ionic/commit/34ca337b8af27b144fb44428c8ed8cf07fc79bfc))
|
||||
* **picker:** add ability to use picker inline ([#26336](https://github.com/ionic-team/ionic/issues/26336)) ([c0a8501](https://github.com/ionic-team/ionic/commit/c0a85016572956149ed4f01109f11154d7b5cb57))
|
||||
* **slides:** remove ion-slide, ion-slides, and IonicSwiper module ([#25868](https://github.com/ionic-team/ionic/issues/25868)) ([d478e03](https://github.com/ionic-team/ionic/commit/d478e03914fed15766c893738d6386d7623d066d))
|
||||
* **toast:** add ability to use toast inline ([#26215](https://github.com/ionic-team/ionic/issues/26215)) ([003de44](https://github.com/ionic-team/ionic/commit/003de44d9283d23ecfdf1ab5fada2b7a372a4ca9))
|
||||
* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **types:** `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
* **react:** `@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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/react
|
||||
|
||||
@ -79,6 +79,7 @@ export {
|
||||
TextareaCustomEvent,
|
||||
ToastOptions,
|
||||
ToastButton,
|
||||
ToastLayout,
|
||||
ToggleChangeEventDetail,
|
||||
ToggleCustomEvent,
|
||||
} from '@ionic/core/components';
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
|
||||
@ -11,33 +11,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **vue:** only ship es modules ([#26054](https://github.com/ionic-team/ionic/issues/26054)) ([86bbed0](https://github.com/ionic-team/ionic/commit/86bbed07fc51fa1e3771f0198211c5064606e5bb)), closes [#25104](https://github.com/ionic-team/ionic/issues/25104)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **vue:** `@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.
|
||||
**Note:** Version bump only for package @ionic/vue-router
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,11 +3,30 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
# [6.6.0](https://github.com/ionic-team/ionic/compare/v6.5.7...v6.6.0) (2023-03-01)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
|
||||
* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de))
|
||||
* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic/commit/fc5fcc064dec5256836e9622125b5e499ef00975))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.7](https://github.com/ionic-team/ionic/compare/v6.5.6...v6.5.7) (2023-03-01)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27)
|
||||
|
||||
* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic/issues/26828)
|
||||
|
||||
|
||||
@ -19,90 +38,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v6.5.6...v7.0.0-beta.4) (2023-02-22)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v6.5.4...v7.0.0-beta.3) (2023-02-15)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **textarea:** add legacy prop ([#26783](https://github.com/ionic-team/ionic/issues/26783)) ([f7f6f1d](https://github.com/ionic-team/ionic/commit/f7f6f1d9f9ffd30afbdccfb558bd73f42b112715))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v6.5.3...v7.0.0-beta.2) (2023-02-08)
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v6.5.2...v7.0.0-beta.1) (2023-02-01)
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* revert base components feature ([#26692](https://github.com/ionic-team/ionic/issues/26692)) ([b78b454](https://github.com/ionic-team/ionic/commit/b78b454e089462afa866972b97bb06faa84bd319))
|
||||
|
||||
|
||||
|
||||
# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **vue:** loading is created as an inline component ([#26191](https://github.com/ionic-team/ionic/issues/26191)) ([84990ce](https://github.com/ionic-team/ionic/commit/84990cec88461f20d802356ceed7659de189a353))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **modal:** remove swipeToClose in favor of canDismiss ([#26050](https://github.com/ionic-team/ionic/issues/26050)) ([1f3ddf2](https://github.com/ionic-team/ionic/commit/1f3ddf2370c29f0fd2dd96aa9b3927ef96bdc5ae))
|
||||
* **types:** remove overlay attribute interfaces ([#26181](https://github.com/ionic-team/ionic/issues/26181)) ([322a1db](https://github.com/ionic-team/ionic/commit/322a1dbcd00fc1f3db17fb9fb46ba91ba164acd3))
|
||||
* **vue:** only ship es modules ([#26054](https://github.com/ionic-team/ionic/issues/26054)) ([86bbed0](https://github.com/ionic-team/ionic/commit/86bbed07fc51fa1e3771f0198211c5064606e5bb)), closes [#25104](https://github.com/ionic-team/ionic/issues/25104)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **accordion:** ionChange will only emit from user committed changes ([#25922](https://github.com/ionic-team/ionic/issues/25922)) ([4eea9fa](https://github.com/ionic-team/ionic/commit/4eea9fa5c07d2a48bf5d224cd9b9e63453125b77))
|
||||
* **action-sheet:** use action sheet overlay inline ([#26172](https://github.com/ionic-team/ionic/issues/26172)) ([92b763a](https://github.com/ionic-team/ionic/commit/92b763a538f1c935e10d90c3f4af1debf1cab2c3))
|
||||
* **alert:** add ability to use alert inline ([#26316](https://github.com/ionic-team/ionic/issues/26316)) ([08c0a55](https://github.com/ionic-team/ionic/commit/08c0a5520a4f9be19d88644df26f4d38587985fa))
|
||||
* **base-components:** add ability to remove ios and md theme ([#26669](https://github.com/ionic-team/ionic/issues/26669)) ([18f109c](https://github.com/ionic-team/ionic/commit/18f109c7dae97d4e74bee9b72a341aeafd95b222))
|
||||
* **checkbox:** component can be used outside ion-item ([#26518](https://github.com/ionic-team/ionic/issues/26518)) ([9d52e70](https://github.com/ionic-team/ionic/commit/9d52e703610d0211667f0152e6c2b90ec6f13198))
|
||||
* **datetime:** ionChange will only emit from user committed changes ([#26083](https://github.com/ionic-team/ionic/issues/26083)) ([cc2af20](https://github.com/ionic-team/ionic/commit/cc2af202a95c049c9dd11ffd50c0dec3c84bf3c0)), closes [#20873](https://github.com/ionic-team/ionic/issues/20873) [#24452](https://github.com/ionic-team/ionic/issues/24452)
|
||||
* **input, toggle:** add escape hatch property ([#26416](https://github.com/ionic-team/ionic/issues/26416)) ([1278a29](https://github.com/ionic-team/ionic/commit/1278a292f37a27533b07b78f1be6d266b37976c7))
|
||||
* **input:** component can be used outside of ion-item ([#26283](https://github.com/ionic-team/ionic/issues/26283)) ([44472ae](https://github.com/ionic-team/ionic/commit/44472aeb9f12585d7b5d40b5721d4281b66b5004)), closes [#20153](https://github.com/ionic-team/ionic/issues/20153) [#19084](https://github.com/ionic-team/ionic/issues/19084) [#22736](https://github.com/ionic-team/ionic/issues/22736)
|
||||
* **loading:** use loading overlay inline ([#26153](https://github.com/ionic-team/ionic/issues/26153)) ([34ca337](https://github.com/ionic-team/ionic/commit/34ca337b8af27b144fb44428c8ed8cf07fc79bfc))
|
||||
* **picker:** add ability to use picker inline ([#26336](https://github.com/ionic-team/ionic/issues/26336)) ([c0a8501](https://github.com/ionic-team/ionic/commit/c0a85016572956149ed4f01109f11154d7b5cb57))
|
||||
* **radio-group:** ionChange will only emit from user committed changes ([#26223](https://github.com/ionic-team/ionic/issues/26223)) ([c299d36](https://github.com/ionic-team/ionic/commit/c299d3666aae96d0e67ce4d2c70efbe95bee81da))
|
||||
* **radio:** component can be used outside of ion-item ([#26582](https://github.com/ionic-team/ionic/issues/26582)) ([9761b0a](https://github.com/ionic-team/ionic/commit/9761b0a092e50ac4cc9176b6bcd5b9d29a5b22b3))
|
||||
* **range:** component can be used outside of ion-item ([#26479](https://github.com/ionic-team/ionic/issues/26479)) ([49baad8](https://github.com/ionic-team/ionic/commit/49baad8ee6cfe7e26068f4c9954d4a59d343b339))
|
||||
* **range:** ionChange will only emit from user committed changes ([#26089](https://github.com/ionic-team/ionic/issues/26089)) ([d1fb7b0](https://github.com/ionic-team/ionic/commit/d1fb7b039b8e11e9d9ede850f90b977a46b52de8))
|
||||
* **select:** component can be used outside ion-item ([#26572](https://github.com/ionic-team/ionic/issues/26572)) ([02640b5](https://github.com/ionic-team/ionic/commit/02640b5795c4fb8a46f0cdc8903f2a08abfa9135))
|
||||
* **slides:** remove ion-slide, ion-slides, and IonicSwiper module ([#25868](https://github.com/ionic-team/ionic/issues/25868)) ([d478e03](https://github.com/ionic-team/ionic/commit/d478e03914fed15766c893738d6386d7623d066d))
|
||||
* **textarea:** component can be used outside of ion-item ([#26674](https://github.com/ionic-team/ionic/issues/26674)) ([8d3edd0](https://github.com/ionic-team/ionic/commit/8d3edd049dfdb2a781d80da810a5bee3b490b7b6))
|
||||
* **toast:** add ability to use toast inline ([#26215](https://github.com/ionic-team/ionic/issues/26215)) ([003de44](https://github.com/ionic-team/ionic/commit/003de44d9283d23ecfdf1ab5fada2b7a372a4ca9))
|
||||
* **toggle:** component can be used outside of ion-item ([#26357](https://github.com/ionic-team/ionic/issues/26357)) ([c74901c](https://github.com/ionic-team/ionic/commit/c74901c973c153ce1954646ef7944f7db193ea28)), closes [#25570](https://github.com/ionic-team/ionic/issues/25570) [#23213](https://github.com/ionic-team/ionic/issues/23213)
|
||||
* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **item:** remove delegatesFocus patch for iOS 13 ([#25822](https://github.com/ionic-team/ionic/issues/25822)) ([ee3467c](https://github.com/ionic-team/ionic/commit/ee3467c9f1aa415ff6bda19e460b5c3482b94efc))
|
||||
* **many:** reduce delay when performing overlay or page transitions ([#26189](https://github.com/ionic-team/ionic/issues/26189)) ([30e3a14](https://github.com/ionic-team/ionic/commit/30e3a1485d9bc94b31c297bdd05fa847b4bcfb56)), closes [#24346](https://github.com/ionic-team/ionic/issues/24346)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **toggle:** The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
|
||||
* **types:** `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead.
|
||||
* **vue:** `@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.
|
||||
* **modal:** - 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`.
|
||||
* **accordion:** `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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.5.6](https://github.com/ionic-team/ionic/compare/v6.5.5...v6.5.6) (2023-02-22)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
@ -25,7 +25,11 @@ export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('
|
||||
|
||||
export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
|
||||
|
||||
<<<<<<< HEAD
|
||||
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']);
|
||||
=======
|
||||
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);
|
||||
>>>>>>> origin/main
|
||||
|
||||
export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger']);
|
||||
|
||||
|
||||
@ -119,6 +119,7 @@ export {
|
||||
TextareaCustomEvent,
|
||||
ToastOptions,
|
||||
ToastButton,
|
||||
ToastLayout,
|
||||
ToggleChangeEventDetail,
|
||||
ToggleCustomEvent,
|
||||
} from "@ionic/core/components";
|
||||
|
||||
@ -290,6 +290,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
|
||||
'firstDayOfWeek',
|
||||
'titleSelectedDatesFormatter',
|
||||
'multiple',
|
||||
'highlightedDates',
|
||||
'value',
|
||||
'showDefaultTitle',
|
||||
'showDefaultButtons',
|
||||
|
||||
Reference in New Issue
Block a user