Skip to content
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

Merged
merged 3 commits into from
Feb 12, 2024

Conversation

davewwww
Copy link
Contributor

@davewwww davewwww commented Feb 9, 2024

regarding issue #2238

Copy link

netlify bot commented Feb 9, 2024

Deploy Preview for jsonforms-examples ready!

Name Link
🔨 Latest commit c96bf62
🔍 Latest deploy log https://app.netlify.com/sites/jsonforms-examples/deploys/65c9f109ffcf0b00089ad81d
😎 Deploy Preview https://deploy-preview-2274--jsonforms-examples.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

@lucas-koehler lucas-koehler left a 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?

@davewwww
Copy link
Contributor Author

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?

@sdirix
Copy link
Member

sdirix commented Feb 12, 2024

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.

@davewwww
Copy link
Contributor Author

davewwww commented Feb 12, 2024

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>

@sdirix
Copy link
Member

sdirix commented Feb 12, 2024

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?

@coveralls
Copy link

Coverage Status

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

Copy link
Contributor

@lucas-koehler lucas-koehler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM now! Thanks @davewwww for the updates and @sdirix for the insights :)

@lucas-koehler lucas-koehler linked an issue Feb 12, 2024 that may be closed by this pull request
@lucas-koehler lucas-koehler merged commit 2e1854d into eclipsesource:master Feb 12, 2024
8 checks passed
@davewwww davewwww deleted the feat/class-for-required branch February 12, 2024 15:02
@vanillajonathan
Copy link

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

@lucas-koehler
Copy link
Contributor

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.

@vanillajonathan
Copy link

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.

@davewwww
Copy link
Contributor Author

davewwww commented Feb 13, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a required class to labels
5 participants