Skip to content

Commit

Permalink
[FIX] menu: non-aligned menu items
Browse files Browse the repository at this point in the history 
If the menu items were too long, and that the menu item had a blank
space in place of an icon, the menu texts were not aligned properly
because of a flex shrink.

Task: 3814222
  • Loading branch information
@hokolomopo @LucasLefevre
hokolomopo authored and LucasLefevre committed Mar 25, 2024
1 parent d1e4151 commit 037a4d5
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 23 deletions.
2 changes: 1 addition & 1 deletion src/components/menu/menu.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
t-att-class="{ 'o-menu-root': isMenuRoot, 'disabled': !isMenuEnabled, 'o-menu-item-active': isParentMenu(subMenu, menuItem)}"
t-att-style="getColor(menuItem)">
<div class="d-flex w-100">
<div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle">
<div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle flex-shrink-0">
<t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
</div>
<div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
Expand Down
22 changes: 11 additions & 11 deletions tests/__snapshots__/top_bar_component.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,7 +591,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -627,7 +627,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -654,7 +654,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -685,7 +685,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -712,7 +712,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -739,7 +739,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -765,7 +765,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -792,7 +792,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -819,7 +819,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand All @@ -846,7 +846,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down Expand Up @@ -877,7 +877,7 @@ exports[`TopBar component can set cell format 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
/>
<div
Expand Down
22 changes: 11 additions & 11 deletions tests/menus/__snapshots__/context_menu_component.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -50,7 +50,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -122,7 +122,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -170,7 +170,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -201,7 +201,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -232,7 +232,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -280,7 +280,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -311,7 +311,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -342,7 +342,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down Expand Up @@ -390,7 +390,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
class="d-flex w-100"
>
<div
class="o-menu-item-icon align-middle"
class="o-menu-item-icon align-middle flex-shrink-0"
>
<svg
class="o-icon"
Expand Down

0 comments on commit 037a4d5

Please sign in to comment.