experimental: Animation axis Icons change

[istarkov]

Description

Steps for reproduction

1. click button
2. expect xyz

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 0000)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[Copilot]

Pull Request Overview

This PR experiments with changing the animation axis icons by updating the icon imports and modifying how axis values are handled.

• Updated imported icons from Repeat* to Arrow* to reflect new visual design.
• Modified the axis value conversion by adding the convertAxisToXY helper function and updating the ToggleGroup’s value mapping.

Comments suppressed due to low confidence (1)

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx:28

• The toast error message text "Schemas are incompatible, try fix" is unclear; consider rewording it to something like "Invalid animation schema. Please check the provided value."

import { ArrowDownIcon, ArrowRightIcon } from "@webstudio-is/icons";

[Copilot]

Pull Request Overview

This PR updates the animation axis icons and the handling of axis values by replacing the previous repeat icons with arrow icons and modifying the axis conversion logic.

• Replaces RepeatColumnIcon and RepeatRowIcon with ArrowDownIcon and ArrowRightIcon.
• Removes direct support for "block" and "inline" axes by excluding them from the axis description and adding a conversion function.
• Updates the ToggleGroup component to use the normalized axis values.

Comments suppressed due to low confidence (2)

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx:89

• [nitpick] The function name 'convertAxisToXY' may be confusing since it is used to normalize values that may already be 'x' or 'y'. Consider renaming it to 'normalizeAxis' for better clarity.

const convertAxisToXY = (axis: NonNullable<AnimationAction["axis"]) => {

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx:305

• Double-check if applying 'convertAxisToXY' in the onValueChange handler is necessary when the ToggleGroup only provides 'x' or 'y' values. Removing redundant conversion could simplify the logic.

onValueChange={(axis: keyof typeof animationAxisDescription) => { handleChange({ ...value, axis: convertAxisToXY(axis) }, false); }}

[Copilot]

Pull Request Overview

This PR updates the animation axis icons and refactors the axis mapping logic to remove support for block and inline axis values.

• Changed icon imports to use ArrowDownIcon and ArrowRightIcon.
• Updated the animationAxisDescription to only support x and y axes and added a conversion function to map legacy "block"/"inline" values.
• Modified the error message for schema incompatibility and adjusted the ToggleGroup's value and onValueChange handlers accordingly.

Comments suppressed due to low confidence (2)

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx:89

• [nitpick] Consider renaming convertAxisToXY to a name like normalizeAxis to clearly indicate that the function standardizes the axis values.

const convertAxisToXY = (axis: NonNullable<AnimationAction["axis"]) => {

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx:304

• [nitpick] The conversion logic is applied both when setting the ToggleGroup value and again in the onValueChange callback. If intentional, please add a clarifying comment; otherwise, consider consolidating the conversion to avoid potential redundant processing.

value={convertAxisToXY(value.axis ?? ("y" as const))}