531 Commits

Author SHA1 Message Date
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
7713cbe5b5 Merge branch 'main' into chore/sync-main 2025-03-19 16:58:48 -04:00
743eb250a8 docs(changelog): include hotfix release 2025-03-19 16:19:31 -04:00
75f5e9d70a chore(): update package lock files 2025-03-19 20:09:39 +00:00
9496c193ce v8.5.1 2025-03-19 20:08:09 +00:00
b8b5984150 Merge branch 'main' into chore-merge-main-into-next 2025-03-18 18:05:14 -04:00
a6437b2439 chore(): update package lock files 2025-03-13 23:12:19 +00:00
09d16ef4d7 v8.5.0 2025-03-13 23:11:47 +00:00
114514276e Merge branch 'main' into chore-update-feat-8.5-main 2025-03-13 18:45:33 -04:00
6b33d19c89 chore(): update package lock files 2025-03-13 22:20:42 +00:00
08448573b1 v8.4.5 2025-03-13 22:19:57 +00:00
267e21d63d chore(): update package lock files 2025-03-13 21:04:47 +00:00
4b10d7dc6f v8.4.4 2025-03-13 21:04:03 +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
353159149a chore(): update package lock files 2025-01-29 18:57:36 +00:00
87bde81a94 v8.4.3 2025-01-29 18:56:48 +00: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
c2bc756ffc chore(): update package lock files 2025-01-22 21:34:04 +00:00
f532a5d4b7 v8.4.2 2025-01-22 21:33:23 +00:00
6fa6549535 Merge branch 'main' into chore-next-update-from-main 2025-01-09 09:45:28 -05:00
861b4bfdca feat(tab-button): add the shape property and styles for the ionic theme (#30057)
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?
Tab button does not have a shape property.


## What is the new behavior?
- Adds support for the shape property in tab button.
- 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


## 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-12-06 11:44:58 +00:00
e101f2e022 test(angular): add ng19 test app (#30041)
Issue number: internal

---------

## What is the current behavior?
There are tests apps for Angular 16, 17 and 18

## What is the new behavior?
Adds a test app for Angular 19

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
2024-12-04 17:02:06 +00:00
b0a2544c15 Merge branch 'main' into chore-update-from-main 2024-11-27 14:13:31 -05:00
a90097cdb1 chore(): update package lock files 2024-11-27 18:27:30 +00:00
1c281dc4ee v8.4.1 2024-11-27 18:26:53 +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
ec14e13780 chore(): update package lock files 2024-11-04 21:29:59 +00:00
fcc728faf2 v8.4.0 2024-11-04 21:29:16 +00: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
ee2fa19a1e feat(menu): pass role to ionWillClose and ionDidClose events (#29954)
- Adds the `MenuCloseEventDetail` interface which includes an optional `role` property
- The `ionWillClose` and `ionDidClose` emit the `role` property for the following scenarios:
  - A role of `'gesture'` when dragging the menu closed
- A role of `'backdrop'` when clicking on the backdrop to close the menu
- A role of `'backdrop'` when the the menu is closed using the escape key
- A role of `undefined` when the menu is closed from a button inside of
the menu
2024-11-04 16:10:57 -05:00
8d2d176fd6 Merge branch 'main' into chore-update-next-from-main 2024-10-30 12:58:29 -04:00
ffdaa3b286 chore(): update package lock files 2024-10-30 16:40:24 +00:00
93364b93c4 v8.3.4 2024-10-30 16:39:42 +00: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
47ba703a57 fix(angular): add missing 'compareWith' input to standalone ion-radio-group (#29870)
Issue number: resolves #29826

---------

## What is the current behavior?

When using `compareWith` on `ion-radio-group` in Ionic Angular
Standalone the following error is thrown:

```
NG8002: Can't bind to 'compareWith' since it isn't a known property of 'ion-radio-group'.
```

## What is the new behavior?

- `compareWith` on `ion-radio-group` in Angular Standalone is available

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-10-22 15:43:35 +00:00
0eb1c7a81c Merge branch 'main' into chore-update-next-main 2024-10-21 16:13:40 -04:00