Commit Graph

13450 Commits

Author SHA1 Message Date
Sean Perkins
561998ecea fix: attempt to account for dynamic width options 2024-01-15 17:08:51 -05:00
Sean Perkins
4aa7d47dce chore: prettier formatting 2024-01-12 17:50:35 -05:00
Sean Perkins
b0aa270722 refactor: organize implementation and comments 2024-01-12 17:48:00 -05:00
Sean Perkins
260ffdcc91 refactor: save point, use ionic animation util 2024-01-12 15:43:48 -05:00
Sean Perkins
7f8a06d41c fix: animation for rtl collapse end side 2024-01-12 15:17:44 -05:00
Sean Perkins
f9e719b3e7 chore: save point with rtl support 2024-01-12 15:14:51 -05:00
Sean Perkins
8374d693ca chore: save point 2024-01-12 14:01:24 -05:00
Sean Perkins
d62ff1c50f chore: save point 2024-01-12 13:38:34 -05:00
Sean Perkins
815d9226ed chore: save point 2024-01-10 18:58:08 -05:00
Sean Perkins
f65235ac47 feat(progress-bar): update styles to iOS 17 specs (#28759)
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. -->

Ionic's progress bar implementation deviates from the appearance of a
progress bar on iOS 17.

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

- Progress bar is updated to have rounded corners (around the
container).
- Increases progress bar height to `4px`
- Solid progress bars (progress bars with a buffer value of `1`) will
have a consistent background appearance.
- Buffer progress bars will continue to have the colored background
appearance as they do in v7.

## 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/.github/CONTRIBUTING.md#footer
for more information.
-->

### Breaking Changes

- `--buffer-background` has been removed in favor of `--background`. 

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Accomplishing rounded caps for the inner progress with Ionic's scale
transformation was not viable. To maintain 60fps animations for the
progress, rounded corners were applied to the container.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-01-05 17:16:27 -05:00
Sean Perkins
48c0d2c0dd feat(searchbar): update styles to iOS 17 specs (#28728)
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 searchbar implementation for Ionic's iOS mode does not align with
the appearance of a native search control in iOS 17.

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

- The spacing between the searchbar and the cancel button has increased
to `12px`.
- The cancel button font size has increased to `17px`. 

|iOS 17|Ionic|Diff|
|----|----|----|

|![searchbar-ios](https://github.com/ionic-team/ionic-framework/assets/13732623/883bdeed-ec42-4a1a-898c-82d9d7aa270f)|![ionic-searchbar](https://github.com/ionic-team/ionic-framework/assets/13732623/93482bea-9fae-4056-a6de-8ca5c9e1640d)|![searchbar-diff](https://github.com/ionic-team/ionic-framework/assets/13732623/6c6a1f99-55ab-43be-94e5-bd2ebcd1b960)|


- Ionic's text and background color is different than iOS, this is
expected. Ionic uses the `$text-color-rgb`, which is compatible with
dark mode appearance. Ionic does not currently have rgb variables for
step colors to closer align to iOS color when requiring opacity.
- iOS reference image is from the Notes app. Ionic reference image is
from `searchbar/test/basic`, with a modified content background color of
`#f2f2f7` to closer align to the Notes app.

## 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/.github/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 additional screenshot diffs that are a part of this PR are valid
changes. When updating the color palette for AA contrast, these
reference images were not updated. We currently use a
[threshold](dc1dd9c395/core/playwright.config.ts (L57))
that determines if a diff exists. The reason that they show up in this
PR is because I manually deleted the reference images and forced new
references. As such the text color changes you see here are actually
from the AA contrast changes.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-01-03 16:55:04 -05:00
Sean Perkins
ff8015511a feat(modal): update styles to iOS 17 specs (#28748)
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 card presentation of a presented view from a modal does not match
iOS 17 design.

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

- Updates the transform scale of the presenting element with a modal to
have a similar width to iOS 17. In my discovery `0.91` is the closest
scale value.
- The presenting element refers to the view pushed behind the modal when
displayed with a card appearance.

|iOS|Ionic|Diff|
|----|----|----|

|![ios-modal](https://github.com/ionic-team/ionic-framework/assets/13732623/2b7d20e0-1bef-4824-8ac1-16afa193accd)|![ionic-modal](https://github.com/ionic-team/ionic-framework/assets/13732623/d3f0b5bd-3128-4be7-9b32-ef439a16cef6)|![diff-modal](https://github.com/ionic-team/ionic-framework/assets/13732623/c8535501-7f7e-4f09-824c-c51db18c5964)|

The iOS reference is from the Events app, when creating a new event. The
Ionic reference is from the `modal/tests/card` example in the repository
(with the changes in this PR).


## 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/.github/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>
2023-12-27 13:08:04 -05:00
Shawn Taylor
63ea967d02 feat(tab-button): update styles to iOS 17 specs (#28754)
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. -->
Tab Button icons on iOS are all 30px font size with or without a label.

![Screenshot 2023-12-21 at 2 12
56 PM](https://github.com/ionic-team/ionic-framework/assets/14926794/5321e0cd-6315-4557-8ec3-4dae8a3728cb)


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

- Tab button icons are still 30px font size when there is no label
- Tab button icons are 24px font size when there is a label

![Screenshot 2023-12-21 at 2 12
29 PM](https://github.com/ionic-team/ionic-framework/assets/14926794/e65060c8-e394-43d2-a713-2e0a2a78550a)




## 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/.github/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>
2023-12-27 12:51:15 -05:00
Shawn Taylor
0ce0693af1 feat(toggle): update styles to iOS 17 specs (#28722)
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 Toggle styles do not match iOS 17.

| iOS 17 Screenshot | New Design | Ionic |
| --------------------------------------------- |
------------------------------------------------------- |
------------------------------------------------- |
| ![iOS
Toggle](0a820657b7/projects/ionic-framework/ios-17/assets/ios-toggle-light.png)
| ![Proposed
Toggle](0a820657b7/projects/ionic-framework/ios-17/assets/proposed-toggle-light.png)
| ![Ionic
Toggle](0a820657b7/projects/ionic-framework/ios-17/assets/ionic-toggle-light.png)
|


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

- The Toggle handle box shadow matches iOS 17 specs
- The Toggle height matches iOS 17 specs

## 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/.github/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>
2023-12-21 11:26:10 -05:00
Maria Hutt
45907aa907 feat(checkbox): update styles to iOS 17 specs (#28729) 2023-12-20 15:42:58 -08:00
Brandy Carney
4649637ad9 feat(datetime-button): update design to match iOS 17 spec (#28730)
Issue number: N/A

---------

## What is the current behavior?
Datetime button combines Material Design and iOS styles.

## What is the new behavior?

- Splits the styles into their own mode files for Material Design & iOS
and updates the iOS styles to match iOS 17.
- Updates the basic test to include a screenshot test in both modes &
directions.

I removed all of the datetime button screenshots before running the
action to generate screenshots. Some screenshots were not added back but
this is correct for the following reasons:

-
[datetime-button-disabled](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts#L4)
does not run for `ios` or `rtl` so those were removed
- [datetime-overlay-modal and
datetime-overlay-popover](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts#L9)
do not run for `rtl` so those were removed
-
[datetime-overlay-popover](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts#L31)
skips the test in firefox so that was removed

I can add these back if you want since they aren't part of this PR but
they should have probably been removed when the test was updated to
exclude directions/modes.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I compared the datetime button against native iOS 17.1.2:

| iOS 17 | Ionic |
| ---| ---|
|
![ios17](https://github.com/ionic-team/ionic-framework/assets/6577830/1d66ab52-143e-4461-81cd-b6794e6a8d0d)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/6577830/a0658aec-7544-479f-9c37-3018e1f1da9e)
|
|
![ios17](https://github.com/ionic-team/ionic-framework/assets/6577830/aa57d5da-d961-4a24-8b55-c28c0db55aa7)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/6577830/086c0087-e213-48c8-9385-a008b23ee427)
|

Diff:

![diff](https://github.com/ionic-team/ionic-framework/assets/6577830/ba9d1fca-9faa-445e-bbd1-5da3d8cc4468)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-12-20 15:30:08 -05:00
Brandy Carney
a3b825475e feat(datetime): align active datetime font size with ios 17 (#28738)
Issue number: N/A

---------

## What is the current behavior?
The active day in a datetime uses the same font size as the other days.

## What is the new behavior?
Increase the font size of the active day to match the iOS 17 spec. 

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

| iOS 17 | Ionic |
| ---| ---|
| ![native
ios](https://github.com/ionic-team/ionic-framework/assets/6577830/d26801cf-2771-4c37-b0f0-64b93017b171)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/6577830/c73deffe-e7bd-4cc3-a3b9-9ebac0a351c8)
|

> [!NOTE]
> In the above screenshot for Ionic I have added `background:
current-color(base);` to the active day. This code should be there for
"today" but it is not due to a bug
([FW-5808](https://ionic-cloud.atlassian.net/browse/FW-5808)).

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-12-20 14:48:51 -05:00
Amanda Johnston
979b2f68f0 feat(alert): update styles to iOS 17 specs (#28726)
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. -->

Alerts don't match the iOS 17 spec for styling.

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

- Overlay border radius increased.
- Input font size increased.
- Input padding increased.

## 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/.github/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 difference in the MD screenshots is the box shadow on the header in
the background. This was a change made a while back that probably wasn't
caught due to the pixel threshold on the screenshot update job. Deleting
all screenshots and running again got it updated.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-12-20 10:56:26 -06:00
Liam DeBeasi
e76d72989a feat(action-sheet): add disabled button (#28723)
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. -->

Action sheet buttons cannot be disabled. This behavior exists in iOS 17.

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

- Action sheet buttons can be disabled

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/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>
2023-12-19 16:48:25 -05:00
Sean Perkins
2c20a6bdb4 chore(breaking): update picker component heading level (#28725)
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. -->

The picker heading level is currently an `h2`, where the other component
headings are `h4`.

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

- Updates the heading level for Picker to `h4`. 

## 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/.github/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. -->
2023-12-18 16:45:25 -05:00
Liam DeBeasi
e0895e7a95 chore: sync with main
chore: sync with main
2023-12-18 11:09:00 -05:00
Liam DeBeasi
7cec5337a4 chore: sync 2023-12-18 10:46:20 -05:00
Liam DeBeasi
e574ffe85a chore(picker): mark ionInputModeChange as internal (#28701) 2023-12-13 17:51:23 -05:00
Amanda Johnston
516b84475e fix(input, textarea, select): reduce padding on slotted buttons (#28676)
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. -->

Buttons slotted in the start/end slots of input, textarea, or select
have a lot of excess padding that can cause them to look misaligned from
other pieces such as the control's label, especially when using
`fill="clear"`.

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

Padding removed, and a border radius added so that non-clear buttons as
well as the focus state on clear buttons still look okay. Existing
screenshot tests have also been updated to include buttons (non-clear
ones so you can see the border radius in the screenshots).

Let me know if you think this should go on a feature branch instead. I
chose `main` because the current experience looks somewhat broken and we
just did a minor release recently, but this could be considered a
notable enough behavior change.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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>
2023-12-13 22:49:17 +00:00
Liam DeBeasi
bc51dd05cf fix(item): label does not expand indefinitely (#28700)
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. -->


While working on an unrelated task, I noticed the list items in the list
starter app run off the page. This is due to the text wrapping behavior
in v7.6 where we allows the labels to grow/shrink. However, we do not
set a limit on how much they can grow. This means that child elements
inside of `ion-label` with long text can cause the label container to
grow indefinitely.

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

- Labels in item have a max-width of 100%

## 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/.github/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: `7.6.1-dev.11702498225.1ad6eda6`

| before | after |
| - | - |
| ![localhost_8102_home(Samsung Galaxy
S8+)](https://github.com/ionic-team/ionic-framework/assets/2721089/cadf8c5f-5813-4c8d-b236-752fde3d37cc)
| ![localhost_8102_home(Samsung Galaxy S8+)
(1)](https://github.com/ionic-team/ionic-framework/assets/2721089/ccb4277c-046d-46f8-b7f8-eda63c72fdb9)
|

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-12-13 22:05:30 +00:00
Liam DeBeasi
ae6c353b51 docs(test): add locale best practice (#28699)
This best practice currently resides in our internal testing process
docs. I think this is valuable information for contributors to have as
well, so I've added it to our public best practices doc.
2023-12-13 18:33:52 +00:00
Liam DeBeasi
ec07e70d99 chore: update PR template for breaking changes (#28698)
The team had feedback during a sprint retro that the breaking change
process documentation was a bit spread out. In particular, some team
members were not clear that you need to a) update the breaking.md file
and b) add the "BREAKING CHANGE" comment to the commit description.

This PR adds both of these things are comments for awareness.
2023-12-13 18:27:12 +00:00
Liam DeBeasi
cd5c099dd3 feat(picker): add inline picker (#28689)
Issue number: resolves #24905, resolves #26840, resolves #15710

---------

<!-- 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 current picker is only displayed as an overlay which makes it
impossible to use inline with the rest of the application. Additionally,
there are several bugs and missing features. For example, it is
impossible to know when the value of the picker column has changed using
public APIs. This is valuable for updating other columns in response to
that data.

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

- Introduces `ion-picker` as an inline wheel picker component. The
overlay picker is still available using `ion-picker-legacy`.
- The implementation of this component resolves linked bugs. It also
resolves linked features by exposing an `ionChange` event for developers
to listen for.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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: `7.5.8-dev.11702398696.1ab62ea9`

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2023-12-13 13:03:58 -05:00
Liam DeBeasi
fb23bf74d5 merge release-7.6.1
Release 7.6.1
2023-12-13 10:28:59 -05:00
Liam DeBeasi
f6531fa2be chore: bump package-lock 2023-12-13 09:31:00 -05:00
ionitron
150ea1a8ad v7.6.1 v7.6.1 2023-12-13 14:27:51 +00:00
Sean Perkins
92f1b8627a fix(react): avoid type collision with @types/react@18.2.43 and greater (#28687)
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. -->

Ionic React projects using `@types/react@18.2.43` or greater will run
into a type-check error on build with `IonRouterOutlet` and potentially
other components:

```
Property 'placeholder' is missing in type '{ children: Element[]; }' but required in type 'Pick<IonRouterOutlet & { basePath?: string | undefined; ref?: Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<...>, "color" | ... 254 more ... | "ionPage">'.
```

Definitely typed decided to make a breaking type change in a patch
release:
b954269038


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

- Patches the type to allow for compatibility between React v16, 17 and
18.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

### Testing

1. Create a new Ionic react project with the "list" template.
2. Run `npm run build`
3. Observe: Exception posted above
4. Install the dev-build
5. Run `npm run build`
6. Observe: No exception, build passes
7. You can additionally serve the app to verify no runtime
exceptions/broken behavior.

Dev-build: `7.6.1-dev.11702322681.17e39348`
2023-12-12 22:53:55 +00:00
Shawn Taylor
666a01dd6e fix(button): wrap text by default (#28682)
Issue number: resolves #8700

BREAKING CHANGE: Button text now wraps by default.
2023-12-12 13:15:13 -05:00
Brandy Carney
8ee23d20d5 fix(menu): allow styling of the box shadow and transform when visible inside of a split pane (#28691)
Issue number: resolves #21530

---------

## What is the current behavior?
The `box-shadow` and `transform` properties cannot be styled on a menu
when it is inside of a split pane and visible due to the following:

1) The `box-shadow` and `transform` properties are set to `none` with
`!important`
2) The menu itself is not on "top" of the split pane content so the
content hides any box shadow

## What is the new behavior?

- Removes all uses of `!important` in split pane and menu
- Developers will need to change the `z-index` from `0` to `1` on the
`ion-menu` so the menu will sit on top of the split pane and show the
`box-shadow`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I considered putting the test for this in `split-pane` but I thought
since it was styling the `ion-menu` it should go in menu. I can move
this if others think it makes more sense in `split-pane`.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-12-12 17:49:47 +00:00
dependabot[bot]
8f66acdffb chore(deps): Bump @stencil/core from 4.8.1 to 4.8.2 in /core (#28692)
Bumps [@stencil/core](https://github.com/ionic-team/stencil) from 4.8.1
to 4.8.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/releases"><code>@​stencil/core</code>'s
releases</a>.</em></p>
<blockquote>
<h2>🐳 v4.8.2 (2023-12-11)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> make sure typesDir exist before writing
to it (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5109">#5109</a>)
(<a
href="9e4e27e58a">9e4e27e</a>)</li>
<li><strong>compiler:</strong> reapply changes to style import
transformer (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5125">#5125</a>)
(<a
href="https://redirect.github.com/ionic-team/stencil/issues/5131">#5131</a>)
(<a
href="735d45afdd">735d45a</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/5016">#5016</a></li>
<li><strong>runtime:</strong> hide slotted content with no destination
in scoped components (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5135">#5135</a>)
(<a
href="77bce27e02">77bce27</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/4284">#4284</a></li>
<li><strong>runtime:</strong> relocate slotted content when slot parent
element tag changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5120">#5120</a>)
(<a
href="4303d6af1b">4303d6a</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/4284">#4284</a></li>
<li><strong>runtime:</strong> update <code>textContent</code> patch to
mimic Shadow Root (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5146">#5146</a>)
(<a
href="55c56d69a6">55c56d6</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/3977">#3977</a></li>
<li><strong>testing:</strong> make Puppeteer an optional dependency (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5145">#5145</a>)
(<a
href="43cf0dc532">43cf0dc</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/stencil/blob/main/CHANGELOG.md"><code>@​stencil/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2>🐳 <a
href="https://github.com/ionic-team/stencil/compare/v4.8.1...v4.8.2">4.8.2</a>
(2023-12-11)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>compiler:</strong> make sure typesDir exist before writing
to it (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5109">#5109</a>)
(<a
href="9e4e27e58a">9e4e27e</a>)</li>
<li><strong>compiler:</strong> reapply changes to style import
transformer (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5125">#5125</a>)
(<a
href="https://redirect.github.com/ionic-team/stencil/issues/5131">#5131</a>)
(<a
href="735d45afdd">735d45a</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/5016">#5016</a></li>
<li><strong>runtime:</strong> hide slotted content with no destination
in scoped components (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5135">#5135</a>)
(<a
href="77bce27e02">77bce27</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/4284">#4284</a></li>
<li><strong>runtime:</strong> relocate slotted content when slot parent
element tag changes (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5120">#5120</a>)
(<a
href="4303d6af1b">4303d6a</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/4284">#4284</a></li>
<li><strong>runtime:</strong> update <code>textContent</code> patch to
mimic Shadow Root (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5146">#5146</a>)
(<a
href="55c56d69a6">55c56d6</a>),
closes <a
href="https://redirect.github.com/ionic-team/stencil/issues/3977">#3977</a></li>
<li><strong>testing:</strong> make Puppeteer an optional dependency (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5145">#5145</a>)
(<a
href="43cf0dc532">43cf0dc</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="70884f87e8"><code>70884f8</code></a>
Release v4.8.2 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5157">#5157</a>)</li>
<li><a
href="6abe250702"><code>6abe250</code></a>
fix(compiler): make style getter behavior consistent between default and
nati...</li>
<li><a
href="55c56d69a6"><code>55c56d6</code></a>
fix(runtime): update <code>textContent</code> patch to mimic Shadow Root
(<a
href="https://redirect.github.com/ionic-team/stencil/issues/5146">#5146</a>)</li>
<li><a
href="476c7b6794"><code>476c7b6</code></a>
chore(deps): update dependency cspell to v8.1.3 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5151">#5151</a>)</li>
<li><a
href="fa5e9f617c"><code>fa5e9f6</code></a>
chore(deps): update dependency terser to v5.26.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5156">#5156</a>)</li>
<li><a
href="15eb129ee5"><code>15eb129</code></a>
chore(deps): update dependency puppeteer to v21.6.0 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5154">#5154</a>)</li>
<li><a
href="0868b0052c"><code>0868b00</code></a>
chore(deps): update typescript-eslint to v6.13.2 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5153">#5153</a>)</li>
<li><a
href="d6d5cdae5b"><code>d6d5cda</code></a>
chore(deps): update dependency <code>@​types/node</code> to v20.10.4 (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5150">#5150</a>)</li>
<li><a
href="43cf0dc532"><code>43cf0dc</code></a>
fix(testing): make Puppeteer an optional dependency (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5145">#5145</a>)</li>
<li><a
href="3c5787579c"><code>3c57875</code></a>
chore(esbuild): build mock-doc with esbuild (<a
href="https://redirect.github.com/ionic-team/stencil/issues/5012">#5012</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/ionic-team/stencil/compare/v4.8.1...v4.8.2">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@stencil/core&package-manager=npm_and_yarn&previous-version=4.8.1&new-version=4.8.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-12-12 15:41:57 +00:00
Liam DeBeasi
6f9ee6024b chore: add resolves to PR template (#28693)
I've noticed a few instances where the team forgets to add the
"resolves" keyword (or similar "closes"/"fixes" keywords) when linking a
PR to an issue. GitHub will not link the PR with the issue and will not
close the issue on PR merge unless one of these keywords is used.

I've updated the PR template to add the "resolves" keyword so team
members don't need to worry about remembering to add it.
2023-12-12 15:14:21 +00:00
Liam DeBeasi
dc51b33db5 chore: remove safari 11 code (#28690)
Older versions of WebKit used an old `constant()` syntax for safe area
variables: https://caniuse.com/?search=env

As of Safari 11.3, `env()` is supported instead. We haven't supported
Safari 11 in years, so I think this is safe to remove.
2023-12-11 21:15:16 +00:00
Alexander Harding
a17b963182 fix(react): replacing route uses new route direction and animation (#28671)
Issue number: resolves #24260

---------

<!-- 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 replacing a route (`router.push(newRoute, 'none', 'replace')`) the
`RouterDirection` from the route being replaced is being used (if it
exists) instead of the new one the user specifies.

## What is the new behavior?

User-specified `RouteDirection` is used, if it exists. If it doesn't it
falls back to the `RouteDirection` of the route being replaced.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

Please see the following comment for why I think the current behavior is
incorrect, and why this change is needed:
https://github.com/ionic-team/ionic-framework/issues/24260#issuecomment-1078960780

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2023-12-11 21:09:41 +00:00
Liam DeBeasi
8f7d87c680 fix(input, textarea): clearOnInput ignores key modifiers (#28639)
Issue number: resolves #28633

---------

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

In https://github.com/ionic-team/ionic-framework/pull/28005 I introduced
a fix that causes "clearOnEdit" to not clear input/textarea when the Tab
key was pressed. However, there were several edge cases I missed. For
instance, pressing the "shift" key and then the "tab" key would still
clear the input because "shift" was not explicitly excluded.

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

- Input and textarea now explicitly ignores modifier keys that do not
change the value of the input
- `didInputClearOnEdit` is not set to `true` when an ignored key is
pressed. Otherwise, pressing an ignored key and then an accepted key
would not cause the input to be cleared. For example, pressing "shift",
releasing "shift", then pressing "A" should cause the input to still get
cleared.
- Added test coverage

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Playwright bug report for
a9f34a54f1:
https://github.com/microsoft/playwright/issues/28495
2023-12-11 20:35:25 +00:00
Liam DeBeasi
fc88613fef fix(react): use custom animation when going back after a replace (#28674)
Issue number: resolves #28673

---------

<!-- 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 reviewing https://github.com/ionic-team/ionic-framework/pull/28671
I noticed a bug where the custom animation was not used when going back
after a replace.

`handleNavigate` will override whatever is in `incomingRouteParams`.
Since we were passing `routeAnimation` (which is `undefined`), it was
overriding the animation we set in `handleNavigateBack`.

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

- `routeAnimation` is no longer overridden

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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: `7.6.1-dev.11702048520.13c82dad`
2023-12-11 17:31:27 +00:00
Sean Perkins
e886e3ff2f fix(datetime): prefer wheel sets working value on confirmation (#28520)
Issue number: resolves #25839

---------

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

Confirming the working day when a datetime using a wheel picker without
an initial value will result in a value of `undefined` instead of the
displayed working day the user sees.

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

- `preferWheel` uses the working value on confirmation

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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: `7.5.7-dev.11701896424.13d40ac9`

Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>
2023-12-08 19:34:49 +00:00
Brandy Carney
37290df7ef test(radio): skip flaky radio tabbing test (#28668)
Skips the keyboard navigation test in the radio a11y due to it being
flaky:
https://github.com/ionic-team/ionic-framework/actions/runs/7131071726
2023-12-07 18:18:26 +00:00
dependabot[bot]
c680ad9988 chore(deps-dev): Bump @axe-core/playwright from 4.8.1 to 4.8.2 in /core (#28658)
Bumps [@axe-core/playwright](https://github.com/dequelabs/axe-core-npm)
from 4.8.1 to 4.8.2.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/dequelabs/axe-core-npm/blob/develop/CHANGELOG.md"><code>@​axe-core/playwright</code>'s
changelog</a>.</em></p>
<blockquote>
<h1>Change Log</h1>
<p>All notable changes to this project will be documented in this file.
See <a href="https://conventionalcommits.org">Conventional Commits</a>
for commit guidelines.</p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/dequelabs/axe-core-npm/commits">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@axe-core/playwright&package-manager=npm_and_yarn&previous-version=4.8.1&new-version=4.8.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-12-07 15:23:37 +00:00
Liam DeBeasi
ffa3073211 chore: note item behavior in 7.6 notes (#28664)
We got some feedback in
https://github.com/ionic-team/ionic-framework/pull/28146#issuecomment-1845005089
that it would be helpful to note the new item wrapping behavior in v7.6.
I've updated the Github release, and this PR updates the Changelog file.
2023-12-07 14:49:57 +00:00
Liam DeBeasi
ec9228f54f merge release-7.6.0
Release 7.6.0
2023-12-06 10:45:17 -05:00
ionitron
f3799f332b chore(): update package lock files 2023-12-06 15:33:57 +00:00
ionitron
90ce7f00fa v7.6.0 v7.6.0 2023-12-06 15:33:45 +00:00
Liam DeBeasi
77e2147733 chore: sync with main
chore: sync with main
2023-12-06 10:26:44 -05:00
Liam DeBeasi
ede9c6e3c8 Merge remote-tracking branch 'origin/main' into sync-76-final 2023-12-06 10:16:26 -05:00
Liam DeBeasi
e20acb98ac merge release-7.5.8
Release 7.5.8
2023-12-06 10:15:48 -05:00