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?
ion-progress-bar does not currently have any custom styling for the
ionic theme.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
According to the design, the following styling changes were made:
- Added a new shape prop which controls the shape of the progress bar
- Changed the color of the unfilled part of the progress bar and the bar
height to design token values
- Adding a new testing page and screenshot 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. -->
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. -->
Segments can only be changed by clicking a segment button, or dragging
the indicator
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The segment/segment buttons can now be linked to segment content within
a segment view component. This content is scrollable/swipeable. Changing
the content will update the segment/indicator and vice-versa.
## 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. -->
**Limitations:**
- Segment buttons **cannot** be disabled when connected ton
`ion-segment-content` instances
- The `ion-segment` **cannot** be without a value when linked with an
`ion-segment-view`. If no value is provided, the value will default to
the value of the first `ion-segment-content`
[Preview](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/basic)
[Preview (disabled
state)](https://ionic-framework-jlt8by2io-ionic1.vercel.app/src/components/segment-view/test/disabled)
---------
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
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. -->
Select only offers `alert`, `action-sheet`, and `popover` as interfaces
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds `modal` as an interface option for `ion-select`
## 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: Brandy Carney <brandyscarney@users.noreply.github.com>
- Adds support for the `shape` property in accordion group.
- Adds styles for the `"soft"`, `"round"` and `"rectangular"` shapes in the `ionic` theme
- Defaults the shape to `"round"` for the ionic theme
- Adds an e2e test for `shape` with screenshots of all shapes
- Renames the `accordion.e2e.ts` files in other tests to `accordion-group.e2e.ts` which also renames the screenshot folder
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#29885, resolves#29924
---------
<!-- 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. -->
React and Vue:
Tab bar could be a standalone element within `IonTabs` and would
navigate without issues with a router outlet before v8.3:
```tsx
<IonTabs>
<IonRouterOutlet></IonRouterOutlet>
<IonTabBar></IonTabBar>
</IonTabs>
```
It would work as if it was written as:
```tsx
<IonTabs>
<IonRouterOutlet></IonRouterOutlet>
<IonTabBar slot="bottom">
<!-- Buttons -->
</IonTabBar>
</IonTabs>
```
After v8.3, any `ion-tab-bar` that was not a direct child of `ion-tabs`
would lose it's expected behavior when used with a router outlet. If a
user clicked on a tab button, then the content would not be redirected
to that expected view.
React only:
Users can no longer add a `ref` to the `IonRouterOutlet`, it always
returns undefined.
```
<IonTabs>
<IonRouterOutlet ref={ref}>
<IonTabBar slot="bottom">
<!-- Buttons -->
</IonTabBar>
</IonTabs>
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The fixes were already reviewed through PR
https://github.com/ionic-team/ionic-framework/pull/29925 and PR
https://github.com/ionic-team/ionic-framework/pull/29927. I split them
to make it easier to review.
React and Vue:
The React tabs has been updated to pass data to the tab bar through
context instead of passing it through a ref. By using a context, the
data will be available for the tab bar to use regardless of its level.
React only:
Reverted the logic for `routerOutletRef` and added a comment of the
importance of it.
## 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. -->
React: Refreshes the app upon a tab button press and returns to the
first tab content.
Vue: Does not render the tabs when the app doesn't use a router at all
because of `ionRouter` not being defined.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- React: Users can press on the tab button without having the app
refresh and displays the associated tab content.
- Vue: Renders the tabs when router is not present.
## 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.3.1-dev.11726094383.1cdbab6f
How to test:
I recommend using the playgrounds in the Ionic Framework docs repo since
those playgrounds are setup to not have any routers at a high level.
1. Navigate to the [basic usage
section](https://ionic-docs-git-rou-11138-ionic1.vercel.app/docs/api/tabs#basic-usage)
2. Select React
3. Open the StackBlitz example
4. Click on any tab button
5. Notice that the app refreshes and returns to the first tab content
6. Install the dev build: `npm install
@ionic/react@8.3.1-dev.11726094383.1cdbab6f`
7. Verify that the app doesn't refresh and reset the content after
clicking on any tab button
8. Navigate to the [basic usage
section](https://ionic-docs-git-rou-11138-ionic1.vercel.app/docs/api/tabs#basic-usage)
9. Select Vue
10. Open the StackBlitz example
11. Notice that tabs doesn't render
12. Open the console and notice that there's an error `ionRouter is
undefined`
13. Install the dev build: `npm install
@ionic/vue@8.3.1-dev.11726094383.1cdbab6f`
14. Verify that it renders
15. Verify that the console no longer shows the error
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. -->
- Adds the typography styles for the default size (medium)
- Adds the styles for the outline fill
- Adds the styles for the label & helper text
- Adds the spacing for the label, textarea, counter and helper text
Issue number: N/A
---------
## What is the current behavior?
Ionic Framework Vue components using `router-link` do not apply an
`href` property which causes components to render `div` or `button`
elements when they should render an `a`. This is inconsistent with the
way Angular and Vue handle router link.
## What is the new behavior?
Updates `@stencil/vue-output-target` to latest which adds the code from
the following PR:
https://github.com/ionic-team/stencil-ds-output-targets/pull/446
The update in vue output target checks if `router-link` and `navManager`
are defined so this fix only applies to Ionic Framework components. If
both are defined then it adds the `href` property to the element with
the value of `router-link`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.2.7-dev.11722629362.1ac136c4`
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 v3.2.46 [vue was updated](https://github.com/vuejs/core/pull/3969) to
add support for a generic type argument to the `Plugin` type. In
https://github.com/ionic-team/ionic-framework/pull/29637 Ionic's Vue
plugin was updated to use the generic, but the`@ionic/vue` project is
currently installing v3.2.37.
This results in a local type checking error and build error:
```
(!) Plugin typescript: @rollup/plugin-typescript TS2315: Type 'Plugin_2' is not generic.
src/ionic-vue.ts: (24:24)
24 export const IonicVue: Plugin<[IonicConfig?]> = {
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Bumps and pins the dev dependency of `vue` to `3.2.46`. There are
other breaking changes that Vue has shipped in minor/patch cycles that
prevents from updating to the latest.
- Resolves the type checking error locally during build of
the`@ionic/vue` package
## 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. -->
Validation steps:
1. Checkout the branch
2. Build `core/`
3. In `packages/vue`, install latest pinned dependencies with `npm ci`
4. Sync the changes to the `vue` package with `npm run sync`
5. Open `/packages/vue/src/ionic-vue.ts`
6. Observe: No type errors on L24
7. Run `npm run build`
8. Observe: No build errors
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. -->
- Add new divider property on header's Ionic theme
- Added new divider test.
- Added TODO for support on ios/ md in future.
## 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. -->
[Header divider
sample](https://ionic-framework-a13vvxiyy-ionic1.vercel.app/src/components/header/test/divider?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Giuliana Silva <108938618+OS-giulianasilva@users.noreply.github.com>
Issue number: https://github.com/ionic-team/ionic-framework/issues/29659
---------
<!-- 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. -->
while using `.use(IonicVue, {})`, the config object has no autocomplete.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Add type autocomplete on plugin option in VueJS package.
## 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: Julien Vaumoron <julien.vaumoron@kanoma.fr>
