When changing the helper text to something more actionable (ie. “Mark as solution” vs “Solution”), I have recently discovered that both unaccepted and accepted answers use the same helper text and, by extension, icon. I was wondering if it would be possible to have separate states for when an answer hasn’t been accepted and when a response is marked as a solution, like this:
Button state when an answer has not been selected:
Button state on an accepted answer after it is selected.
I think users may benefit in seeing helper text that suggests an action than the default “Solution” text. When an answer is selected, it would be helpful to see some evident and feedback as a result of their selection.
Additionally, contextualized hover states may also be helpful in understanding what the button will do, rather than relying on the alt attribute from the browser, see examples below.
Accepting a solution:
Removing a previously selected answer:
Any plans on implementing interactions like these?
I’m adding a css solution in case this is found helpful.
With pseudo elements, at least the behavior for the text portion can be mimicked:
This code is a bit semantically nested, but it works. The text alignment would need to be changed or the button’s width fixed so that the target doesn’t jump around on hover.
It’s also possible to do this, which would result in the text “Select if this reply solves the problem,” which is too long but should respect language translations.
&:after {
content: attr(title);
}
Ideally, I would change the actual html to support translations, instead of using pseudo elements;
Except for the title attribute (if it was shorter), can be better than having a js hover listener.
I’m testing out this solution, and I have a question. When one is the original poster, there is an additional button label that is sent to the DOM Mark as solution which creates duplication with this solution. Do you have any suggestions on how to deal with this? Should I just hide the button label in the CSS?
I also noticed that there is not an easy way to left-align the buttons so that on hover they don’t jump. The only solution I’ve found is adding a width to the button, which is probably less than ideal given that it’s not a fixed-width element. Do you have any other suggestions for this by any chance?
It is best to combine both measures, because the button will jump indefinitely if the cursor stays at the end of a non-fixed element when the text changes.
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // adjusts button to left
.widget-button {
width: 200px; // set to value that covers max text
}
}
}
}
You could hide the hover background color and use a different approach to indicate hover if wanted.
Hey @tynaut, thanks for your help and input.
Is there a way we can change the <use href> property to change the icon for the different states (selected answer, on hover, etc.)?
