feat(checkbox): add helperText and errorText properties #30140
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
package: core
| } | ||
|
|
||
| :host(.checkbox-label-placement-stacked) .checkbox-bottom { | ||
| font-size: dynamic-font(16px); |
There was a problem hiding this comment.
I added this because without it the text is really small.
| @@ -260,6 +309,8 @@ input { | |||
| */ | |||
| :host(.checkbox-label-placement-stacked) .checkbox-wrapper { | |||
| flex-direction: column; | |||
|
|
|||
| text-align: center; | |||
There was a problem hiding this comment.
This text alignment change is necessary because without it the label is left aligned and when you change between helper/error text it jumps:
helper-stacked.mov
After my changes:
helper-stacked-fixed.mov
This issue does not exist without helper/error text.
There was a problem hiding this comment.
This makes sense to me. Everything is centered already so the supporting text should follow that.
| } | ||
|
|
||
| return ( | ||
| <div class="checkbox-bottom"> |
There was a problem hiding this comment.
The class checkbox-bottom doesn't make as much sense here since it's not on the bottom of the entire checkbox but it is under the label still and I named it this to remain consistent with input, textarea, etc.
| @@ -217,6 +224,8 @@ input { | |||
| */ | |||
| :host(.checkbox-label-placement-end) .checkbox-wrapper { | |||
| flex-direction: row-reverse; | |||
|
|
|||
| justify-content: start; | |||
There was a problem hiding this comment.
This might cause unwanted changes in some use cases, but this matches what is expected in the Figma design. Here is how it looks before and after this change with width: 100% on the checkbox:
| Before | After |
|---|---|
 |
 |
 |
 |
Because this changes the default behavior in an item, maybe we want to change this later and just recommend they set the justify property when using it with helper text? I am not sure, but it jumps around with the space-between default:
helper.mov
There was a problem hiding this comment.
@brandyscarney which Figma design are you referring to?
There was a problem hiding this comment.
@thetaPC I will send you a link
There was a problem hiding this comment.
After some review, I agree with these changes. It also seems like a fix so it's a win win.
| @@ -287,6 +298,46 @@ input { | |||
| @include transform-origin(center, top); | |||
| } | |||
|
|
|||
| // Justify Content | |||
There was a problem hiding this comment.
I didn't make changes to any of this code I just moved it lower so it would take priority over the justify-content I specified in label-placement-end.
| @@ -228,6 +287,7 @@ export class Checkbox implements ComponentInterface { | |||
| part="label" | |||
| > | |||
| <slot></slot> | |||
| {this.renderHintText()} | |||
There was a problem hiding this comment.
The text (helper or error) is being read twice by VoiceOver on Safari, Firefox, and Chrome. After some quick debugging, it seems that this happening because the text is inside of label. ion-input has it after the <label> which mimics how the native input states it.
Screen.Recording.2025-01-30.at.12.26.40.PM.mov
| @@ -228,6 +287,7 @@ export class Checkbox implements ComponentInterface { | |||
| part="label" | |||
| > | |||
| <slot></slot> | |||
| {this.renderHintText()} | |||
There was a problem hiding this comment.
I noticed that the focus with VoiceOver does not highlight correctly. This is happening on the main branch. We should consider creating a spike to fix it.
| configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { | ||
| test.describe(title('checkbox: helper text rendering'), () => { | ||
| // Check the default label placement, end, and stacked | ||
| [undefined, 'end', 'stacked'].forEach((labelPlacement) => { |
There was a problem hiding this comment.
What was the reasoning for not checking fixed?
| }); | ||
| }); | ||
|
|
||
| test.describe(title('checkbox: error text rendering'), () => { |
There was a problem hiding this comment.
Why does error text not get a check for the end placement?
Issue number: resolves #29810
What is the current behavior?
Checkbox does not support helper and error text.
What is the new behavior?
Adds support for helper and error text, similar to input and textarea.
Does this introduce a breaking change?
Other information