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. -->
- Add tokens usage on global css files for Ionic theme.
- Removed global background an text variables and fixed variables names
used on `body`. This resulted in some changes on test pages colors,
hence the snapshots differences.
## 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: ionitron <hi@ionicframework.com>
The default (iOS/MD) bundle is removed from the tests for the `ionic` theme because it adds global component styles that the `ionic` theme does not need. The missing utility files are imported, and padding/margin classes are generated from the design tokens, as many tests rely on `ion-padding` and `ion-text-center` being available. This change ensures the `ionic` theme includes the same classes offered in our documentation: https://ionicframework.com/docs/layout/css-utilities.
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>
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. -->
Test styles causes native buttons to have [certain
styling](https://github.com/ionic-team/ionic-framework/blob/main/core/scripts/testing/styles.css#L52-L64).
This was done to spruce up the buttons used for testing purposes only.
However, this ended up adding styles to native buttons within Ionic
components.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Test styles for native buttons are only applied to buttons that are
not part of a Ionic component
## 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. -->
How to test:
1. Run the project locally from the `main` branch
2.
[Comment](5d208e9daa/core/src/components/searchbar/searchbar.md.scss (L91))
out `border: 0` from `.searchbar-clear-button` from the searchbar `md`
theme file (`ios` also works)
3. Navigate to the basic test page:
`/src/components/searchbar/test/basic`
4. Notice a teal border around the clear buttons
5. Checkout to this PR's branch
6. Make sure steps 2-3 are done
7. Verify that the teal border is not being applied to the clear buttons
8. Verify that only native buttons outside of the Ionic components have
a teal appearance: `/src/components/loading/test/standalone` and
`/src/components/action-sheet/test/is-open`
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 consuming the Ionic Framework and using the Ionic Theme, the color
attribute was still not working as the color css was not present.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Now the ion-color maps are correctly imported on the Ionic `dist`
related folder and not the on the `md/ios` ones.
- Changed the usage of `map.get` to `map-get` to avoid issues with the
usage of `@use` and `@forward`. This seems to have no impact on the
compilation and I believe its a better code convention, as map-gets are
a native scss function that doesn't need to be imported.
## 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. -->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <maria@ionic.io>
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. -->
Devs would have to manually generate the ground truths from their
desired base branch. This causes a dev to checkout the base branch and
pull the latest screenshots. They would then return to their working
branch and start the E2E tests.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
A script has been created to automate this process using Docker as
mentioned in the design doc:
- It will ask the user a set a questions like if which component they
want to test
## 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. Make a change to a desired component
2. Run `npm run test.e2e.script`
3. Answer the questions
4. Verify that the tests fail due to visual changes
5. Re-run the command as many times as necessary in order to try
different routes based on different answers
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>
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. -->
If a dev wants to view a test page in dark mode, they have to manually
add the styles. This can lead to a slowdown. Plus they can't use
Playwright's `goto` to test both light and dark. In order to test dark
mode with Playwright, the dev would need to use `setContent` instead of
`goto`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Dark mode can be added to any page by appending `palette=dark` to the
URL.
- The param will be used to add a link tag with the correct palette
file.
- Playwright will load the correct palette file when a dev uses `goto`
and `{ themes: ['dark'] }`
## 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 recommend using badge to try this out. It already has a `goto` in the
basic tests.
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The team would like to ensure that Ionic Framework components that use
an Ionic color (primary, secondary, etc) on top of a contrast color pass
minimum contrast ratios as defined in the WCAG.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces a revised set of Ionic colors that pass AA color contrast
guidelines when with the appropriate contrast.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
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. -->
Testing dark mode is manual per test in Playwright. Ionic developer
needs to setup the variables and assign them to a selector that applies
in the class.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The `.setContent` API will now work with a new config option to test
dark mode automatically without additional configuration/test set-up.
- Default theme is no theme (fallback theme)
- Screenshot names and test titles remain the same for all existing
tests. Only tests that opt into a theme will be pre-pended with `-dark`
or `-light` (as an example for current themes).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#24638, resolves#18592
---------
<!-- 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 have requested that Ionic Framework support the dynamic type
feature on iOS for accessibility purposes. Ionic applications do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision. Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.
Developers have also requested a way of adjusting the fonts in their
Ionic UI components consistently.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic components now use `rem` instead of `px` where appropriate. This
means devs can change the font size on `html` and the text in supported
Ionic components will scale up/down appropriately
- Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
