Skip to content

Commit

Permalink
fix(Side menu item): misalignment when menu is collapsed (#453)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgonzalezr
dgonzalezr committed Aug 18, 2023
1 parent 70295c9 commit 4e6e3c8
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 76 deletions.
126 changes: 64 additions & 62 deletions packages/bee-q/src/components/side-menu-item/__tests__/bq-side-menu-item.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,95 @@ import { newE2EPage } from '@stencil/core/testing';

describe('bq-side-menu-item', () => {
it('should render', async () => {
const page = await newE2EPage();
await page.setContent('<bq-side-menu-item></bq-side-menu-item>');
const page = await newE2EPage({
html: '<bq-side-menu-item></bq-side-menu-item>',
});

const menuItemElem = await page.find('bq-side-menu-item');
expect(menuItemElem).toHaveClass('hydrated');
});

it('should have shadow root', async () => {
const page = await newE2EPage();
await page.setContent('<bq-side-menu-item></bq-side-menu-item>');
const page = await newE2EPage({
html: '<bq-side-menu-item></bq-side-menu-item>',
});

const menuItemElem = await page.find('bq-side-menu-item');
expect(menuItemElem.shadowRoot).not.toBeNull();
});

it('should display text', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item disabled="true">
Menu item label
</bq-side-menu-item>
`);
const page = await newE2EPage({
html: `
<bq-side-menu-item disabled="true">
Menu item label
</bq-side-menu-item>
`,
});

const menuItemElem = await page.find('bq-side-menu-item');
expect(menuItemElem).toEqualText('Menu item label');
});

it('should trigger click', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item>
Menu item label
</bq-side-menu-item>
`);

const bqFocus = await page.spyOnEvent('bqFocus');
const bqBlur = await page.spyOnEvent('bqBlur');
const page = await newE2EPage({
html: `
<bq-side-menu-item>
Menu item label
</bq-side-menu-item>
`,
});
const bqClick = await page.spyOnEvent('bqClick');

const menuItemElem = await page.find('bq-side-menu-item');

await menuItemElem.click();

expect(bqFocus).toHaveReceivedEventTimes(1);
expect(bqBlur).toHaveReceivedEventTimes(0);
expect(bqClick).toHaveReceivedEventTimes(1);
});
});

it('should be keyboard accessible', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item>
<bq-icon size="18" name="user" slot="prefix"></bq-icon>
<span>Verified users</span>
</bq-side-menu-item>
`);

const page = await newE2EPage({
html: `
<bq-side-menu-item>
<bq-icon size="18" name="user" slot="prefix"></bq-icon>
<span>Verified users</span>
</bq-side-menu-item>
`,
});
const bqFocus = await page.spyOnEvent('bqFocus');
const bqBlur = await page.spyOnEvent('bqBlur');
const bqClick = await page.spyOnEvent('bqClick');

await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
await page.waitForChanges();

expect(bqFocus).toHaveReceivedEventTimes(1);
expect(bqClick).toHaveReceivedEventTimes(0);
expect(bqBlur).toHaveReceivedEventTimes(0);
expect(bqBlur).toHaveReceivedEventTimes(1);
});

it('should handle `active` property', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item active="true">
Menu item label
</bq-side-menu-item>
`);

const menuItemElem = await page.find('bq-side-menu-item >>> .bq-side-menu--item');
const page = await newE2EPage({
html: `
<bq-side-menu-item active="true">
Menu item label
</bq-side-menu-item>
`,
});

const menuItemElem = await page.find('bq-side-menu-item >>> .bq-side-menu__item');

expect(menuItemElem).toHaveClass('active');
});

it('should handle `disabled` property', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item disabled="true">
Menu item label
</bq-side-menu-item>
`);

const page = await newE2EPage({
html: `
<bq-side-menu-item disabled="true">
Menu item label
</bq-side-menu-item>
`,
});
const bqFocus = await page.spyOnEvent('bqSideMenuItemFocus');
const bqBlur = await page.spyOnEvent('bqSideMenuItemBlur');
const bqClick = await page.spyOnEvent('bqSideMenuItemClick');
Expand All @@ -107,13 +107,14 @@ it('should handle `disabled` property', async () => {
});

it('should render prefix element', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item>
<span slot="prefix">Prefix</span>
Dashboard
</bq-side-menu-item>
`);
const page = await newE2EPage({
html: `
<bq-side-menu-item>
<span slot="prefix">Prefix</span>
Dashboard
</bq-side-menu-item>
`,
});

