add story

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx

@@ -157,3 +157,43 @@ export const WithUnits = () => {
     </Flex>
   );
 };
+
+export const AutoScroll = () => {
+  const [value, setValue] = React.useState<StyleValue>({
+    type: "var",
+    value: "start-test-test-test-test-test-test-test-end",
+  });
+
+  const [intermediateValue, setIntermediateValue] = React.useState<
+    StyleValue | IntermediateStyleValue
+  >();
+
+  return (
+    <Flex css={{ width: 100 }}>
+      <CssValueInput
+        styleSource="preset"
+        property="alignItems"
+        value={value}
+        intermediateValue={intermediateValue}
+        onChange={(newValue) => {
+          setIntermediateValue(newValue);
+        }}
+        onHighlight={(value) => {
+          action("onHighlight")(value);
+        }}
+        onChangeComplete={({ value }) => {
+          // on blur, select, enter etc.
+          setValue(value);
+          setIntermediateValue(undefined);
+          action("onChangeComplete")(value);
+        }}
+        onAbort={() => {
+          action("onAbort")();
+        }}
+        onReset={() => {
+          action("onReset")();
+        }}
+      />
+    </Flex>
+  );
+};

packages/design-system/src/components/input-field.stories.tsx

@@ -85,18 +85,6 @@ export const Demo = () => (
         ))}
       </StoryGrid>
     </StorySection>
-
-    <StorySection title="Auto Scroll">
-      <StoryGrid horizontal>
-        <InputField
-          autoScroll
-          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
-          prefix={prefix}
-          suffix={suffix}
-          autoFocus
-        />
-      </StoryGrid>
-    </StorySection>
   </>
 );