fix(label): allow signposts inside labels #937
Conversation
|
👋 @dtsanevmw,
Thank you, 🤖 Clarity Release Bot |
dtsanevmw
force-pushed
the
dtsanevmw/cde-9
branch
3 times, most recently
from
67ec79b
to
bc86de3
Compare
dtsanevmw
force-pushed
the
dtsanevmw/cde-9
branch
from
bc86de3
to
2c719c3
Compare
| */ | ||
| @HostListener('click', ['$event']) | ||
| onClick(event) { | ||
| if (event.target.hasAttribute('clrSignpostTrigger')) { |
There was a problem hiding this comment.
Can you add unit tests to validate both branches here (if and else)?
There was a problem hiding this comment.
Added in f9c41c0. Thanks!
There was a problem hiding this comment.
This doesn't catch all instances and leads to some odd behavior.
- Clicking inside the signpost when opened will cause it to close. The signpost should be able to receive focus and stay open.
- The events within the signpost (close button, click in signpost-content) still bubble up to the label and are not defaulted. I would assume that since clicking the icon itself doesn't bubble up and cause the input/control to be selected, the behavior would be the same for clicking within the signpost itself.
There was a problem hiding this comment.
I added a more strict check to prevent that. Actually the click events were still coming from the label due to the condition not being met. So when you click inside the signpost it's again in the label and label is spreading that to the button inside signpost which is closing it.
There was a problem hiding this comment.
Much better UX now. Thanks for updating.
dtsanevmw
force-pushed
the
dtsanevmw/cde-9
branch
from
7499f97
to
010bb33
Compare
dtsanevmw
force-pushed
the
dtsanevmw/cde-9
branch
from
010bb33
to
4d5c056
Compare
| @@ -8,7 +8,13 @@ <h1>Angular - {{layout}} - {{ labelSize ? 'grid' : 'no grid' }}</h1> | |||
|
|
|||
| <form clrForm [clrLayout]="layout" [clrLabelSize]="labelSize"> | |||
| <clr-checkbox-container> | |||
| <label>Checkbox</label> | |||
| <label | |||
There was a problem hiding this comment.
Hovering over the signpost or label when the checkbox/radio label causes the close icon to switch to a darker color. This change doesn't apply to the other labels (input, date picker, select, etc). They should be consistent.
Not-hovered:
Hovered:
|
Will wait the popover refactor #1435 to be merged |
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Currently if you put signposts inside labels they are not working due to that
<label>be default is spreading a click event to its children and that's causing the signpost to automatically close and not appear.Example:
If you have a label attached to an input or input inside a label and click the label - the input will get focused.
Issue Number: CDE-9 and #271
What is the new behavior?
Signposts are now working inside
<label>.Does this PR introduce a breaking change?
Other information