Calcite-components: Bug: calcite-combobox: long strings arent formatted correctly

[kevindoshier]

Actual Behavior

calcite-combobox: long strings arent formatted correctly

Expected Behavior

Shouldnt mess up the formatting of the combobox

Reproduction Steps or Sample

1.

Relevant Info

_Version_: @esri/calcite-components@<version>

• [ ] CDN
• [ ] NPM package

[driskull]

@julio8a who would this be for?

[julio8a]

Does this look like this might be part of refactoring? @caripizza

If it is, we should add it to that refactor epic.

[driskull]

I think we should elevate this, mapviewer can't use this for layer selector until this is fixed. @julio8a @jcfranco @caripizza

[jcfranco]

@driskull @kevindoshier It's not quite clear to me from the screenshot, but does this codepen represent the issue? https://codepen.io/jcfranco/pen/YzZOXNp?editors=1000

[driskull]

@jcfranco yes but also when the selection mode is single

[jcfranco]

Got it. Thanks for the info. Adding it to this sprint as help wanted. cc @caripizza

[driskull]

I think a designer needs to take this issue since it's mostly a design decision on what to do and then updating the SCSS.

[caripizza]

@kevindoshier @driskull Can you please add the code snippet that shows the issue? I'm having trouble replicating

[kevindoshier]

Doesnt this one reproduce it?

https://github.com/Esri/calcite-components/issues/2096#issuecomment-858050015

[caripizza]

Thanks @kevindoshier, I missed that comment. Can you add repro steps to the Description to help make it more clear? Or is this just a question of what it should look like when it's refactored to wrap?

[kevindoshier]

Its just about needing it to be styled correctly

[bstifle]

Couple of options for this:

[caripizza]

@driskull - I chatted with @bstifle about this just now. What if we just truncate the selected item's text label with ellipses ("...") if it's over 25 characters long?

private trimLabels = (textLabel, chars = 25) => {
  return textLabel.length > chars ? textLabel.substring(0, chars) + "..." : textLabel;
};

Here's what that looks like on master without any extra styles:

The list item would still show the full label text like so:

Here's the markup I used for these screenshots:

    <div style="width:350px;margin-left:1rem;">
      <h3>Multi</h3>
      <calcite-combobox
        label="demo combobox 1"
        selection-mode="multi"
        allow-custom-values
      >
        <calcite-combobox-item value="Trees" text-label="Trees">
          <calcite-combobox-item
            value="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
            text-label="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
            selected
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="Sequoia"
            disabled
            text-label="Sequoia"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="Douglas Fir"
            text-label="Douglas Fir"
          ></calcite-combobox-item>
        </calcite-combobox-item>
      </calcite-combobox>
    </div>

    <div style="width:350px;margin-left:1rem;">
      <h3>Ancestors</h3>
      <calcite-combobox
        label="demo combobox 2"
        selection-mode="ancestors"
        allow-custom-values
      >
        <calcite-combobox-item value="Trees" text-label="Trees">
          <calcite-combobox-item
            value="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
            text-label="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
            selected
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="Sequoia"
            disabled
            text-label="Sequoia"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="Douglas Fir"
            text-label="Douglas Fir"
          ></calcite-combobox-item>
        </calcite-combobox-item>
      </calcite-combobox>
    </div>

    <div style="width:350px;margin-left:1rem;">
      <h3>Single</h3>
      <calcite-combobox
        label="demo combobox 3"
        selection-mode="single"
        allow-custom-values
      >
        <calcite-combobox-item value="Trees" text-label="Trees">
          <calcite-combobox-item
            value="CommercialDamageAssessment - Damage to Commercial Buildings"
            text-label="CommercialDamageAssessment - Damage to Commercial Buildings"
            selected
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="Sequoia"
            disabled
            text-label="Sequoia"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="Douglas Fir"
            text-label="Douglas Fir"
          ></calcite-combobox-item>
        </calcite-combobox-item>
        <calcite-combobox-item
          value="Rivers"
          text-label="Rivers"
        ></calcite-combobox-item>
      </calcite-combobox>
    </div>

cc @macandcheese @bpatterson88

[driskull]

That sounds reasonable to me.

[driskull]

Maybe make this a domUtil as well?

export const truncate = (text: string, chars = 25) => {
  return text.length > chars ? text.substring(0, chars) + "…" : text;
};

[driskull]

@caripizza actually, can we just use CSS to do this? Seems like we can just use the truncate tailwind class and set a max-width on the tags and selected item?

[caripizza]

@driskull I think with just CSS, we'd have to make sure the chip's close button stays visible too. I prefer the domUtil approach, since many components could opt into this trim pattern.

[driskull]

I think we can do that with css still. The text already has a container inside the chip.

[caripizza]

@driskull can I assign this to you then? It sounds like you got it working

[driskull]

Sure, ill take a stab at it

[driskull]

Installed.

[julio8a]

Verified on master.