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. -->
No `ionic` theme styles for the datetime time label
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds styles to the time label for the `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. -->
[Preview](https://ionic-framework-6m937m00k-ionic1.vercel.app/src/components/datetime/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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are no dedicated title styles for the `ionic` theme
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds `ionic` theme styles for the datetime default title
## 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
(inline-custom)](https://ionic-framework-c0db80uay-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)
Issue number: resolves#29792
---------
<!-- 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 user drags the range knob (most easily reproduced in fullscreen
mode) and the gesture emits a current x position of `0`, the range
incorrectly emits a value of `NaN`.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `ion-range` does not emit `NaN` and instead emits the correct range
value for the knob
## 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/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. -->
- Adds the supported styles for `lines` in both the item and list components
- Splits the tests up in `item/test/lines` and `list/test/lines` so that it isn't taking screenshots of an entire page and instead tests based on the lines property
Adds the styles for Datetime in the `ionic` theme for the following (days, months, arrows, weeks):
- Typography
- Colors
- Spacing
- Sizing
- States (selected, pressed, focus, hover)
- Remove the default property value in favor of setting the default style in the CSS to match the other form controls.
- Updates the e2e test for `label` to remove the explicit width & add more examples with long labels and a default select without justify set.
- Change the radio's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a radio with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label-placement` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label-placement` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label-placement` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the toggle's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a toggle with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Set the default `align-items` style to `center` so that a toggle with `width: 100%` and `label-placement="stacked"` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
- Adds one example to the `label` e2e test of a long label that uses `justify` to ensure it still wraps properly
- Change the checkbox's `display` property to `block` when the `justify` or `alignment` property is set.
- Set the default `justify-content` style to `space-between` so that a checkbox with `width: 100%` set without `justify` or `alignment` set will still have the same default
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it
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: 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?
- Updated ionic theme styles for the toggle
- Added new states for the toggle (only 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. -->
---------
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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Now the fill option default value is outline when using the Ionic
theme.
- Updated snapshots.
## 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. -->
- [Input Fill
Sample](https://ionic-framework-9fbgwzxss-ionic1.vercel.app/src/components/input/test/fill?ionic:theme=ionic)
---------
Co-authored-by: ionitron <hi@ionicframework.com>
- Adds support for `"soft"`, `"round"` and `"rectangular"` shapes in the Ionic theme, with `"round"` as the default
- Adds a `shape` folder and test with examples
- Adds an e2e test with screenshots for all shapes
- Adds the typography styles for the default size (medium)
- Adds the styles for the outline fill
- Adds the styles for the label & helper text
- Adds the spacing for the label, textarea, counter and helper text
## What is the current behavior?
The Playwright test for
`core/src/components/menu/test/safe-area/menu.e2e.ts` started to fail
after introducing the following patch to Stencil:
[#5926](https://github.com/ionic-team/stencil/pull/5926). After
debugging the situation it turns out that the test overwrites the first
style in the `<head />` tag which turns out to be a component style that
caused all screenshot test to fail.
## What is the new behavior?
Overwrite the existing style by adding a new style tag at the bottom of
the 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.
-->
## Other information
n/a
Issue number: N/A
---------
## What is the current behavior?
Setting a custom `role` on the `ion-content` element does not work.
## What is the new behavior?
- Inherit attributes for the content element which allows a custom
`role` property to be set
- Adds e2e tests for content, header, and footer verifying that the
proper roles are assigned
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
To test this PR:
1. Switch to the branch and navigate to the `core/` directory
1. Make sure to run `npx playwright install` if it has not been updated
recenly
1. Run `npm run test.e2e src/components/content/test/a11y/`
1. Verify that the tests pass
1. Remove my fix in `core/src/components/content/content.tsx` and run
the test again
1. Verify that the `should allow for custom role` tests fail
Issue number: N/A
---------
## What is the current behavior?
Item includes `ion-anchor` in the list of clickable components it
queries. This component was renamed to `ion-router-link` in
[v5](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md#anchor).
## What is the new behavior?
Updates the reference to `ion-anchor` to `ion-router-link` in
`ion-item`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
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 has a set of custom lint assertions to avoid creating
flaky Playwright tests by forgetting to await a promise. However the
`click` method was not included in the original list of methods to
check.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Developers will receive a lint error when forgetting to await click
methods from Playwright
- Resolves existing tests where this lint issue was present
## 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: resolves#29712
---------
<!-- 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?
In every type of overlay, the auto incremented overlay id is overwriting
any id set in htmlAttributes.
## What is the new behavior?
The id in htmlAttributes now takes precedence.
## 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: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Issue number: resolves#29704
---------
<!-- 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?
Setting the id of an alert via htmlAttributes doesn't work due to it
being overwritten by the overlay id.
## What is the new behavior?
Setting the id of an alert via htmlAttributes works.
## 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
First time PR, long time fan. Please let me know if I missed any of the
contributing guidelines, happy to change anything!
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>
