From f6d65ab531bbaff1641e1d7568153b7c0bb0353c Mon Sep 17 00:00:00 2001 From: Aaron Mead Date: Mon, 26 Aug 2024 15:26:27 -0400 Subject: [PATCH 1/2] Hard coded white text can't be read when site theme is in light mode. Text already changes to suit the site theme so inline style not needed here. --- docs/reference/islands.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/reference/islands.md b/docs/reference/islands.md index 2b9b121..cded577 100644 --- a/docs/reference/islands.md +++ b/docs/reference/islands.md @@ -55,14 +55,14 @@ export default function InteractiveComponent({ defaultCount }) { Name | Type | Default | Description -- | -- | -- | -- -**clientOnly** | `boolean` | `false` | When set to `true` the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser. -**hydrateOn** | `"load" \| "visible" \| "idle"` | `"load"` | When rendering a page with Islands on the server, the output includes a script to initialize Islands on the client. Hydrating means downloading and initializing the Island component code, so using these different hydration types strategically to defer some of that work can help boost initial page load performance! See [Hydration Types](#hydration-types) below for more information. -**id** | `string` | - | By default we generate a unique ID string for your island such as `island-123456`. But if you wish to provide your own island ID, you can use this prop. -**module*** | `React.Component` | - | Please keep in mind that the component passed in as the value of this prop must include the `?island` suffix as a part of the import RUL. Refer to the `InteractiveComponent` example at the top of the docs. -**wrapperTag** | `string `| `"div"` | The string provided must be a valid HTML element tag (e.g. 'span', 'article', 'section', etc). -**wrapperClassName** | `string` | - | This props gets passed through to the wrapping element around the island. Refer to the `wrapperTag` prop for how to customize which HTML element is used as the wrapping element. -**wrapperStyle** | `CSSProperties` | - | The `CSSProperties` provided will be applied inline to the `wrapperTag` of the island. -**Wrapper** | `React.Component` | - | This prop allows you to provide a custom context provider that will wrap the React tree of your island component. This is particularly useful for integrating with [CSS-in-JS libraries](https://github.hubspot.com/cms-react/reference/styling.html#styled-components), such as styled-components, or other context providers that need to encapsulate the component's subtree for applying styles or context values. Please remember that when using the `Wrapper` prop you **must import the component passed with a `?client` suffix** to make sure it can be bundled for the client. +**clientOnly** | `boolean` | `false` | When set to `true` the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser. +**hydrateOn** | `"load" \| "visible" \| "idle"` | `"load"` | When rendering a page with Islands on the server, the output includes a script to initialize Islands on the client. Hydrating means downloading and initializing the Island component code, so using these different hydration types strategically to defer some of that work can help boost initial page load performance! See [Hydration Types](#hydration-types) below for more information. +**id** | `string` | - | By default we generate a unique ID string for your island such as `island-123456`. But if you wish to provide your own island ID, you can use this prop. +**module*** | `React.Component` | - | Please keep in mind that the component passed in as the value of this prop must include the `?island` suffix as a part of the import RUL. Refer to the `InteractiveComponent` example at the top of the docs. +**wrapperTag** | `string `| `"div"` | The string provided must be a valid HTML element tag (e.g. 'span', 'article', 'section', etc). +**wrapperClassName** | `string` | - | This props gets passed through to the wrapping element around the island. Refer to the `wrapperTag` prop for how to customize which HTML element is used as the wrapping element. +**wrapperStyle** | `CSSProperties` | - | The `CSSProperties` provided will be applied inline to the `wrapperTag` of the island. +**Wrapper** | `React.Component` | - | This prop allows you to provide a custom context provider that will wrap the React tree of your island component. This is particularly useful for integrating with [CSS-in-JS libraries](https://github.hubspot.com/cms-react/reference/styling.html#styled-components), such as styled-components, or other context providers that need to encapsulate the component's subtree for applying styles or context values. Please remember that when using the `Wrapper` prop you **must import the component passed with a `?client` suffix** to make sure it can be bundled for the client. ### [Hydration types](#hydration-types) The default behavior of the island initialization script is to eagerly hydrate all Islands as soon as possible, i.e., on `load`, but there are other strategies available when hydrating components: From 0fa8f624f6915880c8b0c1992ebb542062c80f8b Mon Sep 17 00:00:00 2001 From: Aaron Mead Date: Mon, 26 Aug 2024 16:41:09 -0400 Subject: [PATCH 2/2] Remove unncessary asterisk --- docs/reference/islands.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference/islands.md b/docs/reference/islands.md index cded577..810ebcb 100644 --- a/docs/reference/islands.md +++ b/docs/reference/islands.md @@ -58,7 +58,7 @@ Name | Type | Default | Description **clientOnly** | `boolean` | `false` | When set to `true` the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser. **hydrateOn** | `"load" \| "visible" \| "idle"` | `"load"` | When rendering a page with Islands on the server, the output includes a script to initialize Islands on the client. Hydrating means downloading and initializing the Island component code, so using these different hydration types strategically to defer some of that work can help boost initial page load performance! See [Hydration Types](#hydration-types) below for more information. **id** | `string` | - | By default we generate a unique ID string for your island such as `island-123456`. But if you wish to provide your own island ID, you can use this prop. -**module*** | `React.Component` | - | Please keep in mind that the component passed in as the value of this prop must include the `?island` suffix as a part of the import RUL. Refer to the `InteractiveComponent` example at the top of the docs. +**module** | `React.Component` | - | Please keep in mind that the component passed in as the value of this prop must include the `?island` suffix as a part of the import RUL. Refer to the `InteractiveComponent` example at the top of the docs. **wrapperTag** | `string `| `"div"` | The string provided must be a valid HTML element tag (e.g. 'span', 'article', 'section', etc). **wrapperClassName** | `string` | - | This props gets passed through to the wrapping element around the island. Refer to the `wrapperTag` prop for how to customize which HTML element is used as the wrapping element. **wrapperStyle** | `CSSProperties` | - | The `CSSProperties` provided will be applied inline to the `wrapperTag` of the island.