[UI components]: 2024-01 Docs patch (#2109)

* scrollTo and image source changes

* changeset

* style helper docs

Author: oliverigor

.changeset/nice-cows-type.md

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

packages/ui-extensions-react/src/surfaces/checkout/components/Image/examples/basic-image.example.tsx

@@ -10,6 +10,6 @@ export default reactExtension(
 
 function Extension() {
   return (
-    <Image source="https://shopify.dev/assets/api/checkout-extensions/checkout/components/image-example-code.png" />
+    <Image source="https://cdn.shopify.com/YOUR_IMAGE_HERE" />
   );
 }

packages/ui-extensions/src/surfaces/checkout/components/Image/examples/basic-image.example.ts

@@ -2,8 +2,7 @@ import {extension, Image} from '@shopify/ui-extensions/checkout';
 
 export default extension('purchase.checkout.block.render', (root) => {
   const image = root.createComponent(Image, {
-    source:
-      'https://shopify.dev/assets/api/checkout-extensions/checkout/components/image-example-code.png',
+    source: 'https://cdn.shopify.com/YOUR_IMAGE_HERE',
   });
 
   root.appendChild(image);

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>;