chore: Change camel case CSS string properties to kebab case (#6939)

## Summary This PR changes properties like `allowDiscrete`, `easeIn`, `alternateReverse` to `allow-discrete`, `ease-in`, `alternate-reverse`. We make this change to align these properties with RN style props, like `flexDirection` which accepts strings in kebab case (e.g. `row-reverse`).
software-mansion · Jan 27, 2025 · 82ecdc9 · 82ecdc9
1 parent 2b4a640
commit 82ecdc9
Show file tree

Hide file tree

Showing 64 changed files with 243 additions and 232 deletions.
diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx
@@ -14,7 +14,7 @@ const animationSettings: CSSAnimationSettings = {
   animationDirection: 'alternate',
   animationDuration: '2s',
   animationIterationCount: 'infinite',
-  animationTimingFunction: 'easeInOut',
+  animationTimingFunction: 'ease-in-out',
 };
 
 const AnimationSettingsCard: RouteCardComponent = (props) => (

diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx
@@ -116,7 +116,7 @@ const styles = css.create({
   box: {
     animationDuration: ANIMATION_DURATION,
     animationIterationCount: 'infinite',
-    animationTimingFunction: 'easeInOut',
+    animationTimingFunction: 'ease-in-out',
     backgroundColor: colors.primary,
     borderRadius: radius.sm,
     height: sizes.md,

diff --git a/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx b/apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx
@@ -273,7 +273,7 @@ const styles = css.create({
     animationDuration: `${TIME_MULTIPLIER * 0.6}s`,
     animationIterationCount: 'infinite',
     animationName: propulsedFlame,
-    animationTimingFunction: 'easeIn',
+    animationTimingFunction: 'ease-in',
   },
   scene: {
     transform: [
@@ -286,7 +286,7 @@ const styles = css.create({
     animationDuration: `${TIME_MULTIPLIER * 0.48}s`,
     animationIterationCount: 'infinite',
     animationName: propulsedSpark,
-    animationTimingFunction: 'easeIn',
+    animationTimingFunction: 'ease-in',
     height: 0.5 * sizes.xxxs,
     width: 0.5 * sizes.xxxs,
   },

diff --git a/...pps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorFormats.tsx b/...pps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorFormats.tsx
@@ -20,7 +20,7 @@ export default function ColorsFormats() {
             backgroundColor: to,
           },
         },
-        animationTimingFunction: 'easeInOut',
+        animationTimingFunction: 'ease-in-out',
       })}
       renderExample={({ animation }) => (
         <Animated.View style={[styles.box, animation]} />
@@ -35,7 +35,7 @@ export default function ColorsFormats() {
               from: { backgroundColor: from },
               to: { backgroundColor: to },
             },
-            animationTimingFunction: 'easeInOut',
+            animationTimingFunction: 'ease-in-out',
           }),
           name: 'Predefined',
           sections: [

diff --git a/.../css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx b/.../css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx
@@ -27,7 +27,7 @@ const sharedConfig: CSSAnimationSettings = {
   animationDirection: 'alternate',
   animationDuration: '3s',
   animationIterationCount: 'infinite',
-  animationTimingFunction: 'easeInOut',
+  animationTimingFunction: 'ease-in-out',
 };
 
 export default function ColorProperties() {

diff --git a/...ss/examples/animations/screens/animatedProperties/layoutAndPositioning/others/Display.tsx b/...ss/examples/animations/screens/animatedProperties/layoutAndPositioning/others/Display.tsx
@@ -19,7 +19,7 @@ export default function Display() {
         animationDuration: '1s',
         animationFillMode: 'both',
         animationName: keyframes,
-        animationTimingFunction: 'easeOut',
+        animationTimingFunction: 'ease-out',
       })}
       renderExample={({ animation }) => (
         <Animated.View style={[animation, styles.box]} />

diff --git a/...mon-app/src/apps/css/examples/animations/screens/animationSettings/AnimationDirection.tsx b/...mon-app/src/apps/css/examples/animations/screens/animationSettings/AnimationDirection.tsx
@@ -30,8 +30,8 @@ export default function AnimationDirection() {
             { animationDirection: 'reverse', label: 'reverse' },
             { animationDirection: 'alternate', label: 'alternate' },
             {
-              animationDirection: 'alternateReverse',
-              label: 'alternateReverse',
+              animationDirection: 'alternate-reverse',
+              label: 'alternate-reverse',
             },
           ],
           title: 'Animation Direction',

diff --git a/...mon-app/src/apps/css/examples/animations/screens/animationSettings/AnimationPlayState.tsx b/...mon-app/src/apps/css/examples/animations/screens/animationSettings/AnimationPlayState.tsx
@@ -26,7 +26,7 @@ export default function AnimationPlayState() {
             transform: [{ translateX: '-100%' }],
           },
         },
-        animationTimingFunction: 'easeInOut',
+        animationTimingFunction: 'ease-in-out',
       }}
       cards={[
         {

diff --git a/...pp/src/apps/css/examples/animations/screens/animationSettings/AnimationTimingFunction.tsx b/...pp/src/apps/css/examples/animations/screens/animationSettings/AnimationTimingFunction.tsx
@@ -38,16 +38,19 @@ export default function AnimationTimingFunction() {
             {
               items: [
                 { animationTimingFunction: 'ease', label: 'ease' },
-                { animationTimingFunction: 'easeIn', label: 'easeIn' },
-                { animationTimingFunction: 'easeOut', label: 'easeOut' },
-                { animationTimingFunction: 'easeInOut', label: 'easeInOut' },
+                { animationTimingFunction: 'ease-in', label: 'ease-in' },
+                { animationTimingFunction: 'ease-out', label: 'ease-out' },
+                {
+                  animationTimingFunction: 'ease-in-out',
+                  label: 'ease-in-out',
+                },
                 { animationTimingFunction: 'linear', label: 'linear' },
-                { animationTimingFunction: 'stepStart', label: 'stepStart' },
+                { animationTimingFunction: 'step-start', label: 'step-start' },
                 {
                   animationFillMode: 'forwards',
                   animationIterationCount: 1,
-                  animationTimingFunction: 'stepEnd',
-                  label: 'stepEnd',
+                  animationTimingFunction: 'step-end',
+                  label: 'step-end',
                 },
               ],
               title: 'Predefined Easings',
@@ -121,20 +124,20 @@ export default function AnimationTimingFunction() {
                 'Creates an easing function that makes given number of even steps over increasing y-values. The second argument is a modifier that adds jumps before or after the steps.',
               items: [
                 {
-                  animationTimingFunction: steps(2, 'jumpStart'),
-                  label: steps(2, 'jumpStart').toString(),
+                  animationTimingFunction: steps(2, 'jump-start'),
+                  label: steps(2, 'jump-start').toString(),
                 },
                 {
-                  animationTimingFunction: steps(4, 'jumpEnd'),
-                  label: steps(4, 'jumpEnd').toString(),
+                  animationTimingFunction: steps(4, 'jump-end'),
+                  label: steps(4, 'jump-end').toString(),
                 },
                 {
-                  animationTimingFunction: steps(5, 'jumpNone'),
-                  label: steps(5, 'jumpNone').toString(),
+                  animationTimingFunction: steps(5, 'jump-none'),
+                  label: steps(5, 'jump-none').toString(),
                 },
                 {
-                  animationTimingFunction: steps(3, 'jumpBoth'),
-                  label: steps(3, 'jumpBoth').toString(),
+                  animationTimingFunction: steps(3, 'jump-both'),
+                  label: steps(3, 'jump-both').toString(),
                 },
               ],
               title: 'Steps Easing',

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/ChangingAnimation.tsx b/apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/ChangingAnimation.tsx
@@ -20,7 +20,7 @@ import { colors, flex, radius, sizes, spacing } from '@/theme';
 const animationSettings: CSSAnimationSettings = {
   animationDuration: '1s',
   animationIterationCount: 'infinite',
-  animationTimingFunction: 'easeInOut',
+  animationTimingFunction: 'ease-in-out',
 };
 
 const wiggle = css.keyframes({

diff --git a/...on-app/src/apps/css/examples/animations/screens/miscellaneous/KeyframeTimingFunctions.tsx b/...on-app/src/apps/css/examples/animations/screens/miscellaneous/KeyframeTimingFunctions.tsx
@@ -31,8 +31,8 @@ import { colors, flex, radius, sizes, spacing } from '@/theme';
 const AVAILABLE_TIMING_FUNCTIONS = [
   'linear',
   'ease',
-  'easeIn',
-  'easeOut',
+  'ease-in',
+  'ease-out',
   cubicBezier(0.175, 0.885, 0.32, 1.275),
   steps(4),
 ] satisfies Array<CSSAnimationTimingFunction>;
@@ -56,7 +56,7 @@ const DEFAULT_ANIMATION_CONFIG: SelectableConfig<CSSAnimationProperties> = {
   animationIterationCount: 'infinite',
   animationName: {
     '0%': {
-      $animationTimingFunction: getOptions('easeIn'),
+      $animationTimingFunction: getOptions('ease-in'),
       transform: [{ translateX: -sizes.lg }],
       width: sizes.xl,
     },

diff --git a/.../common-app/src/apps/css/examples/animations/screens/miscellaneous/MultipleAnimations.tsx b/.../common-app/src/apps/css/examples/animations/screens/miscellaneous/MultipleAnimations.tsx
@@ -61,7 +61,7 @@ const DEFAULT_ANIMATION_SETTINGS: SelectableConfig<CSSAnimationSettings> = {
   $animationDirection: {
     canDisable: true,
     maxNumberOfValues: 3,
-    options: ['normal', 'reverse', 'alternate', 'alternateReverse'],
+    options: ['normal', 'reverse', 'alternate', 'alternate-reverse'],
     value: 'alternate',
   },
   $animationDuration: {
@@ -93,11 +93,11 @@ const DEFAULT_ANIMATION_SETTINGS: SelectableConfig<CSSAnimationSettings> = {
     maxNumberOfValues: 3,
     options: [
       'linear',
-      'easeInOut',
+      'ease-in-out',
       steps(5),
       cubicBezier(0.175, 0.885, 0.32, 1.275),
     ],
-    value: ['easeInOut', cubicBezier(0.175, 0.885, 0.32, 1.275)],
+    value: ['ease-in-out', cubicBezier(0.175, 0.885, 0.32, 1.275)],
   },
 };
 

diff --git a/...-app/src/apps/css/examples/animations/screens/miscellaneous/UpdatingAnimationSettings.tsx b/...-app/src/apps/css/examples/animations/screens/miscellaneous/UpdatingAnimationSettings.tsx
@@ -31,16 +31,16 @@ const keyframes: CSSAnimationKeyframes = {
 
 const SETTINGS_OPTIONS = {
   animationDelay: ['-5s', '0s', '1s', '2s', '5s'],
-  animationDirection: ['normal', 'reverse', 'alternate', 'alternateReverse'],
+  animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'],
   animationDuration: ['1s', '2s', '5s', '10s'],
   animationFillMode: ['none', 'forwards', 'backwards', 'both'],
   animationIterationCount: [1, 2, 'infinite'],
   animationPlayState: ['running', 'paused'],
   animationTimingFunction: [
     'ease',
     'linear',
-    'easeIn',
-    'easeOut',
+    'ease-in',
+    'ease-out',
     cubicBezier(0.42, 0, 0.58, 1),
   ],
 } satisfies {

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Campfire.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/Campfire.tsx
@@ -121,7 +121,7 @@ const styles = css.create({
   flame: {
     animationDuration: ANIMATION_DURATION,
     animationIterationCount: 'infinite',
-    animationTimingFunction: 'easeIn',
+    animationTimingFunction: 'ease-in',
     backgroundColor: COLORS.yellow,
     borderRadius: radius.md,
     position: 'absolute',

diff --git a/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx b/apps/common-app/src/apps/css/examples/animations/screens/realWorldExamples/RocketInSpace.tsx
@@ -297,7 +297,7 @@ const styles = css.create({
     animationDuration: '0.3s',
     animationIterationCount: 'infinite',
     animationName: propulsedFlame,
-    animationTimingFunction: 'easeIn',
+    animationTimingFunction: 'ease-in',
     position: 'absolute',
   },
   rocket: {
@@ -314,7 +314,7 @@ const styles = css.create({
     animationDuration: '0.24s',
     animationIterationCount: 'infinite',
     animationName: propulsedSpark,
-    animationTimingFunction: 'easeIn',
+    animationTimingFunction: 'ease-in',
     height: 10,
     position: 'absolute',
     width: 10,

diff --git a/...mon-app/src/apps/css/examples/animations/screens/realWorldExamples/SpinnersAndLoaders.tsx b/...mon-app/src/apps/css/examples/animations/screens/realWorldExamples/SpinnersAndLoaders.tsx
@@ -501,7 +501,7 @@ const RectangleBounceStyles = css.create({
     animationDuration: '1.5s',
     animationIterationCount: 'infinite',
     animationName: rectangleBounce,
-    animationTimingFunction: 'easeInOut',
+    animationTimingFunction: 'ease-in-out',
     backgroundColor: colors.primary,
     height: '75%',
     width: '15%',
@@ -537,7 +537,7 @@ const pulseStyles = css.create({
     animationDuration: '1.5s',
     animationIterationCount: 'infinite',
     animationName: pulse,
-    animationTimingFunction: 'easeOut',
+    animationTimingFunction: 'ease-out',
     backgroundColor: colors.primary,
     borderRadius: '50%',
     height: '100%',
@@ -577,7 +577,7 @@ const doublePulseStyles = css.create({
     animationDuration: '1.5s',
     animationIterationCount: 'infinite',
     animationName: doublePulse,
-    animationTimingFunction: 'easeOut',
+    animationTimingFunction: 'ease-out',
     backgroundColor: colors.primary,
     borderRadius: '50%',
   },
@@ -617,7 +617,7 @@ const rectangleStyles = css.create({
     animationDuration: '1.2s',
     animationIterationCount: 'infinite',
     animationName: rectangle,
-    animationTimingFunction: 'easeInOut',
+    animationTimingFunction: 'ease-in-out',
     backgroundColor: colors.primary,
     height: '75%',
     width: '75%',
@@ -654,7 +654,7 @@ const threeDotsStyles = css.create({
     animationDuration: '1.5s',
     animationIterationCount: 'infinite',
     animationName: threeDots,
-    animationTimingFunction: 'easeInOut',
+    animationTimingFunction: 'ease-in-out',
     backgroundColor: colors.primary,
     borderRadius: '50%',
     height: 0.25 * SPINNER_SIZE,
@@ -703,7 +703,7 @@ const cubesStyles = css.create({
     animationDuration: '1.5s',
     animationIterationCount: 'infinite',
     animationName: cube,
-    animationTimingFunction: 'easeInOut',
+    animationTimingFunction: 'ease-in-out',
     backgroundColor: colors.primary,
     height: (1 / 3) * SPINNER_SIZE,
     width: (1 / 3) * SPINNER_SIZE,

diff --git a/apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx b/apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx
@@ -19,7 +19,7 @@ const TestExamplesCard: RouteCardComponent = (props) => (
 const TRANSITION_CONFIG: CSSTransitionProperties = {
   transitionDuration: 500,
   transitionProperty: 'transform',
-  transitionTimingFunction: 'easeInOut',
+  transitionTimingFunction: 'ease-in-out',
 };
 
 function Showcase() {

diff --git a/apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx b/apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx
@@ -69,7 +69,7 @@ function Showcase() {
                 transitionDelay: index * 75,
                 transitionDuration: 300,
                 transitionProperty: 'height',
-                transitionTimingFunction: 'easeInOut',
+                transitionTimingFunction: 'ease-in-out',
               },
             ]}
           />

diff --git a/...pp/src/apps/css/examples/transitions/screens/miscellaneous/ChangingTransitionProperty.tsx b/...pp/src/apps/css/examples/transitions/screens/miscellaneous/ChangingTransitionProperty.tsx
@@ -33,7 +33,7 @@ const PROPERTIES = [
 
 const transitionSettings: CSSTransitionSettings = {
   transitionDuration: '1s',
-  transitionTimingFunction: 'easeInOut',
+  transitionTimingFunction: 'ease-in-out',
 };
 
 const transitionStyles: Array<StyleProps> = [

diff --git a/...pp/src/apps/css/examples/transitions/screens/miscellaneous/MultipleTransitionSettings.tsx b/...pp/src/apps/css/examples/transitions/screens/miscellaneous/MultipleTransitionSettings.tsx
@@ -52,11 +52,11 @@ const DEFAULT_TRANSITION_CONFIG: SelectableConfig<
     maxNumberOfValues: 3,
     options: [
       'ease',
-      'easeInOut',
+      'ease-in-out',
       cubicBezier(0.175, 0.885, 0.32, 1.275),
       steps(5),
     ],
-    value: [cubicBezier(0.175, 0.885, 0.32, 1.275), 'easeInOut'],
+    value: [cubicBezier(0.175, 0.885, 0.32, 1.275), 'ease-in-out'],
   },
   transitionBehavior: 'normal',
 };

diff --git a/...ommon-app/src/apps/css/examples/transitions/screens/miscellaneous/ReversingShortening.tsx b/...ommon-app/src/apps/css/examples/transitions/screens/miscellaneous/ReversingShortening.tsx
@@ -41,9 +41,9 @@ const DEFAULT_TRANSITION_CONFIG: SelectableConfig<CSSTransitionProperties> = {
     options: [
       'linear',
       'ease',
-      'easeIn',
-      'easeOut',
-      'easeInOut',
+      'ease-in',
+      'ease-out',
+      'ease-in-out',
       cubicBezier(0.175, 0.885, 0.32, 1.275),
       steps(5),
     ],

diff --git a/...pp/src/apps/css/examples/transitions/screens/miscellaneous/UpdatingTransitionSettings.tsx b/...pp/src/apps/css/examples/transitions/screens/miscellaneous/UpdatingTransitionSettings.tsx
@@ -27,14 +27,14 @@ import { colors, flex, radius, sizes, spacing } from '@/theme';
 import { typedMemo } from '@/utils';
 
 const SETTINGS_OPTIONS = {
-  transitionBehavior: ['normal', 'allowDiscrete'],
+  transitionBehavior: ['normal', 'allow-discrete'],
   transitionDelay: ['-5s', '0s', '1s', '2s', '5s'],
   transitionDuration: [0, '250ms', '1s', '2s', '5s', '10s'],
   transitionTimingFunction: [
     'ease',
     'linear',
-    'easeIn',
-    'easeOut',
+    'ease-in',
+    'ease-out',
     cubicBezier(0.42, 0, 0.58, 1),
   ],
 } satisfies {

diff --git a/...mon-app/src/apps/css/examples/transitions/screens/realWorldExamples/CircularPopupMenu.tsx b/...mon-app/src/apps/css/examples/transitions/screens/realWorldExamples/CircularPopupMenu.tsx
@@ -59,7 +59,7 @@ function CircularMenu() {
               transitionProperty: ['all', 'backgroundColor'],
               transitionTimingFunction: [
                 cubicBezier(0.175, 0.885, 0.32, 1.275),
-                'easeOut',
+                'ease-out',
               ],
             },
           ]}>

diff --git a/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx b/apps/common-app/src/apps/css/examples/transitions/screens/realWorldExamples/FlexGallery.tsx
@@ -123,7 +123,7 @@ function GalleryCard({
           flexGrow: expanded ? 100 : 1,
           transitionDuration: 300,
           transitionProperty: 'flexGrow',
-          transitionTimingFunction: 'easeInOut',
+          transitionTimingFunction: 'ease-in-out',
         },
       ]}>
       <View style={StyleSheet.absoluteFill}>

diff --git a/...-app/src/apps/css/examples/transitions/screens/realWorldExamples/HamburgerMenuButtons.tsx b/...-app/src/apps/css/examples/transitions/screens/realWorldExamples/HamburgerMenuButtons.tsx
@@ -157,7 +157,7 @@ const sharedStyles = StyleSheet.create({
 const SHARED_CONFIG: CSSTransitionProperties = {
   transitionDuration: 300,
   transitionProperty: 'all',
-  transitionTimingFunction: 'easeOut',
+  transitionTimingFunction: 'ease-out',
 };
 
 function Simple({ open }: ExampleComponentProps) {