Commit Graph

490 Commits

Author SHA1 Message Date
Giuliana Silva
839969e3b5 feat(datetime): update weekdays abbreviation for ionic theme (#30172)
Issue number: resolves internal

---------

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

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

## What is the current behavior?
- Previously for Ionic theme, the weekdays in `ion-datetime` were
displayed in the "narrow" version, such as "M" or "T".

## What is the new behavior?
- Now, the weekdays are displayed in the "short" version: "Mon", "Tue",
etc.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

Before:

![image](https://github.com/user-attachments/assets/f2939274-369c-45c8-86e6-36dabc0cd510)

After:

![image](https://github.com/user-attachments/assets/8dca06e1-bc99-4d78-af79-bef2e5ea3fed)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2025-01-31 16:17:37 +00:00
Maria Hutt
c3a804dc75 refactor(datetime): update ionic styles for footer buttons (#30014) 2024-11-14 10:53:56 -08:00
Bernardo Cardoso
a5a7bee25c feat(tokens): update tokens architecture and usage (#29950)
Issue number: internal

---------

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

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


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

- Removed old tokens stored on foundations folder. Now the jsons with
the tokens come from the new dependency:
https://github.com/OutSystems/outsystems-design-tokens.
- The tokens from UX Team completely changed the structure and in some
cases the values. Everything was replaced on the project to use the new
tokens.
- Snapshots updated and differences reviewed with UX Team. A fix was
done on the testing css, to make sure the correct _Inter_ font-family
was actually used. This resulted in some differences on the text for
some componentes, that had snapshots with the native fonts.
- Removed generation of scss file on tokens script, that contained the
:root selector with the custom CSS properties, as they were not used on
the Ionic context.
- Removed generation of html file with tokens preview, as there wasn't a
great value on this (we have storybook on other contexts) and it allowed
to reduce a lot of code and complexity from the tokens script.
- The token command was adapted to use the command available from the
https://github.com/OutSystems/outsystems-design-tokens package, using
the `--config` prop, where we pass the path to our Ionic token script,
where we generate the needed scss variables and utility-classes (by
default the tokens repo tries to be as agnostic as possible, and only
generates the css variables, without the prefix and added details we
need on the Ionic side).
- Removed the token command from the npm run build, as it unnecessarily
added time on that command to run. Besides, it should not be common that
we need to run this command in the future.
- Updated reference to latest version of [Style Dictionary
4.1.3](https://v4.styledictionary.com/version-4/statement/). Version 4
comes with a lot of improvements, but also breaking-changes, so it was
needed to adapt the tokens script. The code on the script is also now
cleaner.
- Changed prefix from ionic to ion. The term ionic was used initially,
to help differentiate from the old ios/md stuff, but I feel with the
current scss architecture, that is no longer needed, and we can use the
same prefix across themes.

This requires to run `npm install ` again.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

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

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
2024-10-28 18:17:48 +00:00
Brandy Carney
b248ac5d0e Merge branch 'main' into chore-update-next-from-main 2024-09-17 13:20:23 -04:00
Brandy Carney
f1d50c0f64 fix(datetime): display today's date and time when value is an empty string (#29839)
Issue number: resolves #29669

---------

## What is the current behavior?

Setting `value` to an empty string on `<ion-datetime>` renders a May
2021 calendar:

```html
<ion-datetime value=""></ion-datetime>
```

## What is the new behavior?

Show the month and time for today's date when value is an empty string.
This matches how a native `input` with `type="datetime-local"` works.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

This can be tested by removing my fix in `datetime.tsx` and running the
e2e test for Datetime:

```bash
npm run test.e2e src/components/datetime/test/basic/datetime.e2e.ts
```

The `should display today's date and time when value is an empty string`
test should fail.

Alternatively, you can add a datetime with `value=""` and see the
calendar before & after my fix.

---------

Co-authored-by: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>
2024-09-06 16:28:33 +00:00
Tanner Reits
9a8c49ae7f feat(datetime): add ionic theme styles to time label (#29829)
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. -->

No `ionic` theme styles for the datetime time label

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

Adds styles to the time label for the `ionic` theme

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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


[Preview](https://ionic-framework-6m937m00k-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)
2024-09-04 09:08:49 -04:00
Tanner Reits
6aa47d363f feat(datetime): add ionic theme styles to title (#29828)
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. -->

There are no dedicated title styles for the `ionic` theme

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

Adds `ionic` theme styles for the datetime default title

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

[Preview
(inline-custom)](https://ionic-framework-c0db80uay-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)
2024-09-03 15:57:36 -04:00
Brandy Carney
51a86fb0dd feat(datetime): add datetime styles for ionic theme (#29807)
Adds the styles for Datetime in the `ionic` theme for the following (days, months, arrows, weeks):
- Typography
- Colors
- Spacing
- Sizing
- States (selected, pressed, focus, hover)
2024-08-30 10:12:40 -04:00
Brandy Carney
08fc0b9160 feat(many): default components to Phosphor Icons for ionic theme (#29617)
Issue number: internal

---------

## What is the current behavior?
Icons in the Ionic theme default to Ionicons.

## What is the new behavior?
- Renames the following config properties:
  - `datetimeShowMonthYearIcon` to `datetimeExpandedIcon`
  - `datetimeHideMonthYearIcon` to `datetimeCollapsedIcon`
  - `selectExpandIcon` to `selectExpandedIcon`
- Updates the icons for the `ionic` theme to the following Phosphor
Icons:

| Component | Config | Phosphor Icon | Font Weight |
| ------------------------ | --------------------------- |
----------------- | ----------- |
| Accordion | `accordionToggleIcon` | `CaretDown` | `regular` |
| Back Button | `backButtonIcon` | `CaretLeft` | `regular` |
| Breadcrumb | `breadcrumbSeparatorIcon` | `CaretRight` | `regular` |
| Breadcrumb | `breadcrumbCollapsedIcon` | `DotsThree` | `regular` |
| Checkbox | N/A | `Check` | `bold` |
| Checkbox (indeterminate) | N/A | `Minus` | `bold` |
| Datetime | `datetimeNextIcon` | `CaretRight` | `regular` |
| Datetime | `datetimePreviousIcon` | `CaretLeft` | `regular` |
| Datetime | `datetimeCollapsedIcon` | `CaretDown` | `regular` |
| Datetime | `datetimeExpandedIcon` | `CaretUp` | `regular` |
| Fab Button | `fabButtonCloseIcon` | `X` | `regular` |
| Input | `inputClearIcon` | `X` | `regular` |
| Input Password Toggle | `inputPasswordShowIcon` | `Eye` | `regular` |
| Input Password Toggle | `inputPasswordHideIcon` | `EyeSlash` |
`regular` |
| Item | `itemDetailIcon` | `CaretRight` | `regular` |
| Menu Button | `menuIcon` | `List` | `regular` |
| Reorder | `reorderHandleIcon` | `List` | `regular` |
| Refresher | `refreshingIcon` |  | |
| Refresher (arrow icon) | N/A | `CaretLeft` | `fill` |
| Searchbar | `searchbarCancelIcon` | `ArrowLeft` | `regular` |
| Searchbar | `searchbarClearIcon` | `X` | `regular` |
| Searchbar | `searchbarSearchIcon` | `MagnifyingGlass` | `regular` |
| Select | `selectExpandedIcon` | `CaretDown` | `regular` |
| Select | `selectCollapsedIcon` | `CaretDown` | `regular` |
| Toggle | `toggleCheckedIcon` | `LineVertical` | `regular` |
| Toggle | `toggleUncheckedIcon` | `Circle` | `regular` |

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-06-27 17:53:51 -04:00
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