Issue number: resolves internal
---------
## What is the current behavior?
Using the ionic theme, `ion-input` inside an `ion-accordion` , that
require a scroll to focus, when clicked , it's text would shift
After some troubleshooting, we identified this visual bug came from
logic of `addClone`, which creates a clone of the input , in order for
it to be focusable and working on iOS/Android (code
[here](4317da080c/core/src/utils/input-shims/hacks/common.ts (L34))
)
The cloned input has an additional class, `cloned-input` and, for the
ionic theme, the `@position` mixin was causing the cloned input
`inset-inline-start` to be 0, which meant it was not being placed
_exactly_ on top of the "OG" input
## What is the new behavior?
There's no longer a visual bug on inputs inside accordions, when using
the ionic theme
To fix it, we split the `cloned-input` class between the `input.native`
and `input.common` scss files, where the `@position` mixin is only used
in `input.native`
## 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/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
- Bug reproduction
[here](https://github.com/OutSystems/ui-comp-ionic-sandboxes/tree/ROU-11748-bug)
- With this fix
[here](https://github.com/OutSystems/ui-comp-ionic-sandboxes/tree/ROU-11748)
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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Update tokens dependency to 1.2.4.
- This version fixes the semantic warning tokens values.
## 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/docs/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. -->
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. -->
- Update tokens dependency to 1.2.3.
- This version fixes the generation of the z-index tokens.
## 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/docs/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. -->
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?
The ion-badge is not currently supported when inside the ion-button.
## What is the new behavior?
- The experience of the ion-badge inside the ion-button has been
implemented according to our designs.
## 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/docs/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: José Rio <jose.rio@hotmail.com>
Issue number: internal
---------
## What is the current behavior?
The horizontal padding of the divider component was being calculated
taking into account safe areas.
However, since this component can be placed inside other components that
already take these areas into account, this is not necessary.
## What is the new behavior?
- Removes the safe areas
## 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/docs/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. -->
Confirmed with design: the new divider component’s main use case is to
be used inside ion-content (or one of it’s children). As such, the
responsibility of taking into account safe areas will fall on the
developer (as it’s already stated in the
[documentation](https://ionicframework.com/docs/api/content#safe-area-padding)).
This means, the divider component itself will not account for the safe
areas for its' specific padding.
The default spacing also changed from `xxsmall` to `medium`
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. -->
Currently the vertical prop only works for empty badges.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added styles for badge with numbers or icons to be used as hint
(vertical prop)
- Added new tests for these scenarios and updated snapshots.
- Added best effort styles for ios/md to look decent (not on the scope
of this task and no UI from figma).
## 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/docs/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. -->
[Badge Ionic
Hint](https://ionic-framework-git-rou-11750-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@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. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Update tokens dependency to 1.2.2.
- Update generated tokens.
## 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/docs/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. -->
- Updates the common and native stylesheets to separate the bottom content styles
- Fixes an improperly updated counter text color for native
- Adds missing styles for valid/invalid states and screenshot tests for the highlight
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- Adds design for helper and error text to the toggle for the ionic theme
- Updates tests to add screenshots for ionic theme
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- Adds design for helper and error text to the select for the ionic
theme.
- Updates tests to add screenshots for ionic theme
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- Splits the common and native stylesheets
- Removes the `--text-color-invalid` variable so the customization
across components and themes for helper & error text is consistent.
- Sets the color of the helper text when valid to
`--highlight-color-valid` to ensure customization works the same as
invalid
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- Adds the common stylesheet for the shared styles
- Adds design for helper and error text to the checkbox for the ionic
theme.
- Updates tests to add screenshots for ionic theme
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- Adds the common stylesheet for the shared styles
- Adds design for helper and error text to the radio group for the ionic
theme.
- Updates tests to add screenshots for ionic theme
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the new behavior?
- Introduces a new component, `ion-divider` which has two props,
`spacing` and `inset`.
- Adds e2e tests to both `spacing` and `inset` props
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
- As discussed with the PO, using this new component inside an
`ion-item` is out of scope , for now.
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Gonçalo M. <goncalo.martins@outsystems.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
Avatar does not have a disabled state for the ionic theme.
## What is the new behavior?
- Added styles for ionic theme disabled state
- Added states e2e test & snapshots
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Preview](https://ionic-framework-git-rou-11728-ionic1.vercel.app/src/components/avatar/test/states?ionic:theme=ionic)
---------
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: internal
## What is the current behavior?
- tab-button with badge only supports status badges (small circle with
specific color), missing cases with text or icon.
## What is the new behavior?
- Added css on tab-button to support new badge hint functionalities such
text and icon
- Added css on badge to support the existence of a icon inside it
- Added support on ionic theme for different position (top and button)
- Added badge test case for this use case
- There's no figma for md/iOS implementation, so just added for now a
best effort on how it looks.
**Theme md:**
<img width="418" alt="md"
src="https://github.com/user-attachments/assets/0281b616-12aa-4107-bf4c-e8fdbe72d7d3"
/>
**Theme iOS:**
<img width="417" alt="ios"
src="https://github.com/user-attachments/assets/6102d874-b608-4527-91fb-4ed8b7e536a0"
/>
**Theme ionic:**
<img width="418" alt="ionic"
src="https://github.com/user-attachments/assets/10f59d57-0c30-4f04-bbe8-de625b93eb46"
/>
### Notes:
- All the styles added are based on the [vertical] attribute in order to
prevent breaking changes and only affect the badge hint with the new
features implemented.
- Also top and bottom position under the context of md/iOS themes are
not exactly the same as ionic theme due the usage of an
`overflow:hidden;` attribute at the `.button-native` context. This
`overflow:hidden;` attribute has been overwritten to `overflow:visible;`
for ionic theme.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Sample](https://ionic-framework-git-rou-11666-ionic1.vercel.app/src/components/badge/test/hint)
Issue number: internal
---------
## What is the current behavior?
Currently, operations associated with gestures aren’t working, for the
ionic theme:
- can’t select the text using double tap
- can’t longpress
- can’t move the cursor to any positions
## What is the new behavior?
- It's now possible to select text using double tap, long press and move
the cursor to different positions
- Adds new tests for double clicks
| Before | Now |
|--------|-----|
|
|
|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Notes
Currently, the double click text selection is not working (the text
isn't selected) on the automated tests for:
- ionic theme, on firefox and safari
- md/ios themes, on firefox
as manual tests do not have this problem, we'll be skipping these tests
for now and come back to them at a later date
---------
Co-authored-by: Maria Hutt <thetaPC@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. -->
Currently, when a sheet is moved while `expandToScroll` is disabled, the
DOM is queried excessively causing performance degradation.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
We now cache the targeted element in `onStart` and refer to it in
`onMove` and `onEnd`, preventing over-querying the DOM
## 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/docs/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 regression was introduced in #30257 and quickly highlighted by a
member of the community
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?
The searchbar component does not currently match our UX designs for the
ionic theme.
## What is the new behavior?
Updated the searchbar so that it does:
- Adjusted the searchbar input paddings when no leading or trailing
icons are rendered;
- Added an ellipsis text overflow to the searchbar input;
- Updated the background, text and icon colors so that they are reactive
to state changes like having inserted text and being disabled (some
design tokens are still TBD);
- The clear button is now hidden when the searchbar is disabled.
## 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/docs/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>
This PR contains the following updates:
| Package | Type | Update | Change |
|---|---|---|---|
| mcr.microsoft.com/playwright | final | patch | `v1.51.0` -> `v1.51.1`
|
---
### Configuration
📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.
♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box
---
This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/ionic-team/ionic-framework).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4yMDcuMSIsInVwZGF0ZWRJblZlciI6IjM5LjIwNy4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Issue number: resolves#30254
---------
## What is the current behavior?
The type for `routerLink` was incorrectly set as `symbol`.
## What is the new behavior?
The new update of the Vue output target to sets it to `string | symbol`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.5.1-dev.11742238707.15ce0fe2`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
Changes introduced by #30235 caused two major issues:
- Animations were not being played when increasing breakpoints.
- When the scrollable content was at the top, and a big scroll to the
bottom of the list was made, the modal would jump to a higher
breakpoint.
## What is the new behavior?
- When `expandToScroll` is false, the swipe gesture is allowed unless
it's a pull down within scrollable content.
- When `expandToScroll` is false, we cancel the `moveSheetToBreakpoint`
when a scroll to top is being done within the scrollable content
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
| Before | After |
|--------|-------|
| <video
src="https://github.com/user-attachments/assets/e1c22f48-f990-45cf-a6c4-1aec0d019c6d">
| <video
src="https://github.com/user-attachments/assets/f01e0480-748f-40af-ac11-94f790f0e197">
|
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. -->
Certain custom commands related to Playwright are failing. Specifically:
- `npm run test.e2e.update-snapshots ${component}`
- `npm run test.e2e.docker.update-snapshots ${component}`
The failures are due to Playwright [v1.50
changing](https://playwright.dev/docs/release-notes#breaking) it's
accepted values for `update-snapshots`. Possible values are "all",
"changed", "missing", and "none". By default, it's "all". All snapshots
will be updated when no value is passed or a wrong value is passed.
Our scripts end up running (doesn't matter if it's local or through the
docker):
- `npx playwright test --update-snapshots ${component}`
It used to only update the snapshots that have changed. However, with
the update, the argument thinks that the component is its value but
since it's not an accepted one, it leads to the default.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Set our default value when it comes to updating snapshots. By using
`changed` then we would only update snapshots for those tests that have
a difference. This aligns with how it used to work before the update.
## 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/docs/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. -->
N/A
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. -->
Test is flaky with Safari but only on CI.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Disabled test for now
## 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/docs/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. -->
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. -->
- Update tokens dependency to 1.2.1.
- Update generated tokens.
## 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/docs/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. -->
