432 Commits

Author SHA1 Message Date
911684f83a feat(input-otp): add styling for the ionic theme (#30465)
Adds styles for the ionic theme, splits the scss files into common and native, and adds the theme to the e2e tests.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-06-12 17:07:55 -04: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
6a1382fc2c fix(button): ionic theme sizes (#30405)
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. -->

- Adjusted ion-button sizes on Ionic theme to match Figma UI. Now
figma's small | medium | large match ionic's small | default | large.
- Removed xsmall and xlarge sizes, as UX rolled back the decision to
have them.
- Removed xsmall and xlarge tests and their usages.

## 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
Button](https://ionic-framework-git-rou-11903-ionic1.vercel.app/src/components/button/test/theme-ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-05-14 15:08:37 +01:00
7fec492ac7 feat(badge): remove xxsmall, xsmall and xlarge sizes (#30392)
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?
The badge presents the `xxsmall`, `xsmall`, and `xlarge`. The user
experience design expects only the `small` and `medium` sizes for badges
with content (number or icon), and `small`, `medium`, and `large` sizes
for empty badges.

## What is the new behavior?
- The badge should support only the sizes mentioned above.
- The `small` and `medium` sizes must be adjusted to the new
requirements for badges with content.
- The size property descriptions must inform that the `large` size is
only available for empty badges.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2025-05-07 17:37:07 +01:00
02c138802a fix(tokens): fix usage on components and review scss architecture (#30368)
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 improvements on scss architecture, as identified on past
assessment, on multiple components.

Some of these changes resulted in snapshots differences, all reviewed
and expected:

- Button spinner - pics with no visual differences/false-positive.
- Item slider -  difference due to updated typography token.
- Item - difference as is now using correct disabled styles tokens.
- searchbar: 1px difference on horizontal margin - expected - to start
using a more rounded value from a token.
- Tab/tab-button - difference as is now using correct typography token.
- Spinner/loading - this looks like a false positive, saw no visible
differences.
- Textarea - this looks like a false positive, saw no visible
differences.
- Typography - this looks like a false positive, saw no visible
differences.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2025-04-23 18:41:19 +01: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
69340bff5a fix(divider): remove safe areas from horizontal padding (#30311)
Issue number: internal

---------
## What is the current behavior?
The horizontal padding of the divider component was being calculated
taking into account safe areas.
However, since this component can be placed inside other components that
already take these areas into account, this is not necessary.

## What is the new behavior?
- Removes the safe areas

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

Confirmed with design: the new divider component’s main use case is to
be used inside ion-content (or one of it’s children). As such, the
responsibility of taking into account safe areas will fall on the
developer (as it’s already stated in the
[documentation](https://ionicframework.com/docs/api/content#safe-area-padding)).
This means, the divider component itself will not account for the safe
areas for its' specific padding.

The default spacing also changed from `xxsmall` to `medium`
2025-03-31 13:35:28 +01:00
7f23c60ffd fix(input): remove css variable and update helper text to use valid highlight in ionic theme (#30272)
- Splits the common and native stylesheets
- Removes the `--text-color-invalid` variable so the customization
across components and themes for helper & error text is consistent.
- Sets the color of the helper text when valid to
`--highlight-color-valid` to ensure customization works the same as
invalid

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-25 10:46:25 -04:00
f0516e6569 feat(checkbox): add helper and error text to the ionic theme (#30278)
- Adds the common stylesheet for the shared styles
- Adds design for helper and error text to the checkbox for the ionic
theme.
- Updates tests to add screenshots for ionic theme

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-25 10:17:46 -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
5dae2dc1dc Merge branch 'next' into chore-merge-main-into-next 2025-03-19 10:47:25 -04:00
723868df9e refactor(searchbar): update according to design (#30245)
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 searchbar component does not currently match our UX designs for the
ionic theme.

## What is the new behavior?
Updated the searchbar so that it does:
- Adjusted the searchbar input paddings when no leading or trailing
icons are rendered;
- Added an ellipsis text overflow to the searchbar input;
- Updated the background, text and icon colors so that they are reactive
to state changes like having inserted text and being disabled (some
design tokens are still TBD);
- The clear button is now hidden when the searchbar is disabled.

## 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: Maria Hutt <thetaPC@users.noreply.github.com>
2025-03-19 12:57:08 +00:00
b8b5984150 Merge branch 'main' into chore-merge-main-into-next 2025-03-18 18:05:14 -04: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
ac4ea3232b feat(toolbar): add shadow parts for background, container, and content (#30069)
Resolves #30068

---------

Add `part` attributes to toolbar for the `background`, `container` and `content`.
2025-01-23 15:48:58 -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
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
bc3d30c3d2 feat(select): add shapes for ionic theme (#30016) 2024-11-14 13:26:59 -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
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
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
15d6104c6f feat(app): move ion-app init logic to initialize function (#29930)
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>
2024-10-16 15:15:54 -04:00
ab61c122e4 refactor(searchbar): update default styles for ionic theme (#29917)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-10-04 16:43:32 -07:00
61876a5250 feat(segment): add default styles for ionic theme (#29897)
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
2024-10-02 13:04:31 -04:00
668b2dac57 docs(app): add setFocus to the documentation (#29916)
Issue number: resolves #29830

---------

## What is the current behavior?
The `setFocus` method on `ion-app` is marked internal.

## What is the new behavior?
Document the `setFocus` method as a way for developers to
programmatically focus elements.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The method isn’t new, it was just marked as internal, which prevented it
from being documented. I can mark this as a `feat` though if anyone
thinks it should be.

Related documentation PR:
https://github.com/ionic-team/ionic-docs/pull/3842
2024-10-01 18:27:03 +00:00
2af216737d feat(tab-bar): add expand and shape props for ionic theme (#29888)
Co-authored-by: ionitron <hi@ionicframework.com>
2024-09-25 13:58:12 -07: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
e839920162 chore: run build 2024-08-30 14:48:58 -04:00