Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slot: add styles prop to bubblesVirtually version #56428

Merged
merged 4 commits into from
Nov 22, 2023
Merged

Slot: add styles prop to bubblesVirtually version #56428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf109bb
Slot: add `styles` prop to `bubblesVirtually` version
ciampo Nov 22, 2023
2a5ebdb
CHANHGELOG
ciampo Nov 22, 2023
60c9404
Update CHANGELOG
ciampo Nov 22, 2023
e17da2c
Enhance clarity of JSDoc comments
ciampo Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/slot-fill/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
24 changes: 18 additions & 6 deletions packages/components/src/slot-fill/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,21 @@ 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 true.
* Additional className for the `Slot` component.
* Supported only when `bubblesVirtually` is `true`.
*/
className?: string;

/**
* Additional styles for the `Slot` component.
* Supported only when `bubblesVirtually` is `true`.
*/
style?: React.CSSProperties;
} )
| ( SlotPropBase & {
/**
Expand All @@ -56,15 +62,21 @@ 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;

/**
* Additional styles for the `Slot` component.
* Supported only when `bubblesVirtually` is `true`.
*/
style?: never;
} );

export type FillComponentProps = {
Expand Down
Loading