Skip to content

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Nov 1, 2022

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: N/A

With the new input control, developers need a way of placing the label similar to how they could using position on ion-label.

What is the new behavior?

  • Adds support for positioning the label at the start, end, floating, fixed, and stacked. Floating, fixed, and stacked have the same behavior as the position property on ion-label. start and end should have similar behavior as slot on ion-item (though may look slightly different due to ion-input not having a bottom border by default).
  • Fixes bug: floating label is not centered in input on ios mode #20153 due to the label logic being contained within ion-input.
  • Fixes an additional issue I noticed where inputs only had the correct height per platform when used inside of ion-item (56px for MD and 44px for iOS). I added min-heights to ion-input so inputs would have the correct dimensions even when used outside of ion-item.
  • Updated a11y tests to verify that FW-339 is resolved.

Note: The --padding-* variables have been revised in this PR. These variables were originally needed so that the correct padding was set when used inside of ion-item as ion-item adds its own padding. Now that inputs can be used outside of ion-item the padding was no longer needed so I set these to 0. The new ion-input syntax should have no opinions about spacing around the input to allow developers more flexibility in how to use these inputs (in a list, in a grid, etc). Additionally, the padding now targets the element that wraps the label and the input instead of just the input.

Does this introduce a breaking change?

  • Yes
  • No

Other information

liamdebeasi and others added 30 commits October 31, 2022 15:38
@liamdebeasi liamdebeasi requested a review from a team as a code owner November 2, 2022 17:36
Base automatically changed from 2591-counter to FW-2591 November 7, 2022 21:42
@liamdebeasi liamdebeasi merged commit 98c08c0 into FW-2591 Nov 8, 2022
@liamdebeasi liamdebeasi deleted the 2591-placement branch November 8, 2022 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants