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. -->
Issue number: internal
---------
## What is the current behavior?
Avatar icon styles use `1em` width/height which makes them change size
based on the `font-size`
## What is the new behavior?
Updates the `ionic` theme only to:
- Set the `width` / `height` of icons in `ion-avatar` to use the scale
tokens based on the Figma design
- Removes the padding for avatars containing an icon
- Updates the existing screenshots to show the new icon sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10732-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
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. -->
add a .gitattributes configuration file to the repo. this will allow
users of unix and windows machines to be able to commit to the repo
without worrying about line endings.
previously, running the `lint` npm task in the core directory would
cause the line endings to change locally. with this change, line endings
should not change
## 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. -->
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. -->
- On ionic.button.scss all dependencies to button.scss were removed, to
avoid the old native theme values being mixed on the new ionic theme
button.
- ionic.button.vars.scss partial was removed
- All values were changed to use tokens.
- Updated snapshots that bring slight differences due to now we are
totally using the ionic theme tokens.
- Tests with colors where the ionic button was being added also now have
differences, as the current ion-colors aren't affecting the ionic theme
button. This is expected, as the ionic theme should only work with the
colors from the new Design System, which is something being tacked on
this [PR](https://github.com/ionic-team/ionic-framework/pull/29557). in
the future, we should remove the ionic button from these color ctests
and create new ones that add the new set of colors to the ionic button.
## 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.
-->
Issue number: internal
---------
## What is the new behavior?
- Added scss for the `ion-item` for the Ionic theme
- Added test page
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: resolves#29518
---------
<!-- 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. -->
IonInput in React apps can't import the correct type for typescript.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Since it is in the file exported, people using IonInput can import the
correct type.
-
-
-
## 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. -->
Liam DeBeasi told me it was a bug a couple days ago and pointed out to
where it needed to be added.
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. -->
Angular 18 test app was using an RC.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated to the official release.
- Removed the `--legacy-peer-deps` that is no longer needed
## 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: 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. -->
This PR intends to make sure all font-size related tokens are generated
suing the px-to-rem() scss function, so that the fonts correctly scale
in runtime to zoom/A11y preferences.
- Added new utility to generate the expected css and scss variable using
the px-to-rem()
- Added @use on generated scss and css foundations files.
## 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: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
The input uses `md` styles on the `ionic` theme.
## What is the new behavior?
Adds the following for the `ionic` theme:
- The `--text-color-invalid` CSS variable
- The `size` property with support for the `large` size
- The `outline` fill styles for the input
- The `round` shape styles for the input
- The helper and error text styles
- The `focused`, `disabled` and `hover` styles
- The clear button styles
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
The outline fill & stacked label were the main priority here so some
screenshots may look plain. Floating label will be added in future work.
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. -->
- Replaced old fixed values with new tokens.
- Added theme="ionic" to ionic test page.
## 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.
-->
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"soft"` shape in the ionic theme.
## What is the new behavior?
- Adds the styles for the soft shape (border radius)
- The `xsmall` and `small` sizes have a different border radius than the
larger sizes
- Adds e2e tests for the soft shape
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10739-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"rectangular"` shape in the ionic
theme.
## What is the new behavior?
- Adds the styles for the rectangular shape (border radius)
- Adds e2e test for the rectangular shape
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10740-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"round"` shape in the ionic theme.
## What is the new behavior?
- Adds the styles for the default (round) shape (border radius)
- Adds e2e test for the round shape
- Updates the screenshots for the avatar `size` due to the new default
shape
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10738-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"xlarge"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the xlarge size (width, height, padding, font size
and line height)
- Adds e2e test for xlarge size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10737-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
---------
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 files to scripts/tokens for the html template and css to
style the generated preview
- Added Style Dictionary register for generating html elements for each
main token
## 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.
-->
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"xsmall"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the xsmall size (width, height, padding, font
size, font weight and line height)
- Adds e2e test for xsmall size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10733-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"large"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the large size (width, height, padding, font size)
- Adds e2e test for large size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10736-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"small"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the small size (width, height, padding, font size)
- Adds e2e test for small size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10734-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have any styles in the ionic theme.
## What is the new behavior?
- Adds background, border and font styles for avatar
- Adds the styles for the medium size and defaults the size to medium
- Adds e2e test for avatar sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10735-ionic1.vercel.app/src/components/avatar/test/size?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 new method to detect colors with eight characters
- Added logic to generate an rgba when the above is true. This is to
ensure better compatibility with older devices that don't support colors
with more than six characters.
## 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.
-->
