Merge pull request #5114 from cardstack/cs-11326-standardize-dropdown-arrow

Author: lukemelia

packages/boxel-ui/addon/src/components/selection-menu/index.gts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 
 import type { MenuDivider } from '../../helpers/menu-divider.ts';
 import type { MenuItem } from '../../helpers/menu-item.ts';
-import { DropdownArrowDown } from '../../icons.gts';
+import CaretDown from '../../icons/caret-down.gts';
 import BoxelButton from '../button/index.gts';
 import BoxelDropdown from '../dropdown/index.gts';
 import Menu from '../menu/index.gts';
@@ -66,7 +66,7 @@ export default class SelectionMenu extends Component<Signature> {
           >
             <SelectionCheckmark class='selection-menu-icon' />
             <span class='selection-menu-count'>{{@selectedCount}}</span>
-            <DropdownArrowDown
+            <CaretDown
               class='selection-menu-caret'
               width='13px'
               height='13px'

packages/boxel-ui/addon/src/components/sort-dropdown/index.gts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 
 import { MenuDivider } from '../../helpers/menu-divider.ts';
 import { MenuItem } from '../../helpers/menu-item.ts';
-import DropdownIcon from '../../icons/dropdown-arrow-down.gts';
+import CaretDown from '../../icons/caret-down.gts';
 import BoxelButton from '../button/index.gts';
 import BoxelDropdown from '../dropdown/index.gts';
 import BoxelMenu from '../menu/index.gts';
@@ -34,7 +34,7 @@ export default class SortDropdown extends Component<Signature> {
               {{bindings}}
             >
               {{if @selectedOption @selectedOption.displayName 'Please Select'}}
-              <DropdownIcon width='12px' height='12px' />
+              <CaretDown class='sort-button-caret' width='12px' height='12px' />
             </BoxelButton>
           </:trigger>
           <:content as |dd|>
@@ -65,8 +65,15 @@ export default class SortDropdown extends Component<Signature> {
           padding-left: var(--boxel-sp-sm);
           padding-right: var(--boxel-sp-sm);
         }
-        .sort-button > svg {
+        .sort-button-caret {
           margin-left: auto;
+          transition: transform var(--boxel-transition);
+        }
+        /* Flip the caret while the menu is open, matching boxel-ui's
+           select/dropdown triggers. BoxelDropdown sets aria-expanded on the
+           trigger button via the yielded bindings. */
+        .sort-button[aria-expanded='true'] .sort-button-caret {
+          transform: rotate(180deg);
         }
       }
     </style>