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..a881bcc52 100644 --- 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 index 8dbb8d529..c5271209b 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: '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(`