14689 Commits

Author SHA1 Message Date
617dfe9c9e chore(): update package lock files 2024-05-15 12:27:50 -04:00
b298c0e015 v8.1.2 2024-05-15 12:27:50 -04:00
32bc681192 fix(picker): update keyboard navigation (#29497)
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. -->

The tests for picker were failing because the focus was not set to the
appropriate element and because Firefox would focus on an element it
shouldn't be.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adjusted the `setFocus()`
- Skipped the `picker-opts` in the tab order
- Removed `skip()` from the 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. -->

N/A

---------

Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
2024-05-15 15:02:57 +00:00
c63d07bdd0 fix(many): do not grow slotted checkboxes, radios, selects and toggles (#29501)
Issue number: resolves #29423

---------

## What is the current behavior?
I fixed a bug where icon was collapsing its width when next to a
checkbox, radio or toggle to match the styles of select in
https://github.com/ionic-team/ionic-framework/pull/29328. This caused a
regression for checkboxes, radios, and toggles when slotted inside of an
item. Our test coverage for this was not great, as the slotted inputs
test in item had so many elements that it was not apparent that this bug
was introduced. In addition, the select itself presented the same issue
before my PR and this is a regression from the v7 behavior. See the
following Codepens to see the regression:

- [Ionic v7](https://codepen.io/brandyscarney/pen/jOoPzoL)
- [Ionic v8](https://codepen.io/brandyscarney/pen/KKLpoLX)

## What is the new behavior?
- Updates the checkbox, radio, select, and toggle to reset the flex
property when slotted.
- Adds test coverage for the previous fix I did in
https://github.com/ionic-team/ionic-framework/pull/29328 where icons
were collapsing their width next to checkboxes, radios and toggles. This
was reproducible with a div and easier to see in a test so I used a div
with a background instead of an icon.
- Adds better test coverage for this fix which separates each component
(checkbox, radio, select, toggle) into their own screenshot test to make
sure the width is shrinking or expanding properly based on where it is
located in an item.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

| Before fix
9b59138011
| After |
| ---| ---|
| ![before
fix](https://github.com/ionic-team/ionic-framework/assets/6577830/e27c6e3c-3d3a-4889-a44b-5f4a9a6ba552)
| ![after
fix](https://github.com/ionic-team/ionic-framework/assets/6577830/a05829d6-f776-4f0d-b7eb-cb8177449c90)
|

<table width="100%">
  <tr align="center">
    <td width="50%"><b>Before regression fix</b></td>
    <td width="50%"><b>After</b></td>
  </tr>
  <tr>
<td width="50%"><img alt="before-regression-fix"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/bb1aea84-6c83-4fbe-96ad-855c1c9cca95"></td>
<td width="50%"><img alt="after-regression-fix"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/655dab88-55a9-4961-a7fb-2a3233aa0004"></td>
  </tr>
</table>
2024-05-15 14:16:52 +00:00
44e1977e98 docs(many): update Contributing links (#29498)
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. -->

The bug report points to an old location of the Contributing doc.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated the link to point to the new location under the docs 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

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A
2024-05-14 19:48:36 +00:00
237245f567 chore(git): update from next (#29491) 2024-05-13 14:47:05 -04:00
a214b3de4c Merge branch 'next' into chore-fw-6191-next 2024-05-13 13:37:25 -04:00
7a7a688601 chore(git): update from next (#29495) 2024-05-13 13:35:01 -04:00
8e7be665fa chore(): add updated snapshots (#29496)
Co-authored-by: ionitron <hi@ionicframework.com>
2024-05-13 13:08:38 -04:00
24c0bc352a Merge branch 'next' into chore-rou-4848-next 2024-05-13 12:09:39 -04:00
ef7a454015 chore(): add updated snapshots (#29492)
Co-authored-by: ionitron <hi@ionicframework.com>
2024-05-13 10:38:02 -04:00
29d4410aa5 test(alert): skip flaky a11y test (#29489) 2024-05-10 21:50:07 +00:00
edbc1eca1b chore(git): update from main (#29488) 2024-05-10 17:41:36 -04:00
b353984216 Merge branch 'main' into chore-update-from-main 2024-05-10 17:29:30 -04:00
1ae42a5c13 chore(ci): exit with correct exit code (#29425)
The docker script does not exit with the correct exit code when invoking
commends in `execa`. You can verify this by changing `npm run test.e2e`
in the script to `npm run foo` (a non-existent script). The underlying
command will fail, but the parent script will still exit with exit code
0.

Important: The tests themselves have always errored correctly, so this
does not impact test execution. Only the invocation of the test command
is impacted.

This PR ensures that invoking the wrong command causes the parent script
to exit with the correct code.

Co-authored-by: Brandy Carney <brandyscarney@gmail.com>
2024-05-10 20:40:18 +00:00
2007a44a27 test(many): fix failing tests that CI was not reporting (#29485)
Code checks were passing even though these tests were failing because
the docker script was not exiting with the correct exit code. This PR
fixes the tests so that they pass, then PR
https://github.com/ionic-team/ionic-framework/pull/29425 can be merged
so CI will properly fail again when tests fail.

---------

Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
2024-05-10 20:01:35 +00:00
09935fd07b feat(input): add the readonly styles for the ionic theme (#29483)
Issue number: internal

---------

## What is the current behavior?
There are no custom styles when readonly is added to an input.

## What is the new behavior?
- Applies an `input-readonly` class when the `readonly` property is
`true`
- Styles the class in the `ionic` theme to match the design requirements
for readonly inputs
- Adds screenshot tests for the readonly style for an unset `fill` and
`"outline"` fill

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-05-10 11:38:18 -04:00
8515c4efff fix(input): only apply the shape to the outline fill in ionic theme (#29482)
Issue number: internal

---------

## What is the current behavior?
The shape styles are being applied when the `fill` is unset in the
`ionic` theme. This is incorrect per the input UX requirements as shape
should only apply when `fill` is set to `"outline"`. This is made
apparent when looking at the existing styles for `disabled`.

## What is the new behavior?
- Only apply the shape styles to the `"outline"` fill
- Move the use of the `--background` css variable to the native wrapper
since this is what we use to style both the disabled and readonly states

| Before | After |
| ---| ---|
|
![before](https://github.com/ionic-team/ionic-framework/assets/6577830/44b6e7e4-70f4-49d5-844f-a015b7284ed5)
|
![after](https://github.com/ionic-team/ionic-framework/assets/6577830/06ac9431-17f4-4741-8ceb-19b40d8ba7d9)
|

I am not sure why this wasn't caught with the shape additions, but it's
probably because the minimum pixel ratio was not met.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-05-10 10:27:43 -04:00
c1bba3b5f0 feat(input): add soft shape for ionic theme (#29477)
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 input component does not support the `soft` shape.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `soft` has been added to shape, but will only work for the `ionic`
theme.
- Added 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. -->


[Preview](https://ionic-framework-git-fw-6096-ionic1.vercel.app/src/components/input/test/shape?ionic:theme=ionic)
2024-05-09 11:54:00 -07:00
75333c0251 feat(input): add rectangular shape for the ionic theme (#29476)
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 input supports an undefined and a `round` shape.

## What is the new behavior?
Adds support for the `rectangular` shape for the `ionic` theme &
screenshot tests for this shape with the outline fill.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-05-09 11:26:52 -04:00
e17db2c988 test(input): remove the .only within fill (#29478) 2024-05-09 08:04:15 -07:00
a58d9fa2e1 feat(many): expand global config for icons (#29373)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-05-08 16:22:12 -07:00
7333376506 fix(input): implement default shape for ionic theme (#29469)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-05-08 13:21:52 -07:00
4dae03f2ac feat(button): set default shape to soft for ios and round for md and ionic themes (#29404)
Issue number: internal

---------

## What is the current behavior?
The `shape` property defaults to `"soft"` for `ios` and `"round"` for
the `md` and `ionic` themes.

**Default button size**:

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined`     | `8px`  | `14px`      | `4px`      |
| `"round"`       | `999px` | unsupported | unsupported |
| `"rectangular"` | `0px`  | unsupported | unsupported |

**Large button size**:

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined`     | `8px`  | `16px`      | `4px`      |

**Small button size**:

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined`     | `4px`  | `6px`      | `4px`      |

## What is the new behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for all themes.


**Default button size**:

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"`        | `8px`   | `6px`   | `4px`   |
| `"round"`       | `999px` | `999px` | `999px` |
| `"rectangular"` | `0px`   | `0px`   | `0px`   |

**Large button size**:

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `soft`     | `8px`  | `8px`      | `4px`      |

**Small button size**:

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `soft`     | `4px`  | `4px`      | `4px`      |

- Adds support for the `"soft"` shape in the `ionic` theme using the
existing values for `undefined`
- Adds support for the `"rectangular"` and `"round"` shapes in `ios` and
`md` using `0px` and `999px` border radius
- Sets the default shape property to `"round"` for the `ionic` and `md`
themes and `"soft"` for `ios` and updates the `border-radius` to apply
to the shape classes instead of `:host`
- Updates the `"soft"` shape border radius for `ios` in the various
sizes to match the buttons created in SwiftUI (their "rounded" is our
"soft"):

![rounded-ios-buttons](https://github.com/ionic-team/ionic-framework/assets/6577830/230edf21-de68-4c41-9b89-8ea310ce42f2)
- Fixed the icon only buttons in the `"ionic"` theme so that they are
not styled based on the size while always following the proper aspect
ratio. This was broken for the default size due to an incorrect padding
value & I made it so we don't have to specify the padding for each size:

| Before | After |
| ---| ---|
|
![before](https://github.com/ionic-team/ionic-framework/assets/6577830/1e8d1a82-ad58-4372-be69-09175362c810)
|
![after](https://github.com/ionic-team/ionic-framework/assets/6577830/06cf6e22-a606-4ccc-ae4b-df69cf9c1e1e)
|

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

BREAKING CHANGE:

The `border-radius` of the `ios` and `md` button now defaults to `6px`
and `999px` instead of `14px` and `4px`, respectively, in accordance
with the iOS and Material Design 3 guidelines. To revert to the previous
appearance, set the `shape` to `"soft"` for `md` and override the
`--border-radius` CSS variable for `ios` to `14px`, or set it to a
different value entirely.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-05-08 16:05:59 -04:00
704765e620 refactor(gh-action): add an ignore label to conventional commits (#29475)
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. -->

The conventional commit check occurs to all PRs even for releases.
Release PRs do not follow the same structure and causes a block when
trying to merge them.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `release` label has been marked as an `ignoreLabel`, this will let the
conventional commit know that the PR has been marked to skip validation.

## 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
2024-05-08 19:21:33 +00:00
217f5bd123 merge release-8.1.1 (#29473) v8.1.1 2024-05-08 14:42:40 -04:00
5eb94130fa chore(tests): remove old screenshots without a test (#29472)
Issue number: internal

---------

## What is the current behavior?
Several screenshot images were not removed when their e2e test was.

## What is the new behavior?
I ran the following command in `ionic-framework/core` to find all
`*.png` files that did not have a parent `*.e2e.ts` file:

```bash
find ./src/components -iname '*.png' -exec bash -c 'cd "${1%/*}"; 
  shopt -s nullglob; files=(../*.e2e.ts); 
  ((${#files[@]} == 0)) && echo "$1"' _ {} \;
```

I have deleted all of these images.

Co-authored-by: Brandy Carney <brandy@ionic.io>
2024-05-07 18:20:43 +00:00
88db93819f test(angular): add angular 18 test app (#29456)
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. -->

Angular 18 will be releases ~ May 20th. Ionic Framework does not
currently have test infrastructure to check if the RC is compatible with
Ionic Framework.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds an Angular 18 test app to the test infrastructure
- Added tech debt tickets for additional investigation and removing the
`--legacy-peer-deps` arg after v18 GA.

## 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. -->
2024-05-07 00:51:46 +00:00
4640e046eb feat(angular): setting props on a signal works (#29453)
Issue number: resolves #28876

---------

<!-- 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 assigning `componentProps` as inputs to an Angular component, we do
`Object.assign`. When using the newer Angular Signals API for inputs the
value of an input is a function:

```js
myInput = input<string>('foo') // this is a function
```

The developer accesses the value of `myInput` in a template by doing
`myInput()` since `myInput` is a function.

If a developer passes `componentProps: { myInput: 'bar' }` then the
value of `myInput` is set to this string value, overriding the function.
As a result, calling `myInput()` results in an error because `myInput`
is a string not a function.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Angular 14.1 introduced `setInput` which lets us hand off setting
inputs to Angular. This will set input values properly even when using a
Signals-based input.

## 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.
-->


As part of this `NavParams` has been deprecated as it is incompatible
with the `setInput` API. The old `Object.assign` worked to allow devs to
get all of the `componentProp` key value pairs via `NavParams` even if
they are not defined as `Inputs`. Using `setInput` will now throw an
error, so developers need to create an `@Input` for each parameter. This
means that `NavParams` has no purpose and can safely be retired in favor
of Angular's Input API. Not removing NavParms would make it difficult
for us to support new Angular APIs such as this Signals-based input API.

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `8.1.1-dev.11715021973.16675b67`

You will need to update the Ionic config to opt-in to the new option:
```ts
useSetInputAPI: true,
```

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-05-06 18:12:32 -04:00
bb1db52567 fix(angular): add formatOptions property to standalone datetime (#29468)
Issue number: resolves #29464

---------

<!-- 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 standalone component for `ion-datetime` is missing the
`formatOptions` property. This component wrapper is manually maintained
and was missed when developing the feature.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds the missing `formatOptions` property to the `ion-datetime` for
the angular standalone 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. -->
2024-05-06 19:20:52 +00:00
7ea14ae41e fix(radio): persist checked state when items are updated in radio-group (#29457)
Issue number: resolves #29442

---------

<!-- 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 state does not stay consistent when the data used to render the
radios are updated.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The state updates after the component loads, this allows the value to
be set after the radio is rendered.

## 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. -->

Dev build: 8.1.1-dev.11714760012.1eab947e

---------

Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
2024-05-06 18:15:15 +00:00
a57ca8d5b4 chore(theming): remove Sass default flag & update guidelines (#29458)
Remove a missed `!default` flag in the themes directory and update the
Sass variable guidelines docs to eliminate the `!default` flag from the
code examples, except for in the historic usage section which includes
examples from previous versions where the `!default` flag was used.

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>
2024-05-03 23:15:39 +00:00
fd14ddfec7 fix(input): match design for xlarge size (#29446) 2024-05-03 15:04:26 -07:00
0e792e6b9d fix(input): use correct padding for large (#29447) 2024-05-03 12:49:44 -07:00
2eb1dbd83c fix(input): add focus ring to the clear input button for ionic theme (#29409) 2024-05-03 12:28:37 -07:00
c78d2e6ec8 feat(chip): set default shape to soft for ios and md theme and round for ionic theme (#29375)
Issue number: internal

---------

## What is the current behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for the `ionic` theme and the "Round" shape for the
`ios`/`md` themes.

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined`     | `4px`  | `16px`      | `16px`      |
| `"round"`       | `999px` | unsupported | unsupported |
| `"rectangular"` | `0px`  | unsupported | unsupported |

## What is the new behavior?
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"`        | `4px`   | `10px`   | `8px`   |
| `"round"`       | `999px` | `999px` | `999px` |
| `"rectangular"` | `0px`   | `0px`   | `0px`   |

- Sets the default `shape` property to `"soft"` for `ios` and `md`
themes and `"round"` for the ionic theme.
- Updates the `border-radius` to apply to the shape classes instead of
`:host`
- Updates the `ios` theme to use `10px` for `"soft"` as this was taken
from the App Store:

![ios-app-store](https://github.com/ionic-team/ionic-framework/assets/6577830/14008de2-a953-4b27-81da-13dd481c5e39)
- Updates the `md` theme to use `8px` for `"soft"` as this is taken from
the [Material Design 3
guidelines](https://m3.material.io/components/chips/specs#590903f7-2bf5-46ab-9810-d052173f41f1)
& the previous value of `16px` is the equivalent of the `999px` round
shape due to the height being `32px`
- Adds support for the `"round"` and `"rectangular"` shapes in `ios` and
`md` themes

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

BREAKING CHANGE:

The `border-radius` of the `ios` and `md` chip now defaults to `10px`
and `8px`, respectively, instead of `16px` in accordance with the iOS
and Material Design 3 guidelines. To revert to the previous appearance,
set the `shape` to `"round"`, or override the `--border-radius` CSS
variable to specify a different value.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-05-03 14:33:55 -04:00
dfb72d7ea0 fix(angular): persist select disabled state in item (#29448)
Issue number: resolves #29234

---------

<!-- 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. -->

In certain scenarios, such as in Angular where the property binding is
set a few frames after the element is rendered, the `ionStyle` event
from `ion-select` can be emitted before `ion-item` has registered an
event listener.

This results in situations like setting the `ion-select` as initially
disabled can cause the item to not treat the element as not interactable
(receives pointer events).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Emits the `ionStyle` event when the `ion-select` is rendered.
- `ion-item` consistently detects the state of `ion-select` and applies
the appropriate styles

## 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. -->

Forked reproduction and dev-build available here:
https://github.com/ionic-team/ionic-framework/issues/29234#issuecomment-2091866453
2024-05-03 18:26:19 +00:00
7bbbd4b6b8 feat(card): set round as the default shape for all themes (#29387)
Issue number: internal

---------

## What is the current behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for all themes.

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined`     | `4px`  | `8px `      | `4px`      |
| `"round"`       | `16px` | unsupported | unsupported |
| `"rectangular"` | `0px`  | unsupported | unsupported |

## What is the new behavior?
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"`        | `4px`   | `8px`   | `4px`   |
| `"round"`       | `16px` | `14px` | `12px` |
| `"rectangular"` | `0px`   | `0px`   | `0px`   |

- Adds support for the `"soft"` shape using the existing values for
`undefined`
- Sets the default `shape` property to `"round"` for all themes and
updates the `border-radius` to apply to the shape classes instead of
`:host`
- Adds support for the `"round"` and `"rectangular"` shapes in `ios` and
`md`
- Updates the `ios` theme to use `14px` for `"round"` as this is taken
from the card in the iOS App Store
<img width="400px"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/51f7028c-990d-48b5-b3e0-9909dae7e31c">
- Updates the `md` theme to use `12px` for `"round"` as this is taken
from the [Material Design 3
guidelines](https://m3.material.io/components/cards/specs#daab7734-3b3e-464c-a967-7c7fa14e6478)

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

BREAKING CHANGE:

The `border-radius` of the `ios` and `md` card now defaults to `14px`
and `12px` instead of `8px` and `4px`, respectively, in accordance with
the iOS and Material Design 3 guidelines. To revert to the previous
appearance, set the `shape` to `"soft"`, or override the
`--border-radius` CSS variable to specify a different value.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-05-03 14:04:30 -04:00
484fe25e50 chore(internal): remove sean from issue triage (#29443)
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. -->

- Removes me from being auto-assigned to issue triage
- I was already removed from CODEOWNERS, so no changes are needed there.

## 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. -->
2024-05-03 17:57:55 +00:00
5c7a782c42 chore(git): sync with next (#29454) 2024-05-03 12:10:38 -04:00
09a0e6e907 Merge branch 'next' into chore-sync-ROU-4848-next 2024-05-03 11:11:49 -04:00
7c7c483ab9 chore(git): sync with main (#29445) 2024-05-03 11:02:25 -04:00
8acf8f3c96 chore: vue will build successfully 2024-05-02 18:49:42 -04:00
ef9b823dcd style: run build, lint, and remove !default Sass variables 2024-05-02 17:30:30 -04:00
8b834387d4 Merge branch 'main' into chore-update-next-from-main 2024-05-02 16:43:54 -04:00
0124f3b0b3 test(many): replace ionic buttons in e2e tests with native html buttons (#29422)
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>
2024-05-02 19:20:48 +00:00
ba5cebf254 docs(testing): add correct command (#29441)
The original command does not exist.
2024-05-01 21:02:41 +00:00
78a61053b6 chore(pull-requests): enforce conventional commits (#29438)
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. -->

Framework has a structure when it comes to PR titles. However, there
aren't any reinforcements to it unless a reviewer checks it.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added a GitHub action that will validate the PR title. It checks that
there is a valid type, checks that it has a scope, and that the subject
doesn't start with a uppercase character.

## 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. -->

Create a branch from this one to test it out.
2024-05-01 20:11:41 +00:00
ee833881da fix(angular): set active segment button when dynamically changing items (#29418)
Issue number: resolves #29414

---------

<!-- 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. -->

In Angular when the segment buttons are dynamically rendered, the
segment will not set the active visual state for the selected segment
after the re-render.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- In Angular the segment will set the active item visually when the
items are dynamically changed

Previously this PR:
https://github.com/ionic-team/ionic-framework/pull/28837 aimed to
resolve https://github.com/ionic-team/ionic-framework/issues/28816. I
have confirmed that the modified approach in the dev-build fixes #29414
and #28816 and the previous change 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. -->

Dev-build: `8.0.2-dev.11714411675.10f48160`
2024-05-01 17:26:16 +00:00
e170e31ba9 chore: remove liam from codeowners and issue triage (#29427)
This PR removes me from the Codeowners file as well as the issue triage
list.
2024-05-01 16:28:25 +00:00