Skip to content

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Nov 7, 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?

Developers using the new input syntax do not have a way of using the Ionic theme to apply a particular theme to ion-input.

What is the new behavior?

  • Add support for using the color prop as per the design document

Does this introduce a breaking change?

  • Yes
  • No

Other information

liamdebeasi and others added 30 commits October 31, 2022 15:38
@github-actions github-actions bot added the package: core @ionic/core package label Nov 7, 2022
@liamdebeasi liamdebeasi marked this pull request as ready for review November 7, 2022 19:21
@liamdebeasi liamdebeasi requested a review from a team as a code owner November 7, 2022 19:21
Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few screenshot captures have the label cropped, e.g.:

  • core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Chrome-linux.png
  • core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Firefox-linux.png
  • core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Safari-linux.png
  • core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png

This is likely because the input bounding box does not contain the translated label for these displays.

@averyjohnston
Copy link
Contributor

I'm not seeing the colors when running the test locally on Chrome (screenshot), should I be?

@liamdebeasi
Copy link
Contributor Author

The colors only apply when focusing the input as per the MD spec: https://m2.material.io/components/text-fields

@liamdebeasi
Copy link
Contributor Author

@sean-perkins Do you want me to add top padding to the MD screenshots? I'm not sure how much additional information we would gain by adding it though.

@sean-perkins
Copy link
Contributor

I think we are good as-is, as long as the screenshot capture is consistent. We can re-evaluate in the future if it becomes a problem.

Base automatically changed from 2591-highlight to FW-2591 November 11, 2022 17:34
@liamdebeasi liamdebeasi merged commit 73a8826 into FW-2591 Nov 11, 2022
@liamdebeasi liamdebeasi deleted the 2591-color branch November 11, 2022 17:54
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