feat(@vtmn/css, @vtmn/svelte, @vtmn/react, @vtmn/vue): `VtmnC…

…hip` variant `input` match now the figma specs (#1456) BREAKING CHANGE: The design of `VtmnChip`now matches Figma's version. If you used the `VtmnChip` with an "input" variant, you will have changes when you will upgrade to this new version. "Selected" input is no longer available on this variant. The color of the variant stays white, and no longer has a blue color.
Decathlon · Aug 4, 2023 · 8b33064 · 8b33064
1 parent 3d78507
commit 8b33064
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 82 deletions.
diff --git a/packages/showcases/css/stories/components/selection-controls/chip/examples/input.html b/packages/showcases/css/stories/components/selection-controls/chip/examples/input.html
@@ -6,38 +6,44 @@
 
 <div class="block vtmn-flex vtmn-flex-row vtmn-flex-wrap">
   <div
-    class="vtmn-chip vtmn-chip_variant--input"
+    class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--medium"
     role="button"
     tabindex="0"
     aria-pressed="false"
   >
     HTML
+    <button
+      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--medium vtmn-btn_variant--ghost-reversed"
+    >
+      <span class="vtmn-sr-only">Unselect this chip</span>
+      <span class="vtmx-close-line" aria-hidden="true"></span>
+    </button>
   </div>
 
   <div
-    class="vtmn-chip vtmn-chip_variant--input"
+    class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--medium"
     role="button"
-    aria-pressed="true"
+    aria-pressed="false"
   >
     <span class="vtmx-ruler-line" aria-hidden="true"></span>
     CSS
     <button
-      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--small vtmn-btn_variant--ghost-reversed"
+      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--medium vtmn-btn_variant--ghost-reversed"
     >
       <span class="vtmn-sr-only">Unselect this chip</span>
       <span class="vtmx-close-line" aria-hidden="true"></span>
     </button>
   </div>
 
   <div
-    class="vtmn-chip vtmn-chip_variant--input"
+    class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--medium"
     role="button"
-    aria-pressed="true"
+    aria-pressed="false"
     aria-disabled="true"
   >
     WASM
     <button
-      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--small vtmn-btn_variant--ghost-reversed"
+      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--medium vtmn-btn_variant--ghost-reversed"
       disabled
     >
       <span class="vtmn-sr-only">Unselect this chip</span>
@@ -54,12 +60,18 @@
     aria-pressed="false"
   >
     HTML
+    <button
+      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--small vtmn-btn_variant--ghost-reversed"
+    >
+      <span class="vtmn-sr-only">Unselect this chip</span>
+      <span class="vtmx-close-line" aria-hidden="true"></span>
+    </button>
   </div>
 
   <div
     class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--small"
     role="button"
-    aria-pressed="true"
+    aria-pressed="false"
   >
     <span class="vtmx-ruler-line" aria-hidden="true"></span>
     CSS
@@ -74,7 +86,7 @@
   <div
     class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--small"
     role="button"
-    aria-pressed="true"
+    aria-pressed="false"
     aria-disabled="true"
   >
     WASM
@@ -102,7 +114,7 @@
       <div
         class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--small"
         role="button"
-        aria-pressed="true"
+        aria-pressed="false"
       >
         <img
           src="https://storage.googleapis.com/dkt-design-cdn/images/landscape-placeholder.jpg"
@@ -118,17 +130,17 @@
       </div>
 
       <div
-        class="vtmn-chip vtmn-chip_variant--input"
+        class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--medium"
         role="button"
-        aria-pressed="true"
+        aria-pressed="false"
       >
         <img
           src="https://storage.googleapis.com/dkt-design-cdn/images/landscape-placeholder.jpg"
           alt="Black and white grid"
         />
         JavaScript
         <button
-          class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--small vtmn-btn_variant--ghost-reversed"
+          class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--medium vtmn-btn_variant--ghost-reversed"
         >
           <span class="vtmn-sr-only">Unselect this chip</span>
           <span class="vtmx-close-line" aria-hidden="true"></span>

diff --git a/packages/showcases/css/stories/components/selection-controls/chip/examples/overview.html b/packages/showcases/css/stories/components/selection-controls/chip/examples/overview.html
@@ -50,12 +50,18 @@
     aria-pressed="false"
   >
     HTML
+    <button
+      class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--small vtmn-btn_variant--ghost-reversed"
+    >
+      <span class="vtmn-sr-only">Unselect this chip</span>
+      <span class="vtmx-close-line" aria-hidden="true"></span>
+    </button>
   </div>
 
   <div
     class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--small"
     role="button"
-    aria-pressed="true"
+    aria-pressed="false"
   >
     <span class="vtmx-ruler-line" aria-hidden="true"></span>
     CSS
@@ -70,7 +76,7 @@
   <div
     class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--small"
     role="button"
-    aria-pressed="true"
+    aria-pressed="false"
     aria-disabled="true"
   >
     WASM
@@ -163,17 +169,17 @@
   <div class="accessibility-highlight_container">
     <div class="accessibility-highlight_container_component">
       <div
-        class="vtmn-chip vtmn-chip_variant--input"
+        class="vtmn-chip vtmn-chip_variant--input vtmn-chip_size--medium"
         role="button"
-        aria-pressed="true"
+        aria-pressed="false"
       >
         <img
           src="https://storage.googleapis.com/dkt-design-cdn/images/landscape-placeholder.jpg"
           alt="Black and white grid"
         />
         JavaScript
         <button
-          class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--small vtmn-btn_variant--ghost-reversed"
+          class="vtmn-btn vtmn-btn--icon-alone vtmn-btn_size--medium vtmn-btn_variant--ghost-reversed"
         >
           <span class="vtmn-sr-only">Unselect this chip</span>
           <span class="vtmx-close-line" aria-hidden="true"></span>

diff --git a/packages/sources/css/src/components/selection-controls/chip/src/index.css b/packages/sources/css/src/components/selection-controls/chip/src/index.css
@@ -357,15 +357,15 @@
   padding-right: rem(6px);
 }
 
