345 Commits

Author SHA1 Message Date
a934e48315 Merge branch 'main' into chore/update-next-from-main 2025-08-04 18:56:38 -04:00
b154f4ed09 feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events (#30471)
Issue number: resolves #23148 resolves #27614

---------

The `ion-reorder-group` only emits an `ionItemReorder` event when the reorder gesture ends AND the item position has changed. There is no way to listen for when the gesture starts, is actively moving, or ends without the item changing position.

- Adds an `ionReorderStart` event that is fired without any details on the start of the gesture.
- Adds an `ionReorderMove` event that is fired continuously during gesture move and includes the `from` and `to` detail.
- Adds an `ionReorderEnd` event that is fired at the end of the gesture and always includes the `from` and `to` detail, even if they are the same.
- Deprecates the `ionItemReorder` event, recommending to use the `ionReorderEnd` instead.

- [ ] Yes
- [x] No

While this does not introduce a breaking change, it does deprecate the `ionItemReorder` event in favor of the `ionReorderEnd` event. This event behaves a bit differently since it is always emitted on end. If the `from` and `to` are the same, it will still emit them, so it's possible to check if they are the same to determine if `ionReorderEnd` fired without moving item positions.

----

Co-authored-by: sfinktah <sfinktah@github.spamtrak.org>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-30 16:42:53 -04:00
344a43feca feat(infinite-scroll): adding preserveRerenderScrollPosition property (#30566)
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. -->

Currently, if you use infinite scroll and fully change out elements in
the DOM, you'll lose your scroll position. This can present as a race
condition in some frameworks, like React, but will present pretty
consistently in vanilla JavaScript. This happens because the browser is
removing the old elements from the DOM and adding the new ones, and
during that time the container holding the old elements will shrink and
the browser will adjust the top position to be the maximum of the new
container height.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

With this new property (`preserveRerenderScrollPosition`) set, we will
loop through siblings of the infinite scroll and set their min-heights
to be their current heights before triggering the `ionInfinite` event,
then we clean up after complete is called by restoring their previous
min-heights or setting them to auto if there were none. This prevents
the container from resizing and the browser from losing the scroll
position.

## 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. -->

**Current dev build**: 
```
8.6.6-dev.11753719591.13a5c65f
```
2025-07-30 10:23:00 -07:00
345bd53831 Merge branch 'main' into chore/update-next-from-main 2025-06-04 16:58:30 -04:00
4d6a067677 feat(input-otp): add new input-otp component (#30386)
Adds a new component `ion-input-otp` which provides the OTP input functionality

- Displays as an input group with multiple boxes accepting a single character
- Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display
- Supports changing the displayed keyboard using the `inputmode` property
- Accepts a `length` property to control the number of input boxes
- Accepts the following properties to change the design: `fill`, `shape`, `size`, `color`
- Accepts a `separators` property to show a separator between 1 or more input boxes
- Supports the `disabled`, `readonly` and invalid states
- Supports limiting the accepted input via the `pattern` property
- Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus`
- Exposes the following method: `setFocus`

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>
2025-05-29 15:10:37 -04:00
2a1addc190 feat(toast): add hue property for the ionic theme (#30333)
Issue number: internal

---------

## What is the current behavior?
The toast component does not support the `hue` property.

## What is the new behavior?
Adds support for the `subtle` hue for the toast. Defaults to `subtle`.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No
2025-04-11 13:52:38 -04:00
52fba11db5 feat(item-option): add hue property for the ionic theme (#30332)
Issue number: internal

---------

## What is the current behavior?
The item option component does not support the `hue` property.

## What is the new behavior?
Adds support for the `subtle` hue for the item option. Defaults to
`subtle`.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No
2025-04-11 13:39:14 -04:00
b31e0efcbf feat(chip): add hue property for the ionic theme (#30308)
Issue number: internal

---------

## What is the current behavior?
The chip component does not support the `hue` property.

## What is the new behavior?
Adds support for the `bold` and `subtle` hue for the chip. Defaults to
`subtle`.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No
2025-04-11 13:19:32 -04:00
a9aa59bc36 feat(badge): add hue property for the ionic theme (#30307)
Issue number: internal

---------

## What is the current behavior?
The badge component does not support the `hue` property.

## What is the new behavior?
Adds support for the `subtle` hue for the badge. Defaults to `subtle`
when the badge contains icon or text. Defaults to `bold` when the badge
is empty or when it is inside of a button or tab button.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No
2025-04-11 13:07:01 -04:00
c37eaabae9 feat(divider): add new ion-divider component (#30270)
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>
2025-03-25 09:04:19 +00:00
02c9d64ca5 feat(avatar): add disabled property (#30284)
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>
2025-03-24 09:57:54 +00:00
b67259edae feat(datetime): add showAdjacentDays to display days from the previous and next months (#30262)
Issue number: Internal


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds a new property to datetime, showAdjacentDays, that when true will
show the last days of the previous month and the first days of the next
month. This will just occupy empty "cells" at the beginning of the month
"table" and add rows to the table until a maximum of 6 rows are
displayed.

## Changes
- add styles for adjacent day button
- add `showAdjacentDays` property to datetime component
- change month generation to respect new property
- add visual tests to new feature

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information


[Preview](https://ionic-framework-git-rou-11118v2-ionic1.vercel.app/src/components/datetime/test/show-adjacent-days)

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2025-03-19 16:39:01 +00:00
36fb7ee073 chore: generate vue overlays 2025-03-18 18:16:08 -04:00
b8b5984150 Merge branch 'main' into chore-merge-main-into-next 2025-03-18 18:05:14 -04:00
114514276e Merge branch 'main' into chore-update-feat-8.5-main 2025-03-13 18:45:33 -04:00
6dcb143307 fix(vue): update output target and resolve type issues (#30239)
Issue number: fixes #30179

---------

## What is the current behavior?
There have been issues reported on version 8.4.3 related to the type
information changing for Vue

## What is the new behavior?

This patch updates the Vue components to be correctly types using a new
version of the output target.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2025-03-13 20:40:04 +00:00
11554a5d35 fix(vue): update output target and properly emit events (#30227)
Issue number: resolves #30206 resolves #30178 resolves #30177 resolves
#30175 resolves #30170

---------

<!-- 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?
There have been plenty of issues reported in regards to Vue components
failing to propagate events. It seems like when we updated the Vue
output target and started to use the provided runtime code from the
output target, we have changed the way how event names are computed.
Ionic has used a custom wrapper for handling events that would kebab
case event names. That is no longer needed and removing it fixes
observed issues.

Reproduction case working:
https://stackblitz.com/edit/vj18czas-wdhzxjom?file=package.json

## What is the new behavior?
We have received a fix for this in
https://github.com/stenciljs/output-targets/pull/617 which I hope will
resolve this issue by updating the dependency.

## 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

Dev build: `8.4.4-dev.11741193800.14916f6f`
2025-03-11 20:39:31 +00:00
18e26acb01 feat(radio-group): add helperText and errorText properties (#30222)
Issue number: N/A

---------

## What is the current behavior?
Radio group does not support helper and error text.

## What is the new behavior?
Adds support for helper and error text.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

- [Supporting Text:
Preview](https://ionic-framework-git-rou-11554-ionic1.vercel.app/src/components/radio-group/test/supporting-text)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-10 19:07:22 -04:00
bbdaec0cc1 feat(select): add helperText and errorText properties (#30143)
Issue number: resolves #29205

---------

## What is the current behavior?
Select does not support helper and error text.

## What is the new behavior?
- Adds support for `helperText` and `errorText`
- Adds parts for `helper-text`, `error-text` and `supporting-text`
- Adds an e2e test for helper and error text with functional tests and
screenshot tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information


[Preview](https://ionic-framework-git-rou-11551-ionic1.vercel.app/src/components/select/test/bottom-content)

---------

Co-authored-by: swimer11 <65334157+swimer11@users.noreply.github.com>

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-10 18:53:11 -04:00
94ca2e54cb feat(toggle): add helperText and errorText properties (#30161)
Issue number: N/A

---------

## What is the current behavior?
Toggle does not support helper and error text.

## What is the new behavior?
Adds support for helper and error text, similar to input and textarea.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

- [Bottom Content:
Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/bottom-content)
- [Item:
Preview](https://ionic-framework-git-rou-11552-ionic1.vercel.app/src/components/toggle/test/item)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2025-03-10 18:39:13 -04:00
99d2f1c750 feat(checkbox): add helperText and errorText properties (#30140)
Issue number: resolves #29810

---------

## What is the current behavior?
Checkbox does not support helper and error text.

## What is the new behavior?
Adds support for helper and error text, similar to input and textarea.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

- [Bottom Content:
Preview](https://ionic-framework-git-rou-11141-ionic1.vercel.app/src/components/checkbox/test/bottom-content)
- [Item:
Preview](https://ionic-framework-git-rou-11141-ionic1.vercel.app/src/components/checkbox/test/item)

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-10 18:25:28 -04:00
ab81f3de7e feat(searchbar): add sizes for ionic theme (#30211) 2025-03-04 11:23:38 -08:00
517d5b99b2 feat(badge): add support for hint feature (#30213)
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 position prop.
- Based on the prop, a new badge-position css class is added on the
host.
- Removed css rule that prevented the badge to be rendered when empty.
- Added common and themes styles to support the position prop and new
scale size (on ios/md defaults to min-width variable, as size is not yet
supported on native themes).
- Added new tests specific for this new feature and added new
screenshots.
- Support to properly work inside Avatar, Button and TabButton will be
added on different tasks (in the meantime the snapshots will appear
wrong for these use-cases)

## 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. -->

- [Ionic Theme
Sample](https://ionic-framework-6n0cn175k-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=ionic)
- [MD Theme
Sample](https://ionic-framework-6n0cn175k-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=md)
- [iOS Theme
Sample](https://ionic-framework-6n0cn175k-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=ios)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Marta Carlos <101343976+OS-martacarlos@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-03-03 18:15:27 +00:00
fc552ad89f feat(searchbar): add shapes for ionic theme (#30210) 2025-02-25 10:28:18 -08:00
ae78967b3c feat(progress-bar): add styling for the ionic theme (#30185)
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. -->
2025-02-13 16:06:59 +00:00
41da4c3565 feat(checkbox): add required prop (#30157)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.

## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to checkbox's inner native input.

## 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.
-->
2025-02-04 11:54:23 +00:00
0b549835b6 feat(select): add required prop (#30155)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.

## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `aria-required` attribute to select's inner native button.

## 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. -->
2025-02-04 10:18:40 +00:00
0bbb9f37b4 feat(toggle): add required prop (#30156)
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?
- Currently, the screen reader do not announce the component as required
when `required={true}`.

## What is the new behavior?
- Added a new `required` prop to be used for accessibility purposes that
adds the `required` attribute to toggle's inner native input.

## 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.
-->
2025-02-04 09:59:01 +00:00
166e43554e feat(modal): add expandToScroll property to allow scrolling at all breakpoints (#30097)
Issue number: resolves #24631

Co-authored-by: Maria Hutt <13530427+thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-02-03 10:45:15 -08:00
eb725fce6e fix(vue): update Stencil Vue output target (#30159)
This patch includes some necessary updates for
`@stencil/vue-output-target@v0.9.0`:

- we started to export Stencils helpers as runtime via
`@stencil/vue-output-target/runtime` similar to what we did in React
- this version requires some updates to Vue and TypeScript as well
- adjustments related to that update
2025-01-29 16:31:31 +00:00
5bf48cb57a feat(select): add sizes for ionic theme (#30018)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-11-15 10:52:41 -08:00
207743d60e Merge branch 'main' into rebase-next-after-8.4-release 2024-11-04 17:33:10 -05:00
89508fb891 feat(segment-view): adds support for new ion-segment-view component (#29969)
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>
2024-11-04 16:10:58 -05:00
3628ea875a feat(select): add modal as interface (#29972)
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>
2024-11-04 16:10:58 -05:00
a2bf1bb0c2 feat(accordion-group): add the shape property and styles for the ionic theme (#29971)
- 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
2024-10-30 10:37:33 -04:00
0eb1c7a81c Merge branch 'main' into chore-update-next-main 2024-10-21 16:13:40 -04:00
d8bdf398fc feat(toast): implement new shapes (#29936)
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. -->
2024-10-18 18:26:08 +01:00
b7b383bee0 fix(tabs, tab-bar): use standalone tab bar in Vue, React (#29940)
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
2024-10-16 18:08:54 +00:00
b248ac5d0e Merge branch 'main' into chore-update-next-from-main 2024-09-17 13:20:23 -04:00
df39ceac6d fix(react, vue): add default value for navManager on tabs (#29865)
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
2024-09-12 17:35:30 +00:00
60e6b3143e feat(modal): add shape prop & styling for ionic theme (#29853)
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. -->
2024-09-11 22:30:12 -04:00
93b734c840 Merge branch 'main' into chore-update-from-main-2 2024-09-06 10:25:27 -04:00
526f2b4a63 Merge branch 'main' into chore-sync-next-main 2024-08-30 13:35:59 -04:00
bc973e79a5 test(tabs): re-enable skipped tests (#29813)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-08-29 14:44:50 -07:00
867066b4eb feat(react, vue, angular): use tabs without router (#29794)
Issue number: resolves #25184 

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
2024-08-26 08:13:20 -07:00
b57f4be284 feat(textarea): add ionic theme design with medium size (#29776)
- 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
2024-08-21 14:55:40 -04:00
ab4f2791c1 fix(vue): pass router-link value to href to properly render clickable elements (#29745)
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`
2024-08-05 21:35:26 +00:00
79a3fd00de feat(spinner): add size for ionic theme (#29699)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-07-09 12:44:44 -07:00
a928ba7379 feat(header): add new divider property (#29675)
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>
2024-06-28 21:01:52 +01:00
90893f46c9 feat(vue): add optional IonicConfig type parameter to IonicVue plugin (#29637)
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>
2024-06-28 19:02:20 +00:00