Modus Chip - Added max-width to handle text overflow (#1852)

trimble-oss · Nov 7, 2023 · afcdc4e · afcdc4e
1 parent 2903c47
commit afcdc4e
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 14 deletions.
diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.e2e.ts b/stencil-workspace/src/components/modus-chip/modus-chip.e2e.ts
@@ -132,6 +132,23 @@ describe('modus-chip', () => {
     expect(await shadowValue.textContent).toEqual('Hello');
   });
 
+  it('renders changes to max-width', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-chip></modus-chip>');
+    const chip = await page.find('modus-chip');
+    expect(await chip.getProperty('maxWidth')).toBeFalsy();
+
+    chip.setProperty('maxWidth', '100px'); // Set the max-width property
+    await page.waitForChanges();
+    expect(await chip.getProperty('maxWidth')).toEqual('100px');
+
+    const element = await page.find('modus-chip >>> span');
+
+    const computedStyle = await element.getComputedStyle();
+    expect(computedStyle['maxWidth']).toEqual('100px');
+  });
+
   it('emits chip click event on chip click', async () => {
     const page = await newE2EPage();
 

diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.scss b/stencil-workspace/src/components/modus-chip/modus-chip.scss
@@ -44,9 +44,13 @@
   }
 
   span {
+    display: inline-block;
     font-size: $rem-13px;
     font-weight: $chip-font-weight;
     margin: 0 $rem-4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   svg:not(.icon-remove) path {

diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.tsx b/stencil-workspace/src/components/modus-chip/modus-chip.tsx
@@ -36,6 +36,9 @@ export class ModusChip {
   /** (optional) The chip's value. */
   @Prop() value: string;
 
+  /** (optional) Maximum width for the Chip's text and shows ellipsis when truncated */
+  @Prop() maxWidth: string;
+
   /** An event that fires on chip click. */
   @Event() chipClick: EventEmitter;
 
@@ -95,7 +98,11 @@ export class ModusChip {
       ${!this.showCheckmark && !this.imageUrl ? 'no-left-icon' : null}
       ${!this.showClose ? 'no-right-icon' : null}
     `;
-
+    const style = {
+      style: {
+        'max-width': this.maxWidth ?? undefined,
+      },
+    };
     return (
       <div
         aria-disabled={this.disabled ? 'true' : undefined}
@@ -108,7 +115,7 @@ export class ModusChip {
         ) : this.showCheckmark ? (
           <IconCheck size={'16'}></IconCheck>
         ) : null}
-        <span>{this.value}</span>
+        <span {...style}>{this.value}</span>
         {this.showClose ? (
           <IconRemove onClick={this.disabled ? null : (event) => this.onCloseClick(event)} size={'16'}></IconRemove>
         ) : null}

diff --git a/stencil-workspace/src/components/modus-chip/readme.md b/stencil-workspace/src/components/modus-chip/readme.md
@@ -7,17 +7,18 @@
 
 ## Properties
 
-| Property        | Attribute        | Description                                | Type                   | Default     |
-| --------------- | ---------------- | ------------------------------------------ | ---------------------- | ----------- |
-| `ariaLabel`     | `aria-label`     | (optional) The chip's aria-label.          | `string`               | `undefined` |
-| `chipStyle`     | `chip-style`     | (optional) The chip's style.               | `"outline" \| "solid"` | `'solid'`   |
-| `disabled`      | `disabled`       | (optional) Whether the chip is disabled.   | `boolean`              | `false`     |
-| `hasError`      | `has-error`      | (optional) Whether the chip has an error.  | `boolean`              | `false`     |
-| `imageUrl`      | `image-url`      | (optional) The image's url.                | `string`               | `undefined` |
-| `showCheckmark` | `show-checkmark` | (optional) Whether to show the checkmark.  | `boolean`              | `false`     |
-| `showClose`     | `show-close`     | (optional) Whether to show the close icon. | `boolean`              | `false`     |
-| `size`          | `size`           | (optional) The chip's size.                | `"medium" \| "small"`  | `'medium'`  |
-| `value`         | `value`          | (optional) The chip's value.               | `string`               | `undefined` |
+| Property        | Attribute        | Description                                                                    | Type                   | Default     |
+| --------------- | ---------------- | ------------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `ariaLabel`     | `aria-label`     | (optional) The chip's aria-label.                                              | `string`               | `undefined` |
+| `chipStyle`     | `chip-style`     | (optional) The chip's style.                                                   | `"outline" \| "solid"` | `'solid'`   |
+| `disabled`      | `disabled`       | (optional) Whether the chip is disabled.                                       | `boolean`              | `false`     |
+| `hasError`      | `has-error`      | (optional) Whether the chip has an error.                                      | `boolean`              | `false`     |
+| `imageUrl`      | `image-url`      | (optional) The image's url.                                                    | `string`               | `undefined` |
+| `maxWidth`      | `max-width`      | (optional) Maximum width for the Chip's text and shows ellipsis when truncated | `string`               | `undefined` |
+| `showCheckmark` | `show-checkmark` | (optional) Whether to show the checkmark.                                      | `boolean`              | `false`     |
+| `showClose`     | `show-close`     | (optional) Whether to show the close icon.                                     | `boolean`              | `false`     |
+| `size`          | `size`           | (optional) The chip's size.                                                    | `"medium" \| "small"`  | `'medium'`  |
+| `value`         | `value`          | (optional) The chip's value.                                                   | `string`               | `undefined` |
 
 
 ## Events

diff --git a/...workspace/storybook/stories/components/modus-chip/modus-chip-storybook-docs.mdx b/...workspace/storybook/stories/components/modus-chip/modus-chip-storybook-docs.mdx
@@ -76,6 +76,7 @@ import { Anchor } from '@storybook/addon-docs';
 | show-close     | Whether to show the close icon | boolean |                    | false         |          |
 | size           | The chip's size                | string  | 'medium', 'small'  | 'medium'      |          |
 | value          | The chip's value               | string  |                    |               |          |
+| maxWidth          | Maximum width for the Chip's text and shows ellipsis when truncated               | string  |                    |               |          |
 
 ### DOM Events
 

diff --git a/stencil-workspace/storybook/stories/components/modus-chip/modus-chip.stories.tsx b/stencil-workspace/storybook/stories/components/modus-chip/modus-chip.stories.tsx
@@ -79,6 +79,13 @@ export default {
         type: { summary: 'string' },
       },
     },
+    maxWidth: {
+      description: "Chip text's maximum width",
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '100px' },
+      },
+    }
   },
   parameters: {
     controls: { expanded: true },
@@ -104,6 +111,7 @@ export const Default = ({
   showClose,
   size,
   value,
+  maxWidth,
 }) => html`
   <modus-chip
     aria-label=${ariaLabel}
@@ -114,6 +122,7 @@ export const Default = ({
     show-checkmark=${showCheckmark}
     show-close=${showClose}
     size=${size}
+    max-width=${maxWidth}
     value=${value}>
   </modus-chip>
 `;
@@ -127,6 +136,7 @@ Default.args = {
   showClose: false,
   size: 'medium',
   value: 'Bryan',
+  maxWidth:'100px'
 };
 
 export const Outline = ({
@@ -139,6 +149,7 @@ export const Outline = ({
   showClose,
   size,
   value,
+  maxWidth,
 }) => html`
   <modus-chip
     aria-label=${ariaLabel}
@@ -149,7 +160,8 @@ export const Outline = ({
     show-checkmark=${showCheckmark}
     show-close=${showClose}
     size=${size}
-    value=${value}>
+    value=${value}
+    max-width=${maxWidth}>
   </modus-chip>
 `;
 Outline.args = {
@@ -162,4 +174,5 @@ Outline.args = {
   showClose: false,
   size: 'medium',
   value: 'Bryan',
+  maxWidth:'100px'
 };