styles: enhance component prop JSDoc to add information about valid u…

…sage
elastic · Sep 4, 2024 · 8a0af41 · 8a0af41
1 parent 8b61b90
commit 8a0af41
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/eui/src/components/text/text.tsx b/packages/eui/src/components/text/text.tsx
@@ -23,7 +23,10 @@ export type TextSize = (typeof TEXT_SIZES)[number];
 export type EuiTextProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
     /**
-     * The HTML element/tag to render
+     * The HTML element/tag to render.
+     * Use with care when nesting multiple components to ensure valid html.
+     * Block elements can't be nested inside inline elements: `<p>` and `<div>` are not valid inside `<span>`.
+     * Additionally `<div>` is not valid to use inside `<p>`.
      */
     component?: 'div' | 'span' | 'p';
     textAlign?: TextAlignment;

diff --git a/packages/eui/src/components/text/text_align.tsx b/packages/eui/src/components/text/text_align.tsx
@@ -23,6 +23,9 @@ export type EuiTextAlignProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     /**
      * The HTML element/tag to render
+     * Use with care when nesting multiple components to ensure valid html.
+     * Block elements can't be nested inside inline elements. (<p> and <div> are not valid inside <span>)
+     * Additionally <div> is not valid to use inside <p>.
      */
     component?: 'div' | 'span' | 'p';
     textAlign?: TextAlignment;

diff --git a/packages/eui/src/components/text/text_color.tsx b/packages/eui/src/components/text/text_color.tsx
@@ -43,6 +43,9 @@ export type EuiTextColorProps = CommonProps &
     color?: TextColor | CSSProperties['color'];
     /**
      * The HTML element/tag to render
+     * Use with care when nesting multiple components to ensure valid html.
+     * Block elements can't be nested inside inline elements. (<p> and <div> are not valid inside <span>)
+     * Additionally <div> is not valid to use inside <p>.
      */
     component?: 'div' | 'span' | 'p';
     /**