Issue number: N/A
---------
This PR migrates the alert tests to use the generator infrastructure.
In
91ba3a1290
I migrated the basic test to use [Playwright
Fixtures](https://playwright.dev/docs/test-fixtures#creating-a-fixture)
instead since it is a) a best practice and b) easier to add the
generator support to.
Issue number: N/A
---------
This PR adds documentation for the following:
1. A step-by-step guide for migrating to generators.
2. Documentation on the custom tooling we built on top of Playwright
3. A best practice guide. Note: This was originally in the Ionic
internal Notion, but I moved it here because it is of value to community
contributors.
I also added a few new best practices that were not on the Notion guide:
- Components must have a `basic` test with an `index.html` file
- Slow tests should be broken up across multiple files for CI
performance
- Rendering and functionality tests should be broken up across multiple
test.describe blocks or files
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: N/A
---------
This PR adds support for writing tests with generators.
8febaddee9
- Adds the underlying generator code necessary to create multiple
variants of a single test
- Note: This PR does not add support for dark mode generators. This will
be added in a separate PR.
5c498d8daf
- Adds the type declarations on `page.goto` and `page.setContent`
necessary to accept the config result provided by the `configs`
generator function.
df8c44b563
- Updates the `goto` and `setContent` functionality to support the
generator config with backwards compatibility for the legacy tests.
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. -->
This is the first PR to introduce the infrastructure required to add
test generators to the Ionic Framework project. This PR introduces the
file name changes necessary to support two playwright configs, so I
recommend reviewing the PR by commit:
1e5012cea1
- Created a `playwright.config-legacy.ts` file and updates
`package.json`.
- Running `npm run test.e2e` will run the generator tests, and running
`npm run test.e2e.legacy` will run the legacy tests.
4fe8de7df7
- Updates the GitHub Action scripts to run both the modern and legacy
E2E tests. I added command modifiers to avoid collisions with output
directories.
e8bcfaf926
- Updates `*.e2e.ts` files to have the legacy format name:
`*.e2e-legacy.ts`. This naming scheme is required for the two Playwright
configs to pull in the correct files. When migrating tests to
generators, team members will rename the file to remove the `-legacy`
part.
5bf196c36d
(warning: lots of files!)
- Updates the `*.e2e.ts-snapshots` directories to have the legacy format
name: `*.e2e-legacy.ts-snapshots`. The screenshot directory in
Playwright is generated based on the test file name which is why we are
updating the screenshot directory. When migrating tests to generators,
team members will rename the directory to remove the `-legacy` part.
## 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. -->
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. -->
there are a few outdated links to a dead heroku app in the repo
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
this commit removes old links within the repo that point to a heroku app
that is no longer working/maintained. the original intent was to update
stencil-related links initially (as stencil still focuses on slack for
community communications). however, there were two references to the
ionic worldwide slack, which has been since replaced with discord. i've
updated those link (which were only in comments) as well. after applying
this commit, there are no references to 'heroku' in the repo
## 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. -->
Feel free to reject this/request we remove these links altogether. I'm
not entirely sure we want to continue to provide them in the `core/` and
`angular/` directories (when we don't have them in `packages/react/` nor
`packages/vue/`
When using Angular, React, or Vue, the use of tabs is coupled to the
framework's routing. These methods are only available when using tabs
with vanilla JavaScript.
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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds more context to the description of the methods on tabs
## 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. -->
Issue number: resolves#27257
---------
<!-- 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. -->
1. Scroll assist was appending padding data every time it ran which
caused the amount of padding to infinitely grow until an input was
blurred
2. Calling `inputEl.focus()` caused scroll assist to run again which
caused unexpected scrolls
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `currentPadding` is either preserved or set, never incremented
- Added a special attribute to inputs that are manually focused so
scroll assist knows not to re-run
## 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. -->
Issue number: resolves#27254
---------
<!-- 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 swipe gesture is currently applied to the entire `ion-toggle`
element. This was fine for the legacy syntax, but with the modern syntax
it means users can swipe on the label text which is not correct.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The toggle now creates the gesture on the `.toggle-icon` element which
is the container for the knob for both modern and legacy syntaxes.
- Moved `touch-action: none` to the host of the legacy toggle. This was
preventing scrolling from happening on the modern toggle. I double
checked with native iOS and you can scroll when a pointer moves over a
toggle.
The structure of this fix was designed to match what `ion-range` does:
a8749929e0/core/src/components/range/range.tsx (L282-L296)
| Modern | Legacy |
| - | - |
| <video
src="https://user-images.githubusercontent.com/2721089/233431240-11f0c94f-d86b-4975-afd5-e534262a6f16.mov"></video>
| <video
src="https://user-images.githubusercontent.com/2721089/233431275-6c6f7fef-6cc0-4adc-8915-6fd5c3795ade.mov"></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. -->
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. -->
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. -->
<!-- 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>
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>
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. -->
<!-- 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>
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. -->
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. -->
<!-- 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. -->
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
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>
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. -->
<!-- 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`.
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>
<!-- 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
## 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. -->
<!-- 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. -->
<!-- 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. -->
<!-- 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>
<!-- 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. -->
<!-- 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>
<!-- 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
<!-- 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`
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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. -->
Segment buttons are only disabled when the segment's `disabled` property
changes. This means that segment buttons added to the segment async
don't have their `disabled` state inited correctly.
<!-- Issues are required for both bug fixes and features. -->
Issue URL: Resolves
https://github.com/ionic-team/ionic-framework/issues/25396
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Segment buttons now check if their parent segment is `disabled` when
added to the DOM.
## 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. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
<!-- 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 `ionChange` event test occasionally flakes on CI:
https://github.com/ionic-team/ionic-framework/actions/runs/4670357292/jobs/8270028536
It appears that when clicking the same accordion again the test expects
the `ionChange` event to receive a detail payload of `undefined`.
However, this is wrong because `ionChange` should not fire at all if the
value does not change.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the `undefined` check from the test. This check does not seem
necessary as clicking the `nth(2)` accordion should then update the
payload.
## 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. -->
<!-- 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
https://github.com/ionic-team/ionic-framework/issues/27159
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Radio elements take up the full height when used inside of an item.
This aligns with what checkbox and toggle do:
Checkbox:
cb8f07c553/core/src/components/checkbox/checkbox.scss (L42)
Toggle:
cb8f07c553/core/src/components/toggle/toggle.scss (L43)
## 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.11681223603.14da7831`
Bumps [@playwright/test](https://github.com/Microsoft/playwright) from
1.32.2 to 1.32.3.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/Microsoft/playwright/releases"><code>@playwright/test</code>'s
releases</a>.</em></p>
<blockquote>
<h2>v1.32.3</h2>
<h2>Highlights</h2>
<p><a
href="https://redirect.github.com/microsoft/playwright/issues/22144">microsoft/playwright#22144</a>
- [BUG] WebServer only starting after timeout
<a
href="https://redirect.github.com/microsoft/playwright/pull/22191">microsoft/playwright#22191</a>
- chore: allow reusing browser between the tests
<a
href="https://redirect.github.com/microsoft/playwright/issues/22215">microsoft/playwright#22215</a>
- [BUG] Tests failing in toPass often marked as passed</p>
<h2>Browser Versions</h2>
<ul>
<li>Chromium 112.0.5615.29</li>
<li>Mozilla Firefox 111.0</li>
<li>WebKit 16.4</li>
</ul>
<p>This version was also tested against the following stable
channels:</p>
<ul>
<li>Google Chrome 111</li>
<li>Microsoft Edge 111</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="679ee37d0f"><code>679ee37</code></a>
chore: mark v1.32.3</li>
<li><a
href="710674a0fe"><code>710674a</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22254">#22254</a>):
revert(20509, 20596): expect.toPass is broken with these</li>
<li><a
href="cb419e75cd"><code>cb419e7</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22035">#22035</a>):
fix(webServer): follow relative redirects when checking ...</li>
<li><a
href="ce33ec23c7"><code>ce33ec2</code></a>
cherry-pick(<a
href="https://redirect.github.com/Microsoft/playwright/issues/22191">#22191</a>):
chore: allow reusing browser between the tests</li>
<li>See full diff in <a
href="https://github.com/Microsoft/playwright/compare/v1.32.2...v1.32.3">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
<!-- 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
https://github.com/ionic-team/ionic-framework/issues/27130
The active/focus background colors on ion-item for iOS are always #000.
This allows for the correct contrast on light mode. This is a problem on
dark mode because the item background color defaults to #000 as well.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the default active/focus colors to be the text color. This
ensures that the active/focus colors are always the opposite of what the
default item background color is.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Note: We are updating the default values of CSS Variables, but our
implementation of the spec is wrong and creates color contrast issues.
<!-- 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>
<!-- 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
https://github.com/ionic-team/ionic-framework/issues/24907
`ion-menu` currently clears the `menuInnerEl` and `backdropEl` refs
created by Stencil when `disconnectedCallback` is fired. If the
`ion-menu` component is re-mounted but _not_ re-rendered, those refs
will still be `undefined` when the `open` method is called, resulting in
the linked issue. Note that if the `ion-menu` re-renders before `open`
is called then this issue does not reproduce.
This clearing behavior was added ~6 years ago before we utilized Stencil
refs:
687b37ad3e/packages/core/src/components/menu/menu.tsx (L136-L137)
During this time we had to manually create and clear the element
references.
Several years later we moved to using Stencil refs, but we did not
remove the logic that clears the refs:
d83d8eed12
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Menu no longer sets `menuInnerEl` and `backdropEl` to `undefined` in
`disconnectedCallback`.
- The `close` method is called so that the state is reset prior to the
menu being re-added. I observed that without this, the animation to
re-present a menu did not work correctly.
## 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. -->
<!-- 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. -->
I forgot to skip the legacy radio test in
https://github.com/ionic-team/ionic-framework/pull/27126.
I also discovered we had duplicate flaky radio keyboard test tech debt
tickets.
https://github.com/ionic-team/ionic-framework/actions/runs/4658963827/jobs/8245309480?pr=27125
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- skipped legacy radio test
- closed FW-3956 in favor of FW-3747
## 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. -->
