1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 05:13:29 +00:00

[CL-801] Move popover in kitchen sink story to avoid scrolling (#15767)

This commit is contained in:
Vicki League
2025-07-25 08:34:39 -04:00
committed by GitHub
parent 594455af88
commit 37987f4f97
2 changed files with 26 additions and 10 deletions

View File

@@ -105,7 +105,21 @@ class KitchenSinkDialog {
<div class="tw-my-6">
<h1 bitTypography="h1">Bitwarden Kitchen Sink<bit-avatar text="Bit Warden"></bit-avatar></h1>
<a bitLink linkType="primary" href="#">Learn more</a>
<a bitLink linkType="primary" href="#">This is a link</a>
<p bitTypography="body1" class="tw-inline">
&nbsp;and this is a link button popover trigger:&nbsp;
</p>
<button
bitLink
linkType="primary"
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
type="button"
slot="end"
aria-label="Popover trigger link"
>
<i class="bwi bwi-question-circle"></i>
</button>
</div>
<bit-callout type="info" title="About the Kitchen Sink">
@@ -149,6 +163,14 @@ class KitchenSinkDialog {
</bit-section>
</bit-tab>
</bit-tab-group>
<bit-popover [title]="'Educational Popover'" #myPopover>
<div>You can learn more things at:</div>
<ul class="tw-mt-2 tw-mb-0 tw-ps-4">
<li>Help center</li>
<li>Support</li>
</ul>
</bit-popover>
`,
})
export class KitchenSinkMainComponent {

View File

@@ -6,7 +6,6 @@ import {
userEvent,
getAllByRole,
getByRole,
getByLabelText,
fireEvent,
getByText,
getAllByLabelText,
@@ -155,16 +154,11 @@ export const PopoverOpen: Story = {
render: Default.render,
play: async (context) => {
const canvas = context.canvasElement;
const passwordLabelIcon = getByLabelText(canvas, "A random password (required)", {
selector: "button",
const popoverLink = getByRole(canvas, "button", {
name: "Popover trigger link",
});
await userEvent.click(passwordLabelIcon);
},
parameters: {
chromatic: {
disableSnapshot: true,
},
await userEvent.click(popoverLink);
},
};