diff --git a/CHANGELOG.md b/CHANGELOG.md index 88865f1ecc..7dfe8082d9 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index f02621de07..81c8c9fcaa 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -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/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)) * **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) @@ -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 diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index b21283930a..e7e8a46950 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -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: '', // 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: '', // 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; diff --git a/angular/src/index.ts b/angular/src/index.ts index 0059a9538b..7227fabae5 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -124,6 +124,7 @@ export { TextareaCustomEvent, ToastOptions, ToastButton, + ToastLayout, ToggleChangeEventDetail, ToggleCustomEvent, } from '@ionic/core'; diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index cd2adb9019..f8e591b245 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -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) diff --git a/core/api.txt b/core/api.txt index 07d0fbf5e5..fbd1257f29 100644 --- a/core/api.txt +++ b/core/api.txt @@ -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 diff --git a/core/package-lock.json b/core/package-lock.json index d6bda6e0a9..5b18640dcd 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -48,7 +48,6 @@ } }, "custom-rules": { - "name": "eslint-plugin-custom-rules", "version": "1.0.0", "dev": true }, diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f6a5f06361..893bf49393 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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": () => Promise>; + "onDidDismiss": () => Promise>; /** * Returns a promise that resolves when the toast will dismiss. */ - "onWillDismiss": () => Promise>; + "onWillDismiss": () => Promise>; "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) => void; + "onDidDismiss"?: (event: IonToastCustomEvent) => 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) => void; + "onIonToastDidDismiss"?: (event: IonToastCustomEvent) => void; /** * Emitted after the toast has presented. */ @@ -7224,7 +7240,7 @@ declare namespace LocalJSX { /** * Emitted before the toast has dismissed. */ - "onIonToastWillDismiss"?: (event: IonToastCustomEvent) => void; + "onIonToastWillDismiss"?: (event: IonToastCustomEvent) => 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) => void; + "onWillDismiss"?: (event: IonToastCustomEvent) => void; /** * Emitted before the toast has presented. Shorthand for ionToastWillPresent. */ diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 5856d0c9d5..fc6308d89f 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -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); } diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts index 09281d57ca..5f2772d6c4 100644 --- a/core/src/components/datetime/datetime-interface.ts +++ b/core/src/components/datetime/datetime-interface.ts @@ -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; diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index 1ce28a1350..155ab6d5f7 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -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; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 5d74dd563d..832b61fec8 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -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); diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 959c9761a3..3bd90f3bb2 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -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; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 17a24fbdea..1278693e90 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -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 {
{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 ( ); diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts new file mode 100644 index 0000000000..2edebb7cff --- /dev/null +++ b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts @@ -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(` + + `); + }); + + 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` + ); + }); +}); diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..86a3447122 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c751dd3858 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d58794cf18 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c5084a6230 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7d98d74a71 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b138075ff5 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e566c190d9 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bd77a99038 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..58c1376934 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..75685f791a Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b8646fde35 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..da31daf14a Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-callback-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c18944f97d Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..457b354083 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2e9ff91ece Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d71aad7f7b Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c32b0135b7 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..af652b53a9 Binary files /dev/null and b/core/src/components/datetime/test/highlightedDates/datetime.e2e.ts-snapshots/datetime-highlightedDates-single-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/highlightedDates/index.html b/core/src/components/datetime/test/highlightedDates/index.html new file mode 100644 index 0000000000..965865b7b0 --- /dev/null +++ b/core/src/components/datetime/test/highlightedDates/index.html @@ -0,0 +1,110 @@ + + + + + Datetime - highlightedDates + + + + + + + + + + + + + Datetime - highlightedDates + + + +
+
+

With Array

+ +
+
+

With Callback

+ +
+
+

Highlight Today

+ +
+
+
+
+ + + + diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts index d2352212d3..548cb28ac5 100644 --- a/core/src/components/datetime/test/presentation/datetime.e2e.ts +++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts @@ -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(` - + `); 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); } } diff --git a/core/src/components/datetime/utils/state.ts b/core/src/components/datetime/utils/state.ts index 0d9200ffeb..f709d7289a 100644 --- a/core/src/components/datetime/utils/state.ts +++ b/core/src/components/datetime/utils/state.ts @@ -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; +}; diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 7bd53f1efe..02c6bce9cc 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -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; } /** diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 7b8549a3e4..4eaf391afa 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -363,7 +363,6 @@ export class PickerColumnCmp implements ComponentInterface { render() { const col = this.col; - const Button = 'button' as any; const mode = getIonMode(this); return ( (this.optsEl = el)}> {col.options.map((o, index) => ( - + ))}
{col.suffix && ( diff --git a/core/src/components/picker-column/test/picker-column-aria.spec.tsx b/core/src/components/picker-column/test/picker-column-aria.spec.tsx new file mode 100644 index 0000000000..9e518e655a --- /dev/null +++ b/core/src/components/picker-column/test/picker-column-aria.spec.tsx @@ -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: () => , + }); + + 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); + }); +}); diff --git a/core/src/components/picker-column/test/picker-column.spec.tsx b/core/src/components/picker-column/test/picker-column.spec.tsx index f072f92c2c..d09d5980f5 100644 --- a/core/src/components/picker-column/test/picker-column.spec.tsx +++ b/core/src/components/picker-column/test/picker-column.spec.tsx @@ -1,5 +1,6 @@ import { h } from '@stencil/core'; import { newSpecPage } from '@stencil/core/testing'; + import { PickerColumnCmp } from '../picker-column'; describe('picker-column', () => { diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts index e19aa9f6fe..4ddb18c326 100644 --- a/core/src/components/picker/picker-interface.ts +++ b/core/src/components/picker/picker-interface.ts @@ -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; } diff --git a/core/src/components/popover/test/basic/popover.e2e.ts b/core/src/components/popover/test/basic/popover.e2e.ts index 5e905e16d8..3c8d2690f6 100644 --- a/core/src/components/popover/test/basic/popover.e2e.ts +++ b/core/src/components/popover/test/basic/popover.e2e.ts @@ -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; - }); -}; diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html new file mode 100644 index 0000000000..3562accab7 --- /dev/null +++ b/core/src/components/toast/test/layout/index.html @@ -0,0 +1,57 @@ + + + + + Toast - Layout + + + + + + + + + + + + + Toast - Layout + + + + + Open Baseline Layout Toast + Open Stacked Layout Toast + + + + + + diff --git a/core/src/components/toast/test/layout/toast.e2e.ts b/core/src/components/toast/test/layout/toast.e2e.ts new file mode 100644 index 0000000000..f5c22cd1b1 --- /dev/null +++ b/core/src/components/toast/test/layout/toast.e2e.ts @@ -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`); + }); +}); diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1a906abf68 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d7f8266d09 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1d24d41c61 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1b0edc0efa Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5108314254 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fdeff15643 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1ba4b083e3 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ecab85e31f Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d5827d5ca9 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5a20ad3558 Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..379adbf2bd Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e592c426bd Binary files /dev/null and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 8a61ad9124..02108e0647 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -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; diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 7581c4b8af..968afe913a 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -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); diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index 0a44e69808..0418e86c7c 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -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; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 4ed49d0571..624aa84e1d 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -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 ( .ion-page { position: relative; contain: layout style; diff --git a/core/src/utils/overlays-interface.ts b/core/src/utils/overlays-interface.ts index 3ff792077f..4a37fca71a 100644 --- a/core/src/utils/overlays-interface.ts +++ b/core/src/utils/overlays-interface.ts @@ -8,7 +8,7 @@ export interface OverlayEventDetail { } export interface OverlayInterface { - el: HTMLElement; + el: HTMLIonOverlayElement; animated: boolean; keyboardClose: boolean; overlayIndex: number; diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index ea173cae3f..69fb68f3de 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -525,6 +525,14 @@ export const dismiss = async ( */ 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); } diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts index 9607f22cc4..440bdaf897 100644 --- a/core/src/utils/test/overlays/overlays.e2e.ts +++ b/core/src/utils/test/overlays/overlays.e2e.ts @@ -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(); }); diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index f26d7685d3..fa033df403 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -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 diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index c8748efab7..db4e708c94 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -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 diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index bc3b0932c2..98d74c3ca7 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -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 diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index ba794f2f4c..c12ae54982 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -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 diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 32c2cae47e..6e218fc3df 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -79,6 +79,7 @@ export { TextareaCustomEvent, ToastOptions, ToastButton, + ToastLayout, ToggleChangeEventDetail, ToggleCustomEvent, } from '@ionic/core/components'; diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 285ae4b2b7..76ff49c6a3 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -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 diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 3c03f15be9..8ca644a9b4 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -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 diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index c6f3676bd5..3941376c51 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -25,7 +25,11 @@ export const IonLoading = /*@__PURE__*/ defineOverlayContainer(' export const IonPicker = /*@__PURE__*/ defineOverlayContainer('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']); +<<<<<<< HEAD export const IonToast = /*@__PURE__*/ defineOverlayContainer('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('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('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger']); diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 69fd44e95b..49b02afa66 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -119,6 +119,7 @@ export { TextareaCustomEvent, ToastOptions, ToastButton, + ToastLayout, ToggleChangeEventDetail, ToggleCustomEvent, } from "@ionic/core/components"; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 517aed3af7..ea8ef7ab28 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -290,6 +290,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer('ion-d 'firstDayOfWeek', 'titleSelectedDatesFormatter', 'multiple', + 'highlightedDates', 'value', 'showDefaultTitle', 'showDefaultButtons',