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?

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?

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:

• I think it's fine to textually add the asterisk as we don't want to enforce CSS specifics
• However the whole label should get a required CSS class set if we determine that it's required. This way consumers can style the label with CSS if they want to, including hiding the textual asterisk if they don't like it.

We can do a mix of these:

• I think it's fine to textually add the asterisk as we don't want to enforce CSS specifics
• However the whole label should get a required CSS class set if we determine that it's required. This way consumers can style the label with CSS if they want to, including hiding the textual asterisk if they don't like it.

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>

We can do a mix of these:

• I think it's fine to textually add the asterisk as we don't want to enforce CSS specifics
• However the whole label should get a required CSS class set if we determine that it's required. This way consumers can style the label with CSS if they want to, including hiding the textual asterisk if they don't like it.

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?

coverage: 84.796%. remained the same
when pulling c96bf62 on davewwww:feat/class-for-required
into 5c6806f on eclipsesource:master.

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 asterisk and required class, just required is fine, then you can add an asterisk with CSS.

label.required::after {
  color: red;
  padding-left: 5px;
  content: "*"
}

Here the content attribute is set to "*" but it could also be changed to "(required)" or translated to some other language or changed to use an asterisk icon instead such as:
https://icons.getbootstrap.com/icons/asterisk/
https://fontawesome.com/icons/asterisk

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:

• I think it's fine to textually add the asterisk as we don't want to enforce CSS specifics
• However the whole label should get a required CSS class set if we determine that it's required. This way consumers can style the label with CSS if they want to, including hiding the textual asterisk if they don't like it.

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 :not CSS pseudo-class to have non-required fields marked as "optional".

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 content attribute using CSS.

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;
}