Publish display property

packages/ui-extensions-react/src/surfaces/checkout.ts

@@ -40,6 +40,7 @@ export type {
   DisclosureActivatorProps,
   DisclosureOpen,
   DisabledDate,
+  Display,
   ExtensionTarget,
   ExtensionTargets,
   Fit,

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

@@ -217,6 +217,7 @@ export type {
   CornerProps,
   DisclosureActivatorProps,
   DisclosureOpen,
+  Display,
   Fit,
   GridItemSize,
   InlineAlignment,

packages/ui-extensions/src/surfaces/checkout/components/BlockLayout/BlockLayout.doc.ts

@@ -44,7 +44,14 @@ const data: ReferenceEntityTemplateSchema = {
         '| Value | Description |\n| --- | --- |\n| <code>"main"</code> | Used to indicate the primary content. |\n| <code>"header"</code> | Used to indicate the component is a header. |\n| <code>"footer"</code> | Used to display information such as copyright information, navigation links, and privacy statements. |\n| <code>"section"</code> | Used to indicate a generic section. |\n| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content. |\n| <code>"navigation"</code> | Used to identify major groups of links used for navigating. |\n| <code>"orderedList"</code> | Used to identify a list of ordered items. |\n| <code>"listItem"</code> | Used to identify an item inside a list of items. |\n| <code>"unorderedList"</code> | Used to identify a list of unordered items. |\n| <code>"separator"</code> | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| <code>"status"</code> | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| <code>"alert"</code> | Used for important, and usually time-sensitive, information. |',
     },
   ],
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.doc.ts

@@ -54,7 +54,14 @@ const data: ReferenceEntityTemplateSchema = {
         '| Value | Description |\n| --- | --- |\n| <code>"main"</code> | Used to indicate the primary content. |\n| <code>"header"</code> | Used to indicate the component is a header. |\n| <code>"footer"</code> | Used to display information such as copyright information, navigation links, and privacy statements. |\n| <code>"section"</code> | Used to indicate a generic section. |\n| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content. |\n| <code>"navigation"</code> | Used to identify major groups of links used for navigating. |\n| <code>"orderedList"</code> | Used to identify a list of ordered items. |\n| <code>"listItem"</code> | Used to identify an item inside a list of items. |\n| <code>"unorderedList"</code> | Used to identify a list of unordered items. |\n| <code>"separator"</code> | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| <code>"status"</code> | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| <code>"alert"</code> | Used for important, and usually time-sensitive, information. |',
     },
   ],
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

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

@@ -4,6 +4,7 @@ import type {
   BackgroundProps,
   BorderProps,
   CornerProps,
+  IdProps,
   InlineAlignment,
   SizingProps,
   Spacing,
@@ -16,6 +17,7 @@ export interface BlockStackProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -47,10 +49,6 @@ export interface BlockStackProps
    * provide them with more context.
    */
   accessibilityLabel?: string;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -63,6 +61,18 @@ export interface BlockStackProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.doc.ts

@@ -51,6 +51,12 @@ const data: ReferenceEntityTemplateSchema = {
       url: 'grid',
       type: 'Component',
     },
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
   ],
 };
 

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

@@ -7,6 +7,7 @@ import type {
   BorderProps,
   Columns,
   CornerProps,
+  IdProps,
   InlineAlignment,
   Rows,
   SizingProps,
@@ -17,6 +18,7 @@ import type {
 
 export interface GridProps
   extends Pick<BackgroundProps, 'background'>,
+    IdProps,
     BorderProps,
     CornerProps,
     SizingProps,
@@ -103,10 +105,6 @@ export interface GridProps
    * provide them with more context.
    */
   accessibilityLabel?: string;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -119,6 +117,19 @@ export interface GridProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.doc.ts

@@ -51,6 +51,12 @@ const data: ReferenceEntityTemplateSchema = {
       url: 'grid',
       type: 'Component',
     },
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
   ],
 };
 

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

@@ -5,6 +5,7 @@ import type {
   BackgroundProps,
   BorderProps,
   CornerProps,
+  IdProps,
   SizingProps,
   SpacingProps,
   ViewLikeAccessibilityRole,
@@ -14,6 +15,7 @@ export interface GridItemProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -37,10 +39,6 @@ export interface GridItemProps
    * - In an HTML host a `listItem` string will render: `<li>`
    */
   accessibilityRole?: ViewLikeAccessibilityRole;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -53,6 +51,19 @@ export interface GridItemProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

packages/ui-extensions/src/surfaces/checkout/components/InlineLayout/InlineLayout.doc.ts

@@ -55,7 +55,14 @@ const data: ReferenceEntityTemplateSchema = {
         '| Value | Description |\n| --- | --- |\n| <code>"main"</code> | Used to indicate the primary content. |\n| <code>"header"</code> | Used to indicate the component is a header. |\n| <code>"footer"</code> | Used to display information such as copyright information, navigation links, and privacy statements. |\n| <code>"section"</code> | Used to indicate a generic section. |\n| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content. |\n| <code>"navigation"</code> | Used to identify major groups of links used for navigating. |\n| <code>"orderedList"</code> | Used to identify a list of ordered items. |\n| <code>"listItem"</code> | Used to identify an item inside a list of items. |\n| <code>"unorderedList"</code> | Used to identify a list of unordered items. |\n| <code>"separator"</code> | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| <code>"status"</code> | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| <code>"alert"</code> | Used for important, and usually time-sensitive, information. |',
     },
   ],
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.doc.ts

