Chip: Advanced chip (#3103)

* fix chips * test * advanced chip full * Advanced chip * update test cases * update docs * update test * update docs * format code * update docs
trimble-oss · Jan 16, 2025 · df1dbf5 · df1dbf5
1 parent 5d583bd
commit df1dbf5
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 7 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
@@ -254,7 +254,7 @@ describe('modus-chip', () => {
     await page.setContent('<modus-chip disabled></modus-chip>');
     const chipClick = await page.spyOnEvent('chipClick');
 
-    const shadowContainer = await page.find('modus-chip >>> .modus-chip');
+    const shadowContainer = await page.find('modus-chip');
     await shadowContainer.press('Enter');
     await page.waitForChanges();
     expect(chipClick).not.toHaveReceivedEvent();

diff --git a/stencil-workspace/src/components/modus-chip/modus-chip.tsx b/stencil-workspace/src/components/modus-chip/modus-chip.tsx
@@ -1,7 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, Prop, h, EventEmitter, Event, Listen } from '@stencil/core';
-import { IconRemove } from '../../icons/svgs/icon-remove';
+import { IconClose } from '../../icons/generated-icons/IconClose';
 import { IconCheck } from '../../icons/svgs/icon-check';
+import { ModusIconMap } from '../../icons/ModusIconMap';
+import { IconRemove } from '../../icons/svgs/icon-remove';
 
 @Component({
   tag: 'modus-chip',
@@ -24,6 +26,9 @@ export class ModusChip {
   /** (optional) The image's url. */
   @Prop() imageUrl: string;
 
+  /** (optional) Whether the chip is in advanced state */
+  @Prop() advancedChip: boolean;
+
   /** (optional) Whether to show the checkmark. */
   @Prop() showCheckmark = false;
 
@@ -115,18 +120,23 @@ export class ModusChip {
         aria-label={this.ariaLabel || undefined}
         id={this.chipId || undefined}
         class={chipClass}
-        disabled={this.disabled}
-        onClick={(event) => this.onChipClick(event)}
-        tabIndex={this.disabled ? -1 : 0}
+        onClick={this.disabled ? null : (event) => this.onChipClick(event)}
+        tabIndex={0}
+        style={this.advancedChip ? { 'border-radius': '8px' } : {}}
         type="button">
         {this.imageUrl ? (
           <img src={this.imageUrl} alt="" />
         ) : this.showCheckmark ? (
           <IconCheck size={'16'}></IconCheck>
         ) : null}
         <span {...style}>{this.value}</span>
+        {this.advancedChip && <ModusIconMap icon="caret_down" size={'16'}></ModusIconMap>}
         {this.showClose ? (
-          <IconRemove onClick={this.disabled ? null : (event) => this.onCloseClick(event)} size={'16'}></IconRemove>
+          this.advancedChip ? (
+            <IconClose onClick={this.disabled ? null : (event) => this.onCloseClick(event)} size={'16'}></IconClose>
+          ) : (
+            <IconRemove onClick={this.disabled ? null : (event) => this.onCloseClick(event)} size={'16'}></IconRemove>
+          )
         ) : null}
       </button>
     );

diff --git a/stencil-workspace/src/components/modus-chip/readme.md b/stencil-workspace/src/components/modus-chip/readme.md
@@ -20,6 +20,7 @@
 | `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'`  |
+| `trailingIcon`  | `trailing-icon`  | (optional) The chip's trailing icon                                            | `string`               | `undefined` |
 | `value`         | `value`          | (optional) The chip's value.                                                   | `string`               | `undefined` |
 
 

diff --git a/stencil-workspace/src/components/modus-dropdown/modus-dropdown.tsx b/stencil-workspace/src/components/modus-dropdown/modus-dropdown.tsx
@@ -27,6 +27,9 @@ export class ModusDropdown {
   /** (optional) Disables the dropdown. */
   @Prop() disabled: boolean; // TODO
 
+  /** (optional) Toggles the list when clicked. */
+  @Prop() toggleDropdown = true;
+
   /** (optional) The placement of the dropdown in related to the toggleElement. */
   @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
 
@@ -111,7 +114,7 @@ export class ModusDropdown {
     if (this.disabled) {
       return;
     }
-    if ((event.target as HTMLElement).closest(`#${this.toggleElementId}`)) {
+    if ((event.target as HTMLElement).closest(`#${this.toggleElementId}`) && this.toggleDropdown) {
       this.visible = !this.visible;
     } else {
       if (!this.disableCloseOnSelect) {

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
@@ -1,4 +1,6 @@
 import { Anchor } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
+import * as Chip from './modus-chip.stories.tsx';
 
 # Chip
 
@@ -33,6 +35,9 @@ import { Anchor } from '@storybook/addon-docs';
 <modus-chip image-url="https://randomuser.me/api/portraits/lego/1.jpg" show-close chip-id="chip-id-1" size="small" value="Pet 1"></modus-chip>
 <modus-chip image-url="https://randomuser.me/api/portraits/lego/1.jpg" show-close chip-id="chip-id-2" size="small" value="Pet 2"></modus-chip>
 
+### Advanced Chip
+<Story of={Chip.AdvancedChip}/>
+
 ```html
 <modus-chip image-url="https://example.com/image.jpg" show-close value="Bryan"></modus-chip>
 <modus-chip active image-url="https://example.com/image.jpg" show-close value="Bryan"></modus-chip>
@@ -56,6 +61,53 @@ import { Anchor } from '@storybook/addon-docs';
   chipId="chip-2"
   size="small"
   value="Pet 2"></modus-chip>
+<modus-dropdown label="Dropdown" ?disabled=${disabled} id="dropdown" toggle-element-id="toggleElement" animate-list>
+    <modus-chip
+      id="toggleElement"
+      slot="dropdownToggle"
+      advanced-chip
+      value="Processes Type">
+    </modus-chip>
+    <modus-list slot="dropdownList">
+      <modus-list-item value="1" disabled borderless>Select Process</modus-list-item>
+      <modus-list-item value="2" borderless>First Option (FO)</modus-list-item>
+      <modus-list-item value="3" borderless>Second Option (SO)</modus-list-item>
+      <modus-list-item value="4" borderless>Next Option (NO)</modus-list-item>
+      <modus-list-item value="4" borderless>Another Option (AO)</modus-list-item>
+    </modus-list>
+</modus-dropdown>
+
+<script>
+ const chip = document.querySelector('modus-chip');
+  const dropdown = document.querySelector('modus-dropdown');
+  const list = document.querySelector('modus-list');
+  let itemSelected = false;
+  dropdown.addEventListener('dropdownClose', (e) => {
+      console.log('dropdownClose');
+      if(!itemSelected) {
+        chip.active = false;
+      }
+  });
+  chip.addEventListener('chipClick', (e) => {
+      console.log('chipClick');
+      chip.active = true;
+      dropdown.toggleDropdown = true;
+  });
+  chip.addEventListener('closeClick', (e) => {
+      console.log('chipClose');
+      chip.value = 'Processes Type';
+      chip.active = false;
+      chip.showClose = false;
+      dropdown.toggleDropdown = false;
+  });
+  list.addEventListener('itemClick', (e) => {
+      console.log('listItem', e.srcElement.innerText);
+      chip.value = 'Processes Type: ' + e.srcElement.innerText;
+      chip.showClose = true;
+      chip.active = true;
+      itemSelected = true;
+  });
+</script>
 ```
 
 ### Properties
@@ -71,6 +123,7 @@ import { Anchor } from '@storybook/addon-docs';
 | show-checkmark | Whether to show the checkmark                                       | boolean |                    | false         |          |
 | show-close     | Whether to show the close icon                                      | boolean |                    | false         |          |
 | size           | The chip's size                                                     | string  | 'medium', 'small'  | 'medium'      |          |
+| advanced-chip  | Whether the chip is in advanced state                               | boolean |                    | false         |          |
 | value          | The chip's value                                                    | string  |                    |               |          |
 | maxWidth       | Maximum width for the Chip's text and shows ellipsis when truncated | string  |                    |               |          |
 | chipId         | This chip's id will create much more visibility for testing         | string  |                    |               |          |

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
@@ -21,6 +21,14 @@ export default {
         type: { summary: 'string' },
       },
     },
+    advancedChip: {
+      name: 'advanced-chip',
+      description: 'Whether the chip is advanced',
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
     chipStyle: {
       name: 'chip-style',
       options: ['solid', 'outline'],
@@ -116,6 +124,7 @@ export default {
 export const Default = ({
   active,
   ariaLabel,
+  advancedChip,
   chipStyle,
   disabled,
   hasError,
@@ -130,6 +139,7 @@ export const Default = ({
   <modus-chip
     active=${active}
     aria-label=${ariaLabel}
+    ?advanced-chip=${advancedChip}
     chip-style=${chipStyle}
     ?disabled=${disabled}
     has-error=${hasError}
@@ -145,6 +155,7 @@ export const Default = ({
 Default.args = {
   active: false,
   ariaLabel: '',
+  advancedChip: false,
   chipStyle: 'solid',
   disabled: false,
   hasError: false,
@@ -160,6 +171,7 @@ Default.args = {
 export const Outline = ({
   active,
   ariaLabel,
+  advancedChip,
   chipStyle,
   disabled,
   hasError,
@@ -173,6 +185,7 @@ export const Outline = ({
   <modus-chip
     active=${active}
     aria-label=${ariaLabel}
+    ?advanced-chip=${advancedChip}
     chip-style=${chipStyle}
     ?disabled=${disabled}
     has-error=${hasError}
@@ -187,6 +200,7 @@ export const Outline = ({
 Outline.args = {
   active: false,
   ariaLabel: '',
+  advancedChip: false,
   chipStyle: 'outline',
   disabled: false,
   hasError: false,
@@ -197,3 +211,97 @@ Outline.args = {
   size: 'medium',
   value: 'Bryan',
 };
+
+export const AdvancedChip = ({
+  active,
+  ariaLabel,
+  advancedChip,
+  chipStyle,
+  disabled,
+  hasError,
+  imageUrl,
+  maxWidth,
+  showCheckmark,
+  showClose,
+  size,
+  value,
+}) => html`
+  <modus-dropdown label="Dropdown" ?disabled=${disabled} id="dropdown" toggle-element-id="toggleElement" animate-list>
+    <modus-chip
+      id="toggleElement"
+      slot="dropdownToggle"
+      active=${active}
+      aria-label=${ariaLabel}
+      ?advanced-chip=${advancedChip}
+      chip-style=${chipStyle}
+      ?disabled=${disabled}
+      has-error=${hasError}
+      image-url=${imageUrl}
+      max-width=${maxWidth}
+      show-checkmark=${showCheckmark}
+      show-close=${showClose}
+      size=${size}
+      value=${value}>
+    </modus-chip>
+    <modus-list slot="dropdownList">
+      <modus-list-item value="1" disabled borderless>Select Process</modus-list-item>
+      <modus-list-item value="2" borderless>First Option (FO)</modus-list-item>
+      <modus-list-item value="3" borderless>Second Option (SO)</modus-list-item>
+      <modus-list-item value="4" borderless>Next Option (NO)</modus-list-item>
+      <modus-list-item value="4" borderless>Another Option (AO)</modus-list-item>
+    </modus-list>
+  </modus-dropdown>
+
+  ${setAdvancedChip()}
+`;
+AdvancedChip.args = {
+  active: false,
+  ariaLabel: '',
+  advancedChip: true,
+  chipStyle: 'outline',
+  disabled: false,
+  hasError: false,
+  imageUrl: '',
+  maxWidth: '',
+  showCheckmark: false,
+  showClose: false,
+  size: 'medium',
+  value: 'Processes Type',
+};
+
+const setAdvancedChip = () => {
+  const tag = document.createElement('script');
+  tag.innerHTML = `
+      const chip = document.querySelector('#toggleElement');
+      const dropdown = document.querySelector('modus-dropdown');
+      const list = document.querySelector('modus-list');
+      let itemSelected = false;
+      dropdown.addEventListener('dropdownClose', (e) => {
+        console.log('dropdownClose');
+        if(!itemSelected) {
+          chip.active = false;
+        }
+      });
+      chip.addEventListener('chipClick', (e) => {
+        console.log('chipClick');
+        chip.active = true;
+        dropdown.toggleDropdown = true;
+      });
+      chip.addEventListener('closeClick', (e) => {
+        console.log('chipClose');
+        chip.value = 'Processes Type';
+        chip.active = false;
+        chip.showClose = false;
+        dropdown.toggleDropdown = false;
+
+      });
+      list.addEventListener('itemClick', (e) => {
+        console.log('listItem', e.srcElement.innerText);
+        chip.value = 'Processes Type: ' + e.srcElement.innerText;
+        chip.showClose = true;
+        chip.active = true;
+        itemSelected = true;
+      });
+  `;
+  return tag;
+};