From 89d403c99a159048171008ea06e691e2199e2f8c Mon Sep 17 00:00:00 2001 From: Nicolas Cardelino Date: Wed, 5 Jun 2024 18:25:32 +0000 Subject: [PATCH] Publish display property --- .../src/surfaces/checkout.ts | 1 + .../src/surfaces/checkout/components.ts | 1 + .../components/BlockLayout/BlockLayout.doc.ts | 9 +++++++- .../components/BlockStack/BlockStack.doc.ts | 9 +++++++- .../components/BlockStack/BlockStack.ts | 18 +++++++++++---- .../checkout/components/Grid/Grid.doc.ts | 6 +++++ .../surfaces/checkout/components/Grid/Grid.ts | 19 +++++++++++---- .../components/GridItem/GridItem.doc.ts | 6 +++++ .../checkout/components/GridItem/GridItem.ts | 19 +++++++++++---- .../InlineLayout/InlineLayout.doc.ts | 9 +++++++- .../components/InlineStack/InlineStack.doc.ts | 9 +++++++- .../components/InlineStack/InlineStack.ts | 19 +++++++++++---- .../components/Pressable/Pressable.doc.ts | 9 +++++++- .../components/Pressable/Pressable.ts | 23 ++++++++++--------- .../components/ScrollView/ScrollView.doc.ts | 9 +++++++- .../components/ScrollView/ScrollView.ts | 16 +++++++++++-- .../checkout/components/View/View.doc.ts | 9 +++++++- .../surfaces/checkout/components/View/View.ts | 23 ++++++++++--------- .../surfaces/checkout/components/shared.ts | 2 +- .../style/examples/hiding.example.tsx | 8 +++++++ .../src/surfaces/checkout/style/style.doc.ts | 14 +++++++++++ .../src/surfaces/checkout/style/types.ts | 9 +++++++- 22 files changed, 198 insertions(+), 49 deletions(-) create mode 100644 packages/ui-extensions/src/surfaces/checkout/style/examples/hiding.example.tsx diff --git a/packages/ui-extensions-react/src/surfaces/checkout.ts b/packages/ui-extensions-react/src/surfaces/checkout.ts index 942a43af7..ddccb6bd8 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout.ts +++ b/packages/ui-extensions-react/src/surfaces/checkout.ts @@ -40,6 +40,7 @@ export type { DisclosureActivatorProps, DisclosureOpen, DisabledDate, + Display, ExtensionTarget, ExtensionTargets, Fit, diff --git a/packages/ui-extensions/src/surfaces/checkout/components.ts b/packages/ui-extensions/src/surfaces/checkout/components.ts index 77af99a1a..b44610ef3 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components.ts @@ -217,6 +217,7 @@ export type { CornerProps, DisclosureActivatorProps, DisclosureOpen, + Display, Fit, GridItemSize, InlineAlignment, diff --git a/packages/ui-extensions/src/surfaces/checkout/components/BlockLayout/BlockLayout.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/BlockLayout/BlockLayout.doc.ts index ce6def9de..1c895c327 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/BlockLayout/BlockLayout.doc.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/BlockLayout/BlockLayout.doc.ts @@ -44,7 +44,14 @@ const data: ReferenceEntityTemplateSchema = { '| Value | Description |\n| --- | --- |\n| "main" | Used to indicate the primary content. |\n| "header" | Used to indicate the component is a header. |\n| "footer" | Used to display information such as copyright information, navigation links, and privacy statements. |\n| "section" | Used to indicate a generic section. |\n| "complementary" | Used to designate a supporting section that relates to the main content. |\n| "navigation" | Used to identify major groups of links used for navigating. |\n| "orderedList" | Used to identify a list of ordered items. |\n| "listItem" | Used to identify an item inside a list of items. |\n| "unorderedList" | Used to identify a list of unordered items. |\n| "separator" | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| "status" | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| "alert" | 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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.doc.ts index 7c028b010..a87e38107 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.doc.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.doc.ts @@ -54,7 +54,14 @@ const data: ReferenceEntityTemplateSchema = { '| Value | Description |\n| --- | --- |\n| "main" | Used to indicate the primary content. |\n| "header" | Used to indicate the component is a header. |\n| "footer" | Used to display information such as copyright information, navigation links, and privacy statements. |\n| "section" | Used to indicate a generic section. |\n| "complementary" | Used to designate a supporting section that relates to the main content. |\n| "navigation" | Used to identify major groups of links used for navigating. |\n| "orderedList" | Used to identify a list of ordered items. |\n| "listItem" | Used to identify an item inside a list of items. |\n| "unorderedList" | Used to identify a list of unordered items. |\n| "separator" | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| "status" | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| "alert" | 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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.ts b/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.ts index d8d4de23e..d1a067f70 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/BlockStack/BlockStack.ts +++ b/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, 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'>; } /** diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.doc.ts index 78f13efb6..0427e802e 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.doc.ts +++ b/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', + }, ], }; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.ts b/packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.ts index 228913c0e..9ae4925f4 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.ts +++ b/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, + 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'>; } /** diff --git a/packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.doc.ts index dd912d963..d32ea8cfc 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.doc.ts +++ b/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', + }, ], }; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.ts b/packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.ts index 60005b1dd..7bfeae439 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/GridItem/GridItem.ts +++ b/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, BorderProps, CornerProps, + IdProps, SizingProps, SpacingProps { /** @@ -37,10 +39,6 @@ export interface GridItemProps * - In an HTML host a `listItem` string will render: `
  • ` */ 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'>; } /** diff --git a/packages/ui-extensions/src/surfaces/checkout/components/InlineLayout/InlineLayout.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/InlineLayout/InlineLayout.doc.ts index 0466a3681..832d607cd 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/InlineLayout/InlineLayout.doc.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/InlineLayout/InlineLayout.doc.ts @@ -55,7 +55,14 @@ const data: ReferenceEntityTemplateSchema = { '| Value | Description |\n| --- | --- |\n| "main" | Used to indicate the primary content. |\n| "header" | Used to indicate the component is a header. |\n| "footer" | Used to display information such as copyright information, navigation links, and privacy statements. |\n| "section" | Used to indicate a generic section. |\n| "complementary" | Used to designate a supporting section that relates to the main content. |\n| "navigation" | Used to identify major groups of links used for navigating. |\n| "orderedList" | Used to identify a list of ordered items. |\n| "listItem" | Used to identify an item inside a list of items. |\n| "unorderedList" | Used to identify a list of unordered items. |\n| "separator" | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| "status" | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| "alert" | 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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.doc.ts index 9326ced39..a46c20848 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.doc.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.doc.ts @@ -44,7 +44,14 @@ const data: ReferenceEntityTemplateSchema = { '| Value | Description |\n| --- | --- |\n| "main" | Used to indicate the primary content. |\n| "header" | Used to indicate the component is a header. |\n| "footer" | Used to display information such as copyright information, navigation links, and privacy statements. |\n| "section" | Used to indicate a generic section. |\n| "complementary" | Used to designate a supporting section that relates to the main content. |\n| "navigation" | Used to identify major groups of links used for navigating. |\n| "orderedList" | Used to identify a list of ordered items. |\n| "listItem" | Used to identify an item inside a list of items. |\n| "unorderedList" | Used to identify a list of unordered items. |\n| "separator" | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| "status" | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| "alert" | 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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.ts b/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.ts index 44ebeec8b..b31145187 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/InlineStack/InlineStack.ts +++ b/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, BorderProps, CornerProps, + IdProps, SizingProps, SpacingProps { /** @@ -60,10 +62,6 @@ export interface InlineStackProps * @defaultValue 'base' **/ spacing?: MaybeResponsiveConditionalStyle; - /** - * 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'>; } /** diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.doc.ts index 49193ce7b..668356658 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.doc.ts +++ b/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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.ts b/packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.ts index e6098ad9f..39dac4ea9 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Pressable/Pressable.ts +++ b/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, 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; /** * 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. */ diff --git a/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.doc.ts index c99bbea09..9b35a5ce2 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.doc.ts +++ b/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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.ts b/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.ts index 93b38439b..67e9be0e5 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/ScrollView/ScrollView.ts @@ -4,9 +4,11 @@ import type { BackgroundProps, BorderProps, CornerProps, + IdProps, SizingProps, SpacingProps, } from '../shared'; +import type {MaybeResponsiveConditionalStyle} from '../../style/types'; export interface ScrollViewEvent { /** @@ -33,6 +35,7 @@ export interface ScrollViewProps extends Pick, BorderProps, CornerProps, + IdProps, SizingProps, SpacingProps { /** @@ -74,9 +77,18 @@ export interface ScrollViewProps */ onScrolledToEdge?: (args: ScrollViewEvent) => void; /** - * A unique identifier for the component. + * 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' */ - id?: string; + display?: MaybeResponsiveConditionalStyle<'auto' | 'none'>; } /** diff --git a/packages/ui-extensions/src/surfaces/checkout/components/View/View.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/View/View.doc.ts index 139917acb..2437b913b 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/View/View.doc.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/View/View.doc.ts @@ -44,7 +44,14 @@ const data: ReferenceEntityTemplateSchema = { '| Value | Description |\n| --- | --- |\n| "main" | Used to indicate the primary content. |\n| "header" | Used to indicate the component is a header. |\n| "footer" | Used to display information such as copyright information, navigation links, and privacy statements. |\n| "section" | Used to indicate a generic section. |\n| "complementary" | Used to designate a supporting section that relates to the main content. |\n| "navigation" | Used to identify major groups of links used for navigating. |\n| "orderedList" | Used to identify a list of ordered items. |\n| "listItem" | Used to identify an item inside a list of items. |\n| "unorderedList" | Used to identify a list of unordered items. |\n| "separator" | Used to indicates the component acts as a divider that separates and distinguishes sections of content. |\n| "status" | Used to define a live region containing advisory information for the user that is not important enough to be an alert. |\n| "alert" | 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; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/View/View.ts b/packages/ui-extensions/src/surfaces/checkout/components/View/View.ts index 4640b7a86..4fbc3a44f 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/View/View.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/View/View.ts @@ -14,6 +14,7 @@ import type { ViewLikeAccessibilityRole, CornerProps, Opacity, + IdProps, } from '../shared'; export type PositionType = 'absolute' | 'relative' | 'sticky'; @@ -105,27 +106,27 @@ export interface ViewProps extends Pick, BorderProps, CornerProps, + IdProps, SizingProps, SpacingProps, VisibilityProps { /** - * Changes the display of the View. + * 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' - */ - display?: Display; - - /** - * A unique identifier for the View. + * `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' */ - id?: string; - + display?: MaybeResponsiveConditionalStyle; /** * Sets the opacity of the View. The opacity will be applied to the background as well as all * the children of the View. Use carefully as this could decrease the contrast ratio between diff --git a/packages/ui-extensions/src/surfaces/checkout/components/shared.ts b/packages/ui-extensions/src/surfaces/checkout/components/shared.ts index b262f0218..7343aa1fb 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/shared.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/shared.ts @@ -133,7 +133,7 @@ export type AutocompleteField = export type Breakpoint = 'base' | 'extraSmall' | 'small' | 'medium' | 'large'; -export type Display = 'block' | 'inline'; +export type Display = 'none' | 'auto' | 'inline' | 'block'; export type ShorthandProperty = [T, T] | [T, T, T, T]; diff --git a/packages/ui-extensions/src/surfaces/checkout/style/examples/hiding.example.tsx b/packages/ui-extensions/src/surfaces/checkout/style/examples/hiding.example.tsx new file mode 100644 index 000000000..bd7ecda50 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/checkout/style/examples/hiding.example.tsx @@ -0,0 +1,8 @@ + + Content +; diff --git a/packages/ui-extensions/src/surfaces/checkout/style/style.doc.ts b/packages/ui-extensions/src/surfaces/checkout/style/style.doc.ts index 03082ffd1..b9c8bd08a 100644 --- a/packages/ui-extensions/src/surfaces/checkout/style/style.doc.ts +++ b/packages/ui-extensions/src/surfaces/checkout/style/style.doc.ts @@ -64,6 +64,20 @@ const data: ReferenceEntityTemplateSchema = { ], }, }, + { + description: + 'Using the `display` property with conditional styles enables you to hide content for certain viewport sizes. In this example, the View will be hidden on small and above screen sizes.', + codeblock: { + title: 'Conditionally hiding content', + tabs: [ + { + title: 'React', + code: './examples/hiding.example.tsx', + language: 'tsx', + }, + ], + }, + }, ], }, subSections: [ diff --git a/packages/ui-extensions/src/surfaces/checkout/style/types.ts b/packages/ui-extensions/src/surfaces/checkout/style/types.ts index bc2e8a8df..7e64f22e9 100644 --- a/packages/ui-extensions/src/surfaces/checkout/style/types.ts +++ b/packages/ui-extensions/src/surfaces/checkout/style/types.ts @@ -109,7 +109,8 @@ 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< @@ -117,6 +118,12 @@ export type MaybeConditionalStyle< AcceptedConditions extends BaseConditions = Conditions, > = T | ConditionalStyle; +/** + * 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 | ConditionalStyle;