Skip to content

fix(input): clear icon can be styled #26354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 5 commits into from
Nov 23, 2022
Merged

fix(input): clear icon can be styled #26354

merged 5 commits into from
Nov 23, 2022
+22 −33

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Nov 23, 2022 •
edited
Loading

⚠️ Give co-author credit to https://github.com/Mathieu-COSYNS on merge.

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue URL: resolves #17168, resolves #19178

What is the new behavior?

  • The clear button in ion-input is now rendered as an ion-icon instead of as an SVG background image.

I chose circleOutline for iOS and circleSharp for MD to align with the clear icons used in ion-searchbar:

ionic-framework/core/src/components/searchbar/searchbar.tsx

Line 456 in 4b501fd

const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);

Does this introduce a breaking change?

  • Yes
  • No

Other information

Sorry, something went wrong.

@liamdebeasi
fix(input): clear icon uses ionicon

Verified

This commit was signed with the committer’s verified signature. The key has expired.
LnL7 Daiderd Jordan
GPG key ID: D02435D05B810C96
Expired
Verified
Learn about vigilant mode
a6af410
@github-actions github-actions bot added the package: core @ionic/core package label Nov 23, 2022
@liamdebeasi
chore(): force remove screenshots

Verified

This commit was signed with the committer’s verified signature. The key has expired.
LnL7 Daiderd Jordan
GPG key ID: D02435D05B810C96
Expired
Verified
Learn about vigilant mode
ad56651
@liamdebeasi liamdebeasi mentioned this pull request Nov 23, 2022
Closed
13 tasks
liamdebeasi and others added 3 commits November 23, 2022 16:40
@liamdebeasi
fix(input): use closeSharp to align with searchbar

Verified

This commit was signed with the committer’s verified signature. The key has expired.
LnL7 Daiderd Jordan
GPG key ID: D02435D05B810C96
Expired
Verified
Learn about vigilant mode
032665a
@Ionitron
chore(): add updated snapshots

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
02dea41
@liamdebeasi
Merge branch 'main' into FW-2897
63c85b9
@liamdebeasi liamdebeasi marked this pull request as ready for review November 23, 2022 17:04
@liamdebeasi liamdebeasi requested a review from a team as a code owner November 23, 2022 17:04
@liamdebeasi liamdebeasi changed the title fix(input): clear icon uses ionicon fix(input): clear icon can be styled Nov 23, 2022
@liamdebeasi liamdebeasi merged commit ccaff8d into main Nov 23, 2022
This was referenced Nov 23, 2022
Closed
Closed
@liamdebeasi liamdebeasi deleted the FW-2897 branch November 23, 2022 18:02
@Spinnenzunge Spinnenzunge mentioned this pull request Mar 16, 2023
Closed
3 tasks
@liamdebeasi liamdebeasi mentioned this pull request Apr 1, 2024
Merged
2 tasks
liamdebeasi added a commit that referenced this pull request Apr 2, 2024
@liamdebeasi
feat(input): add clearInputIcon property (#29246)
59b72f4 
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 #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. -->
liamdebeasi added a commit that referenced this pull request Apr 3, 2024
@liamdebeasi
feat(input): add clearInputIcon property (#29246)
0f5d1c0 
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 #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. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sean-perkins sean-perkins

Assignees
No one assigned
Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
3 participants
@liamdebeasi @sean-perkins @Ionitron