Merge pull request #193 from gsoft-inc/feature/ds-462

Prevent Listbox & Menu icons/avatars from shrinking - feature/ds-462
gsoft-inc · Nov 21, 2024 · 331c01d · 331c01d
2 parents d1489a5 + c735366
commit 331c01d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/witty-peaches-return.md b/.changeset/witty-peaches-return.md
@@ -0,0 +1,5 @@
+---
+"@orbit-ui/transition-components": patch
+---
+
+Prevent listbox and menu icon/avatar from shrinking
diff --git a/packages/components/src/listbox/src/Listbox.css b/packages/components/src/listbox/src/Listbox.css
@@ -101,6 +101,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc
 .o-ui-listbox-option-start-icon {
     margin-right: var(--hop-space-inline-sm);
     grid-area: aside;
+    flex-shrink: 0;
 }
 
 /* OPTION | WITH DESCRIPTION | ICONS | START ICON */
@@ -111,6 +112,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc
 /* OPTION | ICONS | END ICON */
 .o-ui-listbox-option-end-icon {
     margin-left: var(--hop-space-inline-sm);
+    flex-shrink: 0;
 }
 
 /* SECTION */
@@ -130,6 +132,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc
 /* AVATAR */
 .o-ui-listbox-option-avatar {
     margin-right: var(--hop-space-inline-sm);
+    flex-shrink: 0;
     grid-area: aside;
 }
 

diff --git a/packages/components/src/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css
@@ -72,6 +72,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 
 /* ITEM | ICON | START  */
 .o-ui-menu-item-start-icon {
+    flex-shrink: 0;
     margin-right: var(--hop-space-inline-sm);
     grid-row-start: 1;
     grid-row-end: 3;
@@ -83,6 +84,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 
 /* ITEM | ICON | END  */
 .o-ui-menu-item-end-icon {
+    flex-shrink: 0;
     margin-left: var(--hop-space-inline-sm);
 }
 
@@ -194,6 +196,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 .o-ui-menu-item-option-avatar {
     margin-right: var(--hop-space-inline-sm);
     grid-area: aside;
+    flex-shrink: 0;
     align-self: center;
 }