From 97b129704d36733a650cad99229b475a3f92937c Mon Sep 17 00:00:00 2001 From: dario-i22 <118465726+dario-i22@users.noreply.github.com> Date: Fri, 2 Feb 2024 09:07:52 +0100 Subject: [PATCH 1/9] fix(dropdown-select): escape name of hidden input in dropdown-select to support square brackets (#2267) --- .../src/components/dropdown-select/dropdown-select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx index c13886e3db..41a3ae18ef 100644 --- a/packages/components/src/components/dropdown-select/dropdown-select.tsx +++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx @@ -324,7 +324,7 @@ export class DropdownSelect { updateInputHidden(value: string = this.value): void { this.hostElement.querySelector( - `input[name=${this.name}]` + `input[name="${this.name}"]` ).value = value; } From 736a3013214540c8fe4cb7a7b62e30015fcf4e57 Mon Sep 17 00:00:00 2001 From: Arturo Castillo Delgado Date: Thu, 8 Feb 2024 07:38:52 +0100 Subject: [PATCH 2/9] fix(data-grid): heading height with hidden menu (#2270) * fix(data-grid): heading height with hidden menu * style: format --- packages/components/src/components/data-grid/data-grid.css | 5 +++-- packages/components/src/components/data-grid/data-grid.tsx | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/data-grid/data-grid.css b/packages/components/src/components/data-grid/data-grid.css index 59a07276da..c606b5aa4d 100644 --- a/packages/components/src/components/data-grid/data-grid.css +++ b/packages/components/src/components/data-grid/data-grid.css @@ -127,8 +127,9 @@ display: none; } -.data-grid:not(.data-grid--hide-menu) .data-grid__title-block { - min-height: 72px; +.data-grid:not(.data-grid--hide-menu.data-grid--no-heading) + .data-grid__title-block { + min-height: var(--telekom-spacing-composition-space-18, 72px); } .data-grid--hide-menu .data-grid__title-block { padding-right: var(--telekom-spacing-composition-space-06); diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx index dfb7e0f3c5..98c5b4c292 100644 --- a/packages/components/src/components/data-grid/data-grid.tsx +++ b/packages/components/src/components/data-grid/data-grid.tsx @@ -334,7 +334,8 @@ export class DataGrid { this.shadeAlternate && `${name}--shade-alternate`, this.freezeHeader && `${name}--freeze-header`, this.hideBorder && `${name}--hide-border`, - this.hideMenu && `${name}--hide-menu` + this.hideMenu && `${name}--hide-menu`, + !this.heading && `${name}--no-heading` ); } From 41374f0b8bb847507e0fd8565d01ad314d467fb6 Mon Sep 17 00:00:00 2001 From: tallence-dsulyok <118277128+tallence-dsulyok@users.noreply.github.com> Date: Thu, 8 Feb 2024 09:47:33 +0100 Subject: [PATCH 3/9] feat(telekom-profile-menu): WIP (#2208) * feat: Telekom user menu (WIP) * fix: js error when closing menu-flyout * removed TODOs * updated default URLs * cleaned up demo * added profile menu demo draft to storybook * storybook: added component * storybook: added missing attributes * storybook: added missing attributes * storybook: added missing attributes * default value for serviceLinks * debug service links * debug service links * added a11y labels: close menu, open (mobile) menu * added a11y labels: close menu, open (mobile) menu * storybook: added argsTable * storybook: added loggedIn-toggle to argsTable * storybook: added loggedIn-toggle to argsTable * storybook: added loggedIn-toggle to argsTable (undo removing props) * storybook: loggedIn default true * storybook: add profile menu as separate story * storybook: add profile menu as separate story - enable argsTable * storybook: add profile menu as separate story - replaced dummy component * storybook: add profile menu as separate story - style preview * storybook: add profile menu as separate story - style preview * storybook: add profile menu as separate story - style preview * storybook: add profile menu as separate story - hide args table * storybook: add profile menu as separate story - added component properties * storybook: add profile menu as separate story - separate logged in / logged out stories * storybook: add profile menu as separate story - increased preview height * storybook: added usage docs, removed and referenced profile menu from telekom-brand-header component * storybook: fix build * storybook: extended usage description * storybook: extended usage description * storybook: extended usage description * storybook: updated example code * storybook: prevent vertical flipping of menu-flyout-list in profile-menu * yarn lint & format * fix: code format * docs: updated profile-menu dependencies * fix: menu status condition * refactor: renamed component * refactor: renamed properties * refactor: renamed component folder * fix: display in storybook * fix(storybook): state changeable in canvas tab * fix(storybook): logout label in canvas tab after state change * fix: enable shadow dom * refactor: revert change of focus handling wehn closing menu-flyout * fix: checkmark size in loggedIn-badge * fix: trigger interaction state (remain black when activated) * fix: close menu with Escape * fix: checkmark size in loggedIn-badge (mobile-menu) * docs(storybook): added english properties, fixed service urls * docs(storybook): seperated german & english properties, fixed urls for logged-out view * fix: remove menu role from profile menu parents (so JAWS < 2023 does not ignore links in menu) * fix: remove aria-haspopup from profile menu trigger (so screenreaders do not imply menu role & navigation with arrow keys) * fix: changed demo's page lang to german (for correct screenreader output) * fix: remove HR elements from accessibility tree --- .../components/src/components/badge/badge.tsx | 1 + .../components/src/components/badge/readme.md | 2 + .../src/components/button/readme.md | 2 + .../components/src/components/link/readme.md | 2 + .../menu-flyout-list/menu-flyout-list.tsx | 13 +- .../src/components/menu-flyout-list/readme.md | 21 +- .../components/menu-flyout/menu-flyout.tsx | 13 +- .../src/components/menu-flyout/readme.md | 2 + .../app-navigation-user-menu.tsx | 11 +- .../app-navigation-user-menu/readme.md | 6 + .../src/components/telekom/logo/readme.md | 8 +- .../readme.md | 8 +- .../telekom/telekom-footer/readme.md | 8 +- .../telekom/telekom-mega-menu/readme.md | 8 +- .../telekom-mobile-flyout-canvas/readme.md | 2 + .../telekom/telekom-nav-flyout/readme.md | 2 + .../telekom/telekom-nav-item/readme.md | 2 + .../telekom-nav-item/telekom-nav-item.css | 5 + .../telekom/telekom-profile-menu/readme.md | 73 ++++ .../telekom-profile-menu.css | 268 +++++++++++++ .../telekom-profile-menu.tsx | 330 ++++++++++++++++ .../src/html/telekom-header-profile.html | 290 ++++++++++++++ .../.storybook/usage-addon/usage.js | 4 + .../telekom-profile-menu-logged-in.png | Bin 0 -> 35558 bytes .../telekom-profile-menu-logged-out.png | Bin 0 -> 30748 bytes .../TelekomBrandHeader.stories.mdx | 9 +- .../TelekomHeaderTemplate.vue | 4 + .../fixtures.js | 40 +- .../telekom-brand-header.md | 13 +- .../telekom-brand-header_de.md | 9 +- .../TelekomProfileMenu.vue | 61 +++ .../telekom-profile-menu.md | 38 ++ .../telekom-profile-menu.stories.mdx | 354 ++++++++++++++++++ .../telekom-profile-menu_de.md | 38 ++ 34 files changed, 1604 insertions(+), 43 deletions(-) create mode 100644 packages/components/src/components/telekom/telekom-profile-menu/readme.md create mode 100644 packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css create mode 100644 packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx create mode 100644 packages/components/src/html/telekom-header-profile.html create mode 100644 packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-in.png create mode 100644 packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-out.png create mode 100644 packages/storybook-vue/stories/components/telekom-profile-menu/TelekomProfileMenu.vue create mode 100644 packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.md create mode 100644 packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.stories.mdx create mode 100644 packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu_de.md diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx index 1ce007a17e..b67444ee97 100644 --- a/packages/components/src/components/badge/badge.tsx +++ b/packages/components/src/components/badge/badge.tsx @@ -49,6 +49,7 @@ export class Badge { aria-label={this.count ? this.getAriaLabel() : this.label} > +