From 2ad95bdae1f8fb8e2ae785ba3cea4e52de075f57 Mon Sep 17 00:00:00 2001 From: Mihails F <138450112+MihailsFX1nce@users.noreply.github.com> Date: Thu, 28 Mar 2024 18:36:09 +0200 Subject: [PATCH 1/2] feat(dropdown-select): ensure single dropdown open at a time (#2307) Implement global state to track the active dropdown. Modify handleClick method to close any other open dropdown before opening the clicked one. This ensures that only one dropdown can be open at a time. --- .../components/dropdown-select/dropdown-select.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx index 1c7c06b6b8..8eaf6d4e41 100644 --- a/packages/components/src/components/dropdown-select/dropdown-select.tsx +++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx @@ -7,8 +7,8 @@ import { State, Watch, Event, - EventEmitter, - VNode, + type EventEmitter, + type VNode, } from '@stencil/core'; import classNames from 'classnames'; import statusNote from '../../utils/status-note'; @@ -228,6 +228,8 @@ function isInView(element: HTMLElement) { ); } +let activeDropdown = null; + @Component({ tag: 'scale-dropdown-select', styleUrl: 'dropdown-select.css', @@ -461,7 +463,15 @@ export class DropdownSelect { }; handleClick = () => { + // * This is a fix to prevent the dropdown from being opened when the user clicks on another combobox. + // ! https://github.com/telekom/scale/issues/2285 + if (activeDropdown && activeDropdown !== this) { + activeDropdown.setOpen(false); + } + this.setOpen(!this.open); + activeDropdown = this; + const indexOfValue = readOptions(this.hostElement).findIndex( ({ value }) => value === this.value ); From bb7aabdb0a56ccdce245947bd35e69861bf3bc17 Mon Sep 17 00:00:00 2001 From: tallence-dsulyok <118277128+tallence-dsulyok@users.noreply.github.com> Date: Fri, 12 Apr 2024 10:29:22 +0200 Subject: [PATCH 2/2] fix(telekom-profile-menu): keyboard accessibility & optional logout handler (#2306) * fix(app-navigation-user-menu): keyboard activation of links & buttons * fix(app-navigation-user-menu): optional clickHandler for logout button * fix(app-navigation-user-menu): mention clickHandler property in storybook * fix(app-navigation-user-menu): fixed link to component description in storybook * fix(telekom-profile-menu): mention new optional logoutHandler in readme --- .../app-navigation-user-menu.tsx | 12 +++++------ .../telekom/telekom-profile-menu/readme.md | 1 + .../telekom-profile-menu.tsx | 20 +++++++++++-------- .../TelekomBrandHeader.stories.mdx | 10 ++++++++++ .../telekom-brand-header.md | 2 +- .../telekom-brand-header_de.md | 2 +- 6 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx index d46c24ff23..d9c5714e68 100644 --- a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx +++ b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx @@ -88,10 +88,9 @@ export class AppNavigationUserMenu { }} onKeyDown={(e) => { if ([' ', 'Enter'].includes(e.key)) { - e.stopImmediatePropagation(); - e.preventDefault(); - if (item.onClick) { + e.stopImmediatePropagation(); + e.preventDefault(); item.onClick(e); } this.hide(); @@ -128,16 +127,17 @@ export class AppNavigationUserMenu { part="button" onClick={(e) => { if (item.onClick) { + e.stopImmediatePropagation(); + e.preventDefault(); item.onClick(e); } this.hide(); }} onKeyDown={(e) => { if ([' ', 'Enter'].includes(e.key)) { - e.stopImmediatePropagation(); - e.preventDefault(); - if (item.onClick) { + e.stopImmediatePropagation(); + e.preventDefault(); item.onClick(e); } this.hide(); diff --git a/packages/components/src/components/telekom/telekom-profile-menu/readme.md b/packages/components/src/components/telekom/telekom-profile-menu/readme.md index 09d31538a8..3e10d59084 100644 --- a/packages/components/src/components/telekom/telekom-profile-menu/readme.md +++ b/packages/components/src/components/telekom/telekom-profile-menu/readme.md @@ -21,6 +21,7 @@ | `loginSettingsLabel` | `login-settings-label` | | `string` | `undefined` | | `loginSettingsUrl` | `login-settings-url` | | `string` | `undefined` | | `loginUrl` | `login-url` | | `string` | `undefined` | +| `logoutHandler` | `logout-handler` | | `string` | `undefined` | | `logoutLabel` | `logout-label` | | `string` | `undefined` | | `logoutUrl` | `logout-url` | | `string` | `undefined` | | `registerHeadline` | `register-headline` | | `string` | `undefined` | diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx index 99b72b80ba..598db4e56e 100644 --- a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx +++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx @@ -82,6 +82,7 @@ export class TelekomProfileMenu { @Prop() logoutLabel: string; @Prop() logoutUrl?: string; + @Prop() logoutHandler?: string; @State() menuOpen = false; @@ -161,6 +162,16 @@ export class TelekomProfileMenu { ); } + buildLogoutButton() { + return { + type: 'button', + name: this.logoutLabel, + href: this.logoutUrl || LOGOUT_DEFAULT, + variant: 'secondary', + onClick: this.logoutHandler, + }; + } + buildUserNavigation() { const divider = [{ type: 'divider' }]; @@ -187,13 +198,6 @@ export class TelekomProfileMenu { icon: 'service-settings', }; - const logout = { - type: 'button', - name: this.logoutLabel, - href: this.logoutUrl || LOGOUT_DEFAULT, - variant: 'secondary', - }; - let menu = []; menu = menu.concat(userInfo); @@ -211,7 +215,7 @@ export class TelekomProfileMenu { menu = menu.concat(divider); } - menu = menu.concat(logout); + menu = menu.concat(this.buildLogoutButton()); return menu; } diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx index 3c51e59f24..53d025a5d5 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx @@ -539,6 +539,11 @@ window.onload = () => { email: 'alexander.dreyer@t-online.de', }); profileMenu.serviceLinks = JSON.stringify(serviceLinks); + + // optional: set a custom handler for clicks on logout button + profileMenu.logoutHandler = () => { + // ... + } }; ``` @@ -605,6 +610,11 @@ window.onload = () => { email: 'alexander.dreyer@t-online.de', }); profileMenu.serviceLinks = JSON.stringify(serviceLinks); + + // optional: set a custom handler for clicks on logout button + profileMenu.logoutHandler = () => { + // ... + } }; ``` diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md index d2a79f44a2..53b7a2d88a 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md @@ -126,4 +126,4 @@ This component is still in the beta phase. When testing it, keep in mind that it - [Sidebar Navigation](?path=/usage/components-sidebar-navigation--standard) - [Tab Navigation](?path=/usage/components-tab-navigation--text-icon) - [Accordion](?path=/usage/components-accordion--standard) -- [Profile Menu](?path=/docs/components-telekom-profile-menu--logged-out) +- [Profile Menu](?path=/docs/components-telekom-brand-header-navigation--profile-menu-logged-out) diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md index ae50cab8df..9e669e313d 100644 --- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md +++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md @@ -127,4 +127,4 @@ Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenk - [Sidebar Navigation](?path=/usage/components-sidebar-navigation--standard) - [Tab Navigation](?path=/usage/components-tab-navigation--text-icon) - [Accordion](?path=/usage/components-accordion--standard) -- [Profile Menu](?path=/docs/components-telekom-profile-menu--logged-out) +- [Profile Menu](?path=/docs/components-telekom-brand-header-navigation--profile-menu-logged-out)