Skip to content

Commit 2da1c25

Browse files
kyledurandkyledurand
authored
Merge pull request #2855 from Shopify/2025-10-rc-add-event-sections
add events sections
2 parents c5b01df + a246db3 commit 2da1c25

File tree

14 files changed

+1156
-245
lines changed

14 files changed

+1156
-245
lines changed

‎packages/ui-extensions/src/surfaces/admin/components.d.ts‎

Lines changed: 264 additions & 59 deletions
Large diffs are not rendered by default.

‎packages/ui-extensions/src/surfaces/admin/components/Banner/shared.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ Banners placed inside a section will have styles applied contextually. They're u
2626
description: '',
2727
type: 'Banner',
2828
},
29+
{
30+
title: 'Events',
31+
description:
32+
'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
33+
type: 'BannerEvents',
34+
},
2935
{
3036
title: 'Slots',
3137
description: '',

‎packages/ui-extensions/src/surfaces/admin/components/Box.d.ts‎

Lines changed: 126 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -48,37 +48,37 @@ export type BoxBorderStyles = Extract<
4848
RequiredBoxProps['borderStyle'],
4949
'none' | 'solid' | 'dashed' | 'auto'
5050
>;
51+
export type ResponsiveBoxProps = MakeResponsivePick<
52+
RequiredBoxProps,
53+
| 'padding'
54+
| 'paddingBlock'
55+
| 'paddingBlockStart'
56+
| 'paddingBlockEnd'
57+
| 'paddingInline'
58+
| 'paddingInlineStart'
59+
| 'paddingInlineEnd'
60+
>;
5161
export interface BoxProps
5262
extends Pick<
53-
RequiredBoxProps,
54-
| 'accessibilityLabel'
55-
| 'accessibilityRole'
56-
| 'accessibilityVisibility'
57-
| 'background'
58-
| 'blockSize'
59-
| 'border'
60-
| 'borderColor'
61-
| 'borderRadius'
62-
| 'borderStyle'
63-
| 'borderWidth'
64-
| 'display'
65-
| 'inlineSize'
66-
| 'maxBlockSize'
67-
| 'maxInlineSize'
68-
| 'minBlockSize'
69-
| 'minInlineSize'
70-
| 'overflow'
71-
>,
72-
MakeResponsivePick<
73-
RequiredBoxProps,
74-
| 'padding'
75-
| 'paddingBlock'
76-
| 'paddingBlockStart'
77-
| 'paddingBlockEnd'
78-
| 'paddingInline'
79-
| 'paddingInlineStart'
80-
| 'paddingInlineEnd'
81-
> {
63+
RequiredBoxProps,
64+
| 'accessibilityLabel'
65+
| 'accessibilityRole'
66+
| 'accessibilityVisibility'
67+
| 'background'
68+
| 'blockSize'
69+
| 'border'
70+
| 'borderColor'
71+
| 'borderRadius'
72+
| 'borderStyle'
73+
| 'borderWidth'
74+
| 'display'
75+
| 'inlineSize'
76+
| 'maxBlockSize'
77+
| 'maxInlineSize'
78+
| 'minBlockSize'
79+
| 'minInlineSize'
80+
| 'overflow'
81+
> {
8282
background: Extract<
8383
RequiredBoxProps['background'],
8484
'transparent' | 'base' | 'subdued' | 'strong'
@@ -99,6 +99,103 @@ export interface BoxProps
9999
'subdued' | 'base' | 'strong' | ''
100100
>;
101101
borderRadius: MaybeAllValuesShorthandProperty<BoxBorderRadii>;
102+
/**
103+
* Adjust the padding of all edges.
104+
*
105+
* 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
106+
* supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
107+
*
108+
* - 4 values: `block-start inline-end block-end inline-start`
109+
* - 3 values: `block-start inline block-end`
110+
* - 2 values: `block inline`
111+
*
112+
* For example:
113+
* - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
114+
* - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
115+
* - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
116+
* - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
117+
*
118+
* A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
119+
*
120+
* `padding` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
121+
*
122+
* This also accepts up to 4 values (e.g. `@container (inline-size > 500px) large-300 small-300 large-100 small-100, small-200`)
123+
*
124+
* @default 'none'
125+
*/
126+
padding: ResponsiveBoxProps['padding'];
127+
/**
128+
* Adjust the block-padding.
129+
*
130+
* - `large none` means block-start padding is `large`, block-end padding is `none`.
131+
*
132+
* This overrides the block value of `padding`.
133+
*
134+
* `paddingBlock` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
135+
*
136+
* This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
137+
*
138+
* @default '' - meaning no override
139+
*/
140+
paddingBlock: ResponsiveBoxProps['paddingBlock'];
141+
/**
142+
* Adjust the block-start padding.
143+
*
144+
* This overrides the block-start value of `paddingBlock`.
145+
*
146+
* `paddingBlockStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
147+
*
148+
* This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
149+
* @default '' - meaning no override
150+
*/
151+
paddingBlockStart: ResponsiveBoxProps['paddingBlockStart'];
152+
/**
153+
* Adjust the block-end padding.
154+
*
155+
* This overrides the block-end value of `paddingBlock`.
156+
*
157+
* `paddingBlockEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
158+
*
159+
* This only accepts up to 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
160+
* @default '' - meaning no override
161+
*/
162+
paddingBlockEnd: ResponsiveBoxProps['paddingBlockEnd'];
163+
/**
164+
* Adjust the inline padding.
165+
*
166+
* - `large none` means inline-start padding is `large`, inline-end padding is `none`.
167+
*
168+
* This overrides the inline value of `padding`.
169+
*
170+
* `paddingInline` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
171+
*
172+
* This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
173+
*
174+
* @default '' - meaning no override
175+
*/
176+
paddingInline: ResponsiveBoxProps['paddingInline'];
177+
/**
178+
* Adjust the inline-start padding.
179+
*
180+
* This overrides the inline-start value of `paddingInline`.
181+
*
182+
* `paddingInlineStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
183+
* This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
184+
*
185+
* @default '' - meaning no override
186+
*/
187+
paddingInlineStart: ResponsiveBoxProps['paddingInlineStart'];
188+
/**
189+
* Adjust the inline-end padding.
190+
*
191+
* This overrides the inline-end value of `paddingInline`.
192+
*
193+
* `paddingInlineEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
194+
* This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
195+
*
196+
* @default '' - meaning no override
197+
*/
198+
paddingInlineEnd: ResponsiveBoxProps['paddingInlineEnd'];
102199
}
103200

104201
export type Styles = string;

‎packages/ui-extensions/src/surfaces/admin/components/Button/shared.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ const shared = {
1010
description: '',
1111
type: 'Button',
1212
},
13+
{
14+
title: 'Events',
15+
description:
16+
'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
17+
type: 'ButtonEvents',
18+
},
1319
],
1420
subCategory: 'Actions',
1521
related: [

‎packages/ui-extensions/src/surfaces/admin/components/Clickable.d.ts‎

Lines changed: 126 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -51,37 +51,37 @@ export type BoxBorderStyles = Extract<
5151
RequiredBoxProps['borderStyle'],
5252
'none' | 'solid' | 'dashed' | 'auto'
5353
>;
54+
export type ResponsiveBoxProps = MakeResponsivePick<
55+
RequiredBoxProps,
56+
| 'padding'
57+
| 'paddingBlock'
58+
| 'paddingBlockStart'
59+
| 'paddingBlockEnd'
60+
| 'paddingInline'
61+
| 'paddingInlineStart'
62+
| 'paddingInlineEnd'
63+
>;
5464
export interface BoxProps
5565
extends Pick<
56-
RequiredBoxProps,
57-
| 'accessibilityLabel'
58-
| 'accessibilityRole'
59-
| 'accessibilityVisibility'
60-
| 'background'
61-
| 'blockSize'
62-
| 'border'
63-
| 'borderColor'
64-
| 'borderRadius'
65-
| 'borderStyle'
66-
| 'borderWidth'
67-
| 'display'
68-
| 'inlineSize'
69-
| 'maxBlockSize'
70-
| 'maxInlineSize'
71-
| 'minBlockSize'
72-
| 'minInlineSize'
73-
| 'overflow'
74-
>,
75-
MakeResponsivePick<
76-
RequiredBoxProps,
77-
| 'padding'
78-
| 'paddingBlock'
79-
| 'paddingBlockStart'
80-
| 'paddingBlockEnd'
81-
| 'paddingInline'
82-
| 'paddingInlineStart'
83-
| 'paddingInlineEnd'
84-
> {
66+
RequiredBoxProps,
67+
| 'accessibilityLabel'
68+
| 'accessibilityRole'
69+
| 'accessibilityVisibility'
70+
| 'background'
71+
| 'blockSize'
72+
| 'border'
73+
| 'borderColor'
74+
| 'borderRadius'
75+
| 'borderStyle'
76+
| 'borderWidth'
77+
| 'display'
78+
| 'inlineSize'
79+
| 'maxBlockSize'
80+
| 'maxInlineSize'
81+
| 'minBlockSize'
82+
| 'minInlineSize'
83+
| 'overflow'
84+
> {
8585
background: Extract<
8686
RequiredBoxProps['background'],
8787
'transparent' | 'base' | 'subdued' | 'strong'
@@ -102,6 +102,103 @@ export interface BoxProps
102102
'subdued' | 'base' | 'strong' | ''
103103
>;
104104
borderRadius: MaybeAllValuesShorthandProperty<BoxBorderRadii>;
105+
/**
106+
* Adjust the padding of all edges.
107+
*
108+
* 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
109+
* supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
110+
*
111+
* - 4 values: `block-start inline-end block-end inline-start`
112+
* - 3 values: `block-start inline block-end`
113+
* - 2 values: `block inline`
114+
*
115+
* For example:
116+
* - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
117+
* - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
118+
* - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
119+
* - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
120+
*
121+
* A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
122+
*
123+
* `padding` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
124+
*
125+
* This also accepts up to 4 values (e.g. `@container (inline-size > 500px) large-300 small-300 large-100 small-100, small-200`)
126+
*
127+
* @default 'none'
128+
*/
129+
padding: ResponsiveBoxProps['padding'];
130+
/**
131+
* Adjust the block-padding.
132+
*
133+
* - `large none` means block-start padding is `large`, block-end padding is `none`.
134+
*
135+
* This overrides the block value of `padding`.
136+
*
137+
* `paddingBlock` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
138+
*
139+
* This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
140+
*
141+
* @default '' - meaning no override
142+
*/
143+
paddingBlock: ResponsiveBoxProps['paddingBlock'];
144+
/**
145+
* Adjust the block-start padding.
146+
*
147+
* This overrides the block-start value of `paddingBlock`.
148+
*
149+
* `paddingBlockStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
150+
*
151+
* This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
152+
* @default '' - meaning no override
153+
*/
154+
paddingBlockStart: ResponsiveBoxProps['paddingBlockStart'];
155+
/**
156+
* Adjust the block-end padding.
157+
*
158+
* This overrides the block-end value of `paddingBlock`.
159+
*
160+
* `paddingBlockEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
161+
*
162+
* This only accepts up to 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
163+
* @default '' - meaning no override
164+
*/
165+
paddingBlockEnd: ResponsiveBoxProps['paddingBlockEnd'];
166+
/**
167+
* Adjust the inline padding.
168+
*
169+
* - `large none` means inline-start padding is `large`, inline-end padding is `none`.
170+
*
171+
* This overrides the inline value of `padding`.
172+
*
173+
* `paddingInline` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
174+
*
175+
* This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
176+
*
177+
* @default '' - meaning no override
178+
*/
179+
paddingInline: ResponsiveBoxProps['paddingInline'];
180+
/**
181+
* Adjust the inline-start padding.
182+
*
183+
* This overrides the inline-start value of `paddingInline`.
184+
*
185+
* `paddingInlineStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
186+
* This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
187+
*
188+
* @default '' - meaning no override
189+
*/
190+
paddingInlineStart: ResponsiveBoxProps['paddingInlineStart'];
191+
/**
192+
* Adjust the inline-end padding.
193+
*
194+
* This overrides the inline-end value of `paddingInline`.
195+
*
196+
* `paddingInlineEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
197+
* This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
198+
*
199+
* @default '' - meaning no override
200+
*/
201+
paddingInlineEnd: ResponsiveBoxProps['paddingInlineEnd'];
105202
}
106203

107204
export type ClickableBaseProps = Required<

‎packages/ui-extensions/src/surfaces/admin/components/Clickable/shared.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ const shared = {
1010
description: '',
1111
type: 'Clickable',
1212
},
13+
{
14+
title: 'Events',
15+
description:
16+
'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
17+
type: 'ClickableEvents',
18+
},
1319
],
1420
subCategory: 'Actions',
1521
related: [

‎packages/ui-extensions/src/surfaces/admin/components/DatePicker/shared.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@ const shared = {
1010
description: '',
1111
type: 'DatePicker',
1212
},
13+
{
14+
title: 'Events',
15+
description:
16+
'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
17+
type: 'DatePickerEvents',
18+
},
1319
],
1420
subCategory: 'Forms',
1521
related: [],

0 commit comments

Comments
 (0)