[UI components]: 2024-04 Docs patch (#2112)

* scrollTo docs patch

* changeset

* style helper docs

Author: oliverigor

.changeset/spicy-spoons-bake.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions-react': patch
+'@shopify/ui-extensions': patch
+---
+
+ScrollView scrollTo docs changes

packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.ts

@@ -56,7 +56,23 @@ export interface ScrollViewProps
    */
   direction?: 'block' | 'inline';
   /**
-   * Scroll to a specific position or to an element.
+   * Scroll to a specific position or to an element when the component is first rendered.
+   *
+   * This property allows you to set an initial scroll position or scroll to a specific element
+   * when the `ScrollView` component mounts. Note that this action will only be performed once,
+   * during the initial render of the component.
+   *
+   * @example
+   * // Scroll to 100 pixels from the top on initial render
+   * <ScrollView scrollTo={100} />
+   *
+   * // Scroll to a specific element on initial render
+   * const elementRef = useRef(null);
+   * <ScrollView scrollTo={elementRef.current} />
+   *
+   * @note
+   * This property will only take effect on the first render. Subsequent updates to this property
+   * will not trigger additional scroll actions.
    */
   scrollTo?: number | HTMLElement;
   /**

packages/ui-extensions/src/surfaces/checkout/style/types.ts

@@ -109,14 +109,21 @@ export interface ConditionalStyle<
 
 /**
  * A type that represents a value that can be a conditional style.
- * We highly recommend using the Style helper which simplifies the creation of conditional styles.
+ * We highly recommend using the `Style` helper which simplifies the creation of conditional styles.
+ *
  * To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.
  */
 export type MaybeConditionalStyle<
   T,
   AcceptedConditions extends BaseConditions = Conditions,
 > = T | ConditionalStyle<T, AcceptedConditions>;
 
+/**
+ * A type that represents a value that can be a conditional style. The conditions are based on the viewport size.
+ * We highly recommend using the `Style` helper which simplifies the creation of conditional styles.
+ *
+ * To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.
+ */
 export type MaybeResponsiveConditionalStyle<T> =
   | T
   | ConditionalStyle<T, ViewportSizeCondition>;