Issue number: internal
---------
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Now, the action buttons have a divider for improved readability.
## 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
[ionic
preview](https://ionic-framework-git-rou-11884-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)
<!-- 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>
Issue number: resolves#30480
---------
## What is the current behavior?
When using a select component with the `action-sheet` interface, a
`header`, and a default selected value, the action sheet opens with the
wrong item focused. This happens because the focus logic uses
`nth-child` to target the selected item, which incorrectly includes the
header since it is a child element. As a result, the focus is shifted
one item above the correct selection.
## What is the new behavior?
- Correctly focus the selected item when opening an `action-sheet` with
a header from a select.
- Adds e2e tests for verifying this behavior.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Other information
[Preview](https://ionic-framework-git-fork-crazyserver-patch-2-ionic1.vercel.app/src/components/select/test/basic)
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@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, you cannot tab into a sheet modal from outside of it (the
background), even with `handleBehavior` set to `cycle`. This destroys
the accessibility of moving from the background behind a sheet modal to
the contents of a sheet modal/the drag bar to be able to cycle the size.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Now you can get into a sheet modal from outside of it and interact with
its contents/drag handle when `handleBehavior` is set to `cycle`. This
opens up the accessibility of the sheet modal and allows for interacting
with background elements with sheet modals open using accessibility
tools like VoiceOver and TalkBack.
## 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. -->
[Relevant test
screen](https://ionic-framework-git-fw-6523-ionic1.vercel.app/src/components/modal/test/sheet)
Dev build: `8.6.3-dev.11750971489.140836b0`
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolvesionic-team/ionic-docs#4145
---------
## What is the current behavior?
Some component methods are missing param tags in the JSDoc comments.
Some comments are out of order and the method description is below the
last param description. Some back ticks are misplaced around words
resulting in incorrect formatting in the docs site.
## What is the new behavior?
Method documentation in app, action-sheet, alert, datetime, loading,
menu, modal, popover, reorder-group, router, searchbar, and toast now
include descriptions for all params, all method descriptions are placed
above param descriptions, and back ticks are formatted correctly. All
changes are within JSDoc comments so will result in a change to the docs
site but no functional change to any components.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
In order to preview these changes I took the JSON generated from the
build on this branch and used it in the docusaurus script in place of
the fetch from unpkg. I set up a preview from my fork on Vercel -
https://ionic-docs-git-temptotestdocs-soundproofboots-projects.vercel.app/docs/components
. The change I made to the docusaurus script to use this temp data is
here - https://github.com/soundproofboot/ionic-docs/pull/1/files.
tempDocs.json is the output of the framework build after making these
changes.
---------
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>
Sets the `flex-basis` variable to `auto` if the slot contains an img to allow it to calculate the width using the image's intrinsic width.
---------
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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently some utility-classes are not as effective as they could be,
because they don't affect, for example, the --background or --color css
API's.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Changed the way the classes are generated, so that it affects the css
custom properties as well.
- Make the background classes to only be generated for the tokens that
contain 'bg'.
- Update the style for the body background on the ionic theme (this
triggered some 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>
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 current behavior that you are modifying. -->
Now the adjacent days have proper styles for all their states.
And the next-prev month buttons have the right height.
## Changes:
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- add styles for the adjacent days;
- add styles for active adjacent day;
- add styles for pressed adjacent day;
- add styles for focused adjacent day;
## 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
preview](https://ionic-framework-git-rou-11702-ionic1.vercel.app/src/components/datetime/test/show-adjacent-days?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Issue number: resolves#29672
---------
<!-- 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 issue on iOS 16 with `elementsFromPoint` is related to how it
handles Shadow DOM retargeting when called from the document (global)
context.
It leads to an `undefined` element that is required to trigger
`ionChange`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Returns the top most element as a fallback only if the element has a
tag of `'ion-picker-column-option'`.
## 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.6.2-dev.11749761258.1b46b6a9`
---------
Co-authored-by: Vilhelm Josander <5067135+vilhelmjosander@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?
The `ion-toolbar` contents inside the `sheet` were not being displayed
correctly in `iOS`.
## What is the new behavior?
This PR add `z-index` values of the `ion-toolbar`'s `content` and
`background` containers to fix the issue.
## 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
Before:
<img
src="https://github.com/user-attachments/assets/ac28e3de-9bb3-447d-a6f7-cce40ccd222c"
alt="Sample Image" height="300">
After:
<img
src="https://github.com/user-attachments/assets/18af1b57-dd70-4783-b0e7-9fffab8402a3"
alt="Sample Image" height="300">
---------
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. -->
When using ionic theme there's no support for translucent prop on the
ion-header.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Add support for translucent prop on Ionic theme
- Adjusted tests to also run for ionic-md
## 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 header
fade](https://ionic-framework-git-rou-11911-ionic1.vercel.app/src/components/header/test/fade?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.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, if you use keyboard navigation to move between dual range
slider knobs, only the first knob you navigate to is highlighted. This
is because both elements in the same component are marked as focusable
and the code that manages focusable doesn't take into account multiple
elements in the same component.
https://github.com/user-attachments/assets/36d84eed-6928-446e-becd-ffa2a97e3cc2
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
After these changes, we manage focusing on dual knob range sliders
manually, so using tab navigation through dual knob range sliders
focuses knobs as expected.
## 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. -->
[Test - Range - Basic
screen](https://ionic-framework-git-fw-6401-ionic1.vercel.app/src/components/range/test/basic)
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>
Issue number: resolves#29499
---------
## What is the current behavior?
Using the bundled version of Ionic results in an error `Uncaught (in
promise) Error: "undefined" is not a valid value for [side]. Use "start"
or "end" instead.` with `<ion-item-sliding>`.
Reproduction 1:
- https://stackblitz.com/edit/stackblitz-starters-mezoy6?file=index.html
- Press the Add (`+`) button several times
It is also reproducible in an Ionic Angular app when installed via npm.
Reproduction 2:
-
https://stackblitz.com/edit/angular-exwgke?file=src%2Fapp%2Fexample.component.ts
- Press the `Add Items` button several times
## What is the new behavior?
Check for the side attribute to avoid `side` being `undefined`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.6.1-dev.11749562115.1e681558`
Test PR: https://github.com/ionic-team/ionic-framework/pull/30469
The tests must be merged separately, after this is released, in order to
use the fix from the CDN.
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#30468
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, if you use pointer events to drag the content of a sheet
modal with `expandToScroll` disabled and have you have a footer and a
dismiss button, then you use the dismiss button to close the modal, the
footer will be stuck in its pinned position at the bottom of the screen.
Additionally, if you have multiple footers, only one of them properly
gets pinned and unpinned.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- We now move footers back to their stationary position when we finish
our drag event on modal content
- We support pinning and unpinning multiple footers at the same time now
## 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.6.1-dev.11749575087.1b86eb67`
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. -->
- Updated typography tokens.
- Added border styles and CSS variables for easier customization.
## 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
card](https://ionic-framework-git-rou-11968-card-ionic1.vercel.app/src/components/card/test/theme-ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves several (listed at the bottom) + 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, when expand to scroll is disabled in a sheet modal, we
duplicate the footer on drag and show a cloned version in the shadow DOM
instead of the original. This causes many issues (described in the Other
Information section), especially because often times the cloned version
of the footer would stick around instead of the original version, which
made any event listeners in the footer (and styling) broken by default
instead of only while dragging.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
We are now following [method 2 of the design
doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/modal/0003-sheet-modal-scroll.md#approach-2-move-the-footer),
with minor deviation.
Now we try to eliminate the shaky behavior in the footer by setting the
footer to be absolutely positioned on the page and adding padding to the
bottom of the modal while dragging is happening to offset the missing
footer content. We are additionally performing some extra logic to swap
back when the modal is dragged below the height of the footer so that it
collapses correctly visually.
Note this is a minor variation in method two from the design doc because
I moved the footer to the body instead of to the parent modal. This is
because the parent modal will prevent anything not in its ion-page from
displaying, but it seems to work fine. As a side-effect of this, I had
to add an extra class and support for that class in a few areas so we
could identify footers that belonged to modals while they were moving
and apply applicable classes.
Additionally with this change I was able to remove all of the extra code
in the leave/enter animations because we no longer need to worry about
managing a clone of an element there. This allows me to contain all code
relating to behavior of the footer to `sheet.ts`.
## 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
This refactor in how the footer combats shakiness should resolve many
issues caused by the previous implementation, including the following:
- this change no longer has the footer being swapped out, effectively
breaking event listeners, which fixes#30315
- this change no longer has the footer being duplicated at all, which
fixes#30341
- this change no longer has the footer (sometimes) being moved to the
shadow DOM, which fixes#30312
**Current dev build**: `8.5.8-dev.11748530383.18b4e301`
---------
Co-authored-by: Israel de la Barrera <israeldlbarreral@pm.me>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Properly handle autofill by detecting when the input value exceeds one character in the `onInput` handler and distributing the value across all input fields.
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: resolves#29094
---------
<!-- 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 assigning multiple selected dates that span different months, the
date time will not set the correct working parts and instead fallback to
the default date: May 28, 2021.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
When opening the datetime with multiple dates selected, the calendar
will animate to the last value in the array of selected dates.
If the datetime is collapsed, body is not visible, is not a grid view or
the user has made a selection of a new date, the calendar will not
animate and instead will set the working parts to the current value
selected (latest/last value).
## 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. -->
Internally we discussed setting the month view to the first value in the
array. Upon further investigation I determined this is not the expected
behavior. When a user interacts with multiple date selection, the most
recent selection (their active view) is the **last** value in the array.
Animating or updating the working parts to the first value in the array
would result in the calendar month jumping after every selection. Using
the last index of the array results in no odd jumps in the experience.
If a developer wishes to configure this behavior, they can change the
order of the values in the value assigned to the datetime (to cause a
specific month/date to be the initial view).
Dev build: `8.5.8-dev.11748388365.11ad9dfe`
---------
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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Review background color token and xxsmall size
## 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. -->
[Avatar ionic
theme](https://ionic-framework-git-rou-11968-avatar-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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>
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. -->
- Updated typography to use correct token.
## 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
tab-bar](https://ionic-framework-git-rou-11968-tabs-ionic1.vercel.app/src/components/tab-bar/test/basic?ionic:theme=ionic)
---------
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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Review button min-width and size of icons inside.
- Fixed test for ionic theme, with the correct medium size.
## 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. -->
[Button Ionic
theme](https://ionic-framework-git-rou-11968-button-v2-ionic1.vercel.app/src/components/button/test/theme-ionic)
---------
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?
Some stylings for the ion-badge when slotted in an ion-button were
missing.
## What is the new behavior?
Updated the styling for the ion-badge when slotted in an ion-button
according to the designs:
- Adjusted badge padding;
- Abandoned the `:has` pseudo-selector for a simple 'button-had-badge'
class;
- Adjusted font-size for icons inside the button;
- Adjusted badge positioning according to button size and badge length.
## 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
---------
<!-- 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 `ion-input-password-toggle` has aria attributes that are updated
based on the value visibility. However, those values do not reflect on
the native button. This leads to the screen readers to not announce
correctly.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The aria attributes now reflects correctly within the native button.
- The `aria-label` has been updated to indicate the state of visibility.
- Added 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. -->
[Preview](https://ionic-framework-git-fw-6525-ionic1.vercel.app/src/components/input-password-toggle/test/basic)
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=ionichttps://ionic-framework-git-rou-11917-ionic1.vercel.app/src/components/spinner/test/color?ionic:theme=ionic
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.
## What is the new behavior?
The CSS code limiting the `height` was removed. Now, the height is set
automatically.
## 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>
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. -->
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>
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>
Issue number: resolves#30165
---------
<!-- 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, several components will trigger their `onClick` twice if you
click on their labels.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
After this fix, the affected components will only trigger `onClick` once
per click of their labels or click directly on the element.
## 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. -->
The affected components are:
- Checkbox
- Select
- Textarea
- Toggle
- Input
I also tested radio and range but could not reproduce the issue for
them.
Note that two of the components, checkbox and toggle, had to have
special implementations for both their test and fix because of how the
host component acts as the component for accessibility purposes.
Current dev build: `8.5.7-dev.11746044124.147aab6c`
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
