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
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
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
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
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. -->
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
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.
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
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)
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>
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. -->
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`
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. -->
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>
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>
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`
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. -->
Now when an adjacent day is selected the component will scroll to the
pretended month, as it does when a month change via arrow buttons.
## Changes:
- add styles for active adjacent day;
- scroll animation when adjacentDay is selected;
## 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
- [md
preview](https://ionic-framework-git-rou-11744-ionic1.vercel.app/src/components/datetime/test/show-adjacent-days?ionic:mode=md)
- [ios
preview](https://ionic-framework-git-rou-11744-ionic1.vercel.app/src/components/datetime/test/show-adjacent-days?ionic:mode=ios
)
<!-- 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>
Co-authored-by: ionitron <hi@ionicframework.com>
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>
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>
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. -->
## 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>
- 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>
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".`
- 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>
- 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>
- Adds design for helper and error text to the select for the ionic
theme.
- Updates tests to add screenshots for ionic theme
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
- 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>
- 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>
- Adds the common stylesheet for the shared styles
- Adds design for helper and error text to the radio group for the ionic
theme.
- Updates tests to add screenshots for ionic theme
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
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>
