Skip to content
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.

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

feat(input): add labelPlacement #26206

Merged
merged 68 commits into from
Nov 8, 2022
Merged

feat(input): add labelPlacement #26206

merged 68 commits into from
Nov 8, 2022

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