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 a4901d657b0d4d7246dcff422553a17fa60a31df..0a92ee71d3ecb72428af9fe37b74067121c95802 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 ecde2c16145d2e95ddcd3327d51e003d27f721f6..015112aabc92eee9b30ec4ab36ab84cce8da850c 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>