Commit Graph

14441 Commits

Author SHA1 Message Date
João Ferreira
fc4e5ae287 fix(progress-bar, spinner): update colors for ionic theme (#30418)
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. -->
The colors were not working on progress bar when the theme was ionic; 
The Spinner with color="medium" should use the contrast variation by
design;

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Fix Progress-Bar Ionic Colors;
- Change Spinner Medium Color Variation;

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

https://ionic-framework-git-rou-11917-ionic1.vercel.app/src/components/progress-bar/test/basic?ionic:theme=ionic

https://ionic-framework-git-rou-11917-ionic1.vercel.app/src/components/spinner/test/color?ionic:theme=ionic
2025-05-23 17:36:56 +01:00
Giuliana Silva
1877ac5dd1 feat(datetime): fix height when presentation='time' (#30416)
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 `datetime` component had a broken display for the `ionic` theme,
because the `height` defined for that component was too small.

![image](https://github.com/user-attachments/assets/9d4c0c0b-8648-4ea9-88f9-9562190d5498)

## What is the new behavior?
The CSS code limiting the `height` was removed. Now, the height is set
automatically.

![image](https://github.com/user-attachments/assets/ad6de967-bba2-47fa-9f12-835e35565c1c)

## 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: ionitron <hi@ionicframework.com>
2025-05-21 15:46:30 +01:00
Bernardo Cardoso
f7a2d34305 feat(tokens): create variables fallbacks based on its alias token (#30404)
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. -->

Currently, even if a token used an alias token as its value, when we're
generating the variables we wouldn't respect this connection and were
simply adding the fixed final value.

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

- Now when a token uses an alias token, we keep that relationship by
making sure the alias variable is used as fallback.

## 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-05-14 15:21:18 +01:00
Bernardo Cardoso
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
Giuliana Silva
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
Shane
3b643a75d1 refactor(toolbar): improve slot layout and visibility handling (#30371)
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-04-30 16:32:41 -07:00
Bernardo Cardoso
b2f6b8c67e fix(link): improve ionic theme links styles and dev experience (#30375)
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. -->

- Adjust link styles to match latest Figma UI and tokens.
- For default link, make it work without the need of adding a class.
- Change `ionic` to `ion` on the class names.
- Adjusted tests to reflect the changes.

## 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
Link](https://ionic-framework-git-rou-11850-ionic1.vercel.app/src/css/test/link/basic?ionic:theme=ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2025-04-30 16:22:59 +01:00
Bernardo Cardoso
d3165fc229 fix(modal): fix color tokens on ionic theme (#30379)
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. -->

- Fixed the tokens used on background and text.

## 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 Custom
Dialog](https://ionic-framework-git-rou-11900-ionic1.vercel.app/src/components/modal/test/custom-dialog?ionic:theme=ionic)
2025-04-30 14:38:11 +01:00
Bernardo Cardoso
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
Bernardo Cardoso
1e7a84f9bd fix(css): improve tokens support on global css ionic files (#30364)
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 tokens usage on global css files for Ionic theme.
- Removed global background an text variables and fixed variables names
used on `body`. This resulted in some changes on test pages colors,
hence the snapshots differences.

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

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2025-04-16 17:29:58 +01:00
Bernardo Cardoso
7d98a87302 chore(tokens): update design-tokens dependency to 1.2.6 (#30363)
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. -->

Update tokens dependency to 1.2.6.
This version fixes values of transition tokens.

## 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-04-16 12:35:14 +01:00
Bernardo Cardoso
33de8255f4 chore(tokens): update design-tokens dependency to 1.2.5 (#30353)
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. -->

- Update tokens dependency to 1.2.5.
- This version fixes values of some colors, to improve a11y compliance.
- Added new extended colors.

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

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2025-04-14 16:50:39 +01:00
Brandy Smith
07ac3db1ff merge main (#30354) 2025-04-11 16:04:38 -04:00
Brandy Smith
b3917600cc refactor(checkbox): remove unused style 2025-04-11 15:39:40 -04:00
Brandy Smith
56be987881 Merge branch 'main' into merge-main-into-next 2025-04-11 15:33:29 -04:00
Brandy Smith
5da939d330 fix(button): use proper colors for the button states in the ionic theme (#30339)
Issue number: internal

---------

## What is the current behavior?
The focused and hover states are appearing as an overlay of the contrast
color on the buttons.

## What is the new behavior?
- Updates hover and focus states to match Figma designs
- Focus background should not change from the default
- Hover background should be the shade for solid buttons, and use
neutral subtlest for clear and outline buttons
- Updates the clear button to use the new `foreground` variant

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2025-04-11 14:15:14 -04:00
Brandy Smith
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
Brandy Smith
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
Brandy Smith
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
Shane
b1bc58f1c8 fix(toggle): ensure proper visual selection when navigating via VoiceOver in Safari (#30349)
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, MacOS voice over on Safari does not recognize ion-toggle
correctly and fails to highlight the element properly

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

By adding the role property to the host element, we're correctly
identifying the toggle so Safari knows how to handle 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. -->
2025-04-11 17:18:35 +00:00
Brandy Smith
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
Brandy Smith
207d4858a6 feat(css): add support for the subtle color map (#30306)
Issue number: internal

---------

## What is the current behavior?
The colors are only available in bold colors.

## What is the new behavior?
Adds support for a `subtle` hue to the colors map, generating all of the
same variants but in more subtle colors. This only applies for the
`ionic` theme. Adds an additional variant, `foreground` to be used by
components when the color is being used for text.

The `ios` and `md` themes do not add the `foreground` variant because
this would be a breaking change, requiring all color overrides,
palettes, and new colors to include this variant. I have added tests to
make sure they still work without it.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

No changes are made to the existing colors.
2025-04-11 12:32:38 -04:00
Brandy Smith
1bc4f59f61 merge release-8.5.4 (#30347)
v8.5.4
2025-04-09 13:47:15 -04:00
Brandy Smith
51de007854 chore(): update package lock files 2025-04-09 13:28:43 -04:00
ionitron
fd4ffdd9d1 chore(): update package lock files 2025-04-09 17:23:20 +00:00
ionitron
d1974894a9 v8.5.4 v8.5.4 2025-04-09 17:22:30 +00:00
Marta Carlos
97f96b4528 fix(input): apply position to .cloned-input only for native themes (#30337)
Issue number: resolves internal

---------

## What is the current behavior?
Using the ionic theme, `ion-input` inside an `ion-accordion` , that
require a scroll to focus, when clicked , it's text would shift

![Screenshot 2025-04-04 at 12 32
22](https://github.com/user-attachments/assets/94152b22-4dcf-47bc-a911-03b4270e6f9f)

After some troubleshooting, we identified this visual bug came from
logic of `addClone`, which creates a clone of the input , in order for
it to be focusable and working on iOS/Android (code
[here](4317da080c/core/src/utils/input-shims/hacks/common.ts (L34))
)

The cloned input has an additional class, `cloned-input` and, for the
ionic theme, the `@position` mixin was causing the cloned input
`inset-inline-start` to be 0, which meant it was not being placed
_exactly_ on top of the "OG" input
 
## What is the new behavior?
There's no longer a visual bug on inputs inside accordions, when using
the ionic theme

To fix it, we split the `cloned-input` class between the `input.native`
and `input.common` scss files, where the `@position` mixin is only used
in `input.native`

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

- Bug reproduction
[here](https://github.com/OutSystems/ui-comp-ionic-sandboxes/tree/ROU-11748-bug)
- With this fix
[here](https://github.com/OutSystems/ui-comp-ionic-sandboxes/tree/ROU-11748)
2025-04-07 15:37:41 +01:00
Brandy Smith
835ad52c29 fix(config): properly export LogLevel (#30335)
Issue number: resolves #30255

---------

## What is the current behavior?
`LogLevel` is not properly exported

## What is the new behavior?
Exports `LogLevel` in core

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

Dev build: `8.5.4-dev.11743715474.1eadbd25`

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-04-04 18:45:53 +00:00
Bernardo Cardoso
9016cc6f06 chore(tokens): update design-tokens dependency to 1.2.4 (#30338)
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. -->

- Update tokens dependency to 1.2.4.
- This version fixes the semantic warning tokens values.

## 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-04-04 16:32:11 +01:00
Brandy Smith
4317da080c merge release-8.5.3 (#30330)
v8.5.3
2025-04-02 12:09:34 -04:00
Brandy Smith
37fb269246 chore(): update package lock files 2025-04-02 11:57:25 -04:00
ionitron
3213bf40c7 chore(): update package lock files 2025-04-02 15:51:12 +00:00
ionitron
28e29c38b4 v8.5.3 v8.5.3 2025-04-02 15:50:34 +00:00
Maria Hutt
105796f6bc fix(segment-view): prevent vertical scroll while scrolling horizontally (#30276)
Issue number: resolves #30001 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When segment view has content that is long enough to render outside of
the viewport, then a user can scroll vertically and horizontally when
the user scrolled down to see the content at the bottom. This causes
disorientation as scrolling should only be in one direction.

This only happens on a mobile device, specifically Android. It can be
reproduce with a browser simulator.

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

- Updated styling to take into account that content might be outside of
the viewport.

## 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.5.2-dev.11743531350.19e040aa`
2025-04-02 15:08:11 +00:00
Bernardo Cardoso
54597a312c chore(tokens): update design-tokens dependency to 1.2.3 (#30327)
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. -->

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

- Update tokens dependency to 1.2.3.
- This version fixes the generation of the z-index tokens.

## 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-04-02 09:59:01 +01:00
Tobi
7f9df7a894 fix(overlays): exclude backdrop-no-scroll class when toast is presented (#30123)
Issue number: resolves #30112 

---------

<!-- 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?

When toast is presented, the `backdrop-no-scroll` class is added to the
body when using Frameworks like Angular. It should not add this class as
toast does not be setting focus trap as mentioned in the
[comments](1cfa915e8f/core/src/utils/overlays.ts (L514-L520)).

## What is the new behavior?

- Class is only added when the overlay that is presented is not a toast
component.
- Test was added.

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

N/A

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2025-04-01 23:05:12 +00:00
Pedro Lourenço
8c4bf8bb47 feat(button): add support for badge (#30303)
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 ion-badge is not currently supported when inside the ion-button.

## What is the new behavior?
- The experience of the ion-badge inside the ion-button has been
implemented according to our designs.

## 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: José Rio <jose.rio@hotmail.com>
2025-03-31 16:37:05 +01:00
Marta Carlos
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
Bernardo Cardoso
8855618037 feat(badge): add support for number and icons with vertical prop (#30305)
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. -->
Currently the vertical prop only works for empty badges.

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

- Added styles for badge with numbers or icons to be used as hint
(vertical prop)
- Added new tests for these scenarios and updated snapshots.
- Added best effort styles for ios/md to look decent (not on the scope
of this task and no UI from figma).

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

[Badge Ionic
Hint](https://ionic-framework-git-rou-11750-ionic1.vercel.app/src/components/badge/test/hint?ionic:theme=ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2025-03-28 17:16:17 +00:00
Shane
bb40a1efe7 fix(checkbox): ensure proper visual selection when navigating via VoiceOver in Safari (#30300)
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, MacOS voice over on Safari does not recognize ion-checkbox
correctly and fails to highlight the element properly


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
By adding the role property to the host element, we're correctly
identifying ion-checkbox as a checkbox so Safari knows how to handle 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. -->

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2025-03-28 16:15:03 +00:00
Bernardo Cardoso
8f05689f95 chore(tokens): update design-tokens dependency to 1.2.2 (#30319)
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. -->

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

- Update tokens dependency to 1.2.2.
- Update generated tokens.

## 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-03-28 14:56:58 +00:00
Brandy Smith
23b7a29b27 merge release-8.5.2 (#30314)
v8.5.2
2025-03-26 17:52:53 -04:00
Brandy Smith
27816d17d8 chore(): update package lock files 2025-03-26 17:42:45 -04:00
ionitron
ca51d64557 chore(): update package lock files 2025-03-26 21:34:31 +00:00
ionitron
4fb15feb0c v8.5.2 v8.5.2 2025-03-26 21:33:58 +00:00
Brandy Smith
0893703769 test(angular): add a landing page to go between lazy and standalone apps (#30286)
## What is the new behavior?
Adds a landing page to the Angular test app to make it easier to get to
and debug standalone.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-26 20:55:04 +00:00
Victoria Unizhona
ac6e6a0317 fix(datetime): support typing time values in a 24-hour format (#30147)
- Adjusted the `selectMultiColumn` logic to handle keyboard values like
20 and 22 dynamically.
- Introduced checks for the maximum column value to enable flexible
input behavior.
- Added e2e tests to verify correct value selection for both 12-hour and
24-hour formats.

Issue number: resolves #28877

---------

## What is the current behavior?

In the ion-datetime component, when typing 2000 in the keyboard the
resulted time value is 02:00 (in 24-hour format)

Examples:
https://forum.ionicframework.com/t/ion-datetime-disable-opening-keyboard/224558/6?u=dennisskylegs

## What is the new behavior?
In the ion-datetime component, when typing 2000 in the keyboard the
resulted time value is 20:00 (in 24-hour format)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: ShaneK <shane@shanessite.net>
2025-03-26 19:06:04 +00:00
Maria Hutt
1cfa915e8f fix(segment-button): ensure consistent disabled state for segment-content error handling (#30288)
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. -->

Segment buttons do not consistently set themselves to a disabled state.
When disabling them and rapidly refreshing the page, their state may
vary—sometimes they appear disabled, and other times they do not.

This was due to this
[PR](https://github.com/ionic-team/ionic-framework/pull/30138). The
reason that this PR was created was due to the console errors being
shown too early when segment buttons and contents were dynamically
rendered.

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

- I reverted the changes added through the other PR since the
`setTimeout` was causing the inconsistency.
- By moving the console errors to `componentWillLoad`, it provides
`ion-segment-content` time to render before the console errors are
thrown.

## 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.5.2-dev.11742514102.1b51674d`

How to test:
1. Run the server locally
2. Navigate to the [segment view
disabled](http://localhost:3333/src/components/segment-view/test/disabled)
page
3. Verify that the "Paid", "Free", and "Top" buttons disabled
4. Rapid fire some hard refreshes
5.  Verify that the "Paid", "Free", and "Top" buttons disabled
6. Navigate to this StackBlitz
[repro](https://stackblitz.com/edit/yhktpj19-wxmxpmw7?file=src%2Fmain.tsx)
7. Install the dev build: `npm i
@ionic/react@8.5.2-dev.11742514102.1b51674d
@ionic/react-router@8.5.2-dev.11742514102.1b51674d`
8. Open the console log
9. Click on the "Add last child" button
10. Verify that there are no console errors like `Segment Button: Unable
to find Segment Content with id="content3".`
2025-03-25 18:21:31 +00:00
Brandy Smith
b57d432675 fix(textarea): use proper design for helper and error text (#30283)
- Updates the common and native stylesheets to separate the bottom content styles
- Fixes an improperly updated counter text color for native
- Adds missing styles for valid/invalid states and screenshot tests for the highlight

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-03-25 11:42:23 -04:00
Brandy Smith
1865e50d7a feat(toggle): add helper and error text to the ionic theme (#30281)
- Adds design for helper and error text to the toggle 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 11:17:14 -04:00