Files
twenty/packages/twenty-ui
Raphaël Bosi aeed1c9f15 406 animate the command menu button (#10305)
Closes https://github.com/twentyhq/core-team-issues/issues/406

- Added animation on the Icon (The dots rotate and transform into an a
cross)
- Introduced a new component `AnimatedButton`. All the button styling
could be extracted to another file so we don't duplicate the code, but
since `AnimatedLightIconButton` duplicates the style from
`LightIconButton`, I did the same here.
- Added an animate presence component on the command menu to have a
smooth transition from `open` to `close` state
- Merged the open and close command menu button
- For all the pages that are not an index page or a record page, we want
the old behavior because there is no button in the page header to open
the command menu

# Before


https://github.com/user-attachments/assets/5ec7d9eb-9d8b-4838-af1b-c04382694342


# After


https://github.com/user-attachments/assets/f700deec-1c52-4afd-b294-f9ee7b9206e9
2025-02-18 18:07:11 +01:00
..
2024-06-30 20:02:13 +02:00
2025-01-20 23:10:39 +01:00

Twenty UI

This library was generated with Nx.

Building

Run npx nx build twenty-ui to build the library.

Storybook Server

Run npx nx start twenty-ui to start the storybook development server on localhost:6006.

Running unit tests

Run npx nx test twenty-ui to execute the unit tests via Jest.