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. -->
- Update primitive json tokens
- Update generated files on foundations folder.
## 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
[Tokens Preview
Sample](https://ionic-framework-fugbxhshx-ionic1.vercel.app/src/foundations/tokens.preview.html)
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
The checkbox background color and svg are both set to the same size.
## What is the new behavior?
Moves the background and border to the native wrapper so that we can
change the svg size separately.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-fix-checkbox-design-ionic1.vercel.app/src/components/checkbox/test/basic?ionic:theme=ionic)
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. -->
Added ionic theme scss architecture for
- Toolbar
- Menu Button
- Buttons
- Searchbar
- Title
For the toolbar, it was decided to follow an approach closer to ios
regarding the slots offering and behaviour, as it matches more closely
the UX/UI requirements.
- Added TODO related to z-index task on toolbar an header ionic files.
- Added new ion-title and ion-toolbar tests for 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. -->
[Toolbar Sample
Screen](https://ionic-framework-15lh8i02e-ionic1.vercel.app/src/components/toolbar/test/theme-ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Add new divider property on header's Ionic theme
- Added new divider test.
- Added TODO for support on ios/ md in future.
## 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. -->
[Header divider
sample](https://ionic-framework-a13vvxiyy-ionic1.vercel.app/src/components/header/test/divider?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Giuliana Silva <108938618+OS-giulianasilva@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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added new common header partial, to be used by ionic theme and ios/md
- Renamed header.scss to header.native.scss. This inherits the common
created above and its used only on ios and md partial
- Created new partial for ionic theme.
- Added ionic theme to basic e2e 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/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. -->
[Sample Header
Screen](https://ionic-framework-rcfex2fep-ionic1.vercel.app/src/components/header/test/basic?ionic:theme=ionic)
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <maria@ionic.io>
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. -->
- Updated tokens utilities to no longer add font-family to
utillity-classes. That is something that should only be set at a global
layer, no sense to have that on a utility-class.
- Updated text token JSON as received by UX/UI Team.
- Improved tokens utilities to correctly set font-style to italic with
italic font tokens.
- Adjusted typography Ionic scss to use the new typography classes and
mixins based on tokens.
- Removed old basic typography test, as it was testing utility-classes
that do not exist anymore.
- Added new typography test for ionic display tokens.
- Added a TODO to tackle the Inter font loading scenario, as it envolves
research that impact other contexts as well.
## 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.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Sample Typography
Screen](https://ionic-framework-e2le05h3a-ionic1.vercel.app/src/css/test/typography/basic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@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. -->
CI tests are failing because of a recent patch from Vue. They start to
fail on Vue v3.4.28.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Pinned Vue v3.4.27 until we can determine a fix.
## 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. -->
N/A
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: resolves#18714
---------
<!-- 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 the `ion-content` has the fullscreen attribute, the `ion-refresher`
will be hidden while refreshing. This can be seen by dragging far enough
to trigger it to snap back and refresh.
The refresher ends up being hidden behind the background content
element.
https://github.com/ionic-team/ionic-framework/assets/13530427/27b5393b-dd31-44a5-b872-97709e3a0980
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Set the `--offset-top` to `0px` for the background content element.
This reflects the same behavior of when the content is not fullscreen.
By setting this to `0px`, the refresher is visible while refreshing.
- Added a private prop within refresher to keep track of whether
`ion-content` is `fullscreen` or not.
- Added test.
Originally, I was going to update the `pullMin` and `pullMax` as agreed
on from the investigation ticket. However, it ended up adding too much
space between the refresher and the content. This is the reason why I
decided to modify the background background instead. Otherwise, it
wouldn't mimic the behavior when content doesn't have the `fullscreen`
attribute.
Example of what the spacing looked like:
https://github.com/ionic-team/ionic-framework/assets/13530427/389cea62-48c1-4464-be47-44bc3b6c0315
## 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-git-rou-4950-ionic1.vercel.app/src/components/refresher/test/fullscreen)
How to test:
1. Navigate to the preview page
2. Use the browser's simulator to chose an iOS device (might need to
refresh the page)
3. Drag the screen down
4. Verify that the refreshing text is shown
5. Use the browser's simulator to chose an Android device (might need to
refresh the page)
6. Drag the screen down
7. Verify that the refreshing text is shown
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 is no documentation on how to use the input field in the
screenshots GH actions.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added steps and examples on how to specify a component within
screenshots GH actions.
## 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. -->
N/A
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. -->
Renovate updates the Playwright packages. It's important that the
Playwright within Docker and within core are the same version. However,
the Playwright version within core does not update when Docker does.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Added a `bump` to the Renovate config, this should allow Playwright
within core to update regardless if the new version satisfies the range.
## 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. -->
I was unable to test it locally since it will only trigger when the code
is within `main`.
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. -->
- Improved Checkbox disabled state
- Added more examples on theme-ionic file for disabled checkbox
- Created ionic.mixin for new DS specific mixins, while still forwarding
the globals one.
- Created mixin for the disabled-state, that can be reused on multiple
Ionic Theme 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.
-->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Gonçalo M <goncalo.martins@outsystems.com>
Issue number: internal
---------
## What is the new behavior?
- Added scss for the focus state of `ion-item` for the Ionic theme
- Added item with class `ion-focused` to test page
- Added the ionic theme to the test page of item `states`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other Information
[Preview](https://ionic-framework-git-rou-10782-ionic1.vercel.app/src/components/item/test/theme-ionic?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the new behavior?
- Added scss for the disabled state of `ion-item` for the Ionic theme
- Added disabled elements to test page
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
Issue number: internal
---------
## What is the new behavior?
- Added scss for the pressed state of `ion-item` for the Ionic theme
- Added item with class `ion-activatable` ([according to
docs](https://github.com/ionic-team/ionic-framework/blob/main/docs/component-guide.md#activated))
to test page
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Bernardo Cardoso <32780808+BenOsodrac@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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- updated ionic.checkbox.scss with ionic tokens and removed references
to checkbox.scss partial
- removed ionic.checkbox.vars.scss file
- update snapshots resulted from slight differences due to the use of
the updated tokens.
- added theme-ionic html file to test basic use-cases with ionic theme.
- border-radius now won't auto scale with `--size`. This was not
possible to do using the gloabls tokens variables and the css calc(), as
it was before. Besides, this is not something we are very interested to
offer on Ionic theme. It should be on developer to also update the
`--border-radius` variable if they want, after changing `--size`.
## 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: Maria Hutt <thetaPC@users.noreply.github.com>
Issue number: resolves 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. -->
this was mistakenly put in the core directory in
https://github.com/ionic-team/ionic-framework/pull/29584
## 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. -->
