fix(ui2): transition for aria-expanded buttons (#101083)

there's currently a timing problem between multiple animations happening
when a `DropdownButton` is clicked:

- first, `:active` starts, which triggers a 120ms transition animation
to press the button down
- then, mid-animation, react re-renders the `DropdownButton` with
`aria-expanded: true` (this is dependent on the `isOpen` state from
react-aria.
- this will trigger another 120ms transition for the
`&[aria-expanded="true"]` selector.

The fix here is to turn of `transitions` for when we trigger to
`aria-expanded`, as we can reliably expect the `:active` transition to
have pressed our button down. This now “just” forces the button to stay
pressed, without an extra animation.

before:


https://github.com/user-attachments/assets/fbb73853-36f4-445c-a76a-1f84c295fbe5

after:


https://github.com/user-attachments/assets/35db7b36-5f6e-42b0-a668-55b60866e665

/edit: turns out `SegmentedControl` has the same problem, so we also
need that “transition-reset” for `aria-checked`:

before:


https://github.com/user-attachments/assets/817f602f-df86-428b-b146-5d8b21a8c8bc

after:


https://github.com/user-attachments/assets/7c7482ff-10b9-4f75-8ff4-69362b7f7806

---------

Co-authored-by: Nate Moore <[email protected]>

Author: TkDodo

static/app/components/core/button/styles.chonk.tsx

@@ -158,6 +158,15 @@ export function DO_NOT_USE_getChonkButtonStyles(
       },
     },
 
+    '&[aria-expanded="true"], &[aria-checked="true"]': {
+      '&::after': {
+        transition: 'none',
+      },
+      '> span:last-child': {
+        transition: 'none',
+      },
+    },
+
     '&:disabled, &[aria-disabled="true"]': {
       '&::after': {
         transform: 'translateY(0px)',