Files
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
..
2024-03-19 14:24:51 -04:00
2024-03-20 10:43:06 -04:00
2024-03-20 14:36:07 +00:00

@ionic/react

These are React specific building blocks on top of @ionic/core components/services.

To get started, install the Ionic CLI by running npm i -g @ionic/cli. Then, start a new Ionic React Project by running ionic start myapp --type=react.

Publishing a Native Application

You can now make use of all of the ionic components in your React application. If you want to publish your app to the App Store or Google Play you will need to use the ionic cli to execute Capacitor commands to do so.

More information on this can be found here. https://ionicframework.com/docs/cli If you want to learn more about Capacitor our dedicated site can be found here. https://capacitor.ionicframework.com/

The commands that you will need to execute are below in your project's root.

ionic init "My React App" --type=react
ionic integrations enable capacitor

Then run the following command to get started with either ios or android platforms.

ionic capacitor add <android|ios>

After build you build your app you will need to copy your capacitor resources into the build dir so execute the following command.

ionic capacitor copy

To open your application to build/emulate in Android Studio or Xcode run the open command.

ionic capacitor open <android|ios>

License