-.vtmn-chip_variant--input.vtmn-chip_size--small.vtmn-chip--selected {
+.vtmn-chip_variant--input.vtmn-chip_size--small {
   padding-right: rem(4px);
 }
 
-.vtmn-chip_variant--input.vtmn-chip_size--medium.vtmn-chip--selected {
+.vtmn-chip_variant--input.vtmn-chip_size--medium {
   padding-right: rem(6px);
 }
 
-.vtmn-chip_variant--input.vtmn-chip--selected::before {
+.vtmn-chip_variant--input::before {
   content: initial;
   mask: initial;
   mask-size: initial;
@@ -376,17 +376,17 @@
   background-color: initial;
 }
 
-.vtmn-chip_variant--input.vtmn-chip--selected > .vtmn-btn--icon-alone {
+.vtmn-chip_variant--input > .vtmn-btn--icon-alone {
   margin-left: rem(6px);
   padding: 0;
   height: rem(24px);
   width: rem(24px);
   border-radius: 50%;
 }
 
-.vtmn-chip_variant--input.vtmn-chip--selected
-  > .vtmn-btn--icon-alone
-  > span[class^='vtmx-'],
-.vtmn-chip_variant--input.vtmn-chip--selected > .vtmn-btn--icon-alone > svg {
+.vtmn-chip_variant--input > .vtmn-btn--icon-alone > span[class^='vtmx-'],
+.vtmn-chip_variant--input > .vtmn-btn--icon-alone > svg {
   font-size: rem(24px);
+  color: var(--vtmn-semantic-color_content-action);
+  fill: var(--vtmn-semantic-color_content-action);
 }
diff --git a/packages/sources/react/src/components/selection-controls/VtmnChip/VtmnChip.tsx b/packages/sources/react/src/components/selection-controls/VtmnChip/VtmnChip.tsx
@@ -76,20 +76,25 @@ export const VtmnChip = ({
   className,
   ...props
 }: VtmnChipProps) => {
+  const isSelected = selected && ['single-choice', 'filter'].includes(variant);
   return (
     <div
       className={clsx(
         'vtmn-chip',
         `vtmn-chip_size--${size}`,
         `vtmn-chip_variant--${variant}`,
         disabled && 'vtmn-chip--disabled',
-        selected && variant !== 'action' && 'vtmn-chip--selected',
+        isSelected && 'vtmn-chip--selected',
         className,
       )}
       role="button"
       aria-disabled={disabled}
-      aria-pressed={selected && variant !== 'action'}
-      onClick={onClick}
+      aria-pressed={isSelected && variant !== 'action'}
+      onClick={(e) => {
+        if (!disabled && onClick) {
+          onClick(e);
+        }
+      }}
       {...props}
     >
       {icon && (variant === 'input' || variant === 'action') && (
@@ -106,11 +111,16 @@ export const VtmnChip = ({
         <VtmnBadge variant="default" value={badgeValue} />
       )}
 
-      {variant == 'input' && selected && (
+      {variant == 'input' && (
         <VtmnButton
-          variant="ghost-reversed"
-          iconAlone="close-fill"
-          onClick={onCancel}
+          variant="ghost"
+          iconAlone="close-line"
+          disabled={disabled}
+          size={size}
+          onClick={(e) => {
+            e.stopPropagation();
+            onCancel?.(e);
+          }}
         />
       )}
     </div>

diff --git a/packages/sources/svelte/src/components/selection-controls/VtmnChip/VtmnChip.svelte b/packages/sources/svelte/src/components/selection-controls/VtmnChip/VtmnChip.svelte
@@ -46,31 +46,33 @@
    */
   export { className as class };
 
+  $: isSelected =
+    selected &&
+    [VTMN_CHIP_VARIANT.SINGLE_CHOICE, VTMN_CHIP_VARIANT.FILTER].includes(
+      variant,
+    );
   $: componentClass = cn(
     'vtmn-chip',
     `vtmn-chip_variant--${variant}`,
     `vtmn-chip_size--${size}`,
-    selected && variant !== VTMN_CHIP_VARIANT.ACTION
-      ? 'vtmn-chip--selected'
-      : '',
+    isSelected && 'vtmn-chip--selected',
     disabled ? 'vtmn-chip--disabled' : '',
     className,
   );
 
-  $: displayInputButton = variant === VTMN_CHIP_VARIANT.INPUT && selected;
+  $: displayInputButton = variant === VTMN_CHIP_VARIANT.INPUT;
   $: displayFilterBadge =
     variant === VTMN_CHIP_VARIANT.FILTER && badgeValue > 0;
   $: displayLeftIcon =
     [VTMN_CHIP_VARIANT.INPUT, VTMN_CHIP_VARIANT.ACTION].includes(variant) &&
     icon;
-  $: disableTableIndex =
-    (variant === VTMN_CHIP_VARIANT.INPUT && selected) || disabled;
 
-  const cancelClickHandler = () => {
+  const cancelClickHandler = (e) => {
+    e.stopPropagation();
     dispatch('cancel');
   };
   const selectClickHandler = () => {
-    if (disabled || (variant === VTMN_CHIP_VARIANT.INPUT && selected)) {
+    if (disabled) {
       return;
     }
     dispatch('click');
@@ -81,12 +83,12 @@
   class={componentClass}
   role="button"
   aria-disabled={disabled}
-  aria-pressed={selected && variant !== 'action'}
+  aria-pressed={isSelected && variant !== 'action'}
   on:click={selectClickHandler}
   on:keydown
   on:keyup
   on:keypress
-  tabindex={disableTableIndex ? undefined : 0}
+  tabindex={disabled ? undefined : 0}
 >
   {#if displayLeftIcon}
     <VtmnIcon value={icon} aria-hidden="true" />

diff --git a/packages/sources/svelte/src/components/selection-controls/VtmnChip/test/VtmnChip.spec.js b/packages/sources/svelte/src/components/selection-controls/VtmnChip/test/VtmnChip.spec.js
@@ -175,15 +175,13 @@ describe('VtmnChip', () => {
       const { container, component } = render(VtmnChip, {
         variant: VTMN_CHIP_VARIANT.INPUT,
         disabled: true,
-        selected: true,
       });
       await expectedCancelOnElement(getChip(container), component, 0);
     });
 
     test('Should not trigger click when user click on cancel', async () => {
       const { container, component } = render(VtmnChip, {
         variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: true,
       });
 
       const handleClickCancel = jest.fn();
@@ -197,10 +195,9 @@ describe('VtmnChip', () => {
       expect(handleClickCancel).toHaveBeenCalledTimes(1);
     });
 
-    test('Should not trigger click event when the chip is selected', async () => {
+    test('Should trigger click event', async () => {
       const { container, component } = render(VtmnChip, {
         variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: true,
       });
 
       const handleClickCancel = jest.fn();
@@ -210,30 +207,13 @@ describe('VtmnChip', () => {
 
       await fireEvent.click(getChip(container));
 
-      expect(handleClickDefault).toHaveBeenCalledTimes(0);
+      expect(handleClickDefault).toHaveBeenCalledTimes(1);
       expect(handleClickCancel).toHaveBeenCalledTimes(0);
     });
 
-    test('Should be selectable', () => {
-      const { container } = render(VtmnChip, {
-        variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: true,
-      });
-      expect(getChip(container)).toHaveClass('vtmn-chip--selected');
-    });
-
-    test('Should not display button when chip not selected', () => {
-      const { container } = render(VtmnChip, {
-        variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: false,
-      });
-      expect(getCancelBtn(container)).toBeUndefined();
-    });
-
-    test('Should display button cancel when chip is selected', () => {
+    test('Should display button cancel', () => {
       const { container } = render(VtmnChip, {
         variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: true,
       });
       expect(getCancelBtn(container)).toBeVisible();
     });
@@ -246,20 +226,11 @@ describe('VtmnChip', () => {
       expect(getIcon(container, 'add-fill')).toHaveClass('vtmx-add-fill');
     });
 
-    test("Should have a tabindex = 0 if it's not selected", () => {
-      const { container } = render(VtmnChip, {
-        variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: false,
-      });
-      expect(getChip(container)).toHaveAttribute('tabindex', '0');
-    });
-
-    test('Should not have a tabindex if chip is selected', () => {
+    test('Should not have a tabindex', () => {
       const { container } = render(VtmnChip, {
         variant: VTMN_CHIP_VARIANT.INPUT,
-        selected: true,
       });
-      expect(getChip(container)).not.toHaveAttribute('tabindex');
+      expect(getChip(container)).toHaveAttribute('tabindex');
     });
   });