Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"xsmall"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the xsmall size (width, height, padding, font
size, font weight and line height)
- Adds e2e test for xsmall size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10733-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"large"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the large size (width, height, padding, font size)
- Adds e2e test for large size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10736-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"small"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the small size (width, height, padding, font size)
- Adds e2e test for small size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10734-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have any styles in the ionic theme.
## What is the new behavior?
- Adds background, border and font styles for avatar
- Adds the styles for the medium size and defaults the size to medium
- Adds e2e test for avatar sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10735-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
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. -->
- Added new method to detect colors with eight characters
- Added logic to generate an rgba when the above is true. This is to
ensure better compatibility with older devices that don't support colors
with more than six characters.
## 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.
-->
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. -->
Added an update to Design Tokens, requested by UX/UI Team:
- New semantic colors added
- Guidelines token was removed
- Hover, disabled and pressed tokens now correctly appear on Theme JSON
- Removed _color.styles.tokens.json_ file, as it was now empty.
## 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.
-->
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. -->
- Added new structure of JSON files that are generated from Figma
Variables
- Adjusted tokens.js script to correctly translate the new JSON format
- Adjusted tokens usage on components and CSS files
- Added html template to auto-generate html preview based on Design
Tokens (wip)
- Updated snapshots, as some tokens values changed, specially colors.
## 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/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>
Issue number: resolves#29479
---------
<!-- 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. -->
If an application includes a malformed URI, an Ionic Framework can
"crash" due to an uncaught exception in parsing the URI for the Ionic
config.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Handle the malformed URI fallback if the config cannot be determined
- Added unit tests for this case
## 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: 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 tests for picker were failing because the focus was not set to the
appropriate element and because Firefox would focus on an element it
shouldn't be.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adjusted the `setFocus()`
- Skipped the `picker-opts` in the tab order
- Removed `skip()` from the 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/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
---------
Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Co-authored-by: Brandy Carney <brandyscarney@gmail.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. -->
The bug report points to an old location of the Contributing doc.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the link to point to the new location under the docs folder.
## 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
The docker script does not exit with the correct exit code when invoking
commends in `execa`. You can verify this by changing `npm run test.e2e`
in the script to `npm run foo` (a non-existent script). The underlying
command will fail, but the parent script will still exit with exit code
0.
Important: The tests themselves have always errored correctly, so this
does not impact test execution. Only the invocation of the test command
is impacted.
This PR ensures that invoking the wrong command causes the parent script
to exit with the correct code.
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
Code checks were passing even though these tests were failing because
the docker script was not exiting with the correct exit code. This PR
fixes the tests so that they pass, then PR
https://github.com/ionic-team/ionic-framework/pull/29425 can be merged
so CI will properly fail again when tests fail.
---------
Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Issue number: internal
---------
## What is the current behavior?
The `shape` property defaults to `"soft"` for `ios` and `"round"` for
the `md` and `ionic` themes.
**Default button size**:
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined` | `8px` | `14px` | `4px` |
| `"round"` | `999px` | unsupported | unsupported |
| `"rectangular"` | `0px` | unsupported | unsupported |
**Large button size**:
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined` | `8px` | `16px` | `4px` |
**Small button size**:
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined` | `4px` | `6px` | `4px` |
## What is the new behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for all themes.
**Default button size**:
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"` | `8px` | `6px` | `4px` |
| `"round"` | `999px` | `999px` | `999px` |
| `"rectangular"` | `0px` | `0px` | `0px` |
**Large button size**:
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `soft` | `8px` | `8px` | `4px` |
**Small button size**:
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `soft` | `4px` | `4px` | `4px` |
- Adds support for the `"soft"` shape in the `ionic` theme using the
existing values for `undefined`
- Adds support for the `"rectangular"` and `"round"` shapes in `ios` and
`md` using `0px` and `999px` border radius
- Sets the default shape property to `"round"` for the `ionic` and `md`
themes and `"soft"` for `ios` and updates the `border-radius` to apply
to the shape classes instead of `:host`
- Updates the `"soft"` shape border radius for `ios` in the various
sizes to match the buttons created in SwiftUI (their "rounded" is our
"soft"):
- Fixed the icon only buttons in the `"ionic"` theme so that they are
not styled based on the size while always following the proper aspect
ratio. This was broken for the default size due to an incorrect padding
value & I made it so we don't have to specify the padding for each size:
| Before | After |
| ---| ---|
|
|
|
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
BREAKING CHANGE:
The `border-radius` of the `ios` and `md` button now defaults to `6px`
and `999px` instead of `14px` and `4px`, respectively, in accordance
with the iOS and Material Design 3 guidelines. To revert to the previous
appearance, set the `shape` to `"soft"` for `md` and override the
`--border-radius` CSS variable for `ios` to `14px`, or set it to a
different value entirely.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: internal
---------
## What is the current behavior?
Several screenshot images were not removed when their e2e test was.
## What is the new behavior?
I ran the following command in `ionic-framework/core` to find all
`*.png` files that did not have a parent `*.e2e.ts` file:
```bash
find ./src/components -iname '*.png' -exec bash -c 'cd "${1%/*}";
shopt -s nullglob; files=(../*.e2e.ts);
((${#files[@]} == 0)) && echo "$1"' _ {} \;
```
I have deleted all of these images.
Co-authored-by: Brandy Carney <brandy@ionic.io>
Issue number: resolves#29442
---------
<!-- 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 state does not stay consistent when the data used to render the
radios are updated.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The state updates after the component loads, this allows the value to
be set after the radio is rendered.
## 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. -->
Dev build: 8.1.1-dev.11714760012.1eab947e
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Remove a missed `!default` flag in the themes directory and update the
Sass variable guidelines docs to eliminate the `!default` flag from the
code examples, except for in the historic usage section which includes
examples from previous versions where the `!default` flag was used.
---------
Co-authored-by: Brandy Carney <brandy@ionic.io>
Issue number: internal
---------
## What is the current behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for the `ionic` theme and the "Round" shape for the
`ios`/`md` themes.
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined` | `4px` | `16px` | `16px` |
| `"round"` | `999px` | unsupported | unsupported |
| `"rectangular"` | `0px` | unsupported | unsupported |
## What is the new behavior?
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"` | `4px` | `10px` | `8px` |
| `"round"` | `999px` | `999px` | `999px` |
| `"rectangular"` | `0px` | `0px` | `0px` |
- Sets the default `shape` property to `"soft"` for `ios` and `md`
themes and `"round"` for the ionic theme.
- Updates the `border-radius` to apply to the shape classes instead of
`:host`
- Updates the `ios` theme to use `10px` for `"soft"` as this was taken
from the App Store:
- Updates the `md` theme to use `8px` for `"soft"` as this is taken from
the [Material Design 3
guidelines](https://m3.material.io/components/chips/specs#590903f7-2bf5-46ab-9810-d052173f41f1)
& the previous value of `16px` is the equivalent of the `999px` round
shape due to the height being `32px`
- Adds support for the `"round"` and `"rectangular"` shapes in `ios` and
`md` themes
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
BREAKING CHANGE:
The `border-radius` of the `ios` and `md` chip now defaults to `10px`
and `8px`, respectively, instead of `16px` in accordance with the iOS
and Material Design 3 guidelines. To revert to the previous appearance,
set the `shape` to `"round"`, or override the `--border-radius` CSS
variable to specify a different value.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#29234
---------
<!-- 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 certain scenarios, such as in Angular where the property binding is
set a few frames after the element is rendered, the `ionStyle` event
from `ion-select` can be emitted before `ion-item` has registered an
event listener.
This results in situations like setting the `ion-select` as initially
disabled can cause the item to not treat the element as not interactable
(receives pointer events).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Emits the `ionStyle` event when the `ion-select` is rendered.
- `ion-item` consistently detects the state of `ion-select` and applies
the appropriate styles
## 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. -->
Forked reproduction and dev-build available here:
https://github.com/ionic-team/ionic-framework/issues/29234#issuecomment-2091866453
Issue number: internal
---------
## What is the current behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for all themes.
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined` | `4px` | `8px ` | `4px` |
| `"round"` | `16px` | unsupported | unsupported |
| `"rectangular"` | `0px` | unsupported | unsupported |
## What is the new behavior?
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"` | `4px` | `8px` | `4px` |
| `"round"` | `16px` | `14px` | `12px` |
| `"rectangular"` | `0px` | `0px` | `0px` |
- Adds support for the `"soft"` shape using the existing values for
`undefined`
- Sets the default `shape` property to `"round"` for all themes and
updates the `border-radius` to apply to the shape classes instead of
`:host`
- Adds support for the `"round"` and `"rectangular"` shapes in `ios` and
`md`
- Updates the `ios` theme to use `14px` for `"round"` as this is taken
from the card in the iOS App Store
<img width="400px"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/51f7028c-990d-48b5-b3e0-9909dae7e31c">
- Updates the `md` theme to use `12px` for `"round"` as this is taken
from the [Material Design 3
guidelines](https://m3.material.io/components/cards/specs#daab7734-3b3e-464c-a967-7c7fa14e6478)
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
BREAKING CHANGE:
The `border-radius` of the `ios` and `md` card now defaults to `14px`
and `12px` instead of `8px` and `4px`, respectively, in accordance with
the iOS and Material Design 3 guidelines. To revert to the previous
appearance, set the `shape` to `"soft"`, or override the
`--border-radius` CSS variable to specify a different value.
---------
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?
The `ion-button` component is used in several tests to navigate or show
overlays. This causes screenshot diffs in unrelated tests any time the
UI of the `ion-button` is updated.
## What is the new behavior?
Removes the `ion-button` elements from unrelated tests.
Did not remove the `ion-button`s from the following tests:
- All `ion-button`s in an `ion-buttons` component
- An `ion-button` inside of a menu
- breadcrumbs/test/basic (uses a clear button in a list header, needs to
be moved)
- input/test/slot
- item/test/buttons
- item/test/colors
- item/test/dividers
- item/test/inputs
- item/test/media
- list-header/test/basic
- ripple-effect/test/basic
- router/test/basic
- router/test/guards
- router-outlet/test/basic
- select/test/slot
- textarea/test/slot
Updates the icon/basic test to use the right icon names by comparing
against the v3 names: https://ionicframework.com/docs/v3/ionicons/
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#29414
---------
<!-- 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 Angular when the segment buttons are dynamically rendered, the
segment will not set the active visual state for the selected segment
after the re-render.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- In Angular the segment will set the active item visually when the
items are dynamically changed
Previously this PR:
https://github.com/ionic-team/ionic-framework/pull/28837 aimed to
resolve https://github.com/ionic-team/ionic-framework/issues/28816. I
have confirmed that the modified approach in the dev-build fixes#29414
and #28816 and the previous change is no longer needed.
## 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. -->
Dev-build: `8.0.2-dev.11714411675.10f48160`
Issue number: resolves#23650
---------
<!-- 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 traditional native applications, navigation will inform screen
readers that the view has changed. This allows screen readers to focus
the correct view. In a single page app on the web, this same concept
does not exist. As a result, transitioning from Page A to Page B results
in screen reader focus remaining on Page A. This means that users who
rely on screen readers are not informed of view changes.
Currently, developers are responsible for implementing this on their
own.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces a new focus manager priority global config. When defined,
the app developer can specify which area of the view focus should be
moved to when the transition ends. The developer does this by specifying
areas in order of priority which allows for fallbacks in the event that
a particular UI component (such as a header) does not exist on a view.
There is some risk here by managing focus for the application. As a
result, this feature is considered experimental and disabled by default.
The team should collect feedback based on usage and enable it by default
when they feel this feature is stable enough.
## 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. -->
⚠️ Due to the `tsconfig.json` change, reviewers should restart the
Stencil dev server when checking out these changes locally.
Reviewers: Please test both of the test template files on physical iOS
and Android device with VoiceOver and TalkBack enabled, respectively.
Docs Link: https://github.com/ionic-team/ionic-docs/pull/3627
This PR makes the following changes:
1. Clarifies when `.ion-focusable` should be used versus
`:focus-visible`.
2. Clarifies that `Locator` needs to be typecast when using
`Locator.spyOnEvent`.
Issue number: resolves#28751
---------
<!-- 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 large title transition does not account for back buttons with no
text value. We assume that the [`.button-text` element
](bfaf528e61/core/src/components/back-button/back-button.tsx (L168))
is always defined, but that is not the case when `text=""` on the back
button. As a result, devs were getting errors because we tried to get
the bounding box of a undefined.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Revised the large title logic to only grab values from the back button
text if the back button text element is actually defined
There should be **no behavior change** when the back button text element
is defined.
## 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. -->
Dev Build: `7.8.5-dev.11713282122.18cabf98`
⚠️ Reviewers: Please test this in the sample application on the linked
issue. Please be sure to test the following conditions:
1. When the back button text is defined
2. When the back button text is not defined
3. With the default font scale
4. With a larger font scale
Issue number: resolves#29198
---------
<!-- 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/27917 I failed to
account for RTL. This caused the navigation with the arrow buttons to
break because the scroll position was always < 2.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Datetime now checks if the component is in RTL mode when creating the
scrollLeft threshold.
## 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: resolves#29393
---------
<!-- 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. -->
With Stencil v4.17.1, in Angular apps Stencil's `MockDoc` will be
bundled with the consumer's code resulting in a significant increase to
the main chunk.
|v8.0.0|
|---|
||
|v8.0.1|
|---|
||
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates to v4.17.2 of Stencil, which resolves this regression 🎉
|Dev-build|
|---|
||
## 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. -->
Dev-build: `8.0.2-dev.11714402065.169342dc`
Issue number: resolves#29321
---------
<!-- 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 a select with `fill="outline"`, `interface="popover"` and a
width that fits the content of the options, the select options are not
visible. The hidden radio is covering the text of the radio text
options.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Select options are visible and no longer covered by the hidden radio
container
## 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. -->
Dev-build: `8.0.2-dev.11714165638.13e7dd5b`
Reproduction (issue): https://stackblitz.com/edit/angular-mndtkr
Reproduction (with dev-build):
https://stackblitz.com/edit/angular-mndtkr-d7wsnp
Reproduction steps:
1. Open the select
2. Observe: The popover displays the options, but the options are not
visible/readable to the user
3. Use the dev-build
4. Open the select
5. Observe: The popover displays the options and they are
visible/readable to the user (5, 10, 15).
