feature: Add animation to dropdown component (#975)

* feat(dropdown): add animation prop and update class binding for dropdown states * feat(dropdown): add animation control to dropdown stories * feat(dropdown): enhance dropdown animations and update styles for better interaction * feat(dropdown): add animation property to documentation * test(table): update selector for right chevron button in pagination test * test(dropdown): update snapshot due to change in border color * feat(dropdown): set default animation to 'slide' in dropdown component
scania-digital-design-system · Jan 21, 2025 · a740538 · a740538
1 parent 5066fe4
commit a740538
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 11 deletions.
diff --git a/packages/core/src/components/dropdown/dropdown-option/dropdown-option.scss b/packages/core/src/components/dropdown/dropdown-option/dropdown-option.scss
@@ -13,6 +13,7 @@
     font: var(--tds-detail-02);
     letter-spacing: var(--tds-detail-02-ls);
     overflow-wrap: anywhere;
+    transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 
     &.selected {
       background-color: var(--tds-dropdown-option-background-selected);
@@ -78,7 +79,6 @@
         &.xs {
           padding: 7px 16px 8px;
         }
-
       }
     }
 

diff --git a/packages/core/src/components/dropdown/dropdown-vars.scss b/packages/core/src/components/dropdown/dropdown-vars.scss
@@ -4,6 +4,7 @@
   --tds-dropdown-border-bottom: var(--tds-grey-600);
   --tds-dropdown-border-bottom-hover: var(--tds-grey-800);
   --tds-dropdown-border-bottom-open: var(--tds-blue-400);
+  --tds-dropdown-border-bottom-hover: var(--tds-grey-868);
   --tds-dropdown-value-color: var(--tds-grey-958);
   --tds-dropdown-label-color: var(--tds-grey-958);
   --tds-dropdown-label-inside-color: var(--tds-grey-958);

diff --git a/packages/core/src/components/dropdown/dropdown.scss b/packages/core/src/components/dropdown/dropdown.scss
@@ -23,10 +23,19 @@
   .dropdown-select {
     position: relative;
 
+    button {
+      transition: border-bottom-color var(--tds-motion-duration-fast-02)
+        var(--tds-motion-easing-scania);
+    }
+
     button:focus {
       border-bottom-color: var(--tds-dropdown-border-bottom);
     }
 
+    button:hover {
+      border-bottom-color: var(--tds-dropdown-border-bottom-hover);
+    }
+
     button {
       border-bottom-color: var(--tds-dropdown-border-bottom);
     }
@@ -161,10 +170,11 @@
     margin-top: 1px;
     width: 100%;
     transform-origin: top;
-    transition: transform 0.2s ease-in-out;
     box-shadow: rgb(0 0 0 / 10%) 0 2px 3px 0;
     border-radius: var(--tds-dropdown-list-border-radius-down);
     overflow-y: auto;
+    transform: scaleY(0);
+    pointer-events: none;
     @include tds-scrollbar;
 
     &.lg {
@@ -200,11 +210,22 @@
 
     &.closed {
       transform: scaleY(0);
-      visibility: hidden;
+      pointer-events: none;
     }
 
     &.open {
       transform: scaleY(1);
+      visibility: visible;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    &.animation-enter-slide {
+      transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter);
+    }
+
+    &.animation-exit-slide {
+      transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit);
     }
 
     .no-result {
@@ -238,7 +259,7 @@
   }
 
   tds-icon {
-    transition: transform 0.2s ease-in-out;
+    transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 
     &.open {
       transform: rotateZ(180deg);

diff --git a/packages/core/src/components/dropdown/dropdown.stories.tsx b/packages/core/src/components/dropdown/dropdown.stories.tsx
@@ -43,6 +43,17 @@ export default {
         defaultValue: { summary: 'false' },
       },
     },
+    animation: {
+      name: 'Animation',
+      description: 'Animation of the Dropdown.',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'slide'],
+      table: {
+        defaultValue: { summary: 'Slide' },
+      },
+    },
     filter: {
       name: 'Filter',
       description: 'Adds filter functionality to the Dropdown.',
@@ -178,6 +189,7 @@ export default {
     disabled: false,
     openDirection: 'Auto',
     defaultOption: 'No default',
+    animation: 'slide',
   },
 };
 
@@ -220,6 +232,7 @@ const Template = ({
   defaultOption,
   multiDefaultOption,
   noResultText,
+  animation,
 }) =>
   formatHtmlPreview(`
   <style>
@@ -264,6 +277,7 @@ const Template = ({
           ${normalizeText ? '' : `normalize-text="false"`}
           ${multiselect ? 'multiselect' : ''}
           ${disabled ? 'disabled' : ''}
+          ${animation !== 'None' ? `animation="${animation}"` : ''}
           open-direction="${openDirection.toLowerCase()}"          
           >
             <tds-dropdown-option value="option-1">

diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -53,6 +53,8 @@ export class TdsDropdown {
   /** The size of the Dropdown. */
   @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';
 
+  @Prop() animation: 'none' | 'slide' = 'slide';
+
   /** Sets the Dropdown in an error state */
   @Prop() error: boolean = false;
 
@@ -555,7 +557,15 @@ export class TdsDropdown {
                     }
                     this.handleBlur(event);
                   }}
-                  onFocus={(event) => this.handleFocus(event)}
+                  onFocus={(event) => {
+                    this.open = true;
+                    this.filterFocus = true;
+                    if (this.multiselect) {
+                      this.inputElement.value = '';
+                    }
+                    this.handleFocus(event);
+                    this.handleFilter({ target: { value: '' } });
+                  }}
                   onKeyDown={(event) => {
                     if (event.key === 'Escape') {
                       this.open = false;
@@ -641,11 +651,16 @@ export class TdsDropdown {
         {/* DROPDOWN LIST */}
         <div
           ref={(element) => (this.dropdownList = element)}
-          class={`dropdown-list
-            ${this.size}
-            ${this.open ? 'open' : 'closed'}
-            ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}`}
+          class={{
+            'dropdown-list': true,
+            [this.size]: true,
+            [this.getOpenDirection()]: true,
+            'label-outside': this.label && this.labelPosition === 'outside',
+            'open': this.open,
+            'closed': !this.open,
+            [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
+            [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
+          }}
         >
           <slot onSlotchange={() => this.handleSlotChange()}></slot>
           {this.filterResult === 0 && this.noResultText !== '' && (

diff --git a/packages/core/src/components/dropdown/readme.md b/packages/core/src/components/dropdown/readme.md
@@ -10,6 +10,7 @@
 
 | Property        | Attribute        | Description                                                                                                                                                | Type                           | Default       |
 | --------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------- |
+| `animation`     | `animation`      |                                                                                                                                                            | `"none" \| "slide"`            | `'slide'`     |
 | `defaultValue`  | `default-value`  | Default value selected in the Dropdown.                                                                                                                    | `string`                       | `undefined`   |
 | `disabled`      | `disabled`       | Sets the Dropdown in a disabled state                                                                                                                      | `boolean`                      | `false`       |
 | `error`         | `error`          | Sets the Dropdown in an error state                                                                                                                        | `boolean`                      | `false`       |

diff --git a/...imary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/...imary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
diff --git a/...ndary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/...ndary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
diff --git a/packages/core/src/components/table/table/test/pagination/table.e2e.ts b/packages/core/src/components/table/table/test/pagination/table.e2e.ts
@@ -43,7 +43,7 @@ test.describe.parallel('tds-table-pagination', () => {
 
   test('Footer contains right chevron button, it is not disabled', async ({ page }) => {
     await page.goto(componentTestPath);
-    const tableFooterRightChevronButton = page.getByRole('button').last();
+    const tableFooterRightChevronButton = page.getByRole('button').nth(2);
     await expect(tableFooterRightChevronButton).toBeVisible();
     await expect(tableFooterRightChevronButton).not.toHaveAttribute('disabled');
   });