Issue number: resolves#29211
---------
<!-- 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. -->
In https://github.com/ionic-team/ionic-framework/pull/28861 I fixed a
bug that caused `.popover-viewport` to have `overflow: hidden`. In
reality, this code should have always applied but due to an incorrect
selector it never did.
As it turns out in
https://github.com/ionic-team/ionic-framework/issues/29211, some
developers were relying on the broken behavior to build their
applications. In particular, developers were using `ion-popover` without
an `ion-content`. The linked change made it so that using popovers
without `ion-content` were not scrollable.
After talking with @mapsandapps we think it makes sense to officially
support this behavior. We support using [modals without
`ion-content`](https://ionicframework.com/docs/api/modal#custom-dialogs),
and we could not think of a reason to not support the same use case for
popover.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- If the `.popover-viewport` element has a child content then
`.popover-viewport `will not be scrollable.
- If the `.popover-viewport` element does not have a child content then
`.popover-viewport` will be scrollable.
I implemented this behavior using progressive enhancement via `:has`.
The [`:has` pseudo-class](https://caniuse.com/?search=%3Ahas) has
cross-browser support. Ionic v7 supports some versions of browsers that
do not have `:has` support. As a result, we fall back to the existing
behavior in this environment. Developers are able to get this behavior
on older browsers by explicitly setting `overflow: auto` on
`.popover-viewport`.
Fortunately, we will be dropping support for several of the older
browsers versions in Ionic v8, so the need to do the manual opt-in
should be less frequent as time goes on.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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.8.2-dev.11711383079.118d48a5`
Testing:
1. Open https://codepen.io/liamdebeasi/pen/JjVJrZQ?editors=1100 (this
has a dev build installed)
2. Click each button to open a popover.
3. Verify that each popover can be scrolled.
I could not find a great way to automate this test, but let me know if
anyone has ideas!
Issue number: internal
---------
## What is the new behavior?
Adds the initial files for the Ionic input.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: N/A
---------
<!-- 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 toolbar `basic` test only checks light theme. Dark theme coverage is
required to test against the bug fixed in
https://github.com/ionic-team/ionic-framework/pull/29216.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Dark theme coverage added. This required converting the test to
`page.setContent` instead of `page.goto`, so I went ahead and split the
captured toolbars into multiple tests, including some cleanup of the
test content. Since this included changes across many different tests,
even ones not strictly related to the bug, this work has been split into
a separate PR.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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 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 are not able to easily add the "ionic" theme to existing test
cases, without running the test against both iOS and MD mode:
```ts
configs({ themes: ['ios', 'md', 'ionic'] })
// Generates 4 test cases
// - iOS theme on iOS mode
// - MD theme on MD mode
// - Ionic theme on iOS mode
// - Ionic theme on MD mode
```
With the separation of `mode` into look and feel, the majority of test
cases do not require testing the mode behavior and instead only need to
test the visual theme that is applied to the component.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the `themes` option from the `configs` test generator object.
```ts
configs({ modes: ['ios', 'md', 'ionic-md'] })
```
- Combines `theme` and `mode` into the existing `modes` test generator
object
- The new options are `ionic-ios` and `ionic-md`, to run the Ionic theme
against the respective mode.
- This path was preferred to avoid deprecating and migrating all
existing tests.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I do not have a strong preference on the semantics of `ionic-ios` vs.
`ios-ionic` (theme first vs. mode first). If anyone has an opinion or
alternative suggestion, please add a comment.
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: **ROU-4815**
---------
## What is the new behavior?
- Adds an ionic theme style implementation for `ion-button`.
- Adds a new `rectangular` shape to the button.
- Adds two new button sizes: `xsmall` and `xlarge`.
- Adds a new `focus-ring` CSS shadow part for the ionic theme.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Preview
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: João Ferreira <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com>
Co-authored-by: João Ferreira <joao.manuel.ferreira123@gmail.com>
Issue number: Internal
---------
<!-- 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 given a password input it is hard to know what users are typing as
the contents of the input are obscured. As a result, it is a common
pattern to have a button that lets users temporarily toggle the
visibility of the password so they can correct any mistakes. Ionic
currently has the infrastructure for developers to implement this on
their own, but this use case is so common that the team thinks it is
worth having this functionality built-in to Ionic.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces the `ion-input-password-toggle` component. This component
is a button that toggles the visibility of the text in the input it is
slotted into.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ Give co-author credit to
https://github.com/ionic-team/ionic-framework/pull/29141 on merge.
Docs PR: https://github.com/ionic-team/ionic-docs/pull/3541
Note: We did not do the approach listed in the other PR due to
https://github.com/ionic-team/ionic-framework/pull/29141#discussion_r1523631811.
---------
Co-authored-by: OS-giulianasilva <OS-giulianasilva@users.noreply.github.com>
Issue number: Internal
---------
<!-- 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. -->
[Amanda pointed out that the ripple effect for the Button inside of
InputPasswordToggle was not
working](https://github.com/ionic-team/ionic-framework/pull/29175#discussion_r1532627841).
I found out that calling `ev.preventDefault` on `pointerdown` causes
`mouseup` to not get fired. On desktop, we rely on `mouseup` to know
when to add the ripple effect. (`touchend` is not impacted)
Interestingly, calling `ev.preventDefault` on `pointerdown` does **not**
prevent `pointerup` from being fired. The idea here is that if we
migrate the tap click utility to use the PointerEvents API instead of
separate mouse/touch listeners we can keep the existing tap click
behavior while also fixing the bug that Amanda noted.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Tap click nows listens for the Pointer Events instead of separate
mouse/touch events
Impact to developers is fairly minimal. There should be no behavior
change (other than the bug I noted being fixed). There should be a very
small perf boost because this util now only adds 4 event listeners on
the document instead of 7 previously.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Reviewers: Please manually test this on desktop devices as well as iOS
and Android devices (not Chrome Dev Tools. iOS simulators are fine).
Test that components such as `ion-button` correctly add the activated
state (or ripple effect for MD). Also verify that the activated state is
not added when tapping the button and then scrolling. For desktop, check
that right clicking does not add the activated state.
Issue number: resolves#29193
---------
<!-- 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. -->
In an attempt to preserve backwards compatibility when adding
`autocapitalize` to Searchbar, we used `!` to indicate that the prop was
never undefined. The `autocapitalize` on `HTMLElement` expects this
value to be a string and never undefined.
For the purposes of the property on Searchbar, setting this prop to one
of the accepted values would constitute a breaking change because it
would override the default browser behavior (which we previously relied
upon). As a result, we used `!` to not set a default prop but inform
TypeScript that this prop is always defined. This unintentionally made
it so developers needed to define the `autocapitalize` property every
time which is not what we want.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `autocapitalize` now defaults to the `'default'` keyword. This is an
internal keyword that is used to tell Ionic to **not** set the
`autocapitalize` attribute on the inner `input` element and instead rely
on the default browser behavior. This satisfies the `HTMLElement`
requirement that `autocapitalize` is never undefined. In Ionic 8 this
`'default'` value will be replaced with `'off'`.
[Typescript currently sets the `HTMLElement` `autocapitalize` type to
`string`](65812bf3ec/src/lib/dom.generated.d.ts (L10087))
which is why we can add a `'default'` keyword here. There is some risk
that if these type definitions change in the future that applications
may encounter errors. However, changing this on the TypeScript side
would itself be a breaking change. Additionally, we are moving away from
`'default'` in Ionic 8, so I think this is an acceptable amount of risk.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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.8.2-dev.11711027016.13b2a920`
Tested in a React starter app with Searchbar, and I verified this fix
works.
BREAKING CHANGE: Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
Issue number: Internal
---------
<!-- 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. -->
Ionic Framework provides a small utility wrapper around the Web
Animations API. Historically not all browsers that Ionic Framework
supported, had support for the Web Animations API. To offer backwards
compatibility, Ionic Framework provided fallback behaviors for the
different wrapped APIs.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the legacy CSS animations fallback behavior from the Web
Animations API animation utility. Maintaining a few no-op behaviors for
test environments.
- Resolved a few internal type usages that were casting to any
- Removed spec tests that were testing the fallback CSS animations
behavior and/or already had test coverage from other unit tests.
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
All modern browsers support the Web Animations API today. If a developer
needs to target an older browser that does not support Web Animations,
they should either use [a
polyfill](https://github.com/web-animations/web-animations-js), or
implement the fallback behavior themselves.
## 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>
Issue number: Internal
---------
<!-- 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. -->
We add margin on content in the start/end slots so they do not run up
against either the visible text label of the text in the input. However,
we did not account for when multiple elements are placed into the same
slot. As a result, this margin is added more times than it needs to be.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the selector so the margin is only applied to either the last
or first element in the slot.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Test Steps:
1. Check out `feature-8.0`
2. Add multiple `ion-button` elements into either the start or end slot
on an input (you can reuse the template in
`src/components/input/test/slots`
3. Observe that margin is added to every `ion-button`.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Internal
---------
<!-- 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. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds the base architecture to add a new theme configuration to Ionic
Framework components.
- Components can now specify an additional stylesheet for the `ionic`
theme.
- Developers can specify the `theme` and `mode` independently to control
look and feel of a component.
Test infrastructure has been updated to add support for testing the
theme configuration with Playwright.
- Existing `themes` test configuration has been renamed to `palettes`
This PR is just the initial effort to decouple Ionic's architecture to
separate look and feel and allow our dev team to start introducing the
new component appearance to the UI. There will be additional changes
required to completely add support for the Ionic theme. These changes
are targeted against the `next` branch and are not expected to be used
in a production environment at this time.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: Internal
---------
<!-- 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. -->
Ionic Framework currently plans to offer dark and high contrast "themes"
in v8. However this naming nomenclature conflicts with a significant new
feature that the team is working on towards v9+.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates previous dark and high contrast "themes" to "palettes"
- Updates test infrastructure to import from the new stylesheet
locations
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
Developers that have updated to the Ionic v8 beta and have implemented
the dark and high contrast themes, will need to update the import path:
```diff
-@import '@ionic/angular/css/themes/dark.always.css';
+@import '@ionic/angular/css/palettes/dark.always.css';
```
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Blocked by: https://github.com/ionic-team/ionic-framework/pull/29148.
Review that first.
Documentation PR: https://github.com/ionic-team/ionic-docs/pull/3521
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: Internal
---------
<!-- 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 currently faces two challenges:
1. Verifying visual changes locally is difficult because we cannot use
the existing ground truths as they were generated in Linux environments
and most of our team uses either macOS or Windows. While team members
can generate ground truths in the correct environment, they need to
remember to do that first before making changes.
2. Updating visual diffs is time consuming and can only be done by team
members. Our GitHub Action runs the entire test suite which can take ~10
even if only a handful of screenshots are generated. Additionally, this
job can only be run by team members meaning community contributors
cannot update/add screenshots. This limits them to non-visual tasks when
contributing. In the event that they do want to make visual changes, the
team needs to copy all their code into a branch and manually run
screenshot diffs for them.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This PR introduces the ability to run all Playwright tests inside of a
Docker container using an image with Playwright dependencies. The
container will have access to the local project, so developers can make
changes and then run tests in the container after the changes are
compiled. This enables anyone to propose new screenshot changes.
However, the "update screenshot" job will still be available for folks
who do not want/are unable to use docker.
- There are some typeface differences between GH Actions and the Docker
image which is why there are a handful of screenshots that needed to be
updated.
One risk here is that the Playwright npm and Docker image versions must
be kept in sync. As a result, I also updatRenovate to allow us to auto
update the npm and Docker image versions at the same time.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
3. Update the BREAKING.md file with the breaking change.
4. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ There are still some issues I need to sort out with mounting the
local project on Windows. However, using Ubuntu with the linux subsystem
for windows can be used as a workaround. I'd like to merge this so we
can start testing it in our day-to-day workflow and ironing out any
bugs.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#24542
---------
<!-- 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. -->
WebKit has a quirk where IntersectionObserver callbacks are delayed
until after an accelerated animation finishes if the "root" specified in
the config is the browser viewport (the default behavior if "root" is
not specified) This means that when presenting a datetime in a modal on
iOS the calendar body appears blank until the modal animation finishes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- We can work around this issue by observing an element inside of the
datetime component and using the datetime component itself as the root.
To do this, I added an `.intersection-tracker` element inside of
datetime. This element has a dimension of 0x0 so it should not affect
component layout or functionality.
I opted to add this element instead of re-using an existing element
because the existing elements are not guaranteed to always be in the DOM
due to different datetime presentation styles.
| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/e84d111d-b156-4f45-887a-d68a1097e5dd"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3dccf1e5-cf79-46ab-b542-0537fd46fa76"></video>
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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.8.1-dev.11710449785.14ebd5a0`
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#28867
---------
<!-- 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. -->
I missed an edge case in
https://github.com/ionic-team/ionic-framework/pull/28277 that caused an
MD headers in an MD app to be hidden due to the presence of an iOS
header (via `mode="ios"`). This was happening because I forgot to scope
the selector in `header.ios.scss` to only iOS headers.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The headers in the relevant selector are now scoped to the iOS headers
which avoids this bug while preserving the anti-flicker mechanism added
in the linked PR.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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.8.1-dev.11710452743.1ca99e5e`
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: Internal
---------
<!-- 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. -->
In https://github.com/ionic-team/ionic-framework/pull/27134 we fixed a
bug for item button colors on dark mode. We added a test for this in
dark mode, but it was created before we had the infrastructure to test
dark mode within Playwright. As a result, the dark mode theme is hard
coded into the test.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This test has been simplified to only test the things we need to test
- It also relies on the built-in dark theme testing instead of hard
coding the theme.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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 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. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates the test infrastructure to use `palettes` instead of `themes`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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 **does not** change where the light/dark/high contrast styles live
or how they are consumed in the test infra. That work is done here:
https://github.com/ionic-team/ionic-framework/pull/29149
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: resolves#26234
---------
<!-- 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. -->
We use an IntersectionObserver to know when each picker column is
visible so we can properly scroll the active option in each column into
view. The IO callback passes an array of entries. Up until this PR, we
have always grabbed the first entry in the array. The problem is that
browsers will sometimes group multiple events into a single array. This
means it's possible to have an event with `isIntersecting: false` and
then another event with `isIntersecting: true` in the same callback.
Since we always grabbed the first event we did not account for the
instances where events were coalesced.
This resulted in column options sometimes not scrolling into view when
presented via an overlay.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Picker column now grabs the last event in the entries array. This
represents the most recent threshold change.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## 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.7.5-dev.11710347256.1954cae9`
