Commit Graph

481 Commits

Author SHA1 Message Date
Brandy Carney
898d7933ac Merge branch 'main' into chore-sync-next-main 2024-06-04 17:02:54 -04:00
renovate[bot]
7c56eb72b0 chore(deps): update playwright to v1.44.0 (#29470)
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | Type |
Update |
|---|---|---|---|---|---|---|---|
| [@playwright/test](https://playwright.dev)
([source](https://togithub.com/microsoft/playwright)) | [`1.43.1` ->
`1.44.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.43.1/1.44.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@playwright%2ftest/1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@playwright%2ftest/1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@playwright%2ftest/1.43.1/1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@playwright%2ftest/1.43.1/1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
| devDependencies | minor |
| mcr.microsoft.com/playwright | `v1.43.1` -> `v1.44.0` |
[![age](https://developer.mend.io/api/mc/badges/age/docker/mcr.microsoft.com%2fplaywright/v1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/docker/mcr.microsoft.com%2fplaywright/v1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/docker/mcr.microsoft.com%2fplaywright/v1.43.1/v1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/docker/mcr.microsoft.com%2fplaywright/v1.43.1/v1.44.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
| final | minor |

---

### Release Notes

<details>
<summary>microsoft/playwright (@&#8203;playwright/test)</summary>

###
[`v1.44.0`](https://togithub.com/microsoft/playwright/releases/tag/v1.44.0)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.43.1...v1.44.0)

#### New APIs

**Accessibility assertions**

-
[expect(locator).toHaveAccessibleName()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-accessible-name)
checks if the element has the specified accessible name:

    ```js
    const locator = page.getByRole('button');
    await expect(locator).toHaveAccessibleName('Submit');
    ```

-
[expect(locator).toHaveAccessibleDescription()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-accessible-description)
checks if the element has the specified accessible description:

    ```js
    const locator = page.getByRole('button');
    await expect(locator).toHaveAccessibleDescription('Upload a photo');
    ```

-
[expect(locator).toHaveRole()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-role)
checks if the element has the specified ARIA role:

    ```js
    const locator = page.getByTestId('save-button');
    await expect(locator).toHaveRole('button');
    ```

**Locator handler**

- After executing the handler added with
[page.addLocatorHandler()](https://playwright.dev/docs/api/class-page#page-add-locator-handler),
Playwright will now wait until the overlay that triggered the handler is
not visible anymore. You can opt-out of this behavior with the new
`noWaitAfter` option.
- You can use new `times` option in
[page.addLocatorHandler()](https://playwright.dev/docs/api/class-page#page-add-locator-handler)
to specify maximum number of times the handler should be run.
- The handler in
[page.addLocatorHandler()](https://playwright.dev/docs/api/class-page#page-add-locator-handler)
now accepts the locator as argument.
- New
[page.removeLocatorHandler()](https://playwright.dev/docs/api/class-page#page-remove-locator-handler)
method for removing previously added locator handlers.

```js
const locator = page.getByText('This interstitial covers the button');
await page.addLocatorHandler(locator, async overlay => {
  await overlay.locator('#close').click();
}, { times: 3, noWaitAfter: true });
// Run your tests that can be interrupted by the overlay.
// ...
await page.removeLocatorHandler(locator);
```

**Miscellaneous options**

-
[`multipart`](https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-fetch-option-multipart)
option in `apiRequestContext.fetch()` now accepts
[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
and supports repeating fields with the same name.

    ```js
    const formData = new FormData();
formData.append('file', new File(['let x = 2024;'], 'f1.js', { type:
'text/javascript' }));
formData.append('file', new File(['hello'], 'f2.txt', { type:
'text/plain' }));
    context.request.post('https://example.com/uploadFiles', {
      multipart: formData
    });
    ```

- `expect(callback).toPass({ intervals })` can now be configured by
`expect.toPass.inervals` option globally in
[testConfig.expect](https://playwright.dev/docs/api/class-testconfig#test-config-expect)
or per project in
[testProject.expect](https://playwright.dev/docs/api/class-testproject#test-project-expect).

- `expect(page).toHaveURL(url)` now supports `ignoreCase`
[option](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-url-option-ignore-case).

-
[testProject.ignoreSnapshots](https://playwright.dev/docs/api/class-testproject#test-project-ignore-snapshots)
allows to configure per project whether to skip screenshot expectations.

**Reporter API**

- New method
[suite.entries()](https://playwright.dev/docs/api/class-suite#suite-entries)
returns child test suites and test cases in their declaration order.
[suite.type](https://playwright.dev/docs/api/class-suite#suite-type) and
[testCase.type](https://playwright.dev/docs/api/class-testcase#test-case-type)
can be used to tell apart test cases and suites in the list.
- [Blob](https://playwright.dev/docs/test-reporters#blob-reporter)
reporter now allows overriding report file path with a single option
`outputFile`. The same option can also be specified as
`PLAYWRIGHT_BLOB_OUTPUT_FILE` environment variable that might be more
convenient on CI/CD.
- [JUnit](https://playwright.dev/docs/test-reporters#junit-reporter)
reporter now supports `includeProjectInTestName` option.

**Command line**

- `--last-failed` CLI option for running only tests that failed in the
previous run.

    First run all tests:

    ```sh
    $ npx playwright test

    Running 103 tests using 5 workers
    ...
    2 failed
[chromium] › my-test.spec.ts:8:5 › two
─────────────────────────────────────────────────────────
[chromium] › my-test.spec.ts:13:5 › three
──────────────────────────────────────────────────────
    101 passed (30.0s)
    ```

Now fix the failing tests and run Playwright again with `--last-failed`
option:

    ```sh
    $ npx playwright test --last-failed

    Running 2 tests using 2 workers
      2 passed (1.2s)
    ```

#### Browser Versions

-   Chromium 125.0.6422.14
-   Mozilla Firefox 125.0.1
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 124
-   Microsoft Edge 124

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these
updates again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/ionic-team/ionic-framework).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zNDAuMTAiLCJ1cGRhdGVkSW5WZXIiOiIzNy4zNTEuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2024-05-17 21:09:50 +00:00
Brandy Carney
b353984216 Merge branch 'main' into chore-update-from-main 2024-05-10 17:29:30 -04:00
Brandy Carney
2007a44a27 test(many): fix failing tests that CI was not reporting (#29485)
Code checks were passing even though these tests were failing because
the docker script was not exiting with the correct exit code. This PR
fixes the tests so that they pass, then PR
https://github.com/ionic-team/ionic-framework/pull/29425 can be merged
so CI will properly fail again when tests fail.

---------

Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
2024-05-10 20:01:35 +00:00
Maria Hutt
a58d9fa2e1 feat(many): expand global config for icons (#29373)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-05-08 16:22:12 -07:00
Brandy Carney
8b834387d4 Merge branch 'main' into chore-update-next-from-main 2024-05-02 16:43:54 -04:00
Brandy Carney
0124f3b0b3 test(many): replace ionic buttons in e2e tests with native html buttons (#29422)
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-button` component is used in several tests to navigate or show
overlays. This causes screenshot diffs in unrelated tests any time the
UI of the `ion-button` is updated.

## What is the new behavior?
Removes the `ion-button` elements from unrelated tests. 

Did not remove the `ion-button`s from the following tests:
- All `ion-button`s in an `ion-buttons` component
- An `ion-button` inside of a menu
- breadcrumbs/test/basic (uses a clear button in a list header, needs to
be moved)
- input/test/slot
- item/test/buttons
- item/test/colors
- item/test/dividers
- item/test/inputs
- item/test/media
- list-header/test/basic
- ripple-effect/test/basic
- router/test/basic
- router/test/guards
- router-outlet/test/basic
- select/test/slot
- textarea/test/slot

Updates the icon/basic test to use the right icon names by comparing
against the v3 names: https://ionicframework.com/docs/v3/ionicons/

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-05-02 19:20:48 +00:00
Liam DeBeasi
72711bba2e chore: sync with main 2024-05-01 10:12:06 -04:00
Liam DeBeasi
4d09890d69 fix(datetime): navigating months in RTL works correctly (#29421)
Issue number: resolves #29198

---------

<!-- 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/27917 I failed to
account for RTL. This caused the navigation with the arrow buttons to
break because the scroll position was always < 2.

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

- Datetime now checks if the component is in RTL mode when creating the
scrollLeft threshold.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2024-04-29 20:51:37 +00:00
Sean Perkins
ca01fe807f docs(core): ionChange will not emit from programmatically changing value (#29407)
Issue number: resolves
https://github.com/ionic-team/ionic-docs/issues/3588

---------

<!-- 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 documentation around `ionChange` not being emitted when
programmatically changing the property associated to the "value" is
either inconsistent or missing from certain components.

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

- Adds the documentation to the missing components.
- Makes the documentation consistent across components.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2024-04-26 20:16:16 +00:00
Liam DeBeasi
6e8bf4914f chore(theming): remove Sass default flags (#29401)
Issue number: N/A

---------

## What is the current behavior?
Currently, every Sass variable in Ionic has the `!default` flag added to
the end.

From the [Sass variables
documentation](https://sass-lang.com/documentation/variables/):

> Normally when you assign a value to a variable, if that variable
already had a value, its old value is overwritten. But if you’re writing
a Sass library, you might want to allow your users to configure your
library’s variables before you use them to generate CSS.
> 
> To make this possible, Sass provides the `!default` flag. This assigns
a value to a variable only if that variable isn’t defined or its value
is [null](https://sass-lang.com/documentation/values/null). Otherwise,
the existing value will be used.

In past versions of Ionic Framework, developers wrote Sass variables to
rebuild Ionic Framework using their own values. In the latest versions
of Ionic Framework, this is not possible.

## What is the new behavior?
Removes the `!default` flag from all Sass variables.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

-------

Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
2024-04-25 19:59:10 +00:00
Liam DeBeasi
e38e2e4d35 feat(picker): picker column is easier to select with assistive technology (#29371)
Issue number: resolves #25221
2024-04-24 16:25:46 -04:00
Sean Perkins
dc2db1204f Merge remote-tracking branch 'origin/main' into sp/sync-next-with-main-04-23 2024-04-23 17:34:32 -04:00
Liam DeBeasi
a804d3170c chore: sync with main 2024-04-23 16:02:36 -04:00
Bernardo Cardoso
1e757513ce feat(ionic-theme): improve scss architecture for ionic theme (#29345)
Issue number: None

---------

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

This PR follows the architectural changes defined on the _SCSS
Architecture Design Doc_. Due to some of the developments done in the
meantime, not everything that was defined on that document was followed
and some sections were simplified.

Overall, there were two guidelines that supported the work on this PR:
- Have no impact on the current scss partials & CSS architecture for the
`md/iOS` themes.
- Make everything related to the new `Ionic` Theme separated.

Based on these, here're the changes made:

**On Themes folder (private):**
- Renamed current internal scss partials on src/themes, related to
md/iOS, to `native.*.scss` and move them to a new folder, called
`native`. Updated imports on all framework.
- Removed the ionic prefix from the name of the mixins and function
partials on src/themes. Updated imports on all framework.
- Created new folder, named ionic, inside src/themes. This holds the
`ionic.globals.scss`, with all the mixins and functions forwarded, to be
used on other scopes.
- Replaced on already created Ionic theme files, the usage of tokens and
mixins with @use, to instead _@use
"../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an
equal approach is followed everywhere and also makes it easier to change
the files imported or paths, in the future, as its all in the same
global file.
- Updated the foundations `readMe` file, with the new process for using
globals.


![themes](https://github.com/ionic-team/ionic-framework/assets/32780808/1455523c-3ccd-4310-a974-522f9f8ade02)


**On css folder (public):**
- Created new folder, named `ionic`, inside src/css. This holds all the
files related exclusively to Ionic Theme, following the same structure
as exists now for md/iOS, with a core, a bundle, utils, etc. Some files
were a bit duplicated, to eliminate imports from ios or md theme
partials. The only file common to both Themes is the `normalize.scss`.
- No folder structure or renamings were done on the existing output, to
prevent breaking-changes for developers already making imports from this
folder.
- Updated typography and link partials to use globals instead of tokens.
- Changed `font-size` styles on typography to be on `body`, instead of
`html`, to enable correct support of accessibility features on browsers
and devices, related to `font-size`.


![css](https://github.com/ionic-team/ionic-framework/assets/32780808/10bedddc-23c1-4c50-a4e4-77fb7f6c6430)


**Other changes related to global styles new architecture:**
- Updated margin & padding utility-classed generated by token, to
include css variables and padding/margin mixins.
- Updated link test to use new global Ionic bundle, correct
utility-class on ion-content and updated snapshots. The font-size
changed to 16, as its now the default on the body.
- Updated typography snapshots.
- Updated prettier format on all scss files. Later on we should make
sure this is equal for all team members.

## 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: Sean Perkins <sean@ionic.io>
2024-04-18 17:22:24 +01:00
Brandy Carney
6b13e1323f test: remove hardcoded dark palette from tests (#29357)
Issue number: N/A

---------

## What is the current behavior?
Dark palette is hardcoded in style tags in tests. 

## What is the new behavior?

Updated the following tests:
- **datetime/basic** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
- does not update the e2e test to include dark palette because this was
not tested previously
- **datetime/color** - added an import for `dark.class.css` which works
with the checkbox to toggle the `ion-palette-dark` class
    - updates the e2e test to use the dark palette
- **modal/dark-mode** - added an import for `dark.always.css` which
always applies the dark palette
- does not update the e2e test to include dark palette because this test
needs to be moved but I am not sure where it should go yet
- **toggle/enable-on-off-labels** - added an import for `dark.class.css`
which works with the checkbox to toggle the `ion-palette-dark` class
- updates the e2e test to use the dark palette & splits the color into a
separate screenshot test

Did not update the following tests:
- **item/buttons** - has already been updated to remove the dark palette
- **toggle/legacy/enable-on-off-labels** - test was removed in v8

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

- We could probably remove the checkbox toggles entirely when we add
support for the `palette` query param.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-04-17 19:46:48 +00:00
Sean Perkins
fb445322c3 Merge remote-tracking branch 'origin/feature-8.1' into sp/sync-next-with-feature-8-1-04-09 2024-04-09 15:02:05 -04:00
Rahul Rajesh
6945adc3cc feat(datetime): pass roles to overlay when dismissing (#29221)
Issue number: resolves #28298

---------

<!-- 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-datetime didn't provide a role(source trigger for closing the
overlay) on default buttons while closing parent overlay

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

- ion-datetime provides a role to default buttons while closing the
parent overlay

## 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
N/A
<!-- 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-04-03 15:21:03 -04:00
Sean Perkins
6965205824 chore: use theme for rendering datetime 2024-03-20 21:11:01 -04:00
Sean Perkins
245a5c6f23 Merge remote-tracking branch 'origin/feature-8.0' into sp/sync-next-with-v8 2024-03-20 21:05:35 -04:00
Liam DeBeasi
e8f63560eb chore: sync with main 2024-03-19 14:24:51 -04:00
Sean Perkins
284eb8ecaf feat: add ionic theme architecture (#29132)
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. -->

Adds the base architecture to add a new theme configuration to Ionic
Framework components.
- Components can now specify an additional stylesheet for the `ionic`
theme.
- Developers can specify the `theme` and `mode` independently to control
look and feel of a component.

Test infrastructure has been updated to add support for testing the
theme configuration with Playwright.
- Existing `themes` test configuration has been renamed to `palettes`

This PR is just the initial effort to decouple Ionic's architecture to
separate look and feel and allow our dev team to start introducing the
new component appearance to the UI. There will be additional changes
required to completely add support for the Ionic theme. These changes
are targeted against the `next` branch and are not expected to be used
in a production environment at this time.

## 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: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-03-18 15:45:01 -04:00
Liam DeBeasi
f75977699d perf(datetime): calendar body shows immediately in modal on ios (#29163)
Issue number: resolves #24542

---------

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

WebKit has a quirk where IntersectionObserver callbacks are delayed
until after an accelerated animation finishes if the "root" specified in
the config is the browser viewport (the default behavior if "root" is
not specified) This means that when presenting a datetime in a modal on
iOS the calendar body appears blank until the modal animation finishes.

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

- We can work around this issue by observing an element inside of the
datetime component and using the datetime component itself as the root.
To do this, I added an `.intersection-tracker` element inside of
datetime. This element has a dimension of 0x0 so it should not affect
component layout or functionality.

I opted to add this element instead of re-using an existing element
because the existing elements are not guaranteed to always be in the DOM
due to different datetime presentation styles.

| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/e84d111d-b156-4f45-887a-d68a1097e5dd"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3dccf1e5-cf79-46ab-b542-0537fd46fa76"></video>
|


## 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.8.1-dev.11710449785.14ebd5a0`

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
2024-03-15 16:17:35 +00:00
Liam DeBeasi
ff7fa0b2e2 chore: sync with main 2024-03-13 10:21:01 -04:00
Liam DeBeasi
8f0ea0dd58 chore: sync with main 2024-03-12 13:11:23 -04:00
ionitron
7c5c0bc84a chore(): add updated snapshots 2024-03-06 20:34:13 +00:00
Brandy Carney
c301ae8628 Merge branch 'main' into chore-sync-feat-8-main 2024-03-06 14:31:13 -05:00
renovate[bot]
02ec5d09a1 chore(deps): update dependency @playwright/test to v1.41.2 (#29046)
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@playwright/test](https://playwright.dev)
([source](https://togithub.com/microsoft/playwright)) | [`1.39.0` ->
`1.41.2`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.39.0/1.41.2)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@playwright%2ftest/1.41.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@playwright%2ftest/1.41.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@playwright%2ftest/1.39.0/1.41.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@playwright%2ftest/1.39.0/1.41.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>microsoft/playwright (@&#8203;playwright/test)</summary>

###
[`v1.41.2`](https://togithub.com/microsoft/playwright/releases/tag/v1.41.2)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.41.1...v1.41.2)

##### Highlights


[https://github.com/microsoft/playwright/issues/29123](https://togithub.com/microsoft/playwright/issues/29123)
- \[REGRESSION] route.continue: Protocol error (Fetch.continueRequest):
Invalid InterceptionId.

#### Browser Versions

-   Chromium 121.0.6167.57
-   Mozilla Firefox 121.0
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 120
-   Microsoft Edge 120

###
[`v1.41.1`](https://togithub.com/microsoft/playwright/releases/tag/v1.41.1)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.41.0...v1.41.1)

##### Highlights


[https://github.com/microsoft/playwright/issues/29067](https://togithub.com/microsoft/playwright/issues/29067)
- \[REGRESSION] Codegen/Recorder: not all clicks are being actioned nor
recorded[https://github.com/microsoft/playwright/issues/29028](https://togithub.com/microsoft/playwright/issues/29028)8
- \[REGRESSION] React component tests throw type error when passing
null/undefined to
componen[https://github.com/microsoft/playwright/issues/29027](https://togithub.com/microsoft/playwright/issues/29027)27
- \[REGRESSION] React component tests not passing Date prop
valu[https://github.com/microsoft/playwright/issues/29023](https://togithub.com/microsoft/playwright/issues/29023)023
- \[REGRESSION] React component tests not rendering children
p[https://github.com/microsoft/playwright/issues/29019](https://togithub.com/microsoft/playwright/issues/29019)9019
- \[REGRESSION] trace.playwright.dev does not currently support the
loading from URL

#### Browser Versions

-   Chromium 121.0.6167.57
-   Mozilla Firefox 121.0
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 120
-   Microsoft Edge 120

###
[`v1.41.0`](https://togithub.com/microsoft/playwright/releases/tag/v1.41.0)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.40.1...v1.41.0)

#### New APIs

- New method
[page.unrouteAll(\[options\])](https://playwright.dev/docs/api/class-page#page-unroute-all)
removes all routes registered by [page.route(url, handler, handler\[,
options\])](https://playwright.dev/docs/api/class-page#page-route) and
[page.routeFromHAR(har\[,
options\])](https://playwright.dev/docs/api/class-page#page-route-from-har).
Optionally allows to wait for ongoing routes to finish, or ignore any
errors from them.
- New method
[browserContext.unrouteAll(\[options\])](https://playwright.dev/docs/api/class-browsercontext#browser-context-unroute-all)
removes all routes registered by [browserContext.route(url, handler,
handler\[,
options\])](https://playwright.dev/docs/api/class-browsercontext#browser-context-route)
and [browserContext.routeFromHAR(har\[,
options\])](https://playwright.dev/docs/api/class-browsercontext#browser-context-route-from-har).
Optionally allows to wait for ongoing routes to finish, or ignore any
errors from them.
- New option `style` in
[page.screenshot(\[options\])](https://playwright.dev/docs/api/class-page#page-screenshot)
and
[locator.screenshot(\[options\])](https://playwright.dev/docs/api/class-locator#locator-screenshot)
to add custom CSS to the page before taking a screenshot.
- New option `stylePath` for methods
[expect(page).toHaveScreenshot(name\[,
options\])](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1)
and [expect(locator).toHaveScreenshot(name\[,
options\])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-screenshot-1)
to apply a custom stylesheet while making the screenshot.
- New `fileName` option for [Blob
reporter](https://playwright.dev/docs/test-reporters#blob-reporter), to
specify the name of the report to be created.

#### Browser Versions

-   Chromium 121.0.6167.57
-   Mozilla Firefox 121.0
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 120
-   Microsoft Edge 120

###
[`v1.40.1`](https://togithub.com/microsoft/playwright/releases/tag/v1.40.1)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.40.0...v1.40.1)

##### Highlights


[https://github.com/microsoft/playwright/issues/28319](https://togithub.com/microsoft/playwright/issues/28319)
- \[REGRESSION]: Version 1.40.0 Produces corrupted
traces[https://github.com/microsoft/playwright/issues/28371](https://togithub.com/microsoft/playwright/issues/28371)1
- \[BUG] The color of the 'ok' text did not change to green in the vs
code test results
sectio[https://github.com/microsoft/playwright/issues/28321](https://togithub.com/microsoft/playwright/issues/28321)21
- \[BUG] Ambiguous test outcome and status for serial
mo[https://github.com/microsoft/playwright/issues/28362](https://togithub.com/microsoft/playwright/issues/28362)362
- \[BUG] Merging blobs ends up in Error: Cannot create a string longer
than 0x1fffffe8
charact[https://github.com/microsoft/playwright/pull/28239](https://togithub.com/microsoft/playwright/pull/28239)8239
- fix: collect all errors in removeFolders

##### Browser Versions

-   Chromium 120.0.6099.28
-   Mozilla Firefox 119.0
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 119
-   Microsoft Edge 119

###
[`v1.40.0`](https://togithub.com/microsoft/playwright/releases/tag/v1.40.0)

[Compare
Source](https://togithub.com/microsoft/playwright/compare/v1.39.0...v1.40.0)

#### Test Generator Update

![Playwright Test
Generator](https://togithub.com/microsoft/playwright/assets/9881434/e8d67e2e-f36d-4301-8631-023948d3e190)

New tools to generate assertions:

- "Assert visibility" tool generates
[expect(locator).toBeVisible()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-visible).
- "Assert value" tool generates
[expect(locator).toHaveValue(value)](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-value).
- "Assert text" tool generates
[expect(locator).toContainText(text)](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-contain-text).

Here is an example of a generated test with assertions:

```js
import { test, expect } from '@&#8203;playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByLabel('Breadcrumbs').getByRole('list')).toContainText('Installation');
  await expect(page.getByLabel('Search')).toBeVisible();
  await page.getByLabel('Search').click();
  await page.getByPlaceholder('Search docs').fill('locator');
  await expect(page.getByPlaceholder('Search docs')).toHaveValue('locator');
});
```

#### New APIs

- Option `reason` in
[page.close()](https://playwright.dev/docs/api/class-page#page-close),
[browserContext.close()](https://playwright.dev/docs/api/class-browsercontext#browser-context-close)
and
[browser.close()](https://playwright.dev/docs/api/class-browser#browser-close).
Close reason is reported for all operations interrupted by the closure.
- Option `firefoxUserPrefs` in
[browserType.launchPersistentContext(userDataDir)](https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context).

#### Other Changes

- Methods
[download.path()](https://playwright.dev/docs/api/class-download#download-path)
and
[download.createReadStream()](https://playwright.dev/docs/api/class-download#download-create-read-stream)
throw an error for failed and cancelled downloads.
- Playwright [docker image](https://playwright.dev/docs/docker) now
comes with Node.js v20.

#### Browser Versions

-   Chromium 120.0.6099.28
-   Mozilla Firefox 119.0
-   WebKit 17.4

This version was also tested against the following stable channels:

-   Google Chrome 119
-   Microsoft Edge 119

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Never, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/ionic-team/ionic-framework).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNzMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjE3My4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2024-03-01 18:46:37 +00:00
Shawn Taylor
7cdbc1b5ad feat(datetime): formatOptions property for Datetime (#29065)
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 Datetime header, Datetime time button, and Datetime Button have
default date formatting that cannot be set by the developer.

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

- The developer can customize the date and time formatting for the
Datetime header and time button
- The developer can customize the date and time formatting for the
Datetime Button
- A warning will appear in the console if they try to provide a time
zone (the time zone will not get used)
- A warning will be logged if they do not include the date or time
object for formatOptions as needed for the presentation of the Datetime

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

These changes have been reviewed in #29009 and #29059. This PR just adds
them to the feature branch now that the separate tickets are complete.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-02-22 12:45:47 -05:00
Liam DeBeasi
ca61e5061b feat: add high contrast themes (#29010)
⚠️ This is a combination of previously approved PRs with the
exception of
fe9dca513c.
This change was made as a result of
https://github.com/ionic-team/ionic-framework-design-documents/pull/248.

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

Users do not have a way of increasing the contrast in Ionic apps. This
is valuable for people with low vision as increasing the contrast
between foreground and background content helps improve readability.

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

- Adds a high contrast light and high contrast dark theme. As with our
other themes, developers can choose between system, class, and always
stylesheets.

While we aim to improve contrast for text and UI components, this
feature prioritizes text in the event that both text and UI component
cannot be improved without one negatively impacting the other.

## 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.7-dev.11706894781.1cd59fde`

Testing instructions:

1. Open `src/themes/test/css-variables`. Activate the high contrast
light and dark themes to verify that contrast does increase.
2. Use the dev build to integrate the theme into a test app (conference
app, starter app, etc).

I'd recommend using these imports:

```css
@import "@ionic/angular/css/themes/high-contrast.system.css";
@import "@ionic/angular/css/themes/high-contrast-dark.system.css";
```
Note: Make sure this is imported **after** `core.scss`

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
2024-02-13 12:20:04 -05:00
Liam DeBeasi
957604c3a0 refactor(datetime): remove safari 14 hack (#29035)
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. -->

This code was added to account for a Safari 14 issue that would cause
datetime to render incorrectly. The Safari bug was fixed starting in
Safari 15. However, Ionic v7 supported back to Safari 14.

More context is available
[here](https://github.com/ionic-team/ionic-framework/pull/24421#discussion_r796113907)

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

- Removed the Safari 14 workarounds since Ionic v8 does not support
Safari 14

I tested on iOS 15, 16, and 17 to verify that removing this hack does
not cause any issues. Also verified that removing this hack does
reproduce the issue on iOS 14 (to verify that I am reproducing the
original issue correctly)

## 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. -->
2024-02-13 11:57:47 -05:00
Sean Perkins
e6e4c3e173 chore(datetime): remove safari 14 intersection observer workaround (#29032)
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 Framework has a patch implementation to workaround a Safari 14 bug
that resulted in the calendar month jumping when opening/closing the
month/year interface.

This bug was fixed in Safari 15.

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

- Ionic v8 no longer supports Safari 14, so we can safely remove this
patch code
- Calendar month does not jump when opening/closing the month/year
interface with Safari/iOS 15-17

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

I tested on Sims for iOS 15-17. Tested against a physical device for iOS
17 as well.
2024-02-13 11:12:06 -05:00
Liam DeBeasi
4670698d07 chore: clean up 2024-02-07 13:03:37 -05:00
ionitron
7c5ccdc2fa chore(): add updated snapshots 2024-02-07 17:00:35 +00:00
Liam DeBeasi
1091534397 chore: sync with main 2024-02-07 11:48:46 -05:00
ionitron
37aed8e577 chore(): add updated snapshots 2024-02-02 21:06:23 +00:00
Liam DeBeasi
7c8afdf1c6 chore: sync with feature-8.0 2024-02-02 15:55:11 -05:00
Liam DeBeasi
bf34e0e247 test: migrate form control usages to modern syntax (#28897)
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. -->

Several tests were still using the legacy form syntax.

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

- Migrated tests in `core`, `angular`, and `vue` to use the modern form
syntax (`react` did not have form controls).

I opted not to migrate `item/test/highlight` and `item/test/counter`
because those tests are going to be removed in the future once the
deprecate item APIs are removed.

## 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>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2024-01-30 16:14:02 +00:00
Maria Hutt
2a3c26e44d test(many): replace waitForSelector with waitFor (#28888)
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. -->

There are some tests that use Playwright's `waitForSelector`
[function](https://playwright.dev/docs/api/class-page#page-wait-for-selector).
However, Playwright has informed the community to not use this function
by labeling it as
[discouraged](https://playwright.dev/docs/api/class-page#page-wait-for-selector).

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

- Replaced `waitForSelector` with the
[recommended](https://playwright.dev/docs/api/class-page#page-wait-for-selector)
`waitFor`
[function](https://playwright.dev/docs/api/class-locator#locator-wait-for).

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

N/A
2024-01-26 16:32:40 +00:00
Liam DeBeasi
79e4ce5885 chore: update snapshots 2024-01-25 13:33:27 -05:00
ionitron
b7c2b662ae chore(): add updated snapshots 2024-01-25 18:26:02 +00:00
Liam DeBeasi
74de16f862 chore(): sync 2024-01-25 12:35:32 -05:00
Amanda Johnston
9262f7da15 fix(datetime): do not animate to new value when multiple values in different months are set (#28847)
Issue number: resolves #28602

---------

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

We animate to the new date when the value is changed, but we do not
account for multiple selection. This behavior is valuable for when the
value is set asynchronously on a different month than what it shown.

However, this is confusing when there are multiple dates selected in
different months, because we do not reasonably know which date to
animate to.

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

Datetime no longer animates to the new value if more than one date is
selected, and the selected dates aren't all in the same month.

An alternative strategy would be to always animate unless one of the
selected dates is in the month currently being viewed. However, this
would still mean guessing at which value the user wants to see, which we
are trying to avoid.

Based on this PR:
https://github.com/ionic-team/ionic-framework/pull/28605

## 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-01-18 18:43:06 +00:00
Shawn Taylor
3929b0188a fix(datetime): set default background color correctly (#28809)
Issue number: None
---------

<!-- 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 my work for FW-5822, I found that I had unexpected screenshot diffs.
`--ion-color-light` was not defined in our test infrastructure, and the
white fallback for the datetime background was causing snapshots to have
a white background when they should have had a light one.

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

- Datetime has the correct background color even when the
`--ion-color-light` token is not defined

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Introduces style changes if the token is undefined, but it should always
be defined in real-world uses.

<!--
  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>
2024-01-10 15:46:07 -05:00
Liam DeBeasi
15e368c378 feat(theme): improved color contrast with color palette (#28791)
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 team would like to ensure that Ionic Framework components that use
an Ionic color (primary, secondary, etc) on top of a contrast color pass
minimum contrast ratios as defined in the WCAG.

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

- Introduces a revised set of Ionic colors that pass AA color contrast
guidelines when with the appropriate contrast.

## 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: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2024-01-08 15:30:35 -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
Liam DeBeasi
2f99aeae6f fix(datetime): selected today button renders correctly on ios (#28740)
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. -->

We removed the background color from today's calendar day button if
selected when implementing the calendar-day button shadow part feature:
79b005da70 (diff-8e2912d52559aa44c9c6dc062c8d683e7b51c92c7b7ba420ad6f7587f1e1a61aL139)

We did not catch this because we do not have test coverage for this use
case. We typically avoid rendering datetime on today's date because
"today" could be something totally different depending on the test
machine's locale/configuration.

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

- Adds the background rule that was removed
- Added test coverage. I mocked today's date to be a fixed date so it
never changes

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.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-20 14:13:00 +00:00
Liam DeBeasi
4cf948fb47 docs: account for this context (#28720)
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. -->

In https://github.com/ionic-team/ionic-framework/issues/28694 there was
some confusion around how to access `this` inside of a callback function
passed to a property on Ionic components. The root issue was due to how
the `this` context is determined with developers being responsible for
setting the appropriate `this` context.

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

- While this isn't an Ionic bug, I think it's worth calling out this
behavior so developers are aware of how to account for 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/.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. -->


Note: The link in the docs will not work until
https://github.com/ionic-team/ionic-docs/pull/3333 is merged.

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
2023-12-19 22:33:34 +00:00
Liam DeBeasi
7cec5337a4 chore: sync 2023-12-18 10:46:20 -05: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