Skip to content

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Mar 19, 2025

Issue number: internal


What is the new behavior?

  • Splits the common and native stylesheets
  • Removes the --text-color-invalid variable so the customization across components and themes for helper & error text is consistent.
  • Sets the color of the helper text when valid to --highlight-color-valid to ensure customization works the same as invalid

Does this introduce a breaking change?

  • Yes
  • No

This theme is not released yet so it is not a breaking change to remove CSS variables.

Other information

Preview

@vercel
Copy link

vercel bot commented Mar 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 25, 2025 2:22pm

@github-actions github-actions bot added the package: core @ionic/core package label Mar 19, 2025
@brandyscarney brandyscarney changed the title refactor(input): remove extra css variable --text-color-invalid refactor(input): remove extra css variable in ionic theme Mar 19, 2025
@brandyscarney brandyscarney changed the base branch from FW-6389 to next March 20, 2025 15:05
}

:host(.ion-touched.ion-invalid) .error-text {
color: var(--text-color-invalid);
Copy link
Member Author

Choose a reason for hiding this comment

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

This code can be removed because the common file has this:

.input-bottom .error-text {
  color: var(--highlight-color-invalid);
}

@brandyscarney brandyscarney changed the title refactor(input): remove extra css variable in ionic theme fix(input): remove extra css variable in ionic theme and update helper text to use valid highlight Mar 20, 2025
Copy link
Member Author

Choose a reason for hiding this comment

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

This is expected because I removed the 5px padding top from the helper/error text which is not in the Figma design

Copy link
Member Author

Choose a reason for hiding this comment

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

This is expected because I removed the 5px padding top from the helper/error text which is not in the Figma design

Copy link
Member Author

Choose a reason for hiding this comment

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

I updated the helper text to use the --highlight-color-valid which follows how customizing the invalid color works.

@brandyscarney brandyscarney marked this pull request as ready for review March 20, 2025 19:59
@brandyscarney brandyscarney requested a review from a team as a code owner March 20, 2025 19:59
@brandyscarney brandyscarney changed the title fix(input): remove extra css variable in ionic theme and update helper text to use valid highlight fix(input): remove css variable and update helper text to use valid highlight in ionic theme Mar 20, 2025
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

@brandyscarney brandyscarney merged commit 7f23c60 into next Mar 25, 2025
48 checks passed
@brandyscarney brandyscarney deleted the FW-6389-input branch March 25, 2025 14:46
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