From a58993fcddbfed1cd5f1cc7ccc9b4019f0e697f4 Mon Sep 17 00:00:00 2001 From: shellscape Date: Tue, 15 Oct 2024 17:23:47 -0400 Subject: [PATCH] docs: add notes about cellpadding and cellspacing --- docs/components/container.md | 6 +++++- docs/components/row.md | 4 ++++ docs/components/section.md | 8 ++++++-- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/components/container.md b/docs/components/container.md index 59f37d7a..b75657b2 100644 --- a/docs/components/container.md +++ b/docs/components/container.md @@ -27,6 +27,10 @@ const Email = () => { }; ``` +::: info +Though the `Container` component wraps a `` element, it has a specific use-case and does not support setting `cellPadding` or `cellSpacing`. If attempting to use `Container` as a table, please consider using a `
` element or a combination of `Row` and `Column`. +::: + ## Component Props ```ts @@ -36,5 +40,5 @@ disableDefaultStyle?: boolean; If `true`, instructs the component _not to add_ default `style` properties to the component. This can be useful when attempting to override default styles with `Tailwind` or class names. ::: tip -This component also expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'table'>`. +This component also expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'table'>` except for `cellPadding` and `cellSpacing`. ::: diff --git a/docs/components/row.md b/docs/components/row.md index 45e99196..8c9fb452 100644 --- a/docs/components/row.md +++ b/docs/components/row.md @@ -33,6 +33,10 @@ const Email = () => { }; ``` +::: info +Though the `Row` component wraps a `table` element, it is not designed to identically mimic a `table`, rather provide a visual row element that has maximum email client compatibility. Setting `cellPadding` or `cellSpacing` on a `Row` component can achieve similar results to using a custom `table` element, but it's not recommended. For custom behavior and for needs like `cellPadding` it's recommended to use a `table` element instead of `Row`. +::: + ## Component Props ```ts diff --git a/docs/components/section.md b/docs/components/section.md index c8ab876a..cc8cb032 100644 --- a/docs/components/section.md +++ b/docs/components/section.md @@ -1,6 +1,6 @@ --- title: 'Section' -description: 'Creates section bordaries that can be formatted with columns and rows' +description: 'Creates section boundaries that can be formatted with columns and rows' slug: section type: component --- @@ -40,6 +40,10 @@ const Email = () => { }; ``` +::: info +Though the `Section` component wraps a `
` element, it's not designed to mimic a `table` and has a specific use for email client compatibility and does not support setting `cellPadding` or `cellSpacing`. If attempting to use `Section` as a table, please consider using a `
` element. If using `Row` and `Column` with a `Section` and the need arises to set either `cellPadding` or `cellSpacing`, please set those properties on the appropriate `Row` component(s). +::: + ## Component Props -This component has no custom props, but expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'table'>`. +This component has no custom props, but expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'table'>` except for `cellPadding` and `cellSpacing`.