Preventing text selection on Label component

[seahindeniz]

Hi

The Label components text element is selectable right now. If this is not intentional, what do you think about adding user-select: none; to Label's primary element to prevent selection?

[coderitual]

Hey @seahindeniz , I think that labels' text should be selectable as it's mostly non interactive element which might be placed inide text content (it's inline element) and carries some information that user may wish to copy.

Some design systems disable user select on "actionable" components which are also block elements to prevent selecting unnecessary elements placed around commonly copied content (eg. buttons in text editors). The buttons could definitely be subjected to such a discussion, but this is a separate topic requiring planned action and cooperation of a designers.

What is your use case for that proposal?

[seahindeniz]

Hey

Well, I'm both agree with you and disagree depends on the case.

Let's say we have Checkbox inside of the Label component as icon like this

<label class="sg-label sg-label--transparent">
  <div class="sg-label__icon">
    <div class="sg-checkbox">
      <input class="sg-checkbox__element" type="checkbox" />
      <label class="sg-checkbox__ghost">
        <div class="sg-icon sg-icon--adaptive sg-icon--x16">
          <svg class="sg-icon__svg">
            <use xlink:href="#icon-check"></use>
          </svg>
        </div>
      </label>
    </div>
  </div>
  <span class="sg-label__text">
    <span class="sg-text sg-text--small sg-text--bold sg-text--no-wrap">
      Select All
    </span>
  </span>
</label>

This might not be a good way to use these two components but given the depreciation of the old Label(deprecated), I used the new Label component in the example and this is how it looks:

[coderitual]

Thanks for example @seahindeniz !

I think there are different areas to discuss.

1. Deprecation of label. It's definitely marked as deprecated but it doesn't mean that other components can't use it. In checkbox component it's still being used. Deprecation means that any new usage should be avoided (especially as a separate component). As long as checkbox is not marked that way, it's perfectly fine to use it.

2. The new label is a bit more specific than the older one but still very generic. Its usage is more similar to something like tag,chip etc. Usage of both components though is completely independent from the semantic of html label tag.

3. As far as I can see, the old label behaves pretty much the same way. I am not saying is a good or bad way but there are libraries following the same path as there are systems which prevents selection on that kind of input elements.

Having said that I think you made a really good point and definitely I will keep an eye on that topic but I would like to cover it in a more organic way that will also allow us to revise other "actionable" components.

For now my suggestion would be to use some utility class on specific components which would keep text selection from happening (if that is the requirement).