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. -->
For the `ionic` theme: Adjusted the size of the clear button to match
design specs, and updated the behavior so the button additionally only
shows if the native input *or* any other actions within the `ion-input`
are focused. (See code comments for details.)
The actual icon used has not been modified. The ticket says to "use the
material design clear icon as the reference icon for this feature," and
we've already added a feature allowing the icon to be customized at the
app level. Let me know if the intention was to use a different default
icon with 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. -->
---------
Co-authored-by: ionitron <hi@ionicframework.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. -->
Added styles for `shape="round"`, including:
- Increased border radius
- Increased padding when additionally using outline fill and large size
- Horizontal padding also applied to label when using outline fill
I also changed the `$ionic-border-radius-rounded-full` design token from
100% to 999px. `border-radius: 100%` is pretty obviously incorrect for
most browsers (screenshot taken in Chrome):
## 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>
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 ionic input does not have a hover state.
## What is the new behavior?
Adds a hover state.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
We do not currently have a way to test hover states. See
https://github.com/microsoft/playwright/issues/12077 for more
information.
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@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. -->
All changes are specific to the `ionic` theme.
- Styles added for `fill="outline"` plus `labelPlacement="stacked"`.
- Markup rearranged slightly to ensure label sits above outline while
still being clickable to focus the input. See code comments for details.
- The default `labelPlacement` is now `"stacked"`.
- Values for `labelPlacement` besides `"stacked"` and `"floating"`
cannot be used.
Note that per the ticket, I did not account for any other scope,
including styles for helper text, `labelPlacement="floating"`,
`shape="round"`, etc. This means that some states will look broken for
now, and will be addressed in future tickets.
## 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: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
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
Issue number: internal
---------
## What is the new behavior?
Adds the initial files for the Ionic input.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