const prefixText = await page.$eval('bq-side-menu-item', (element) => {
const slotElement = element.shadowRoot.querySelector('slot[name="prefix"]');
Expand All @@ -126,13 +127,14 @@ it('should render prefix element', async () => {
});

it('should render suffix element', async () => {
const page = await newE2EPage();
await page.setContent(`
<bq-side-menu-item>
<span slot="suffix">Suffix</span>
Dashboard
</bq-side-menu-item>
`);
const page = await newE2EPage({
html: `
<bq-side-menu-item>
<span slot="suffix">Suffix</span>
Dashboard
</bq-side-menu-item>
`,
});

const suffixText = await page.$eval('bq-side-menu-item', (element) => {
const slotElement = element.shadowRoot.querySelector('slot[name="suffix"]');
Expand Down
10 changes: 5 additions & 5 deletions packages/bee-q/src/components/side-menu-item/bq-side-menu-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export class BqSideMenuItem {
private menuItem = () => (
<a
class={{
'bq-side-menu--item': true,
'bq-side-menu__item': true,
active: this.active,
disabled: this.disabled,
'is-collapsed': this.collapse,
Expand All @@ -139,16 +139,16 @@ export class BqSideMenuItem {
slot="trigger"
part="base"
>
<div class="bq-side-menu--item__prefix flex items-center" part="prefix">
<div class="bq-side-menu__item--prefix flex items-center" part="prefix">
<slot name="prefix" />
</div>
<div
class="bq-side-menu--item__label overflow-hidden text-ellipsis whitespace-nowrap"
class="bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap"
ref={(labelElem) => (this.labelElem = labelElem)}
>
<slot onSlotchange={this.handleSlotChange} />
</div>
<div class="bq-side-menu--item__suffix ml-auto flex items-center" part="suffix">
<div class="bq-side-menu__item--suffix ml-auto flex items-center" part="suffix">
<slot name="suffix" />
</div>
</a>
Expand All @@ -158,7 +158,7 @@ export class BqSideMenuItem {
return !this.collapse ? (
this.menuItem()
) : (
<bq-tooltip class="block" placement="right" exportparts="trigger, panel">
<bq-tooltip class="bq-side-menu__item--tooltip block" placement="right" exportparts="trigger, panel">
{this.textContent}
{this.menuItem()}
</bq-tooltip>
Expand Down
16 changes: 8 additions & 8 deletions packages/bee-q/src/components/side-menu-item/scss/bq-side-menu-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@apply block;
}

.bq-side-menu--item {
.bq-side-menu__item {
@apply flex items-center gap-x-s rounded-s px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;

// Default state
Expand All @@ -25,25 +25,25 @@
}
}

.bq-side-menu--item.active {
.bq-side-menu__item.active {
// Active state
@apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];
}

.bq-side-menu--item.disabled {
.bq-side-menu__item.disabled {
@apply text-[color:var(--bq-side-menu-item--text-disabled)] hover:cursor-not-allowed;
}

.bq-side-menu--item.is-collapsed {
.bq-side-menu__item.is-collapsed {
@apply justify-center gap-0;

.bq-side-menu--item__label,
.bq-side-menu--item__suffix {
.bq-side-menu__item--label,
.bq-side-menu__item--suffix {
@apply sr-only scale-0;
}
}

.bq-side-menu--item__label,
.bq-side-menu--item__suffix {
.bq-side-menu__item--label,
.bq-side-menu__item--suffix {
@apply transition-all duration-300 ease-in-out;
}
2 changes: 1 addition & 1 deletion packages/bee-q/src/components/tooltip/bq-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export class BqTooltip {
<div class="bq-tooltip relative" part="base">
{/* TRIGGER */}
<div
class="bq-tooltip--trigger flex"
class="bq-tooltip--trigger block"
onMouseOver={this.handleTriggerMouseOver}
onMouseLeave={this.handleTriggerMouseLeave}
onClick={this.handleTriggerOnClick}
Expand Down

0 comments on commit 4e6e3c8

Please sign in to comment.