From 23ec1570044ced3704181b1b46756e1dd38b688f Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Wed, 28 Aug 2024 10:18:58 +0200
Subject: [PATCH] OZG-6102 rename popup button selector
---
.../design-system/src/lib/popup/popup/popup.component.ts | 5 ++---
.../libs/design-system/src/lib/popup/popup/popup.stories.ts | 6 +++---
2 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts b/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
index a4901d657b..0a92ee71d3 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
+++ b/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
@@ -9,7 +9,6 @@ import { twMerge } from 'tailwind-merge';
imports: [CommonModule, CdkTrapFocus],
template: `<div class="relative w-fit">
<button
- class="w-fit outline-2 outline-offset-2 outline-focus"
[ngClass]="[twMerge('w-fit outline-2 outline-offset-2 outline-focus', buttonClass)]"
(click)="togglePopup()"
[attr.aria-expanded]="isPopupOpen"
@@ -18,11 +17,11 @@ import { twMerge } from 'tailwind-merge';
data-test-id="popup-button"
#button
>
- <ng-content select="[button]" />
+ <ng-content select="[button-content]" />
</button>
<ul
*ngIf="isPopupOpen"
- class="max-h-120 animate-fadeIn absolute min-w-44 max-w-80 overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none"
+ class="absolute max-h-120 min-w-44 max-w-80 animate-fadeIn overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none"
[ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'"
role="dialog"
aria-modal="true"
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts b/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
index ecde2c1614..015112aabc 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
@@ -43,7 +43,7 @@ export const Default: Story = {
render: (args) => ({
props: args,
template: `<ods-popup ${argsToTemplate(args)}>
- <ods-user-icon button />
+ <ods-user-icon button-content />
<ods-popup-list-item caption="Lorem" />
<ods-popup-list-item caption="Ipsum" />
<ods-popup-list-item caption="Dolor" />
@@ -55,7 +55,7 @@ export const LongText: Story = {
render: (args) => ({
props: args,
template: `<ods-popup ${argsToTemplate(args)}>
- <p button>Trigger popup</p>
+ <p button-content>Trigger popup</p>
<ods-popup-list-item caption="Lorem" />
<ods-popup-list-item caption="Lorem ipsum dolor sit amet" />
</ods-popup>`,
@@ -66,7 +66,7 @@ export const ItemsWithIcons: Story = {
render: (args) => ({
props: args,
template: `<ods-popup ${argsToTemplate(args)}>
- <p button>Trigger popup</p>
+ <p button-content>Trigger popup</p>
<ods-popup-list-item caption="Lorem">
<ods-save-icon icon size="small" />
</ods-popup-list-item>
--
GitLab