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.
-->
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. -->
<!-- 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. -->
<!-- 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>
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.
-->
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
---------
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>
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. -->
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>
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. -->
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When given a password input it is hard to know what users are typing as
the contents of the input are obscured. As a result, it is a common
pattern to have a button that lets users temporarily toggle the
visibility of the password so they can correct any mistakes. Ionic
currently has the infrastructure for developers to implement this on
their own, but this use case is so common that the team thinks it is
worth having this functionality built-in to Ionic.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces the `ion-input-password-toggle` component. This component
is a button that toggles the visibility of the text in the input it is
slotted into.
## 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. -->
⚠️ Give co-author credit to
https://github.com/ionic-team/ionic-framework/pull/29141 on merge.
Docs PR: https://github.com/ionic-team/ionic-docs/pull/3541
Note: We did not do the approach listed in the other PR due to
https://github.com/ionic-team/ionic-framework/pull/29141#discussion_r1523631811.
---------
Co-authored-by: OS-giulianasilva <OS-giulianasilva@users.noreply.github.com>
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 `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. -->
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. -->
[Amanda pointed out that the ripple effect for the Button inside of
InputPasswordToggle was not
working](https://github.com/ionic-team/ionic-framework/pull/29175#discussion_r1532627841).
I found out that calling `ev.preventDefault` on `pointerdown` causes
`mouseup` to not get fired. On desktop, we rely on `mouseup` to know
when to add the ripple effect. (`touchend` is not impacted)
Interestingly, calling `ev.preventDefault` on `pointerdown` does **not**
prevent `pointerup` from being fired. The idea here is that if we
migrate the tap click utility to use the PointerEvents API instead of
separate mouse/touch listeners we can keep the existing tap click
behavior while also fixing the bug that Amanda noted.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Tap click nows listens for the Pointer Events instead of separate
mouse/touch events
Impact to developers is fairly minimal. There should be no behavior
change (other than the bug I noted being fixed). There should be a very
small perf boost because this util now only adds 4 event listeners on
the document instead of 7 previously.
## 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. -->
Reviewers: Please manually test this on desktop devices as well as iOS
and Android devices (not Chrome Dev Tools. iOS simulators are fine).
Test that components such as `ion-button` correctly add the activated
state (or ripple effect for MD). Also verify that the activated state is
not added when tapping the button and then scrolling. For desktop, check
that right clicking does not add the activated state.
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. -->
N/A
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Syncs `next` with the latest changes from `feature-8.0`
## 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. -->
BREAKING CHANGE: Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
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. -->
While doing other work I noticed that the Angular schematics still
reference the old dark theme.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The Angular schematics now import the new dark theme found in Ionic
v8.
## 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. -->
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 provides a small utility wrapper around the Web
Animations API. Historically not all browsers that Ionic Framework
supported, had support for the Web Animations API. To offer backwards
compatibility, Ionic Framework provided fallback behaviors for the
different wrapped APIs.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removes the legacy CSS animations fallback behavior from the Web
Animations API animation utility. Maintaining a few no-op behaviors for
test environments.
- Resolved a few internal type usages that were casting to any
- Removed spec tests that were testing the fallback CSS animations
behavior and/or already had test coverage from other unit tests.
## Does this introduce a breaking change?
- [x] Yes
- [ ] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
All modern browsers support the Web Animations API today. If a developer
needs to target an older browser that does not support Web Animations,
they should either use [a
polyfill](https://github.com/web-animations/web-animations-js), or
implement the fallback behavior themselves.
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We add margin on content in the start/end slots so they do not run up
against either the visible text label of the text in the input. However,
we did not account for when multiple elements are placed into the same
slot. As a result, this margin is added more times than it needs to be.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the selector so the margin is only applied to either the last
or first element in the slot.
## 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. -->
Test Steps:
1. Check out `feature-8.0`
2. Add multiple `ion-button` elements into either the start or end slot
on an input (you can reuse the template in
`src/components/input/test/slots`
3. Observe that margin is added to every `ion-button`.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
GitHub actions allow screenshots to be updated either by updating all
the components or providing a component name.
If a component name is given, then the screenshots will only be updated
on `src/components/{component-name}`. This isn't ideal when wanting to
update a specific path.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The script no longer strips out `ion-`. The developer needs to submit
a valid component name or valid path.
- The script no longer appends the value to `src/components/`
- The script will run all instances of a component if only the name is
given
- The script will run tests within a given path
## 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. -->
How to test:
1. Create a new branch based off this one
2. Make a style change
3. Push it to the new branch
4. Update the reference images using the new branch
5. This will show you all the options
Recommended to test:
- a component name (`chip`)
- a path (`src/components/chip/test/a11y`)
- a component that doesn't exist (`random-component`)
- no provided component, leave the first input blank
