feat(chip): add getValue method that returns either the value or the …

…text content of the chip

docs(chip-removable): show custom remove event as an action in storybook

fix(menu-item): use textContent instead of innerText to avoid triggering a reflow

src/components/chip/ChipGroup.js

@@ -62,7 +62,7 @@ export class LeuChipGroup extends LeuElement {
   }
 
   get value() {
-    return this.items.filter((i) => i.checked).map((i) => i.value)
+    return this.items.filter((i) => i.checked).map((i) => i.getValue())
   }
 
   /**

src/components/chip/ChipRemovable.js

@@ -7,6 +7,7 @@ import { LeuIcon } from "../icon/Icon.js"
  * @slot - The content of the chip
  * @tagname leu-chip-removable
  * @fires remove - Dispatched when the user clicks on the chip
+ * @prop {string} value - The value of the chip.
  */
 export class LeuChipRemovable extends LeuChipBase {
   static dependencies = {
@@ -15,12 +16,29 @@ export class LeuChipRemovable extends LeuChipBase {
 
   static properties = {
     ...LeuChipBase.properties,
+    value: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super()
+    this.value = ""
+  }
+
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.textContent.trim()
   }
 
   handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
       bubbles: true,
       composed: true,
+      detail: {
+        value: this.getValue(),
+      },
     })
     this.dispatchEvent(customEvent)
   }

src/components/chip/ChipSelectable.js

@@ -43,6 +43,7 @@ export class LeuChipSelectable extends LeuChipBase {
      */
     this.variant = VARIANTS.toggle
     this.checked = false
+    this.value = ""
 
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant")
@@ -62,14 +63,25 @@ export class LeuChipSelectable extends LeuChipBase {
       this.checked = nextcheckedState
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { checked: this.checked },
+          detail: {
+            checked: this.checked,
+            value: this.getValue(),
+          },
           bubbles: true,
           composed: true,
         })
       )
     }
   }
 
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.textContent.trim()
+  }
+
   render() {
     return html`<button
       @click=${() => this.handleClick()}

src/components/chip/stories/chip-removable.stories.js

@@ -1,12 +1,14 @@
 import { html } from "lit"
+import { action } from "@storybook/addon-actions"
 
 import "../leu-chip-removable.js"
 
 export default {
   title: "Chip/Removable",
   component: "leu-chip-removable",
   args: {
-    label: "Publikationen",
+    label: "Daten",
+    onRemove: action("leu:remove"),
   },
   parameters: {
     design: {
@@ -27,7 +29,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-removable ?inverted=${args.inverted}
+      <leu-chip-removable
+        @leu:remove=${args.onRemove}
+        ?inverted=${args.inverted}
         >${args.label}</leu-chip-removable
       >
     </div>

src/components/chip/test/chip-removable.test.js

@@ -1,11 +1,18 @@
 import { html } from "lit"
 import { fixture, expect, oneEvent } from "@open-wc/testing"
 import { sendKeys } from "@web/test-runner-commands"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-chip-removable.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-chip-removable>Daten</leu-chip-removable> `)
+async function defaultFixture(args = {}) {
+  return fixture(
+    html`
+      <leu-chip-removable value=${ifDefined(args.value)}
+        >${args.label ?? "Daten"}</leu-chip-removable
+      >
+    `
+  )
 }
 
 describe("LeuChipRemovable", () => {
@@ -70,4 +77,31 @@ describe("LeuChipRemovable", () => {
 
     expect(event).to.exist
   })
+
+  it("sends the value in the remove event", async () => {
+    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+    const event = await oneEvent(el, "leu:remove")
+
+    expect(event.detail.value).to.equal("Daten")
+
+    el.value = "test"
+
+    setTimeout(() => button.click())
+    const event2 = await oneEvent(el, "leu:remove")
+
+    expect(event2.detail.value).to.equal("test")
+  })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+
+    expect(el.getValue()).to.equal("Daten")
+
+    el.value = "daten-01"
+
+    expect(el.getValue()).to.equal("daten-01")
+  })
 })

src/components/chip/test/chip-selectable.test.js

@@ -9,7 +9,7 @@ async function defaultFixture(args = {}) {
   return fixture(
     html`
       <leu-chip-selectable
-        value="Publikationen"
+        value=${ifDefined(args.value)}
         variant=${ifDefined(args.variant)}
         ?checked=${args.checked}
         >Publikationen</leu-chip-selectable
@@ -90,4 +90,14 @@ describe("LeuChipSelectable", () => {
 
     expect(el.checked).to.be.true
   })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture()
+
+    expect(el.getValue()).to.equal("Publikationen")
+
+    el.value = "publikationen-01"
+
+    expect(el.getValue()).to.equal("publikationen-01")
+  })
 })

src/components/menu/MenuItem.js

@@ -80,7 +80,7 @@ export class LeuMenuItem extends LeuElement {
    * @returns {string}
    */
   getValue() {
-    return this.value || this.innerText
+    return this.value || this.textContent.trim()
   }
 
   _getAria() {