mirror of
https://github.com/bitwarden/browser
synced 2025-12-10 13:23:34 +00:00
[CL-801] Move popover in kitchen sink story to avoid scrolling (#15767)
This commit is contained in:
@@ -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">
|
||||
and this is a link button popover trigger:
|
||||
</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 {
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user