Files
twenty/packages/twenty-front/src/modules/settings/constants/ExpandedWidthAnimationVariants.ts
gitstart-app[bot] 7ceaa879fe Avanced Settings: Custom API names for Select & Multi-Select Keys (#7489)
### Description

- text input was changed because it renders an empty div as the right
icon, but the margin and padding affect the layout
- we have duplicated code on ExpandedWidthAnimationVariants.ts, because
of an eslint rule that prevents more than one const definition, can we
ignore the rule?
- 

### Demo


<https://www.loom.com/share/17a37bf5549a4a23ba12343b6046ec6b?sid=4cf297f3-66db-44c9-9a9b-7bde89b90d02>

### Refs

<https://github.com/twentyhq/twenty/issues/6146>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2024-10-11 10:34:31 +02:00

32 lines
895 B
TypeScript

import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/AdvancedSettingsAnimationDurations';
export const EXPANDED_WIDTH_ANIMATION_VARIANTS = {
initial: {
opacity: 0,
width: 0,
overflow: 'hidden',
transition: {
opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
width: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
},
},
animate: {
opacity: 1,
width: '100%',
overflow: 'hidden',
transition: {
opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
width: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
},
},
exit: {
opacity: 0,
width: 0,
overflow: 'hidden',
transition: {
opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
width: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
},
},
};