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 shape of the toast component could not be customized.
## What is the new behavior?
- I have introduced a new shape property which determines whether the
toast widget has soft, round or rectangular corners.
## 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 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. -->
Some app functionality (like focus management, keyboard utils, and
shimming) are tied to the `ion-app` which requires all Ionic
applications to have a root `ion-app` element.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
`ion-app` specific init functionality is moved to the global
`initialize` function
## 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.
-->
Although it is not expected that this introduces a breaking change,
these changes were introduced on the `next` branch as a precaution.
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
NOTE: This is **NOT** a recommended pattern for Ionic applications and
was created for a specific internal use case
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
- Updates Accordion to use the Ionic theme styles defined in Figma
- Adds an e2e test to the basic test to check for text content in the `content` slot
- Adds the `ionic` theme to the `multiple` e2e test
- Adds an e2e test for `states` which screenshots disabled, activated & focused
- Updates Item to accommodate the Accordion styles
- Updates the global core scss file to override the Toggle Icon and Items in an Accordion
Adds the following:
- An ionic theme file with styles for the Accordion Group
- An e2e test for the `expand` property with screenshots of the default (compact) expand and `"inset"`
- An e2e test for states with screenshots of a disabled Accordion Group
Issue number: internal
---------
- fix ion-statusbar css var fallback;
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- CSS var --ion-statusbar-padding was not working because the Sass
variable was not escaped.
## 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
---------
## What is the current behavior?
The segment component does not have styles for the `"ionic"` theme and
uses `"md"` styles.
## What is the new behavior?
- Adds styles for both `<ion-segment>` and `<ion-segment-button>` styles
for the `"ionic"` theme
- Adds screenshot tests for the different icon layouts
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: resolves 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. -->
No default modal styles for the Ionic theme
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Splits common and native styles into separate stylesheets
- Adds default styles to modals for Ionic 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/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. -->
I only applied some of the global styles to the sheet modal vairation
since it is unclear whether the card variation will be used in the
widgets
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. -->
No Ionic theme styles for the `ion-backdrop` element
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds Ionic theme styles for `ion-backdrop` and updates snapshots.
## 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. -->
The backdrop changes were only applied to `ion-modal` for now as all
other components where `ion-backdrop` is used do not yet have dedicated
Ionic theme styles. This is relevant as those components will need to
set `--backdrop-opacity: <value>` for their own implementations.
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves#29848
---------
<!-- 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 v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Reverts many of the changes from
https://github.com/ionic-team/ionic-framework/pull/29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
https://github.com/ionic-team/stencil/issues/5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved
## 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 for this version: `8.3.1-dev.11726167750.15400355`
I tested the dev build against the use cases outlined in
https://github.com/ionic-team/stencil-ds-output-targets/issues/475 and
https://github.com/ionic-team/stencil-ds-output-targets/issues/476
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. -->
No shape prop or ionic theme styling
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `shape` prop to `ion-modal`
- Adds styling for shape in ionic 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/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. -->
There are a few tests that were disabled due to being flaky from
gestures.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
While fixing the tests, I found a bug that the scroll was never being
disabled on scroll. Additionally, we were not taking into account that a
custom scroll target could be used so it was never disabled either.
- Fixed the flaky tests.
- Content doesn't scroll when range is being dragged.
- Content can be either `ion-content` or a custom scroll target.
## 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. -->
[Preview for
`ion-content`](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll)
[Preview for custom scroll
target](https://ionic-framework-git-fw-2873-ionic1.vercel.app/src/components/range/test/scroll-target)
How to test:
1. Open either of the previews
2. Render the screen with the device simulator from the browser
3. Verify that you can scroll the page
4. Drag the range but don't let go
5. Verify that you cannot scroll the page
6. Repeat steps 2-5 with the other preview
Issue number: resolves#29669
---------
## What is the current behavior?
Setting `value` to an empty string on `<ion-datetime>` renders a May
2021 calendar:
```html
<ion-datetime value=""></ion-datetime>
```
## What is the new behavior?
Show the month and time for today's date when value is an empty string.
This matches how a native `input` with `type="datetime-local"` works.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
This can be tested by removing my fix in `datetime.tsx` and running the
e2e test for Datetime:
```bash
npm run test.e2e src/components/datetime/test/basic/datetime.e2e.ts
```
The `should display today's date and time when value is an empty string`
test should fail.
Alternatively, you can add a datetime with `value=""` and see the
calendar before & after my fix.
---------
Co-authored-by: Tanner Reits <47483144+tanner-reits@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. -->
No `ionic` theme styles for the datetime time label
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds styles to the time label for the `ionic` 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/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. -->
[Preview](https://ionic-framework-6m937m00k-ionic1.vercel.app/src/components/datetime/test/basic?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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are no dedicated title styles for the `ionic` theme
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds `ionic` theme styles for the datetime default title
## 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. -->
[Preview
(inline-custom)](https://ionic-framework-c0db80uay-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)
Issue number: resolves#29792
---------
<!-- 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 the user drags the range knob (most easily reproduced in fullscreen
mode) and the gesture emits a current x position of `0`, the range
incorrectly emits a value of `NaN`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ion-range` does not emit `NaN` and instead emits the correct range
value for the knob
## Does this introduce a breaking change?
- [ ] 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. -->
- Adds the supported styles for `lines` in both the item and list components
- Splits the tests up in `item/test/lines` and `list/test/lines` so that it isn't taking screenshots of an entire page and instead tests based on the lines property
Adds the styles for Datetime in the `ionic` theme for the following (days, months, arrows, weeks):
- Typography
- Colors
- Spacing
- Sizing
- States (selected, pressed, focus, hover)
- Remove the default property value in favor of setting the default style in the CSS to match the other form controls.
- Updates the e2e test for `label` to remove the explicit width & add more examples with long labels and a default select without justify set.
- Change the radio's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a radio with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label-placement` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label-placement` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label-placement` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the toggle's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a toggle with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Set the default `align-items` style to `center` so that a toggle with `width: 100%` and `label-placement="stacked"` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the checkbox's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a checkbox with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
