Commit Graph

151 Commits

Author SHA1 Message Date
Pedro Lourenço
d8bdf398fc feat(toast): implement new shapes (#29936)
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 shape of the toast component could not be customized.

## What is the new behavior?
- I have introduced a new shape property which determines whether the
toast widget has soft, round or rectangular corners.

## 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-10-18 18:26:08 +01:00
Maria Hutt
2af216737d feat(tab-bar): add expand and shape props for ionic theme (#29888)
Co-authored-by: ionitron <hi@ionicframework.com>
2024-09-25 13:58:12 -07:00
Brandy Carney
93b734c840 Merge branch 'main' into chore-update-from-main-2 2024-09-06 10:25:27 -04:00
Maria Hutt
867066b4eb feat(react, vue, angular): use tabs without router (#29794)
Issue number: resolves #25184 

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
2024-08-26 08:13:20 -07:00
Brandy Carney
b57f4be284 feat(textarea): add ionic theme design with medium size (#29776)
- 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
2024-08-21 14:55:40 -04:00
Maria Hutt
79a3fd00de feat(spinner): add size for ionic theme (#29699)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-07-09 12:44:44 -07:00
Bernardo Cardoso
a928ba7379 feat(header): add new divider property (#29675)
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>
2024-06-28 21:01:52 +01:00
Maria Hutt
3d94b234a0 feat(item-option): add shapes (#29636) 2024-06-20 11:24:38 -07:00
Maria Hutt
3c7a00e57d feat(list): add shapes (#29622) 2024-06-20 10:46:12 -07:00
Brandy Carney
898d7933ac Merge branch 'main' into chore-sync-next-main 2024-06-04 17:02:54 -04:00
Maria Hutt
777521f218 feat(badge): add soft to the ionic theme (#29573)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-05-31 11:47:13 -07:00
Brandy Carney
f8f4bb67a5 Merge branch 'next' into chore-sync-next-ROU-4848 2024-05-30 10:01:13 -04:00
Brandy Carney
d4971581cc feat(avatar): add styles for default (round) shape in ionic theme (#29550)
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)
2024-05-28 13:25:54 -04:00
Brandy Carney
b9af47ae0d feat(avatar): add styles for default (medium) size in ionic theme (#29538)
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)
2024-05-23 12:12:31 -04:00
Maria Hutt
5c0b5c32d0 feat(badge): add small/default size for ionic theme (#29526) 2024-05-22 11:11:37 -07:00
Brandy Carney
4bf7a76104 Merge branch 'next' into chore-sync-next-4848 2024-05-22 14:03:17 -04:00
Maria Hutt
9fd1a53c74 feat(chip): add small size (#29514)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-05-17 12:28:29 -07:00
Sean Perkins
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
Brandy Carney
09a0e6e907 Merge branch 'next' into chore-sync-ROU-4848-next 2024-05-03 11:11:49 -04:00
Brandy Carney
ef9b823dcd style: run build, lint, and remove !default Sass variables 2024-05-02 17:30:30 -04:00
Brandy Carney
8b834387d4 Merge branch 'main' into chore-update-next-from-main 2024-05-02 16:43:54 -04:00
Liam DeBeasi
72711bba2e chore: sync with main 2024-05-01 10:12:06 -04:00
Sean Perkins
ca01fe807f docs(core): ionChange will not emit from programmatically changing value (#29407)
Issue number: resolves
https://github.com/ionic-team/ionic-docs/issues/3588

---------

<!-- 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 documentation around `ionChange` not being emitted when
programmatically changing the property associated to the "value" is
either inconsistent or missing from certain components.

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

- Adds the documentation to the missing components.
- Makes the documentation consistent across 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.
-->


## 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-04-26 20:16:16 +00:00
Brandy Carney
d7eb539131 Merge branch 'next' into ROU-4848 2024-04-23 15:35:00 -04:00
Sean Perkins
ea1207174d feat(checkbox): add ionic theme styling (#29335)
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. -->

Checkbox does not have an ionic theme implementation.

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

- Adds the ionic theme styles and initial features for checkbox. 
- This PR is a combination of all the individual PRs already reviewed.

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

We should confirm that the visual styles and behavior function as we
expect with all the changes combined in this PR.

---------

Co-authored-by: João Ferreira <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
2024-04-16 11:19:33 -04:00
Bernardo Cardoso
95daa05a49 feat(chip): add shape to ionic theme (#29303)
Issue number: None

---------

<!-- 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 prop `shape`, only supported on Ionic Theme.
- Added scss for the different shapes.
- Added missing scss for font-weight and line-height.
- Added missing tests for focus state and new tests for shape.
- Added new font weight and line-height design tokens. This change
uncovered an issue on the IOnic Typography tests that resulted on
snapshots differences.
- Added & updated new snapshot baselines.

## 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>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
2024-04-11 16:08:20 +01:00
Sean Perkins
c6b7dfe398 Merge remote-tracking branch 'origin/next' into sp/ROU-4848-sync 2024-04-10 16:10:46 -04:00
Marcelino
9e7c9a5934 feat(card): Add shape feature to card and style into Ionic theme (#29292)
Issue number: resolves #

---------

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

- Adds the new shapes to ionic theme card

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

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>
2024-04-10 18:20:08 +01:00
Sean Perkins
fb445322c3 Merge remote-tracking branch 'origin/feature-8.1' into sp/sync-next-with-feature-8-1-04-09 2024-04-09 15:02:05 -04:00
Shawn Taylor
90a7e70a1c feat(content): add fixedSlotPlacement prop (#29233)
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. -->
Content in the `fixed` slot is always placed after the main content in
the DOM.

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

- A new `fixedSlotPlacement` prop on Content allows developers to place
fixed content either before or after the main content in the DOM

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

Dev build: `8.0.0-dev.11712072527.1dd97c66`

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

⚠️This feature will not be part of the v8.0 release. As a result, do not
merge this into `feature-8.0`. However, I am putting this PR up based
off `feature-8.0` so it can get reviewed by the team.

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-04-03 13:48:03 -04:00
Liam DeBeasi
0f5d1c02d2 feat(input): add clearInputIcon property (#29246)
Issue number: resolves #26974

---------

<!-- 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 https://github.com/ionic-team/ionic-framework/pull/26354 we updated
the clear icon to use an ionicon instead of an hardcoded SVG. This has
made it challenging to customize the icon.

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

- Added `clearInputIcon` property to allow developers to customize the
ionicon used.

## 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. -->
2024-04-03 13:48:03 -04:00
Brandy Carney
e9654436a6 feat(input): add the large size for the ionic theme (#29249)
Issue number: internal

---------

## What is the current behavior?
Input does not have a size property.

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

- Adds the `size` property with support for the `"large"` size on the
`"ionic"` theme only
- Adds tests for the size property
- Note: the screenshots will not look right until the fill styles are
added

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
2024-04-03 11:19:09 -04:00
Sean Perkins
7cfee535ac chore(angular): update component wrappers output 2024-03-27 00:15:06 -04:00
Sean Perkins
167e311474 Merge remote-tracking branch 'origin/feature-8.0' into sp/sync-next-03-27 2024-03-27 00:13:38 -04:00
Liam DeBeasi
6c500fd6b2 feat(input): add input-password-toggle component (#29175)
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 given a password input it is hard to know what users are typing as
the contents of the input are obscured. As a result, it is a common
pattern to have a button that lets users temporarily toggle the
visibility of the password so they can correct any mistakes. Ionic
currently has the infrastructure for developers to implement this on
their own, but this use case is so common that the team thinks it is
worth having this functionality built-in to Ionic.

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

- Introduces the `ion-input-password-toggle` component. This component
is a button that toggles the visibility of the text in the input it is
slotted into.

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


⚠️ Give co-author credit to
https://github.com/ionic-team/ionic-framework/pull/29141 on merge.

Docs PR: https://github.com/ionic-team/ionic-docs/pull/3541

Note: We did not do the approach listed in the other PR due to
https://github.com/ionic-team/ionic-framework/pull/29141#discussion_r1523631811.

---------

Co-authored-by: OS-giulianasilva <OS-giulianasilva@users.noreply.github.com>
2024-03-25 13:22:06 -04:00
Sean Perkins
245a5c6f23 Merge remote-tracking branch 'origin/feature-8.0' into sp/sync-next-with-v8 2024-03-20 21:05:35 -04:00
Liam DeBeasi
b0a10dfa56 fix(angular): schematics account for new theme files (#29185)
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. -->

While doing other work I noticed that the Angular schematics still
reference the old dark theme.

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

- The Angular schematics now import the new dark theme found in Ionic
v8.
## 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. -->
2024-03-20 14:02:32 -04:00
Sean Perkins
284eb8ecaf feat: add ionic theme architecture (#29132)
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. -->

Adds the base architecture to add a new theme configuration to Ionic
Framework components.
- Components can now specify an additional stylesheet for the `ionic`
theme.
- Developers can specify the `theme` and `mode` independently to control
look and feel of a component.

Test infrastructure has been updated to add support for testing the
theme configuration with Playwright.
- Existing `themes` test configuration has been renamed to `palettes`

This PR is just the initial effort to decouple Ionic's architecture to
separate look and feel and allow our dev team to start introducing the
new component appearance to the UI. There will be additional changes
required to completely add support for the Ionic theme. These changes
are targeted against the `next` branch and are not expected to be used
in a production environment at this time.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

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

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
2024-03-18 15:45:01 -04:00
Liam DeBeasi
5577d3866f refactor(angular): remove angular 14 and 15 dependencies (#29169)
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. -->

With Ionic 8 we are dropping Angular 14 and 15 support.

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

- This PR officially drops Angular 14 and 15 support.
Note: The work to do this was done a while ago, but this branch was
never merged into `feature-8.0`. The breaking change was already noted
in the breaking change guide, so this is not an additional breaking
change on top of what was already specified.


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


## 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: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
2024-03-15 21:47:04 -04:00
Liam DeBeasi
ff7fa0b2e2 chore: sync with main 2024-03-13 10:21:01 -04:00
Liam DeBeasi
743f517fec refactor(item): remove deprecated apis (#29102)
BREAKING CHANGE:

- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
2024-03-07 11:37:40 +00:00
Liam DeBeasi
a0a77f799d feat(searchbar): autocapitalize, dir, lang, maxlength, and minlength are inherited to native input (#29098)
Issue number: resolves #27606

---------

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

Certain attributes are not be inherited to the inner searchbar.
Developers need control over these attributes to provide important
context to users for things like language and text direction.
Additionally, being able to control things like autocapitalize,
maxlength, and minlength can help improve the user experience by a)
guiding what should be entered into an input and b) removing
autocapitalize where it's not appropriate.

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

- Added autocapitalize, maxlength, and minlength properties
- lang and dir are global attributes, so adding them as properties will
cause issues. However, developers can still set them as attributes and
they will be inherited to the native `input` element. We also watch them
so any changes to the attributes are also inherited to the native
`input`.

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

Note: We expanded the scope of this work to also include input and
textarea, and this work will be handled separately. However, the
original request was only for searchbar so that's why I associated this
PR with the linked issue.

Dev build: `7.7.3-dev.11709159644.114cd8b1`
2024-03-01 17:12:05 -05:00
Shawn Taylor
7cdbc1b5ad feat(datetime): formatOptions property for Datetime (#29065)
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 Datetime header, Datetime time button, and Datetime Button have
default date formatting that cannot be set by the developer.

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

- The developer can customize the date and time formatting for the
Datetime header and time button
- The developer can customize the date and time formatting for the
Datetime Button
- A warning will appear in the console if they try to provide a time
zone (the time zone will not get used)
- A warning will be logged if they do not include the date or time
object for formatOptions as needed for the presentation of the Datetime

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

These changes have been reviewed in #29009 and #29059. This PR just adds
them to the feature branch now that the separate tickets are complete.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-02-22 12:45:47 -05:00
Sean Perkins
308f396389 refactor(angular): apply range to numeric value accessor (#29029)
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 ticket describes renaming `TextValueAccessorDirective` since
`ion-range` is not a text-based control, however I think this was an
incorrect assumption made during the original implementation.

`ion-range` is a numeric based value accessor (either as a single number
or an object accepting a numeric start/end value).

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

- Migrates the usage of `ion-range` value accessor implementation to the
`NumericValueAccessorDirective`
- Adds tests for validating the value accessor is functioning as
expected

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

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

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
2024-02-15 17:39:26 -05:00
Liam DeBeasi
58c795f315 refactor(range): remove legacy property and support for legacy syntax (#29040)
BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed from range. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
2024-02-15 12:06:08 -05:00
Liam DeBeasi
fb5ae5b07f refactor(checkbox): remove legacy property and support for legacy syntax (#29043)
BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
2024-02-14 12:49:50 -05:00
Sean Perkins
6baf005da5 feat(angular): remove IonBackButtonDelegate (#29030)
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. -->

We currently export two versions of the `ion-back-button` angular
implementation: `IonBackButton` and `IonBackButtonDelegate`.

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

- Removes `IonBackButtonDelegate` in favor of `IonBackButton`

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

- The `IonBackButtonDelegate` class has been removed in favor of
`IonBackButton`.

  ```diff
  - import { IonBackButtonDelegate } from '@ionic/angular';
  + import { IonBackButton } from '@ionic/angular';
  ```



## 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-02-13 20:44:26 -05:00
Liam DeBeasi
58d7315802 refactor(radio): remove legacy property and support for legacy syntax (#29038)
BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed from radio. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
2024-02-13 17:59:09 -05:00
Liam DeBeasi
c72ecedc09 refactor(toggle): remove legacy property and support for legacy syntax (#29037)
BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed from toggle. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).
2024-02-13 17:30:17 -05:00
Brandy Carney
6bd446f681 refactor(select): remove legacy property and support for legacy syntax (#29024)
Issue number: internal

---------

## What is the current behavior?

In Ionic Framework v7, we [simplified the select
syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax)
so that it was no longer required to be placed inside of an `ion-item`.
We maintained backwards compatibility by adding a `legacy` property
which allowed it to continue to be styled properly when written in the
following way:

```html
<ion-item>
  <ion-label>Label</ion-label>
  <ion-select></ion-select>
</ion-item>
```

While this was supported in v7, console warnings were logged to notify
developers that they needed to update this syntax for the best
accessibility experience.

## What is the new behavior?

- Removes the `legacy` property and support for the legacy syntax.
Developers should follow the [migration
guide](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
in the select documentation to update their apps. The new syntax
requires a `label` or `aria-label` on `ion-select`:
    ```html
    <ion-item>
      <ion-select label="Label"></ion-select>
    </ion-item>
    ```
- Removes the legacy tests under under `select/test/legacy/` and all
related screenshots
- Removes the select usage from `item/test/disabled`,
`item/test/legacy/alignment`, and `item/test/legacy/disabled` and all
related screenshots if the test was removed

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

1. Developers have had console warnings when using the legacy syntax
since the v7 release. The migration guide for the new select syntax is
outlined in the [Select
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
2. This change has been documented in the Breaking Changes document with
a link to the migration guide.

BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved
placing an `ion-select` inside of an `ion-item` with an `ion-label`,
have been removed from select. For more information on migrating from
the legacy select syntax, refer to the [Select
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2024-02-13 13:15:24 -05:00