-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
bug: helper-text and error-text styling inconsistencies #26737
Comments
Thanks for testing Ionic 7! There are multiple issues here, so I summarized them below:
This is a bug and is fixed in #26739. I updated the helper text color to match the counter text color.
This is also a bug and is fixed in #26739. We now treat empty string values as not having helper/error text.
This is the intended behavior since the helper/error text features have been moved onto
This will be added in ionic-team/ionic-docs#2759.
This is a bug in our documentation website and will be fixed soon. Our automatic scripts only pull in the latest version of Ionic, so we need to update it to handle multiple versions. |
This is also a little weird, though, as it removes the line under the input such that I no longer have a line (which makes sense, but isn't really what I want): It does look nicer than having the double lines when I show the error: But ideally I would have a way to:
For example, perhaps leaving I can kinda do that by not putting the That mostly works with the error message (though it is weirdly indented): But I don't seem to be able to find a good way to keep the |
I'm not sure I understand this:
You can use (There is a height difference here, but that is because we fixed a sizing bug in v7)
The helper text is supposed to be indented when using |
Status update:
I have verified that these bits are fixed.
As per our internal calls, the aesthetic is off when the input is in an item as |
The final concern was discussed offline. The use case Ken had did not need a list, so moving the Going to close this since all concerns have been addressed, but let me know if there are any other questions. |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Prerequisites
Ionic Framework Version
Current Behavior
Comparing the new
error-text
andhelper-text
in v7 to the slottedion-notes
used in v6 there are some important differences in how they render. These are:ion-item
in anion-list
, then an extra line is displayed under the error text, and this line does not go away if the error text goes awayExpected Behavior
error-text
orhelper-text
when the input is used in anion-list
based form within anion-item
error-text
andhelper-text
error-text
,helper-text
,label
, andlabel-placement
should all be fully documented in theproperties
area where they currently are not listedSteps to Reproduce
Show Error
buttonReset
buttonShow Helper
Code Reproduction URL
https://github.com/kensodemann/test-error-text
Ionic Info
[0] % ionic info
Ionic:
Ionic CLI : 6.20.8 (/Users/ken/.volta/tools/image/packages/@ionic/cli/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.0.0-beta.1
Capacitor:
Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3
Utility:
cordova-res : 0.15.4
native-run : 1.7.1
System:
NodeJS : v18.12.1 (/Users/ken/.volta/tools/image/node/18.12.1/bin/node)
npm : 9.2.0
OS : macOS
Additional Information
No response
The text was updated successfully, but these errors were encountered: