From 07e0e088022946c0671b1e6fa67e8d9fa05d145c Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Thu, 9 Jan 2025 16:53:28 +0100 Subject: [PATCH 1/7] feat(dropdown): add animation prop --- .../core/src/components/dropdown/dropdown.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx index 12aba7cac..40f533f4b 100644 --- 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' = 'none'; + /** 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; @@ -643,9 +653,11 @@ export class TdsDropdown { ref={(element) => (this.dropdownList = element)} class={`dropdown-list ${this.size} - ${this.open ? 'open' : 'closed'} ${this.getOpenDirection()} - ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}`} + ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''} + ${this.open ? 'open' : 'closed'} + ${this.animation !== 'none' ? `animation-${this.animation}` : ''} + `} > this.handleSlotChange()}> {this.filterResult === 0 && this.noResultText !== '' && ( From 992913efd1ce75e60cde1f0cc4e2ce971953107f Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Thu, 9 Jan 2025 16:54:12 +0100 Subject: [PATCH 2/7] feat(dropdown): add animation slide --- .../dropdown-option/dropdown-option.scss | 2 +- .../components/dropdown/dropdown-vars.scss | 1 + .../src/components/dropdown/dropdown.scss | 25 ++++++++++++++++--- 3 files changed, 24 insertions(+), 4 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 index 6200561a5..452ae884f 100644 --- 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 index e51e14572..dd1a2d919 100644 --- 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 index d9c77308c..57bec2cd1 100644 --- a/packages/core/src/components/dropdown/dropdown.scss +++ b/packages/core/src/components/dropdown/dropdown.scss @@ -23,10 +23,21 @@ .dropdown-select { position: relative; + // Add transition to border-bottom-color + + 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 +172,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 +212,18 @@ &.closed { transform: scaleY(0); - visibility: hidden; + pointer-events: none; } &.open { transform: scaleY(1); + visibility: visible; + opacity: 1; + pointer-events: auto; + } + + &.animation-slide { + transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania); } .no-result { @@ -238,7 +257,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); From 3d71f8f6c031d38873c8268d20e65bb9a621b66b Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Thu, 9 Jan 2025 16:55:05 +0100 Subject: [PATCH 3/7] feat(dropdown): add animation prop in storybook --- .../src/components/dropdown/dropdown.stories.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/core/src/components/dropdown/dropdown.stories.tsx b/packages/core/src/components/dropdown/dropdown.stories.tsx index 8dbb8d529..c0b9dbfc8 100644 --- 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: 'None' }, + }, + }, filter: { name: 'Filter', description: 'Adds filter functionality to the Dropdown.', @@ -178,6 +189,7 @@ export default { disabled: false, openDirection: 'Auto', defaultOption: 'No default', + animation: 'none', }, }; @@ -220,6 +232,7 @@ const Template = ({ defaultOption, multiDefaultOption, noResultText, + animation, }) => formatHtmlPreview(`