From bf109bb6960f7ae3a6387fa49de7e0adde070b83 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 22 Nov 2023 11:41:16 +0100 Subject: [PATCH 1/4] Slot: add `styles` prop to `bubblesVirtually` version --- packages/components/src/slot-fill/types.ts | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts index 763fa799c8d860..70ef34e3d52655 100644 --- a/packages/components/src/slot-fill/types.ts +++ b/packages/components/src/slot-fill/types.ts @@ -36,15 +36,21 @@ export type SlotComponentProps = /** * A function that returns nodes to be rendered. - * Not supported when `bubblesVirtually` is true. + * Not supported when `bubblesVirtually` is `true`. */ children?: never; /** * className. - * Not supported when `bubblesVirtually` is true. + * Not supported when `bubblesVirtually` is `false`. */ className?: string; + + /** + * styles. + * Not supported when `bubblesVirtually` is `false`. + */ + style?: React.CSSProperties; } ) | ( SlotPropBase & { /** @@ -56,15 +62,21 @@ export type SlotComponentProps = /** * A function that returns nodes to be rendered. - * Not supported when `bubblesVirtually` is true. + * Not supported when `bubblesVirtually` is `true`. */ children?: ( fills: ReactNode ) => ReactNode; /** * className. - * Not supported when `bubblesVirtually` is false. + * Not supported when `bubblesVirtually` is `false`. */ className?: never; + + /** + * styles. + * Not supported when `bubblesVirtually` is `false`. + */ + style?: never; } ); export type FillComponentProps = { From 2a5ebdb965cc8734a6b4d289611adc15bb9e0597 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 22 Nov 2023 11:53:29 +0100 Subject: [PATCH 2/4] CHANHGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index eb6e595e304ecf..32aac4be432fd0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ ### Internal +- `Slot`: add `styles` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428)) - Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622)) - Migrate `DisclosureContent` from `reakit` to `ariakit` and TypeScript ([#55639](https://github.com/WordPress/gutenberg/pull/55639)) - Migrate `RadioGroup` from `reakit` to `ariakit` and TypeScript ([#55580](https://github.com/WordPress/gutenberg/pull/55580)) From 60c940477f88f8c80ebd304517785b48762930c8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 22 Nov 2023 17:15:28 +0100 Subject: [PATCH 3/4] Update CHANGELOG --- packages/components/CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 32aac4be432fd0..cd1705d6cafd7b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `Tabs`: Memoize and expose the component context ([#56224](https://github.com/WordPress/gutenberg/pull/56224)). +### Internal + +- `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428)) + ## 25.12.0 (2023-11-16) ### Bug Fix @@ -14,7 +18,6 @@ ### Internal -- `Slot`: add `styles` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428)) - Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622)) - Migrate `DisclosureContent` from `reakit` to `ariakit` and TypeScript ([#55639](https://github.com/WordPress/gutenberg/pull/55639)) - Migrate `RadioGroup` from `reakit` to `ariakit` and TypeScript ([#55580](https://github.com/WordPress/gutenberg/pull/55580)) From e17da2c0d3a5a7fb018092002a68e370f7b07c6d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 22 Nov 2023 17:17:55 +0100 Subject: [PATCH 4/4] Enhance clarity of JSDoc comments --- packages/components/src/slot-fill/README.md | 2 +- packages/components/src/slot-fill/types.ts | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md index a04416bdee50d9..9059566deefdf4 100644 --- a/packages/components/src/slot-fill/README.md +++ b/packages/components/src/slot-fill/README.md @@ -68,7 +68,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given - By default, events will bubble to their parents on the DOM hierarchy (native event bubbling) - If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead. -`Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container. +`Slot` with `bubblesVirtually` set to true also accept optional `className` and `style` props to add to the slot container. `Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally. diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts index 70ef34e3d52655..8abb9b941c527c 100644 --- a/packages/components/src/slot-fill/types.ts +++ b/packages/components/src/slot-fill/types.ts @@ -36,19 +36,19 @@ export type SlotComponentProps = /** * A function that returns nodes to be rendered. - * Not supported when `bubblesVirtually` is `true`. + * Supported only when `bubblesVirtually` is `false`. */ children?: never; /** - * className. - * Not supported when `bubblesVirtually` is `false`. + * Additional className for the `Slot` component. + * Supported only when `bubblesVirtually` is `true`. */ className?: string; /** - * styles. - * Not supported when `bubblesVirtually` is `false`. + * Additional styles for the `Slot` component. + * Supported only when `bubblesVirtually` is `true`. */ style?: React.CSSProperties; } ) @@ -62,19 +62,19 @@ export type SlotComponentProps = /** * A function that returns nodes to be rendered. - * Not supported when `bubblesVirtually` is `true`. + * Supported only when `bubblesVirtually` is `false`. */ children?: ( fills: ReactNode ) => ReactNode; /** - * className. - * Not supported when `bubblesVirtually` is `false`. + * Additional className for the `Slot` component. + * Supported only when `bubblesVirtually` is `true`. */ className?: never; /** - * styles. - * Not supported when `bubblesVirtually` is `false`. + * Additional styles for the `Slot` component. + * Supported only when `bubblesVirtually` is `true`. */ style?: never; } );