14279 Commits

Author SHA1 Message Date
7b6c330f17 chore(deps): update dependency @stencil/core to v4.14.0 (#29278)
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@stencil/core](https://stenciljs.com/)
([source](https://togithub.com/ionic-team/stencil)) | [`4.13.0` ->
`4.14.0`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.13.0/4.14.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@stencil%2fcore/4.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@stencil%2fcore/4.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@stencil%2fcore/4.13.0/4.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@stencil%2fcore/4.13.0/4.14.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>ionic-team/stencil (@&#8203;stencil/core)</summary>

###
[`v4.14.0`](https://togithub.com/ionic-team/stencil/blob/HEAD/CHANGELOG.md#-4140-2024-04-01)

[Compare
Source](https://togithub.com/ionic-team/stencil/compare/v4.13.0...v4.14.0)

##### Bug Fixes

- **mock-doc:** provide a local name
([#&#8203;5480](https://togithub.com/ionic-team/stencil/issues/5480))
([2f67b35](2f67b3526c)),
closes
[#&#8203;5342](https://togithub.com/ionic-team/stencil/issues/5342)
- **mock-doc:** resolve type issue for localName
([#&#8203;5595](https://togithub.com/ionic-team/stencil/issues/5595))
([d91af87](d91af87d4e)),
closes
[#&#8203;5342](https://togithub.com/ionic-team/stencil/issues/5342)

##### Features

- **testing:** allow to set screenshot timeout option in Jest v28+
([#&#8203;5537](https://togithub.com/ionic-team/stencil/issues/5537))
([6df12b2](6df12b2a44))
- **testing:** support deep piercing with Puppeteer
([#&#8203;5481](https://togithub.com/ionic-team/stencil/issues/5481))
([13d5d41](13d5d4188a))
- **typescript:** Update dependency typescript to v5.4.3
([#&#8203;5588](https://togithub.com/ionic-team/stencil/issues/5588))
([9d489e4](9d489e42a6))

</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:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: amandaesmith3 <amanda.s@ionic.io>
2024-04-08 17:58:37 +00:00
ca59d6c297 chore(): sync with next branch (#29299)
Issue number: resolves #

---------

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

-
-
-

## Does this introduce a breaking change?

- [ ] Yes
- [ ] No

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


## 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 <brandyscarney@users.noreply.github.com>
Co-authored-by: Marcelino <brunoapmarcelino@gmail.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>
2024-04-08 12:57:23 -05:00
7ce115993a feat(Chip): Add styles for icons inside Chip Ionic Theme (#29295)
Issue number: resolves #ROU-4838

---------

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

- Added styles for icons inside Chip (Ionic Theme)
- Fixed an issue related to hover status, after tokens integration

## 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.
-->
2024-04-08 14:26:24 +01:00
77c67f2362 feat(Chip): Add outline support for Chip Ionic Theme (#29284)
Issue number: resolves #ROU-4839

---------

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

- Added support for outline option on Ionic Theme
- Replaced temporary variables with global variables from Design Tokens
- Removed associated TODO

## 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-04-08 11:54:19 +01:00
b3cd49bf22 perf(styles): compress distributed global stylesheets (#29275)
Issue number: N/A

---------

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

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

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ionic Framework developers make extensive use of multi-line comments in
the Sass files. However these comments are not stripped from the
generated output.

This leads to a significant increase to the file size of CSS and can
have an impact on runtime performance.

For example: https://cdn.jsdelivr.net/npm/@ionic/core/css/core.css has
183 lines of comment blocks before a single line of CSS.

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

- Compresses the generated output from Sass → CSS to strip out
multi-line comment blocks.
- Developers can use [loud
comments](https://sass-lang.com/documentation/syntax/comments/) if they
want to include comments in the generated output.
- In the case of just the core.css file, the file size goes from 20kb to
10kb.
  - The entire CSS global styles goes from 758 KB to 606kb.

## 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.4-dev.11712251308.1da8aede`
2024-04-05 14:01:20 +00:00
a8c06c118e fix(design-tokens): Add missing tokens and update usage on Typography (#29283)
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

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

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

- Updated missing font tokens on `_designTokens.json`.
- Updated `tokens.js` script for building utility-classes for newly
added font tokens.
- Fixed space token typo.
- Updated ionic.typography file to start using design tokens and remove
duplicated code from the tokens generated files.
- Updated Ionic Typography tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.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-04-05 14:20:12 +01:00
19f7be8877 feat(tokens): add design tokens architecture (#29245)
<!-- 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. -->

Following the Design Doc for the new Ionic Design System, an
architecture for Design Tokens was added.

1. Added new `foundations` folder inside the `src`, to hold all the
tokens related files.
2. On this file, a json with all the tokens for the new Design System
was added. The format followed was the one suggested on the [W3C
draft](https://design-tokens.github.io/community-group/format/).
3. Added a dev dependency for [Styles
Dictionary](https://amzn.github.io/style-dictionary/#/), version 3.9.2.
4. Added a tokens.js script that will take care of transforming the json
tokens into the desired output. For now, three files are being
generated: ionic.vars.css (:root with all CSS Variables); ionic.vars.css
(scss variables for each token) and ionic.utility.css (a new
utility-class for each token)
5. Added the script `npm run build.tokens` to package.json, that will
generate the three files mentioned above.

For now, all these changes bring no impact to the rest of the Framework,
as these variables are not yet being consumed.

The `margin`, `padding` and `border-radius` were removed from the
prohibited properties on lint, to prevent lint errors with the new
utility-classes. This is very open to discussion/feedback if it's seen
as not ok.

The `build` command now includes the `build.tokens` script, to make sure
the files are always generated, in case someone forget to run the
command, after changing the json file!

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

---------

Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
2024-04-05 09:27:48 +01:00
5b62a1eafc fix(input): update error text color for ionic theme (#29270) 2024-04-04 11:14:18 -07:00
1c4b6bd8f2 feat(chip): add ionic theme and visual states (#29273)
Issue number: ROU-4840

---------

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

- Added a new Ionic Theme partial, with no dependencies to current
`ios/md` architecture. This is to avoid bleeding of the current Design
System into the work we are doing for the new Ionic Design System and
Theme. For that reason I duplicated part of the basic styles for the
Chip (display, box-sizing, etc) and created provisional scss variables,
that should be replaced later on with the correct global ones from the
new Design System.

- Added styles for info chip type states (default, hover, focus and
disabled)

- No new tests were done on this scope, as there're still other Chip
tasks being developed that would override any baselines defined now for
this theme. Once the initial basic work for the Chip is complete, tests
for the Ionic Theme should be implemented, under the task ROU-4837.

- A new page was created - `chip/tests/theme-ionic` - to check styles
for current implementation. This will also be used and improved in
future Chip Ionic Theme tasks.


## 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.
-->
2024-04-04 17:23:47 +01:00
3a1e70d6fd fix(input): update helper text color for ionic theme (#29269) 2024-04-04 08:48:21 -07:00
6c36cef241 docs(contributing): using vscode on windows (#29257)
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. -->

Developers on a Windows environment using VS Code will experience an
issue when using prettier, where files will be tracked as modified even
though they have no actual diffs.

This is due to differences in how Unix based operating systems and
Windows treat carriage returns.

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

- Updates the contributing guide to educate developers using VS Code on
how to configure their local environment to not track additional diffs
when formatting the codebase.

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

This is the same documentation that exists on the ionic-docs repository
for the same reason. I've applied co-authored-by credit to Netkow for
his wonderful contribution to that documentation.

Co-authored-by: Matt Netkow <matt.netkow@gmail.com>
2024-04-04 15:08:02 +00:00
17f5be1edd feat(theme): add new typography styles for the ionic theme (#29212)
Issue number: **ROU-4810**

---------
## Context
All the CSS for typography is temporarily added in the `text.scss` file
because the correct architecture for the new theme implementation isn’t
ready yet. In the future, all these **Sass variables** and **CSS**
created need to be placed at the theme level in terms of architecture.
The typography of an app needs to be divided into `iOS`, `Android (md)`,
and `Ionic` themes.

---------
## What is the new behavior?

- Added new typography styles;

## Does this introduce a breaking change?

- [ ] Yes
- [X] No


## Preview

![image](https://github.com/ionic-team/ionic-framework/assets/25321845/861a13c0-8ebf-43f4-a688-3b51a36d7b06)

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-04-04 14:21:25 +01:00
4d6edee89c fix(button): use clamp for font sizes on circle shape (#29200) 2024-04-03 14:28:04 -07:00
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
90a7e70a1c feat(content): add fixedSlotPlacement prop (#29233)
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. -->
Content in the `fixed` slot is always placed after the main content in
the DOM.

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

- A new `fixedSlotPlacement` prop on Content allows developers to place
fixed content either before or after the main content in the DOM

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

Dev build: `8.0.0-dev.11712072527.1dd97c66`

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

⚠️This feature will not be part of the v8.0 release. As a result, do not
merge this into `feature-8.0`. However, I am putting this PR up based
off `feature-8.0` so it can get reviewed by the team.

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-04-03 13:48:03 -04:00
0f5d1c02d2 feat(input): add clearInputIcon property (#29246)
Issue number: resolves #26974

---------

<!-- 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/26354 we updated
the clear icon to use an ionicon instead of an hardcoded SVG. This has
made it challenging to customize the icon.

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

- Added `clearInputIcon` property to allow developers to customize the
ionicon used.

## 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-04-03 13:48:03 -04:00
4b79bbef7d chore: sync with main (#29267) 2024-04-03 13:38:12 -04:00
ac7631a324 chore: sync with main 2024-04-03 13:17:55 -04:00
b5cb828861 merge release-7.8.3 (#29264) 2024-04-03 11:54:16 -04:00
efdaf38520 fix(button): show correct background for activated button with color (#29222)
Updates the solid buttons with color to use the current color's shade.
2024-04-03 11:48:06 -04:00
101ad5402f chore(): update package lock files 2024-04-03 15:38:52 +00:00
de35fa8b94 v7.8.3 v7.8.3 2024-04-03 15:38:11 +00:00
e9654436a6 feat(input): add the large size for the ionic theme (#29249)
Issue number: internal

---------

## What is the current behavior?
Input does not have a size property.

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

- Adds the `size` property with support for the `"large"` size on the
`"ionic"` theme only
- Adds tests for the size property
- Note: the screenshots will not look right until the fill styles are
added

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-04-03 11:19:09 -04:00
c766528a17 chore: run build (#29262)
I forgot to run the core build in
f726c35868,
so the latest Vue output target wrapper was not generated.
2024-04-03 13:59:10 +00:00
b11c630410 fix(core): fallback detection for themes and modes (#29224)
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. -->

With the latest changes on `next`, the fallback behavior for detecting
the themes from the Ionic config does not work when using
`ion-router-outlet`.

For example, in a React app with:

```ts
setupIonicReact({
  theme: 'ios'
});
```

and a template of:
```tsx
<IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
         /* All children will apply the default mode for the mode and theme - not expected */
     </IonRouterOutlet>
  </IonReactRouter>
</IonApp>
```

All components rendered inside the `IonRouterOutlet` will apply the
`mode` detection for the `theme`. This is not expected behavior, since
the configuration has specified the `ionic` theme is the default theme.

This problem occurs due to this specific logic:
```ts
const elmMode = (elm as any).mode || elm.getAttribute('mode');
```

The `ion-router-outlet` component has a property defined on the class
for `mode`:
ca0923812a/core/src/components/router-outlet/router-outlet.tsx (L42)

This means that `defaultMode` will always apply over the Ionic config's
theme (`defaultTheme`).

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

- Specifying the `ionic` theme from the `initialize`/`setupIonicReact`
functions will persist to children components.
- Developers can still use the `mode` to persist the changes to child
nodes. However for in the case of `IonRouterOutlet`, it will require
actually specifying the attribute in the mark-up:
```tsx
<IonRouterOutlet mode="md">
  /* Any children will apply the "md" mode and theme */
</IonRouterOutlet>
```

## 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-04-02 22:26:14 -04:00
9b3cf9fbc2 chore(docs): move docs to the packages directory (#29256)
Move the `docs/` directory into the `packages/` directory. This will
enable us to create a top level `docs/` folder for onboarding and
contributing guidelines. It will also be necessary when migrating to
pnpm.

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-04-03 01:27:00 +00:00
ee5da7a747 fix(button): activated outline button in toolbar no longer blends into background on MD dark mode (#29216)
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. -->

When using an outline-style button in a toolbar on `md` dark mode, the
activated style causes the button to become invisible.

Steps to repro in `main`:
1. Update the `css-variables` themes test to use the latest dark theme
styles (at least for v7) by replacing the contents of [this
file](https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/test/css-variables/css/dark.css)
with the [styles from the
docs](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme).
2. Host the project locally and navigate to the test at
`themes/test/css-variables/index.html`.
3. Switch to dark mode within the page. Note that the activated outline
button isn't visible:

![image](https://github.com/ionic-team/ionic-framework/assets/90629384/fae1009f-4962-4e6b-b710-42deec083e84)


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

- Button styles corrected. The colors were correct for `ios` mode, but
had to be flipped for `md`, so I pulled the relevant styles into the
mode-specific stylesheets.
- CSS variables test has also been updated to use the same dark mode CSS
as in [the
docs](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme),
as per the repro steps above. Let me know if you would rather this be
split into a separate PR.

Changes to the toolbar test were split into a separate PR to keep this
one clean and ensure the screenshot changes can be reviewed more
effectively: https://github.com/ionic-team/ionic-framework/pull/29231

## 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.
  5. Update the BREAKING.md file with the breaking change.
6. 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-04-02 20:25:19 +00:00
c4bfc783e0 chore: remove Amanda from codeowners (#29252)
Removes myself as a codeowner in favor of the round robin assignment.
2024-04-02 15:16:55 +00:00
0137e732ce chore: remove myself from code owners (#29251)
I'm removing myself from code owners in several places in favor of the
auto-assignment. However, I did keep my name on areas of the code that I
felt are still higher risk for potential regressions due to the nature
of how the code is built/tested.
2024-04-02 14:24:39 +00:00
88ecb29e39 chore: remove self from codeowners (#29250)
Remove myself as the codeowner of specific directories as this bypasses
the random review assignment and automatically assigns me to any PRs
changing these files.
2024-04-02 13:59:58 +00:00
f726c35868 chore(deps): update dependency @stencil/vue-output-target to v0.8.8 (#29243)
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@stencil/vue-output-target](https://stenciljs.com/)
([source](https://togithub.com/ionic-team/stencil-ds-output-targets)) |
[`0.8.7` ->
`0.8.8`](https://renovatebot.com/diffs/npm/@stencil%2fvue-output-target/0.8.7/0.8.8)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@stencil%2fvue-output-target/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@stencil%2fvue-output-target/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@stencil%2fvue-output-target/0.8.7/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@stencil%2fvue-output-target/0.8.7/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>ionic-team/stencil-ds-output-targets
(@&#8203;stencil/vue-output-target)</summary>

###
[`v0.8.8`](https://togithub.com/ionic-team/stencil-ds-output-targets/releases/tag/%40stencil/vue-output-target%400.8.8)

[Compare
Source](a3588e9051...@stencil/vue-output-target@0.8.8)

#### What's Changed

- fix(vue): v-model does not update when other events bubble up by
[@&#8203;liamdebeasi](https://togithub.com/liamdebeasi) in
[https://github.com/ionic-team/stencil-ds-output-targets/pull/425](https://togithub.com/ionic-team/stencil-ds-output-targets/pull/425)

**Full Changelog**:
https://github.com/ionic-team/stencil-ds-output-targets/compare/[@&#8203;stencil/angular-output-target](https://togithub.com/stencil/angular-output-target)[@&#8203;0](https://togithub.com/0).8.4...[@&#8203;stencil/vue-output-target](https://togithub.com/stencil/vue-output-target)[@&#8203;0](https://togithub.com/0).8.8

</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:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-04-02 13:49:18 +00:00
4a9d84ecbd chore: remove mapsandapps from issue auto assignment (#29248) 2024-04-01 22:11:07 +00:00
f08759c2b8 fix(popover): viewport can be scrolled if no content present (#29215)
Issue number: resolves #29211

---------

<!-- 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/28861 I fixed a
bug that caused `.popover-viewport` to have `overflow: hidden`. In
reality, this code should have always applied but due to an incorrect
selector it never did.

As it turns out in
https://github.com/ionic-team/ionic-framework/issues/29211, some
developers were relying on the broken behavior to build their
applications. In particular, developers were using `ion-popover` without
an `ion-content`. The linked change made it so that using popovers
without `ion-content` were not scrollable.

After talking with @mapsandapps we think it makes sense to officially
support this behavior. We support using [modals without
`ion-content`](https://ionicframework.com/docs/api/modal#custom-dialogs),
and we could not think of a reason to not support the same use case for
popover.

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

- If the `.popover-viewport` element has a child content then
`.popover-viewport `will not be scrollable.
- If the `.popover-viewport` element does not have a child content then
`.popover-viewport` will be scrollable.

I implemented this behavior using progressive enhancement via `:has`.
The [`:has` pseudo-class](https://caniuse.com/?search=%3Ahas) has
cross-browser support. Ionic v7 supports some versions of browsers that
do not have `:has` support. As a result, we fall back to the existing
behavior in this environment. Developers are able to get this behavior
on older browsers by explicitly setting `overflow: auto` on
`.popover-viewport`.

Fortunately, we will be dropping support for several of the older
browsers versions in Ionic v8, so the need to do the manual opt-in
should be less frequent as time goes on.

## 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.2-dev.11711383079.118d48a5`

Testing:

1. Open https://codepen.io/liamdebeasi/pen/JjVJrZQ?editors=1100 (this
has a dev build installed)
2. Click each button to open a popover.
3. Verify that each popover can be scrolled.

I could not find a great way to automate this test, but let me know if
anyone has ideas!
2024-04-01 20:29:03 +00:00
4fc3bbbe5f feat(input): add ionic theme (#29247)
Issue number: internal

---------

## What is the new behavior?
Adds the initial files for the Ionic input.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-04-01 15:34:49 -04:00
2053bc77a6 test(toolbar): add dark theme to basic test (#29231)
Issue number: N/A

---------

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

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

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The toolbar `basic` test only checks light theme. Dark theme coverage is
required to test against the bug fixed in
https://github.com/ionic-team/ionic-framework/pull/29216.

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

Dark theme coverage added. This required converting the test to
`page.setContent` instead of `page.goto`, so I went ahead and split the
captured toolbars into multiple tests, including some cleanup of the
test content. Since this included changes across many different tests,
even ones not strictly related to the bug, this work has been split into
a separate PR.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-04-01 18:18:42 +00:00
5234224700 chore(playwright): combine test configs for themes and modes (#29206)
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. -->

Developers are not able to easily add the "ionic" theme to existing test
cases, without running the test against both iOS and MD mode:

```ts
configs({ themes: ['ios', 'md', 'ionic'] })
// Generates 4 test cases
// - iOS theme on iOS mode
// - MD theme on MD mode
// - Ionic theme on iOS mode
// - Ionic theme on MD mode
```

With the separation of `mode` into look and feel, the majority of test
cases do not require testing the mode behavior and instead only need to
test the visual theme that is applied to the component.

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

- Removes the `themes` option from the `configs` test generator object.

```ts
configs({ modes: ['ios', 'md', 'ionic-md'] })
```

- Combines `theme` and `mode` into the existing `modes` test generator
object
- The new options are `ionic-ios` and `ionic-md`, to run the Ionic theme
against the respective mode.
- This path was preferred to avoid deprecating and migrating all
existing tests.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.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 do not have a strong preference on the semantics of `ionic-ios` vs.
`ios-ionic` (theme first vs. mode first). If anyone has an opinion or
alternative suggestion, please add a comment.

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-03-28 12:52:09 -04:00
02e05bd7cb merge release-8.0.0-rc.0 (#29232) 2024-03-27 11:35:23 -04:00
fa387cb2a2 chore(): update package lock files 2024-03-27 15:24:33 +00:00
8ab116150c v8.0.0-rc.0 v8.0.0-rc.0 2024-03-27 15:23:52 +00:00
8c9182c52f merge release-8.0.0-beta.4 (#29230) 2024-03-27 11:16:27 -04:00
c0a8e7a95d chore: clean up changelog 2024-03-27 11:02:19 -04:00
0c5a2967d8 chore(): update package lock files 2024-03-27 14:57:27 +00:00
6ebb3c4e38 v8.0.0-beta.4 v8.0.0-beta.4 2024-03-27 14:56:50 +00:00
cdcb6decbd chore: sync with main (#29229) 2024-03-27 10:46:58 -04:00
652ea169b7 chore: update package-lock 2024-03-27 10:29:57 -04:00
6d6fd4af1b chore: sync next with feature-8.0 (#29225)
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. -->

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

- Syncs the `next` branch with the latest from `feature-8.0`.


## 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-03-27 10:14:18 -04:00
42c09a7ea1 chore: sync with main 2024-03-27 09:54:28 -04:00
c23be1befd merge release-7.8.2 2024-03-27 09:45:05 -04:00
a2923aaeb3 chore(): update package lock files 2024-03-27 13:34:23 +00:00
eeab96de55 v7.8.2 v7.8.2 2024-03-27 13:33:47 +00:00