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

bug: helper-text and error-text styling inconsistencies #26737

Closed
4 of 8 tasks
kensodemann opened this issue Feb 5, 2023 · 6 comments
Closed
4 of 8 tasks

bug: helper-text and error-text styling inconsistencies #26737

kensodemann opened this issue Feb 5, 2023 · 6 comments
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@kensodemann
Copy link
Member

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • v7.x
  • Nightly

Current Behavior

Comparing the new error-text and helper-text in v7 to the slotted ion-notes used in v6 there are some important differences in how they render. These are:

  1. In v6, the slotted helper text rendered with a lighter color than with v7
  2. In v7, if the input is within an ion-item in an ion-list, then an extra line is displayed under the error text, and this line does not go away if the error text goes away

Expected Behavior

  1. There should be no extra line rendered under the error-text or helper-text when the input is used in an ion-list based form within an ion-item
  2. Docs should exist on styling the error-text and helper-text
  3. The error-text, helper-text, label, and label-placement should all be fully documented in the properties area where they currently are not listed

Steps to Reproduce

  1. Grab the code repo from the URL provided.
  2. Click the Show Error button
  3. Note the extra line under the "New Hotness" - ideally this would not be here
  4. Click the Reset button
  5. Note that there are no longer any messages, but that extra line stays around
  6. Reload the page
  7. Click Show Helper
  8. Note the extra line under the "New Hotness" again - ideally this would not be here
  9. Note also the lighter text with the old way - this is cool so long as there is a way to style the helper-text. If there is, it is not currently obvious from the docs.

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

@liamdebeasi
Copy link
Contributor

Thanks for testing Ionic 7! There are multiple issues here, so I summarized them below:

In v6, the slotted helper text rendered with a lighter color than with v7

This is a bug and is fixed in #26739. I updated the helper text color to match the counter text color.

In v7, if the input is within an ion-item in an ion-list, then an extra line is displayed under the error text, and this line does not go away if the error text goes away

This is also a bug and is fixed in #26739. We now treat empty string values as not having helper/error text.

There should be no extra line rendered under the error-text or helper-text when the input is used in an ion-list based form within an ion-item

This is the intended behavior since the helper/error text features have been moved onto ion-input. You can remove this line using lines="none" on ion-item: https://ionicframework.com/docs/api/item#item-lines

Docs should exist on styling the error-text and helper-text

This will be added in ionic-team/ionic-docs#2759.

The error-text, helper-text, label, and label-placement should all be fully documented in the properties area where they currently are not listed

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.

@liamdebeasi liamdebeasi removed their assignment Feb 6, 2023
@kensodemann
Copy link
Member Author

This is the intended behavior since the helper/error text features have been moved onto ion-input. You can remove this line using lines="none" on ion-item: https://ionicframework.com/docs/api/item#item-lines

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):

Screenshot 2023-02-06 at 8 47 11 AM

It does look nicer than having the double lines when I show the error:

Screenshot 2023-02-06 at 8 47 44 AM

But ideally I would have a way to:

  1. Show the line like normal when I have an input as part of a list-based form?
  2. Display the error text without the extra line?

For example, perhaps leaving lines="none" on the ion-item, telling the ion-input that it should have a line on the bottom, and then not rendering an extra line 🤷‍♂️

I can kinda do that by not putting the ion-input in an ion-list -> ion-item -> ion-input type structure and then using fill=solid:

Screenshot 2023-02-06 at 9 07 23 AM

That mostly works with the error message (though it is weirdly indented):

Screenshot 2023-02-06 at 9 07 53 AM

But I don't seem to be able to find a good way to keep the ion-list -> ion-item -> ion-input structure in a form, still have the lines between the inputs, but not have an extra line when displaying helper-text or error-text.

@liamdebeasi
Copy link
Contributor

I'm not sure I understand this:

still have the lines between the inputs, but not have an extra line when displaying helper-text or error-text.

You can use lines="none" to accomplish this. This provides the same layout as what you are getting now in Ionic v6: https://codepen.io/liamdebeasi/pen/abjxPmb?editors=1010

(There is a height difference here, but that is because we fixed a sizing bug in v7)

That mostly works with the error message (though it is weirdly indented):

The helper text is supposed to be indented when using fill="solid" to align with the MD spec. Additionally, the fill styles define the input containers so you should not use those in a list view with ion-item. See https://ionicframework.com/docs/v7/api/input#filled-inputs

@kensodemann
Copy link
Member Author

Status update:

In v6, the slotted helper text rendered with a lighter color than with v7

This is a bug and is fixed in #26739. I updated the helper text color to match the counter text color.

In v7, if the input is within an ion-item in an ion-list, then an extra line is displayed under the error text, and this line does not go away if the error text goes away

This is also a bug and is fixed in #26739. We now treat empty string values as not having helper/error text.

I have verified that these bits are fixed.

There should be no extra line rendered under the error-text or helper-text when the input is used in an ion-list based form within an ion-item

This is the intended behavior since the helper/error text features have been moved onto ion-input. You can remove this line using lines="none" on ion-item: https://ionicframework.com/docs/api/item#item-lines

As per our internal calls, the aesthetic is off when the input is in an item as lines="none" does not provide clear indication of an input and the double line is not desired when not using lines="none". This still being worked on, so I will leave this issue open.

@liamdebeasi
Copy link
Contributor

The final concern was discussed offline. The use case Ken had did not need a list, so moving the ion-input outside of the list view and not removing/unsetting the error text resolved the issue.

Going to close this since all concerns have been addressed, but let me know if there are any other questions.

@ionitron-bot
Copy link

ionitron-bot bot commented Apr 8, 2023

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

No branches or pull requests

2 participants