-
Notifications
You must be signed in to change notification settings - Fork 376
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
feat: create own element for asterisk and add class in vue vanilla controlWrapper #2274
feat: create own element for asterisk and add class in vue vanilla controlWrapper #2274
Conversation
✅ Deploy Preview for jsonforms-examples ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @davewwww , thanks for your contribution!
The linter complains about the ocde not being formatted as expected. I left a comment about the location of the new tests. please have a look.
In #2238, there is a suggestion to add the asterisk via CSS to be able to customize the *
itself. Did you consider that?
yes, i read that suggestion too. but i thought it would make sense to solve this "add class" issue here at first and then solve the other one in a separate pr. Or do you have another suggestion? |
We can do a mix of these:
|
you mean something like that?: <label :for="id + '-input'" :class="[styles.control.label, required ? styles.control.required : '']">
{{ label }}
<span v-if="showAsterisk" :class="styles.control.asterisk">*</span>
</label> |
Looks good to me. What do you think @lucas-koehler? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It doesn't need both an label.required::after {
color: red;
padding-left: 5px;
content: "*"
} Here the |
Hi @vanillajonathan , thanks for the insight. We opted for having the required class and rendering an asterisk for the following reasons outlined by @sdirix above:
|
But now the textual asterisk cannot be changed to a asterisk icon, nor can it be changed to a text string indicating it is required, or use the https://getbootstrap.com/docs/5.3/examples/checkout/ Having a textual asterisk within an element is not so flexible as opposed to add it with the |
you can hide the textual asterisk and add your changes to the pseudo after element at the label .control > label .asterisk {
display: none;
}
.control > label:not(.required):after {
content: ' (optional)';
color: gray;
}
.control > label.required:after {
content: '*';
color: red;
} |
regarding issue #2238