Compare commits

...

40 Commits

Author SHA1 Message Date
ionitron
d9d11ede0a v7.0.4 2023-04-26 13:01:00 +00:00
Liam DeBeasi
c569761c89 chore(ci): remove --no-package-lock flag (#27276)
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Original Discussion:
https://github.com/ionic-team/stencil-ds-output-targets/pull/327#discussion_r1176950960

This flag was left over from our migration from custom build scripts to
Lerna. Since we use `npm ci` the `--no-package-lock` flag is not needed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes `--no-package-lock` from build scripts.
- Here is an example test run of a dev build succeeding without the
`--no-package-lock` flag:
https://github.com/ionic-team/ionic-framework/actions/runs/4801503002

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-25 20:42:45 +00:00
Sean Perkins
e501ac001c chore: angular test apps serve in dev mode (#27270)
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When adding the Angular 16 test infrastructure, I accidentally regressed
ng14/ng15 test apps to run in production mode when serving locally.

This resulted in slower serve time and the vendor code being code split,
making it difficult to debug locally.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Angular test apps run in dev mode when served locally
- Angular test apps run in prod mode when built with `npm run build`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

We can share the same `angular.json` across all the major versions of
Angular we currently support.
2023-04-25 16:16:20 +00:00
Imre Bekker
01e028b789 fix(breadcumb): set background when focused on md (#27274)
Issue number: resolves #27273

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
When breadcrumb is focused in md mode, background is not set.

## What is the new behavior?
A slight background should have applied on breadcrumb when focused.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-25 15:45:15 +00:00
Liam DeBeasi
0ac451998c test(many): do not await page.locator (#27267)
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`page.locator` is synchronous, but we were `await`ing the calls:
https://playwright.dev/docs/api/class-page#page-locator

We were also doing `page.locator(...).click()` when we can just do
`page.click([selector])` directly,

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes `await` usage from `page.locator`
- Removes `page.locator().click()` usage in favor of `page.click()`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-25 12:26:17 +00:00
Maria Hutt
c267b43396 fix(modal): set default text color (#27207)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Occurs only when using modal with datetime: text does not update
appropriately based on light or dark mode. For example, when using Ionic
dark theme, the calendar days does not switch to white.


<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #26060 


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Text (days and time) changes to the text color set via light (default)
or dark mode. The color change applies to days and time that are not
selected: not the current day.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Recommendation:
- Test both `datetime` and `datetime-button`

The bug originates when modal's content is not wrapped by `ion-content`
and because the modal renders outside of `<main />`. Text color is
passed to components properly inside `main` because `main` is rendered
inside another `ion-content`. `ion-content` provides the correct
text-color based on light or dark mode.

Example of text color working for modal when wrapped by `ion-content`:

```html
<ion-modal trigger="open-modal">
    ...
  <ion-content class="ion-padding">
    <div>Hello world</div>
  </ion-content>
</ion-modal>
```

However, there are times that the modal does not require this wrap:

```html
<ion-modal>
  <ion-datetime id="datetime"></ion-datetime>
</ion-modal>
```

The same bug would have occurred on `popover` if it wasn't for the fact
that the component provides the [text
color](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42).

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-24 21:03:05 +00:00
Lars Mikkelsen
d425e6d4f3 chore(ci): enable npm package provenance (#27263)
See https://github.blog/2023-04-19-introducing-npm-package-provenance/
2023-04-24 13:04:10 +00:00
Liam DeBeasi
ad02058ef3 test(datetime): skip flaky tests (#27256)
Issue number: N/A

---------

These tests are flaky on CI:
https://github.com/ionic-team/ionic-framework/actions/runs/4757321510/jobs/8454046190?pr=27247

Looks like we are not waiting long enough for scrolling to finish.
2023-04-20 18:45:11 +00:00
Shawn Taylor
5a2b87cbcc fix(select): adjust label alignment when in a card (#27202)
Issue URL: resolves #27086

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When an `ion-select` is inside a card, the label is slightly lower than
it should be, making it out of alignment with the label of an
`ion-input`.


<!-- Issues are required for both bug fixes and features. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When inside a card, the labels of `ion-input` and `ion-select` are in
line with each other.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This bug was occurring because the label of ion-select is in the shadow
DOM. [As
recommended](https://github.com/ionic-team/ionic-framework/issues/27086#issuecomment-1494427311),
this fix was also added to ion-input and ion-textarea in case those
labels are also later moved to the shadow DOM.


Before:
<img width="534" alt="Screenshot 2023-04-13 at 4 35 44 PM"
src="https://user-images.githubusercontent.com/14926794/231877123-02f8e381-2137-4d3c-8dab-ae9051ad3591.png">

After:
<img width="535" alt="Screenshot 2023-04-13 at 4 36 02 PM"
src="https://user-images.githubusercontent.com/14926794/231877151-bd49b87b-762a-4d20-b6b7-57c1ab3bb368.png">

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-20 17:53:43 +00:00
Liam DeBeasi
a8749929e0 fix(ios): scroll assist sizes input correctly (#27253)
Issue number: resolves #27249

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The cloned input/textarea for scroll assist is not sized correctly. For
legacy inputs, this causes the clone to be off by ~1px because it does
not have the correct height. For modern inputs, this causes the same bug
as the legacy inputs plus cloned inputs overlap any floating/stacked
labels. This was not a concern for legacy inputs because those inputs
did not contain the label element where modern inputs do.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Sets `bottom: 0` for cloned inputs so they have the correct height
- Sets `position: relative` on the `.native-wrapper` so the cloned input
does not flow outside of the parent container.

**Before**

| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385644-3c15f98e-2646-41e1-b206-34c505791bde.MP4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233385681-8d682222-44b4-4cdc-b0de-96ed3fd38792.MP4"></video>
|


(Note: The legacy input bug is subtle -- the input only shifts by ~1px)

**After**

| Modern Input | Legacy Input |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233385911-243dea95-39b4-4d81-bfe9-26e52382a702.mp4"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233386237-2c9eede3-ca91-429b-8a35-15428529a883.mp4"></video>
|


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-20 15:57:56 +00:00
Sean Perkins
550e166d9c test(picker-internal): enable overlay tests (#27128)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Picker internal overlay tests are disabled.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: Internal


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Enables picker internal overlay tests
- Fixes issue with screenshot captures

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-20 12:57:58 +00:00
Sean Perkins
beb46bf9de fix(react): nav will remove components from the DOM (#25763)
Issue #: resolves #25753

----------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

## Pull request checklist

Please check if your PR fulfills the following requirements:
- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been reviewed and added / updated if needed (for bug
fixes / features)
- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See the [contributing
guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation)
for details.
- [x] Build (`npm run build`) was run locally and any changes were
pushed
- [x] Lint (`npm run lint`) has passed locally and any fixes were made
for failures


## Pull request type

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type, submit multiple
pull requests if needed. -->

Please check the type of change your PR introduces:
- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] Documentation content changes
- [ ] Other (please describe): 


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When `IonNav` performs a pop operation (navigating to root, back, etc.)
the views are not removed from the DOM.

<!-- Issues are required for both bug fixes and features. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `IonNav` removes pages from the DOM when they are popped (navigate
back, navigate to root, etc.)
- Memoized constructing React delegate (was reconstructing on each
render)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-04-19 17:03:24 +00:00
Sean Perkins
6f910576e2 chore: add angular 16 test infrastructure (#27209)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->
Issue URL: Internal


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds Angular 16 test app
- Introduces version test to validate which major version of Angular is
being tested

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-19 15:27:04 +00:00
Liam DeBeasi
678da3db36 merge release-7.0.3
Release 7.0.3
2023-04-19 10:14:25 -04:00
Liam DeBeasi
29bef31e0f chore(): clean up changelog 2023-04-19 09:35:25 -04:00
ionitron
3dc319e6e9 chore(): update package lock files 2023-04-19 13:30:07 +00:00
ionitron
02e9902781 v7.0.3 2023-04-19 13:29:55 +00:00
Liam DeBeasi
c0aea33576 refactor(): update directories to use kebab case (#27230)
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The team decided on some new processes for adding tests. One of those
processes is that test directories should use kebab case.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates test directories to use kebab case

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-18 20:10:56 +00:00
Sean Perkins
80d8c66766 fix(menu): export menu interfaces (#27227)
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When updating to Stencil v3
([commit](1a8bd6d8c6 (diff-83006355bd18aced9f88fd3b27ff6a40527c713b314145c2a34ad54b6361fa87))),
we removed many manual exports that are automatically exported by
Stencil. This change included removing the `MenuI` type from being
exported. This type is not automatically exported since it is not
directly associated to a `@Prop`.

This causes implementers that previously had a typed value against
`MenuI` in v6 for registering menus, to have to import from:
```ts
import { MenuI } from "@ionic/core/dist/types/components/menu/menu-interface";
```

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Re-exports the `MenuI` interface


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-18 19:25:44 +00:00
Amanda Johnston
0385c0862c fix(datetime): clamp date between min and max when using month picker (#27185)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using the dropdown month picker, the value is updated when the
month is changed, to follow native behavior. However, because only the
month is updated (the day remains the same), it's possible for the newly
chosen date to fall outside the min/max bounds of the datetime.

For example, if you have a datetime with `min="2021-01-15"
value="2021-02-01"`, then use the month picker to switch to January, the
new value will be `2021-01-01` which is earlier than the `min`.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: Resolves #27027


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

When updating the `activeParts` in any scenario, the date to set is now
clamped between the max and min.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-18 17:31:47 +00:00
Liam DeBeasi
76c8b94e2a fix(toast): screen readers announce content (#27198)
Issue URL: resolves #25866

---------

Docs PR: https://github.com/ionic-team/ionic-docs/pull/2914

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->

NVDA is not announcing toasts on present.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Toast has a "status" role and "polite" announcement.
- We also revisited the intended behavior of toasts to better align with
the Material Design v2 spec:
https://m2.material.io/components/snackbars/web#accessibility

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: 7.0.3-dev.11681482468.19d7784f
2023-04-18 14:57:30 +00:00
Liam DeBeasi
742d4295dd fix(textarea): legacy textarea respects padding (#27219)
Issue URL: resolves #27218

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Padding is not applied to the `.native-textarea` element when using a
legacy textarea. It is applied in v6:
ae9689bf3e/core/src/components/textarea/textarea.scss (L98-L100)

The modern textarea is not impacted.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Padding is now added to `.native-textarea` with the legacy textarea.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-18 14:56:58 +00:00
Liam DeBeasi
cdb0627c87 fix(input): string values are emitted (#27226)
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `InputChangeEventDetail` and `InputInputEventDetail` interfaces were
updated to add a number type to the value key:
https://github.com/ionic-team/ionic-framework/pull/26176

This was done to align with the value property on ion-input which allows
for strings and numbers. However, this is incorrect as the value emitted
is always forced to a string:
c9bddbdb4c/core/src/components/input/input.tsx (L416)


We likely copied the the type definition for the `value` prop not
realizing that number values are never emitted.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The `InputChangeEventDetail` and `InputInputEventDetail` interfaces no
longer have the `number` type
- The value passed to `ionInput` is converted to a string. (This isn't
really needed since the native `<input>` element will have a type of
string when the user types, but I added it for consistency with the
`ionChange` emission).
- Added a code comment to highlight this behavior

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Note: This is not a breaking change because `number` values were never
emitted in the first place.

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-18 14:54:02 +00:00
Amanda Johnston
c9bddbdb4c chore(template): ask for issue number instead of URL (#27220)
Now that the PR description is used as the default commit message, the
issue a PR resolves is specified directly in the PR description.
However, the conventional-commits tool isn't smart enough to recognize
full issue URLs, only the issue number (e.g. `resolves #12345`). This PR
updates the template to nudge the description in this direction.
2023-04-17 20:31:39 +00:00
Sean Perkins
30b548b167 fix(many): dynamic label support for modern form controls (#27156)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Developers that are using Ionic v7 are experiencing an issue where
implementations that are intended to use the modern control syntax will
render with the legacy syntax and a warning will be displayed.

The issue is most easily reproduced by not assigning a label to the
control and then asynchronously assigning a label after a duration.

Angular example:
```html
<ion-item>
  <ion-input [label]="label"></ion-input>
</ion-item>
```

```ts
@Component({ ... })
export class MyComponent {
  @Input() label?: string; // initially unset

  ngOnInit() {
    setTimeout(() => this.label = 'Hello world', 500);
  }
}
```

<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #27085


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Form controls that do not have a decorative label or
`aria-label`/`aria-labelledby` assigned, will default render as modern
controls.
- Legacy form implementations that render an `<ion-label>` within the
item, will continue to render with the legacy template and a warning
will be displayed in the console.
- Modern form syntax supports dynamically set labels

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->

Legacy implementations that do not have a decorative label and do not
specify `aria-label` on the control, will be upgraded to the modern
syntax.

For example:
```html
<ion-item>
  <ion-input></ion-input>
</ion-item>
```

Developers that do not want to update to the modern syntax yet should
add the `legacy="true"` attribute to their form control.

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.0.2-dev.11681157690.1060bc7f`

When migrating the range tests to modern syntax, I observed a visual
clipping issue. This is being addressed in:
https://github.com/ionic-team/ionic-framework/pull/27188. This PR simply
adds the legacy flag so that screenshots are the same as `main`.
2023-04-17 20:30:19 +00:00
Liam DeBeasi
6ffbdbb3b2 fix(select): respect --border-radius with modern template (#27213)
Issue URL: resolves #27208

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->

The `--border-radius` CSS variable was not consumed in the base select
stylesheet.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added `--border-radius` usage on `.select-wrapper`. This aligns with
input and textarea implementations:

Input:
dca31f5940/core/src/components/input/input.scss (L285)
Textarea:
dca31f5940/core/src/components/textarea/textarea.scss (L246)
## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-17 18:21:20 +00:00
Liam DeBeasi
f6ec23774b chore(template): separate issue url from body (#27216)
Now that the default commit message uses the PR description, the
conventional commit tool is getting confused when it sees other URLs and
text that looks like issues (like hex colors).

Using the `-------` separates the issue URL from the rest of the PR
description and helps the conventional commits tool generate the
changelog correctly.

Example:
https://github.com/ionic-team/ionic-framework/releases/tag/v7.0.3-nightly.20230417

`item: ios active state has correct contrast` has issue 000 as the issue
the commit closes. This is happening because I mentioned the 000 hex
color in the commit description.
2023-04-17 18:16:09 +00:00
Liam DeBeasi
c3c8c8e5ab chore(select): fix api generation (#27217)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->
Several CSS custom properties on `ion-select` are missing a `:` which is
breaking formatting on the docs:
https://ionicframework.com/docs/api/select#css-custom-properties


![image](https://user-images.githubusercontent.com/2721089/232563385-8919378a-c0a8-425b-8cd5-9572e6c0178f.png)


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds `:` to remaining CSS props

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-17 17:45:38 +00:00
Sean Perkins
dca31f5940 test(select): use modern form syntax (#27195)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are select controls without a label in the legacy tests, that do
not manually specify `legacy="true"`. These will be automatically
upgraded to the modern form syntax when async labels are merged.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds `legacy="true"` to legacy select tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-14 15:32:56 +00:00
Sean Perkins
c896e7fde4 test(textarea): use legacy form syntax for legacy test (#27196)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The legacy test template for the textarea test does not use a label and
does not specify `legacy="true"`.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds the `legacy="true"` property to the legacy template

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-14 15:24:04 +00:00
Sean Perkins
bc981f252b test(item): use modern form syntax (#27186)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are tests for `ion-item` that use the legacy syntax for form
controls, without being in the `/legacy` test folder.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the tests to use the modern form syntax
- Moves the `fill` and `form` tests to a `/legacy` folder
- Removes invalid control UI from test templates (i.e. rendering a
segment with other controls in a single item).

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-14 13:43:03 +00:00
Sean Perkins
7ad84cbbc5 test(toggle): use legacy form syntax for legacy tests (#27197)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The legacy toggle tests without a label do not manually specify to
render in legacy mode.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds the `legacy="true"` property to legacy toggle tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-13 16:16:57 +00:00
Brandy Carney
e0b2bc5ece docs(contributing): include steps to preview changes in an external app (#27172)
updates the contributing guide to:

- include steps to package changes and test them in an external app
- fix the references to the test apps so they point to the right
directories
- link to the test app directories for steps to run them and preview
changes from within this repository
2023-04-13 15:01:09 +00:00
Sean Perkins
67eb272cf2 test(list): use modern form syntax (#27187)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The list inset test is using the legacy form syntax in the test template
and for screenshot tests.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the tests to use the modern form control syntax

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-13 13:43:45 +00:00
Maria Hutt
114fe28f3c fix(accordion): inset style respects animated property (#27173)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

- Accordion groups with `expand='inset'` ignore the `animated='false'`. 
- Accordions will render with the `accordion-animated` class regardless
of `animated='false'`.


<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #27047 


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Accordion groups do not ignore `animated='false'` regardless of
`expand` value.
- Accordions render the `accordion-animated` class only when
`animated='true'`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A
2023-04-12 19:45:30 +00:00
Brandy Carney
9f51bdc145 refactor(input): migrate composition events to JSX bindings (#27182)
Updates the `compositionstart` and `compositionend` events on input to
use JSX bindings since issue
https://github.com/ionic-team/stencil/issues/3235 was resolved in
Stencil v3.
2023-04-12 17:07:01 +00:00
Liam DeBeasi
07941a59ba fix(vue): components have correct name in Vue Dev Tools (#27180)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #25199

Vue components show up as "Anonymous Component" in Vue Dev Tools. This
is caused by our use of `displayName` instead of `name`. This required a
fix in the Vue Output Target package. See
https://github.com/ionic-team/stencil-ds-output-targets/pull/257 for
more info.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the Vue Output Target dependency
- Functional components created manually in Ionic Vue now set `name`
instead of `displayName`. Note: Non-functional components were never
impacted by this bug.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Dev build: `7.0.2-dev.11681308435.141a05de`
2023-04-12 16:50:21 +00:00
Liam DeBeasi
6fc002458a fix(select): text does not overlap icon (#27125)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #27081

When using stacked/floating labels the icon needs to be centered with
the entire component, not just the placeholder/selected text. As a
result, we set `position: absolute`. However, this causes the long
selected texts to overlap the icon. This is not happening with
non-stacked/floating labels because the icon is `position: relative` and
follows the normal document flow.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Moved the icon sizes to sass variables
- Added code to set the .native-wrapper width to 100% minus the width of
the icon _and_ the additional margin that .select-icon adds

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2023-04-12 15:21:43 +00:00
Sean Perkins
56a39ff9c8 test(input): apply modern syntax updates (#27175)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are tests for `ion-input` that are not in the `/legacy` test
folder, that are using invalid modern syntax.

Inversely, there is legacy tests that do not explicitly set
`legacy="true"` that will be updated the modern syntax when
https://github.com/ionic-team/ionic-framework/pull/27156 is merged.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates modern tests to use modern label syntax (using `aria-label`)
- Applies `legacy="true"` to legacy test templates
- Fixes a typo in a legacy test where the selector was incorrect

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-04-12 14:15:21 +00:00
Sean Perkins
16aa9770bb fix(segment-button): update checked state on render (#26970)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

## Pull request checklist

Please check if your PR fulfills the following requirements:
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been reviewed and added / updated if needed (for bug
fixes / features)
- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See the [contributing
guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation)
for details.
- [x] Build (`npm run build`) was run locally and any changes were
pushed
- [x] Lint (`npm run lint`) has passed locally and any fixes were made
for failures


## Pull request type

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type, submit multiple
pull requests if needed. -->

Please check the type of change your PR introduces:
- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, renaming)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] Documentation content changes
- [ ] Other (please describe): 


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In v7, asynchronously assigning a value to `ion-segment` and
`ion-segment-button` can cause the `ion-segment` to render without an
active value (segment button does not show as checked).

<!-- Issues are required for both bug fixes and features. -->
Issue URL: resolves #26830


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The `ion-segment-button` checked state is synced with the parent
`ion-segment`, when the component finishes the initial render.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.0.0-dev.11678736268.18a0beb1` 

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-04-12 13:19:39 +00:00
520 changed files with 30304 additions and 650 deletions

View File

@@ -37,7 +37,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
## Contributing Etiquette
Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
## Creating an Issue
@@ -50,9 +50,9 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 14 days, it will be closed.
* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/ionic-framework/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
* Next, [create a new issue](https://github.com/ionic-team/ionic/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
* Next, [create a new issue](https://github.com/ionic-team/ionic-framework/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
## Creating a Good Code Reproduction
@@ -63,7 +63,7 @@ A code reproduction is a small application that is built to demonstrate a partic
### Why Should You Create a Reproduction?
A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed!
A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed!
Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. In other words, creating a code reproduction of the issue helps us help you.
@@ -84,7 +84,7 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
## Creating a Pull Request
Before creating a pull request, please read our requirements that explains the minimal details to have your PR considered and merged into the codebase.
Before creating a pull request, please read our requirements that explains the minimal details to have your PR considered and merged into the codebase.
### Requirements
1. PRs must reference an existing issue that describes the issue or feature being submitted.
@@ -93,7 +93,7 @@ Before creating a pull request, please read our requirements that explains the m
> Note: We appreciate you taking the time to contribute! Before submitting a pull request, please take the time to comment on the issue you are wanting to resolve. This helps us prevent duplicate effort or advise if the team is already addressing the issue.
* Looking for an issue to fix? Look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
* Looking for an issue to fix? Look through our issues with the [help wanted](https://github.com/ionic-team/ionic-framework/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
### Setup
@@ -123,12 +123,126 @@ Before creating a pull request, please read our requirements that explains the m
#### Preview Changes
##### Previewing in this repository
1. Run `npm start` from within the `core` directory.
2. A browser should open at `http://localhost:3333/`.
3. From here, navigate to one of the component's tests to preview your changes.
4. If a test showing your change doesn't exist, [add a new test or update an existing one](#modifying-tests).
5. To test in RTL mode, once you are in the desired component's test, add `?rtl=true` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?rtl=true`.
##### Previewing in an external app
We can use `npm pack` to test Ionic Framework changes in an external app outside of this repository. Follow the below steps based on your framework.
###### JavaScript
Run the following commands to build the core directory and pack the changes:
```bash
cd core
npm i
npm run build
npm pack --pack-destination ~
```
Then, in your Ionic Framework JavaScript app, run the following command to use the built package with the `.tgz` file that was created:
```bash
npm install file:/~/ionic-core-7.0.1.tgz
```
###### Angular
Run the following commands to build the core & angular directories and pack the changes:
```bash
cd core
npm i
npm run build
npm pack --pack-destination ~
cd ../angular
npm i
npm run sync
npm run build
cd dist/
npm pack --pack-destination ~
```
Then, in your Ionic Framework Angular app, run the following commands to use the built packages with the `.tgz` files that were created:
```bash
rm -rf .angular/
npm install file:/~/ionic-core-7.0.1.tgz
npm install file:/~/ionic-angular-7.0.1.tgz
```
###### React
Run the following commands to build the core & react directories and pack the changes:
```bash
cd core
npm i
npm run build
npm pack --pack-destination ~
cd ../packages/react
npm i
npm run sync
npm run build
npm pack --pack-destination ~
cd ../react-router
npm i
npm run sync
npm run build
npm pack --pack-destination ~
```
Then, in your Ionic Framework React app, run the following commands to use the built packages with the `.tgz` files that were created:
```bash
npm install file:/~/ionic-core-7.0.1.tgz
npm install file:/~/ionic-react-7.0.1.tgz
npm install file:/~/ionic-react-router-7.0.1.tgz
```
##### Vue
Run the following commands to build the core & vue directories and pack the changes:
```bash
cd core
npm i
npm run build
npm pack --pack-destination ~
cd ../packages/vue
npm i
npm run sync
npm run build
npm pack --pack-destination ~
cd ../vue-router
npm i
npm run sync
npm run build
npm pack --pack-destination ~
```
Then, in your Ionic Framework Vue app, run the following commands to use the built packages with the `.tgz` files that were created:
```bash
npm install file:/~/ionic-core-7.0.1.tgz
npm install file:/~/ionic-vue-7.0.1.tgz
npm install file:/~/ionic-vue-router-7.0.1.tgz
```
#### Lint Changes
@@ -179,9 +293,9 @@ Before creating a pull request, please read our requirements that explains the m
#### Modifying Files
1. Locate the files inside the relevant root directory:
- Angular: `/angular/src`
- React: `/packages/react/src`
- Vue: `/packages/vue/src`
- Angular: [`/angular/src`](/angular/src)
- React: [`/packages/react/src`](/packages/react/src)
- Vue: [`/packages/vue/src`](/packages/vue/src)
2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
3. Run lint on the directory and make sure there are no errors.
4. Build the project.
@@ -192,42 +306,45 @@ Before creating a pull request, please read our requirements that explains the m
#### Preview Changes
1. Run `npm run start` inside of the relevant test app directory. This will sync your previously built changes into a test Ionic app:
- Angular: `/angular/test-app`
- React: `/packages/react/test-app`
- Vue: `/packages/vue/test-app`
2. In a browser, navigate to the page you wish to test.
3. Alternatively, create a new page if you need to test something that is not already there.
##### Previewing in this repository
Follow the steps in the test directory for each framework:
- Angular: [`/angular/test`](/angular/test/README.md)
- React: [`/packages/react/test`](/packages/react/test/README.md)
- Vue: [`/packages/vue/test`](/packages/vue/test/README.md)
##### Previewing in an external app
Follow the steps to [preview changes in core](#preview-changes).
#### Lint Changes
1. Run `npm run lint` to lint the TypeScript in the relevant directory:
- Angular: `/angular/src`
- React: `/packages/react/src`
- Vue: `/packages/vue/src`
- Angular: [`/angular/src`](/angular/src)
- React: [`/packages/react/src`](/packages/react/src)
- Vue: [`/packages/vue/src`](/packages/vue/src)
2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
#### Modifying Tests
1. Locate the test to modify inside the relevant test app directory:
- Angular: `/angular/test-app/e2e/src`
- React: `/packages/react/test-app/cypress/integration`
- Vue: `/packages/vue/test-app/tests/e2e`
1. Locate the e2e test to modify inside the relevant test app directory:
- Angular: [`/angular/test/base/e2e/src`](/angular/test/base/e2e/src)
- React: [`/packages/react/test/base/tests/e2e/specs`](/packages/react/test/base/tests/e2e/specs)
- Vue: [`/packages/vue/test/base/tests/e2e/specs`](/packages/vue/test/base/tests/e2e/specs)
2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
3. If a new test is needed, copy an existing test, rename it, and edit the content in the test file.
4. Run `npm run test` to run your tests.
#### Building Changes
1. Once all changes have been made, run `npm run build` inside of the root directory. This will add your changes to any auto-generated files, if necessary.
1. Once all changes have been made, run `npm run build` inside of the package's root directory. This will add your changes to any auto-generated files, if necessary.
2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes.
3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
### Submit Pull Request
1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
1. [Create a new pull request](https://github.com/ionic-team/ionic-framework/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
@@ -240,7 +357,7 @@ To expedite the process, please ensure that all feature PRs have an associated i
## Commit Message Guidelines
We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic-framework/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
### Commit Message Format

View File

@@ -1,3 +1,7 @@
Issue number: #
---------
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. -->
@@ -9,11 +13,6 @@
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
<!-- Issues are required for both bug fixes and features. -->
Issue URL:
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by this PR. -->

View File

@@ -22,6 +22,9 @@ runs:
- uses: actions/setup-node@v3
with:
node-version: 16.x
- name: Install latest npm
run: npm install -g npm@latest
shell: bash
- name: Install Dependencies
run: lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
shell: bash
@@ -41,6 +44,6 @@ runs:
env:
NPM_TOKEN: ${{ inputs.token }}
- name: Publish to NPM
run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }}
run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance
shell: bash
working-directory: ${{ inputs.working-directory }}

View File

@@ -29,7 +29,7 @@ runs:
shell: bash
working-directory: ./angular/test
- name: Install Dependencies
run: npm install
run: npm install --legacy-peer-deps
shell: bash
working-directory: ./angular/test/build/${{ inputs.app }}
- name: Sync Built Changes

View File

@@ -135,7 +135,7 @@ jobs:
strategy:
fail-fast: false
matrix:
apps: [ng14, ng15]
apps: [ng14, ng15, ng16]
needs: [build-angular, build-angular-server]
runs-on: ubuntu-latest
steps:

View File

@@ -14,7 +14,7 @@ jobs:
# as lerna will fail when there is a leading 0
# See https://github.com/lerna/lerna/issues/2840
- name: Install Dependencies
run: npm ci --no-package-lock
run: npm ci
shell: bash
- id: create-dev-hash
name: Create Dev Hash
@@ -24,6 +24,8 @@ jobs:
release-ionic:
needs: [create-dev-hash]
permissions:
id-token: write
uses: ./.github/workflows/release-ionic.yml
with:
tag: dev

View File

@@ -17,7 +17,7 @@ jobs:
# as lerna will fail when there is a leading 0
# See https://github.com/lerna/lerna/issues/2840
- name: Install Dependencies
run: npm ci --no-package-lock
run: npm ci
shell: bash
- id: create-nightly-hash
name: Create Nightly Hash
@@ -29,6 +29,8 @@ jobs:
release-ionic:
needs: [create-nightly-hash]
permissions:
id-token: write
uses: ./.github/workflows/release-ionic.yml
with:
tag: nightly

View File

@@ -36,6 +36,8 @@ on:
jobs:
release-ionic:
permissions:
id-token: write
uses: ./.github/workflows/release-ionic.yml
with:
tag: ${{ inputs.tag }}

View File

@@ -3,6 +3,42 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
### Bug Fixes
* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273)
* **ios:** scroll assist sizes input correctly ([#27253](https://github.com/ionic-team/ionic-framework/issues/27253)) ([a874992](https://github.com/ionic-team/ionic-framework/commit/a8749929e01b07043631fbc8c522d39cbc3ae798)), closes [#27249](https://github.com/ionic-team/ionic-framework/issues/27249)
* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42)
* **react:** nav will remove components from the DOM ([#25763](https://github.com/ionic-team/ionic-framework/issues/25763)) ([beb46bf](https://github.com/ionic-team/ionic-framework/commit/beb46bf9def466c4bf54aeed2b5ccdcfcf5cd579)), closes [#25753](https://github.com/ionic-team/ionic-framework/issues/25753)
* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086)
## [7.0.3](https://github.com/ionic-team/ionic-framework/compare/v7.0.2...v7.0.3) (2023-04-19)
### Bug Fixes
* **accordion:** inset style respects animated property ([#27173](https://github.com/ionic-team/ionic-framework/issues/27173)) ([114fe28](https://github.com/ionic-team/ionic-framework/commit/114fe28f3cc9ee52bc5eefa569353f490ab01023)), closes [#27047](https://github.com/ionic-team/ionic-framework/issues/27047)
* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic-framework/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic-framework/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic-framework/issues/27027)
* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic-framework/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic-framework/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d))
* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic-framework/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic-framework/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic-framework/issues/27085)
* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic-framework/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic-framework/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e))
* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic-framework/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic-framework/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic-framework/issues/26830)
* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic-framework/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic-framework/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic-framework/issues/27208)
* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic-framework/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic-framework/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic-framework/issues/27081)
* **textarea:** legacy textarea respects padding ([#27219](https://github.com/ionic-team/ionic-framework/issues/27219)) ([742d429](https://github.com/ionic-team/ionic-framework/commit/742d4295ddfe40c643d9dd21ffc6d9fb3eb6f717)), closes [#27218](https://github.com/ionic-team/ionic-framework/issues/27218)
* **toast:** screen readers announce content ([#27198](https://github.com/ionic-team/ionic-framework/issues/27198)) ([76c8b94](https://github.com/ionic-team/ionic-framework/commit/76c8b94e2a818e1b824701b788d5ed8b6e554d42)), closes [#25866](https://github.com/ionic-team/ionic-framework/issues/25866)
* **vue:** components have correct name in Vue Dev Tools ([#27180](https://github.com/ionic-team/ionic-framework/issues/27180)) ([07941a5](https://github.com/ionic-team/ionic-framework/commit/07941a59ba68a46d1345fecec6df82fb4655a0b5)), closes [#25199](https://github.com/ionic-team/ionic-framework/issues/25199)
## [7.0.2](https://github.com/ionic-team/ionic-framework/compare/v7.0.1...v7.0.2) (2023-04-12)

View File

@@ -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.
## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
**Note:** Version bump only for package @ionic/angular
## [7.0.3](https://github.com/ionic-team/ionic/compare/v7.0.2...v7.0.3) (2023-04-19)
**Note:** Version bump only for package @ionic/angular
## [7.0.2](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.2) (2023-04-12)
**Note:** Version bump only for package @ionic/angular

View File

@@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
"version": "7.0.2",
"version": "7.0.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
"version": "7.0.2",
"version": "7.0.4",
"license": "MIT",
"dependencies": {
"@ionic/core": "^7.0.2",
"@ionic/core": "^7.0.4",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@@ -1227,9 +1227,9 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.2.tgz",
"integrity": "sha512-GxQsMmsyBGeK9khIPNR3zw3WvDZj3I0inKtPcd/s9hEnfndAlFFI9gckB7/zrp55xoknCRwqAYT8sGWze3sn2w==",
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
"integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
"dependencies": {
"@stencil/core": "^3.2.1",
"ionicons": "^7.1.0",
@@ -8104,9 +8104,9 @@
"dev": true
},
"@ionic/core": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.2.tgz",
"integrity": "sha512-GxQsMmsyBGeK9khIPNR3zw3WvDZj3I0inKtPcd/s9hEnfndAlFFI9gckB7/zrp55xoknCRwqAYT8sGWze3sn2w==",
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
"integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
"requires": {
"@stencil/core": "^3.2.1",
"ionicons": "^7.1.0",

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
"version": "7.0.2",
"version": "7.0.4",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -17,7 +17,7 @@
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/ionic.git"
"url": "git+https://github.com/ionic-team/ionic-framework.git"
},
"bugs": {
"url": "https://github.com/ionic-team/ionic/issues"
@@ -47,7 +47,7 @@
}
},
"dependencies": {
"@ionic/core": "^7.0.2",
"@ionic/core": "^7.0.4",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"

View File

@@ -5,7 +5,7 @@
"keywords": [],
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/ionic.git"
"url": "git+https://github.com/ionic-team/ionic-framework.git"
},
"license": "MIT",
"main": "umd/index.js",

View File

@@ -6,7 +6,7 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
The Angular test app supports syncing your locally built changes for validation.
1. Build the `core` and `packages/angular` projects using `npm run build`.
1. Build the `core` and `packages/angular` directories using `npm run build`.
2. [Build the Angular test app](#test-app-build-structure).
3. Navigate to the built test app.
4. Install dependencies using `npm install`.

View File

@@ -0,0 +1,5 @@
it("should be on Angular 14", () => {
cy.visit('/');
cy.get('ion-title').contains('Angular 14');
});

View File

@@ -1,3 +0,0 @@
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>

View File

@@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

View File

@@ -0,0 +1,5 @@
it("should be on Angular 15", () => {
cy.visit('/');
cy.get('ion-title').contains('Angular 15');
});

View File

@@ -1,3 +0,0 @@
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>

View File

@@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

View File

View File

@@ -0,0 +1,5 @@
it("should be on Angular 16", () => {
cy.visit('/');
cy.get('ion-title').contains('Angular 16');
});

28260
angular/test/apps/ng16/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,70 @@
{
"name": "ionic-angular-test-app",
"version": "0.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"sync:build": "sh scripts/build-ionic.sh",
"sync": "sh scripts/sync.sh",
"build": "ng build --configuration production --no-progress",
"lint": "ng lint",
"serve:ssr": "node dist/test-app/server/main.js",
"build:ssr": "ng build --prod && ng run test-app:server:production",
"dev:ssr": "ng run test-app:serve-ssr",
"prerender": "ng run test-app:prerender",
"cy.open": "cypress open",
"cy.run": "cypress run",
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
},
"dependencies": {
"@angular/animations": "^16.0.0-rc.0",
"@angular/common": "^16.0.0-rc.0",
"@angular/compiler": "^16.0.0-rc.0",
"@angular/core": "^16.0.0-rc.0",
"@angular/forms": "^16.0.0-rc.0",
"@angular/platform-browser": "^16.0.0-rc.0",
"@angular/platform-browser-dynamic": "^16.0.0-rc.0",
"@angular/platform-server": "^16.0.0-rc.0",
"@angular/router": "^16.0.0-rc.0",
"@ionic/angular": "^7.0.0",
"@ionic/angular-server": "^7.0.0",
"@nguniversal/express-engine": "^15.0.0",
"core-js": "^2.6.11",
"express": "^4.15.2",
"ionicons": "^6.0.4",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"typescript-eslint-language-service": "^4.1.5",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.0-rc.0",
"@angular-eslint/builder": "^15.0.0",
"@angular-eslint/eslint-plugin": "^15.0.0",
"@angular-eslint/eslint-plugin-template": "^15.0.0",
"@angular-eslint/schematics": "^15.0.0",
"@angular-eslint/template-parser": "^15.0.0",
"@angular/cli": "^16.0.0-rc.0",
"@angular/compiler-cli": "^16.0.0-rc.0",
"@angular/language-service": "^16.0.0-rc.0",
"@nguniversal/builders": "^15.0.0",
"@types/express": "^4.17.7",
"@types/node": "^12.12.54",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"concurrently": "^6.0.0",
"cypress": "^10.2.0",
"eslint": "^7.26.0",
"ts-loader": "^6.2.2",
"ts-node": "^8.3.0",
"typescript": "~5.0.2",
"wait-on": "^5.2.1",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.2"
},
"engines": {
"node": ">= 16"
}
}

View File

@@ -0,0 +1,10 @@
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
@NgModule({
imports: [
RouterModule.forChild([])
],
exports: [RouterModule]
})
export class VersionTestRoutingModule { }

View File

@@ -0,0 +1,35 @@
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": false,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"emitDecoratorMetadata": true,
"typeRoots": ["node_modules/@types"],
"lib": ["ES2022", "dom"],
"plugins": [
{
"name": "typescript-eslint-language-service"
}
],
"useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

View File

@@ -13,7 +13,6 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/test-app/browser",
"index": "src/index.html",
"main": "src/main.ts",
@@ -64,8 +63,17 @@
"maximumWarning": "6kb"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
@@ -75,8 +83,12 @@
"configurations": {
"production": {
"browserTarget": "test-app:build:production"
},
"development": {
"browserTarget": "test-app:build:development"
}
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
@@ -136,9 +148,7 @@
}
},
"cli": {
"schematicCollections": [
"@angular-eslint/schematics"
],
"schematicCollections": ["@angular-eslint/schematics"],
"cache": {
"enabled": false
}

View File

@@ -15,7 +15,7 @@ npm pack ../../../dist
npm pack ../../../../packages/angular-server/dist
# Install Dependencies
npm install *.tgz --no-save
npm install *.tgz --no-save --legacy-peer-deps
# Delete Angular cache directory
rm -rf .angular/

View File

@@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar>
<ion-title>
Test App
Test App - Angular {{ angularVersion.major }}
</ion-title>
</ion-toolbar>
</ion-header>

View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, VERSION } from '@angular/core';
import { AnimationBuilder, AnimationController } from '@ionic/angular';
@Component({
@@ -6,6 +6,9 @@ import { AnimationBuilder, AnimationController } from '@ionic/angular';
templateUrl: './home-page.component.html',
})
export class HomePageComponent {
angularVersion = VERSION;
routerAnimation: AnimationBuilder = (_, opts) => {
const { direction, enteringEl, leavingEl } = opts;
const animation = this.animationCtrl.create().duration(500).easing('ease-out');

View File

@@ -25,7 +25,7 @@
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
@@ -42,7 +42,7 @@
*
*/
import './zone-flags.ts';
import './zone-flags';
/***************************************************************************************************
* Zone JS is required by default for Angular itself.

View File

@@ -3,6 +3,45 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
### Bug Fixes
* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273)
* **ios:** scroll assist sizes input correctly ([#27253](https://github.com/ionic-team/ionic-framework/issues/27253)) ([a874992](https://github.com/ionic-team/ionic-framework/commit/a8749929e01b07043631fbc8c522d39cbc3ae798)), closes [#27249](https://github.com/ionic-team/ionic-framework/issues/27249)
* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42)
* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086)
## [7.0.3](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.3) (2023-04-19)
### Bug Fixes
* **accordion:** inset style respects animated property ([#27173](https://github.com/ionic-team/ionic/issues/27173)) ([114fe28](https://github.com/ionic-team/ionic/commit/114fe28f3cc9ee52bc5eefa569353f490ab01023)), closes [#27047](https://github.com/ionic-team/ionic/issues/27047)
* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic/issues/27027)
* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d))
* **item:** ios active state has correct contrast ([#27134](https://github.com/ionic-team/ionic/issues/27134)) ([bbdb0ca](https://github.com/ionic-team/ionic/commit/bbdb0ca480d7cd46c030d1947ced712653cf122b)), closes [#000](https://github.com/ionic-team/ionic/issues/000) [#000](https://github.com/ionic-team/ionic/issues/000)
* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic/issues/27085)
* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e))
* **menu:** refs are not destroyed on unmount ([#27141](https://github.com/ionic-team/ionic/issues/27141)) ([b81b0d1](https://github.com/ionic-team/ionic/commit/b81b0d14258d7b8caf028e6cfe81772ed2f5f119)), closes [/github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137](https://github.com//github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx/issues/L136-L137)
* **radio:** takes up full height in item ([#27168](https://github.com/ionic-team/ionic/issues/27168)) ([987c79f](https://github.com/ionic-team/ionic/commit/987c79f05b6791084c4526d80c8c28a28047dd58)), closes [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss/issues/L42) [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss#L43](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss/issues/L43)
* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic/issues/26830)
* **segment:** segment disables segment buttons created asyncronously ([#27155](https://github.com/ionic-team/ionic/issues/27155)) ([ad6b130](https://github.com/ionic-team/ionic/commit/ad6b1301cf8528f7c9ad3c52730f01861117b380))
* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic/issues/27208)
* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic/issues/27081)
* **textarea:** legacy textarea respects padding ([#27219](https://github.com/ionic-team/ionic/issues/27219)) ([742d429](https://github.com/ionic-team/ionic/commit/742d4295ddfe40c643d9dd21ffc6d9fb3eb6f717)), closes [#27218](https://github.com/ionic-team/ionic/issues/27218)
* **toast:** screen readers announce content ([#27198](https://github.com/ionic-team/ionic/issues/27198)) ([76c8b94](https://github.com/ionic-team/ionic/commit/76c8b94e2a818e1b824701b788d5ed8b6e554d42)), closes [#25866](https://github.com/ionic-team/ionic/issues/25866)
* **vue:** components have correct name in Vue Dev Tools ([#27180](https://github.com/ionic-team/ionic/issues/27180)) ([07941a5](https://github.com/ionic-team/ionic/commit/07941a59ba68a46d1345fecec6df82fb4655a0b5)), closes [#25199](https://github.com/ionic-team/ionic/issues/25199)
## [7.0.2](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.2) (2023-04-12)

View File

@@ -1252,13 +1252,13 @@ ion-select,event,ionChange,SelectChangeEventDetail<any>,true
ion-select,event,ionDismiss,void,true
ion-select,event,ionFocus,void,true
ion-select,css-prop,--background
ion-select,css-prop,--border-color Color of the select border
ion-select,css-prop,--border-radius Radius of the select border
ion-select,css-prop,--border-style Style of the select border
ion-select,css-prop,--border-width Width of the select border
ion-select,css-prop,--highlight-color-focused The color of the highlight on the select when focused
ion-select,css-prop,--highlight-color-invalid The color of the highlight on the select when invalid
ion-select,css-prop,--highlight-color-valid The color of the highlight on the select when valid
ion-select,css-prop,--border-color
ion-select,css-prop,--border-radius
ion-select,css-prop,--border-style
ion-select,css-prop,--border-width
ion-select,css-prop,--highlight-color-focused
ion-select,css-prop,--highlight-color-invalid
ion-select,css-prop,--highlight-color-valid
ion-select,css-prop,--padding-bottom
ion-select,css-prop,--padding-end
ion-select,css-prop,--padding-start

18
core/package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "@ionic/core",
"version": "7.0.2",
"version": "7.0.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/core",
"version": "7.0.2",
"version": "7.0.4",
"license": "MIT",
"dependencies": {
"@stencil/core": "^3.2.1",
@@ -24,7 +24,7 @@
"@stencil/angular-output-target": "^0.6.0",
"@stencil/react-output-target": "^0.5.0",
"@stencil/sass": "^3.0.0",
"@stencil/vue-output-target": "^0.8.1",
"@stencil/vue-output-target": "^0.8.2",
"@types/jest": "^27.5.2",
"@types/node": "^14.6.0",
"@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -1624,9 +1624,9 @@
}
},
"node_modules/@stencil/vue-output-target": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz",
"integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==",
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
"integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
"dev": true,
"peerDependencies": {
"@stencil/core": "^2.9.0 || ^3.0.0"
@@ -11486,9 +11486,9 @@
"requires": {}
},
"@stencil/vue-output-target": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz",
"integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==",
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
"integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
"dev": true,
"requires": {}
},

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
"version": "7.0.2",
"version": "7.0.4",
"description": "Base components for Ionic",
"keywords": [
"ionic",
@@ -46,7 +46,7 @@
"@stencil/angular-output-target": "^0.6.0",
"@stencil/react-output-target": "^0.5.0",
"@stencil/sass": "^3.0.0",
"@stencil/vue-output-target": "^0.8.1",
"@stencil/vue-output-target": "^0.8.2",
"@types/jest": "^27.5.2",
"@types/node": "^14.6.0",
"@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -99,7 +99,7 @@
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/ionic-team/ionic.git"
"url": "git+https://github.com/ionic-team/ionic-framework.git"
},
"bugs": {
"url": "https://github.com/ionic-team/ionic/issues"

View File

@@ -417,7 +417,7 @@ export class Accordion implements ComponentInterface {
'accordion-disabled': disabled,
'accordion-readonly': readonly,
'accordion-animated': config.getBoolean('animated', true),
'accordion-animated': this.shouldAnimate(),
}}
>
<div

View File

@@ -163,3 +163,24 @@ it('should set default values if not provided', async () => {
expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
it('should not have animated class when animated="false"', async () => {
const page = await newSpecPage({
components: [Item, Accordion, AccordionGroup],
html: `
<ion-accordion-group animated="false">
<ion-accordion>
<ion-item slot="header">Label</ion-item>
<div slot="content">Content</div>
</ion-accordion>
</ion-accordion-group>
`,
});
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
const accordion = accordionGroup.querySelector('ion-accordion')!;
expect(accordionGroup.animated).toEqual(false);
expect(accordion.classList.contains('accordion-animated')).toEqual(false);
});

View File

@@ -85,7 +85,7 @@ test.describe('action sheet: basic', () => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
await actionSheetFixture.open('#alertFromActionSheet');
await page.locator('#open-alert').click();
await page.click('#open-alert');
await ionAlertDidPresent.next();
});

View File

@@ -5,7 +5,7 @@ test.describe('action sheet: isOpen', () => {
test.beforeEach(async ({ page, skip }) => {
skip.rtl('isOpen does not behave differently in RTL');
skip.mode('md', 'isOpen does not behave differently in MD');
await page.goto('/src/components/action-sheet/test/isOpen');
await page.goto('/src/components/action-sheet/test/is-open');
});
test('should open the action sheet', async ({ page }) => {

View File

@@ -5,7 +5,7 @@ test.describe('alert: isOpen', () => {
test.beforeEach(async ({ page, skip }) => {
skip.rtl('isOpen does not behave differently in RTL');
skip.mode('md', 'isOpen does not behave differently in MD');
await page.goto('/src/components/alert/test/isOpen');
await page.goto('/src/components/alert/test/is-open');
});
test('should open the alert', async ({ page }) => {

View File

@@ -9,7 +9,7 @@
--color-active: #{$breadcrumb-md-color-active};
--color-hover: #{$breadcrumb-md-color-active};
--color-focused: #{$breadcrumb-md-color-focused};
--background-focused: $breadcrumb-md-background-focused;
--background-focused: #{$breadcrumb-md-background-focused};
}
:host(.breadcrumb-active) {

View File

@@ -16,7 +16,7 @@ test.describe('datetime-button: switching to correct view', () => {
const datetime = page.locator('ion-datetime');
await expect(datetime).toHaveJSProperty('presentation', 'date-time');
await page.locator('#date-button').click();
await page.click('#date-button');
await page.waitForChanges();
await expect(datetime).toHaveJSProperty('presentation', 'date');
@@ -25,7 +25,7 @@ test.describe('datetime-button: switching to correct view', () => {
const datetime = page.locator('ion-datetime');
await expect(datetime).toHaveJSProperty('presentation', 'date-time');
await page.locator('#time-button').click();
await page.click('#time-button');
await page.waitForChanges();
await expect(datetime).toHaveJSProperty('presentation', 'time');

View File

@@ -65,40 +65,40 @@ test.describe('datetime-button: popover', () => {
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
});
test('should open the date popover', async ({ page }) => {
await page.locator('#date-button').click();
await page.click('#date-button');
await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible();
});
test('should open the time popover', async ({ page }) => {
await page.locator('#time-button').click();
await page.click('#time-button');
await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible();
});
test('should open the date popover then the time popover', async ({ page }) => {
await page.locator('#date-button').click();
await page.click('#date-button');
await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible();
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
await ionPopoverDidDismiss.next();
await page.locator('#time-button').click();
await page.click('#time-button');
await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible();
});
test('should open the time popover then the date popover', async ({ page }) => {
await page.locator('#time-button').click();
await page.click('#time-button');
await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible();
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
await ionPopoverDidDismiss.next();
await page.locator('#date-button').click();
await page.click('#date-button');
await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible();
});
@@ -127,40 +127,40 @@ test.describe('datetime-button: modal', () => {
ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
});
test('should open the date modal', async ({ page }) => {
await page.locator('#date-button').click();
await page.click('#date-button');
await ionModalDidPresent.next();
await expect(datetime).toBeVisible();
});
test('should open the time modal', async ({ page }) => {
await page.locator('#time-button').click();
await page.click('#time-button');
await ionModalDidPresent.next();
await expect(datetime).toBeVisible();
});
test('should open the date modal then the time modal', async ({ page }) => {
await page.locator('#date-button').click();
await page.click('#date-button');
await ionModalDidPresent.next();
await expect(datetime).toBeVisible();
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next();
await page.locator('#time-button').click();
await page.click('#time-button');
await ionModalDidPresent.next();
await expect(datetime).toBeVisible();
});
test('should open the time modal then the date modal', async ({ page }) => {
await page.locator('#time-button').click();
await page.click('#time-button');
await ionModalDidPresent.next();
await expect(datetime).toBeVisible();
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next();
await page.locator('#date-button').click();
await page.click('#date-button');
await ionModalDidPresent.next();
await expect(datetime).toBeVisible();
});

View File

@@ -240,6 +240,7 @@ test.describe('datetime: minmax', () => {
skip.rtl();
skip.mode('ios', 'This implementation is the same across modes.');
});
test('should reset to min time if out of bounds', async ({ page }) => {
await page.setContent(`
<ion-datetime
@@ -259,6 +260,7 @@ test.describe('datetime: minmax', () => {
await expect(datetime).toHaveJSProperty('value', '2022-10-10T08:00:00');
});
test('should reset to max time if out of bounds', async ({ page }) => {
await page.setContent(`
<ion-datetime
@@ -278,6 +280,28 @@ test.describe('datetime: minmax', () => {
await expect(datetime).toHaveJSProperty('value', '2022-10-10T08:00:00');
});
test('should adjust to in-bounds when using month picker', async ({ page }) => {
await page.setContent(`
<ion-datetime
min="2022-01-15"
value="2022-02-01"
presentation="date"
></ion-datetime>
`);
const datetime = page.locator('ion-datetime');
const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
await monthYearToggle.click();
await page.waitForChanges();
await monthColumnItems.nth(0).click(); // switch to January
await page.waitForChanges();
await expect(datetime).toHaveJSProperty('value', '2022-01-15T00:00:00');
});
});
test.describe('datetime: confirm button', () => {

View File

@@ -15,21 +15,24 @@ test.describe('datetime: prefer wheel', () => {
* if the datetime is too small.
*/
test.describe('datetime: wheel rendering', () => {
test('should not have visual regressions for date wheel', async ({ page }) => {
// TODO FW-4110
test.skip('should not have visual regressions for date wheel', async ({ page }) => {
await page.setContent(`
<ion-datetime size="cover" presentation="date" prefer-wheel="true" value="2019-05-30" max="2022"></ion-datetime>
`);
await expect(page).toHaveScreenshot(`datetime-wheel-date-diff-${page.getSnapshotSettings()}.png`);
});
test('should not have visual regressions for date-time wheel', async ({ page }) => {
// TODO FW-4110
test.skip('should not have visual regressions for date-time wheel', async ({ page }) => {
await page.setContent(`
<ion-datetime size="cover" presentation="date-time" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
`);
await expect(page).toHaveScreenshot(`datetime-wheel-date-time-diff-${page.getSnapshotSettings()}.png`);
});
test('should not have visual regressions for time-date wheel', async ({ page }) => {
// TODO FW-4110
test.skip('should not have visual regressions for time-date wheel', async ({ page }) => {
await page.setContent(`
<ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
`);

View File

@@ -2,7 +2,7 @@ import type { DatetimeParts } from '../datetime-interface';
import { isSameDay } from './comparison';
import { getNumDaysInMonth } from './helpers';
import { parseAmPm } from './parse';
import { clampDate, parseAmPm } from './parse';
const twoDigit = (val: number | undefined): string => {
return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2);
@@ -333,7 +333,8 @@ export const calculateHourFromAMPM = (currentParts: DatetimeParts, newAMPM: 'am'
/**
* Updates parts to ensure that month and day
* values are valid. For days that do not exist,
* the closest valid day is used.
* or are outside the min/max bounds, the closest
* valid day is used.
*/
export const validateParts = (
parts: DatetimeParts,
@@ -341,7 +342,7 @@ export const validateParts = (
maxParts?: DatetimeParts
): DatetimeParts => {
const { month, day, year } = parts;
const partsCopy = { ...parts };
const partsCopy = clampDate({ ...parts }, minParts, maxParts);
const numDays = getNumDaysInMonth(month, year);

View File

@@ -40,7 +40,7 @@ test.describe('img: basic', () => {
ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
const ionImg = await page.locator('ion-img');
const ionImg = page.locator('ion-img');
await ionImg.evaluate((el: HTMLIonImgElement) => {
el.src = 'https://via.placeholder.com/150';
return el;
@@ -79,7 +79,7 @@ test.describe('img: basic', () => {
ionError = await page.spyOnEvent('ionError');
const ionImg = await page.locator('ion-img');
const ionImg = page.locator('ion-img');
await ionImg.evaluate((el: HTMLIonImgElement) => {
el.src = 'https://via.placeholder.com/150';
return el;

View File

@@ -1,12 +1,17 @@
/**
* Values are converted to strings when emitted which is
* why we do not have a `number` type here even though the
* `value` prop accepts a `number` type.
*/
export interface InputChangeEventDetail {
value?: string | number | null;
value?: string | null;
event?: Event;
}
// We recognize that InputInput is not an ideal naming pattern for this type.
// TODO (FW-2199): Explore renaming this type to something more appropriate.
export interface InputInputEventDetail {
value?: string | number | null;
value?: string | null;
event?: Event;
}

View File

@@ -177,7 +177,7 @@
// otherwise the .input-cover will not be rendered at all
// The input cover is not clickable when the input is disabled
.cloned-input {
@include position(0, null, null, 0);
@include position(0, null, 0, 0);
position: absolute;
@@ -299,6 +299,8 @@
transition: background-color 15ms linear;
background: var(--background);
line-height: normal;
}
// Input Native Wrapper
@@ -307,6 +309,8 @@
.native-wrapper {
display: flex;
position: relative;
flex-grow: 1;
width: 100%;

View File

@@ -367,13 +367,6 @@ export class Input implements ComponentInterface {
componentDidLoad() {
this.originalIonInput = this.ionInput;
const nativeInput = this.nativeInput;
if (nativeInput) {
// TODO: FW-729 Update to JSX bindings when Stencil resolves bug with:
// https://github.com/ionic-team/stencil/issues/3235
nativeInput.addEventListener('compositionstart', this.onCompositionStart);
nativeInput.addEventListener('compositionend', this.onCompositionEnd);
}
}
disconnectedCallback() {
@@ -384,11 +377,6 @@ export class Input implements ComponentInterface {
})
);
}
const nativeInput = this.nativeInput;
if (nativeInput) {
nativeInput.removeEventListener('compositionstart', this.onCompositionStart);
nativeInput.removeEventListener('compositionend', this.onCompositionEnd);
}
}
/**
@@ -436,7 +424,11 @@ export class Input implements ComponentInterface {
*/
private emitInputChange(event?: Event) {
const { value } = this;
this.ionInput.emit({ value, event });
// Checks for both null and undefined values
const newValue = value == null ? value : value.toString();
this.ionInput.emit({ value: newValue, event });
}
private shouldClearOnEdit() {
@@ -690,6 +682,8 @@ export class Input implements ComponentInterface {
onBlur={this.onBlur}
onFocus={this.onFocus}
onKeyDown={this.onKeydown}
onCompositionstart={this.onCompositionStart}
onCompositionend={this.onCompositionEnd}
{...this.inheritedAttributes}
/>
{this.clearInput && !readonly && !disabled && (

View File

@@ -5,7 +5,7 @@ test.describe('input: basic', () => {
test.describe('input with overflow', () => {
test('should not have visual regressions', async ({ page }) => {
await page.setContent(`
<ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
<ion-input aria-label="Long Input" value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
`);
const input = page.locator('ion-input');
// Validates the display of an input where text extends off the edge of the component.
@@ -15,7 +15,7 @@ test.describe('input: basic', () => {
test.describe('input with placeholder', () => {
test('should not have visual regressions', async ({ page }) => {
await page.setContent(`
<ion-input placeholder="Placeholder"></ion-input>
<ion-input aria-label="Input with Placeholder" placeholder="Placeholder"></ion-input>
`);
const input = page.locator('ion-input');
// Validates the display of an input with a placeholder.

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -0,0 +1,22 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('input: card', () => {
test('should render correctly in card', async ({ page, skip }) => {
skip.rtl();
skip.mode('ios');
await page.setContent(`
<ion-card>
<ion-card-content>
<ion-item style="border: 1px solid grey" lines="none">
<ion-input label="input" label-placement="stacked"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
`);
const card = page.locator('ion-card');
expect(await card.screenshot()).toMatchSnapshot(`input-card-${page.getSnapshotSettings()}.png`);
});
});

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Some files were not shown because too many files have changed in this diff Show More