@@ -44,7 +44,14 @@ const data: ReferenceEntityTemplateSchema = {
         '| Value | Description |\n| --- | --- |\n| <code>"main"</code> | Used to indicate the primary content. |\n| <code>"header"</code> | Used to indicate the component is a header. |\n| <code>"footer"</code> | Used to display information such as copyright information, navigation links, and privacy statements. |\n| <code>"section"</code> | Used to indicate a generic section. |\n| <code>"complementary"</code> | Used to designate a supporting section that relates to the main content. |\n| <code>"navigation"</code> | Used to identify major groups of links used for navigating. |\n| <code>"orderedList"</code> | Used to identify a list of ordered items. |\n| <code>"listItem"</code> | Used to identify an item inside a list of items. |\n| <code>"unorderedList"</code> | Used to identify a list of unordered items. |\n| <code>"separator"</code> | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| <code>"status"</code> | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| <code>"alert"</code> | Used for important, and usually time-sensitive, information. |',
     },
   ],
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

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

@@ -6,6 +6,7 @@ import type {
   BlockAlignment,
   BorderProps,
   CornerProps,
+  IdProps,
   InlineAlignment,
   SizingProps,
   Spacing,
@@ -17,6 +18,7 @@ export interface InlineStackProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps {
   /**
@@ -60,10 +62,6 @@ export interface InlineStackProps
    * @defaultValue 'base'
    **/
   spacing?: MaybeResponsiveConditionalStyle<Spacing | [Spacing, Spacing]>;
-  /**
-   * A unique identifier for the component.
-   */
-  id?: string;
   /**
    * Sets the overflow behavior of the element.
    *
@@ -76,6 +74,19 @@ export interface InlineStackProps
    * @default 'visible'
    */
   overflow?: 'hidden' | 'visible';
+  /**
+   * Changes the display of the component.
+   *
+   *
+   * `auto` the component's initial value. The actual value depends on the component and context.
+   *
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
+   */
+  display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>;
 }
 
 /**

packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.doc.ts

@@ -35,7 +35,14 @@ const data: ReferenceEntityTemplateSchema = {
       ],
     },
   },
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;

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

@@ -14,29 +14,35 @@ import type {
   CornerProps,
   Opacity,
   BackgroundProps,
+  IdProps,
 } from '../shared';
 
 export interface PressableProps
   extends Pick<BackgroundProps, 'background'>,
     BorderProps,
     CornerProps,
+    IdProps,
     SizingProps,
     SpacingProps,
     OverlayActivatorProps,
     DisclosureActivatorProps {
   /**
-   * Changes the display of the Pressable.
+   * Changes the display of the component.
    *
    *
-   * `inline` follows the direction of words in a sentence based on the document’s writing mode.
+   * `inline` the component starts on the same line as preceding inline content and allows subsequent content to continue on the same line.
    *
-   * `block` follows the direction of paragraphs based on the document’s writing mode.
+   * `block` the component starts on its own new line and fills its parent.
    *
+   * `auto` resets the component to its initial value. The actual value depends on the component and context.
    *
-   * @defaultValue 'block'
+   * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   *
+   * @defaultValue 'auto'
    */
-  display?: Display;
-
+  display?: MaybeResponsiveConditionalStyle<Display>;
   /**
    * A label that describes the purpose or contents of the element. When set,
    * it will be announced to buyers using assistive technologies and will
@@ -60,11 +66,6 @@ export interface PressableProps
    */
   disabled?: boolean;
 
-  /**
-   * A unique identifier for the Pressable.
-   */
-  id?: string;
-
   /**
    * Disables the button while loading. Unlike `Button`, no indicator is rendered while loading.
    */

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

@@ -35,7 +35,14 @@ const data: ReferenceEntityTemplateSchema = {
       ],
     },
   },
-  related: [],
+  related: [
+    {
+      subtitle: 'Utility',
+      name: 'StyleHelper',
+      url: '/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper',
+      type: 'utility',
+    },
+  ],
 };
 
 export default data;