@redis-ui/components 42.8.0 → 43.2.1

package/skills/redis-ui-components/references/Modal.md

@@ -0,0 +1,525 @@
+# Modal
+
+Dialog component with customizable trigger and content, plus a compose API for advanced modal layouts.
+
+## Import
+
+```tsx
+import { Modal } from '@redislabsdev/redis-ui-components';
+```
+
+> Icons used in examples are imported separately from `@redislabsdev/redis-ui-icons`.
+
+## Props
+
+> The root `Modal` forwards the popup-related props used by `Modal.Content`, so the rows below apply to both surfaces. Compose surfaces also accept standard `div` attributes unless noted.
+
+| Surface | Prop | Type | Default | Description |
+|------|------|------|---------|-------------|
+| `Modal` | `children` | `React.ReactNode` | - | Trigger content rendered inside `Modal.Trigger` |
+| `Modal` | `defaultOpen` | `boolean` | - | Initial open state for uncontrolled usage |
+| `Modal` | `open` | `boolean` | - | Controlled open state |
+| `Modal` | `onOpenChange` | `(open: boolean) => void` | - | Called when the modal open state changes |
+| `Modal` | `withButton` | `boolean` | `false` | Wraps plain text or multiple trigger nodes in an invisible button |
+| `Modal.Content` | `title` | `ReactNode` | required | Dialog title shown in the header |
+| `Modal.Content` | `description` | `ReactNode` | - | Optional description shown below the title |
+| `Modal.Content` | `descriptionHidden` | `boolean` | `false` | Keeps the description visually hidden while preserving accessibility |
+| `Modal.Content` | `content` | `ReactNode` | required | Body content rendered inside the modal |
+| `Modal.Content` | `width` | `string` | - | Optional dialog body width |
+| `Modal.Content` | `persistent` | `boolean` | `false` | Prevents closing by overlay click, `Esc`, and the close button |
+| `Modal.Content` | `primaryButtonText` | `string` | - | Label for the primary action button |
+| `Modal.Content` | `secondaryButtonText` | `string` | - | Label for the secondary action button |
+| `Modal.Content` | `tertiaryButtonText` | `string` | - | Label for the tertiary action button |
+| `Modal.Content` | `tertiaryButtonIcon` | `IconType` | - | Icon shown inside the tertiary action button |
+| `Modal.Content` | `primaryButtonDisabled` | `boolean` | `false` | Disables the primary action button |
+| `Modal.Content` | `secondaryButtonDisabled` | `boolean` | `false` | Disables the secondary action button |
+| `Modal.Content` | `tertiaryButtonDisabled` | `boolean` | `false` | Disables the tertiary action button |
+| `Modal.Content` | `onPrimaryButtonClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | - | Handler for the primary action button |
+| `Modal.Content` | `onSecondaryButtonClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | `onCancel` | Handler for the secondary action button |
+| `Modal.Content` | `onTertiaryButtonClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | - | Handler for the tertiary action button |
+| `Modal.Content` | `onCancel` | `VoidFunction` | - | Fired when the modal closes via overlay click, `Esc`, or close actions |
+| `Modal.Compose` | `children` | `React.ReactNode` | required | Dialog root children |
+| `Modal.Compose` | `defaultOpen` | `boolean` | - | Initial open state for the dialog root |
+| `Modal.Compose` | `open` | `boolean` | - | Controlled open state for the dialog root |
+| `Modal.Compose` | `onOpenChange` | `(open: boolean) => void` | - | Fired when the dialog root open state changes |
+| `Modal.Trigger` | `children` | `React.ReactNode` | required | Trigger content rendered as the dialog trigger |
+| `Modal.Trigger` | `withButton` | `boolean` | `false` | Wraps trigger content in an invisible button when plain text or multiple nodes are used |
+| `Modal.Closable` | `children` | `React.ReactElement` | required | Child element wrapped in a dialog close action |
+| `Modal.Content.Compose` | `children` | `React.ReactNode` | required | Low-level dialog content children |
+| `Modal.Content.Compose` | `persistent` | `boolean` | `false` | Prevents closing from overlay clicks, `Esc`, and close actions |
+| `Modal.Content.Compose` | `onCancel` | `VoidFunction` | - | Close callback used by escape, overlay, and close interactions |
+| `Modal.Content.Header` | `title` | `ReactNode` | required | Header title content |
+| `Modal.Content.Header` | `titleHidden` | `boolean` | `false` | Hides the title visually while keeping it accessible |
+| `Modal.Content.Header.Compose` | `children` | `React.ReactNode` | required | Custom header container content |
+| `Modal.Content.Header.Title` | `hidden` | `boolean` | `false` | Hides the title visually while keeping the dialog title accessible |
+| `Modal.Content.Header.Title` | `Typography.Heading props` | - | - | Inherits the `Typography.Heading` prop surface |
+| `Modal.Content.Description` | `children` | `React.ReactNode` | required | Description content rendered below the title |
+| `Modal.Content.Description` | `hidden` | `boolean` | `false` | Hides the description visually while keeping it accessible |
+| `Modal.Content.Description.Text` | `Typography.Heading props` | - | - | Typography wrapper for description text, rendered at size `XS` |
+| `Modal.Content.Body` | `content` | `ReactNode` | required | Body content rendered inside the dialog body |
+| `Modal.Content.Body` | `width` | `string` | - | Optional width for the body container |
+| `Modal.Content.Body.Compose` | `children` | `React.ReactNode` | required | Custom body container content |
+| `Modal.Content.Body.Compose` | `width` | `string` | - | Optional width for the body container |
+| `Modal.Content.Body.Text` | `Typography.Body props` | - | - | Typography wrapper for body text |
+| `Modal.Content.Footer` | `primaryButtonText` | `string` | - | Label for the primary action button |
+| `Modal.Content.Footer` | `secondaryButtonText` | `string` | - | Label for the secondary action button |
+| `Modal.Content.Footer` | `tertiaryButtonText` | `string` | - | Label for the tertiary action button |
+| `Modal.Content.Footer` | `tertiaryButtonIcon` | `IconType` | - | Icon shown inside the tertiary action button |
+| `Modal.Content.Footer` | `primaryButtonDisabled` | `boolean` | `false` | Disables the primary action button |
+| `Modal.Content.Footer` | `secondaryButtonDisabled` | `boolean` | `false` | Disables the secondary action button |
+| `Modal.Content.Footer` | `tertiaryButtonDisabled` | `boolean` | `false` | Disables the tertiary action button |
+| `Modal.Content.Footer` | `onPrimaryButtonClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | - | Handler for the primary action button |
+| `Modal.Content.Footer` | `onSecondaryButtonClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | `onCancel` | Handler for the secondary action button |
+| `Modal.Content.Footer` | `onTertiaryButtonClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | - | Handler for the tertiary action button |
+| `Modal.Content.Footer.Compose` | `children` | `React.ReactNode` | required | Custom footer container content |
+| `Modal.Content.Close` | `icon` | `IconType` | `CancelIcon` | Icon rendered inside the close button |
+| `Modal.Content.Close` | `persistent` | `boolean` | `false` | Omits the close button when the dialog is persistent |
+| `Modal.Content.Close` | `onClick` | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | - | Close button click handler |
+
+## Sub-components
+
+- `Modal.Compose` - Low-level Radix dialog root for controlled and uncontrolled modal state.
+- `Modal.Content` - Complete modal panel with header, description, body, footer, and close wiring.
+- `Modal.Trigger` - Wraps trigger content and can use an invisible button wrapper with `withButton`.
+- `Modal.Closable` - Wraps a custom element so it closes the dialog when clicked.
+- `Modal.Content.Compose` - Base dialog content container used for fully custom layouts.
+- `Modal.Content.Header` - Default header area that maps string titles to an accessible dialog title.
+- `Modal.Content.Header.Compose` - Custom header container for fully composed headers.
+- `Modal.Content.Header.Title` - Accessible title wrapper for custom header content.
+- `Modal.Content.Description` - Default description area that hides empty content automatically.
+- `Modal.Content.Description.Text` - Typography wrapper for description text.
+- `Modal.Content.Body` - Default body area that renders string content or custom nodes.
+- `Modal.Content.Body.Compose` - Custom body container for fully composed content layouts.
+- `Modal.Content.Body.Text` - Typography wrapper for body text.
+- `Modal.Content.Footer` - Default footer area with primary, secondary, and tertiary action buttons.
+- `Modal.Content.Footer.Compose` - Custom footer container for custom action rows.
+- `Modal.Content.Footer.Group` - Internal button group container used by the default footer layout.
+- `Modal.Content.Close` - Close icon button rendered in the top-right of the modal.
+
+## Examples
+
+### Playground
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+
+<Modal
+  title="Modal headline"
+  content={`Modals display content that temporarily blocks interactions
+  within the main view of a site. It can contain critical information, require decisions, or contain entire feature workflows.`}
+  primaryButtonText="Submit"
+  secondaryButtonText="Cancel"
+  width="30rem"
+>
+  <Button>Try me</Button>
+</Modal>;
+```
+
+### TriggerWithButton
+
+> Modal Trigger has property `withButton` which allows wrapping trigger elements with invisible button.
+>
+> Use this property if you have multiple elements or your element doesn't work as trigger
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+
+<Modal title="Modal title" content="Modal content" withButton>
+  Plain text or multiple elements should be wrapped, using &nbsp;<strong>withButton</strong>
+  &nbsp; prop
+</Modal>;
+```
+
+### NonClosingOverlay
+
+> Click out of the Modal will not close it, if `persistent` flag is set
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+
+<Modal
+  title="Non-closing Overlay"
+  content='Click out of the Modal will not close it, if "persistent" flag is set'
+  secondaryButtonText="Close"
+  persistent
+>
+  <Button>Try me</Button>
+</Modal>;
+```
+
+### ModalWith3Buttons
+
+> Modal can contain 3 buttons
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+import { StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Modal
+  title="Modal"
+  content="Modal can have 3 buttons. Tertiary button can also be defined with icon"
+  primaryButtonText="Primary"
+  secondaryButtonText="Secondary"
+  tertiaryButtonText="Tertiary"
+  tertiaryButtonIcon={StarsIcon}
+>
+  <Button>Try me</Button>
+</Modal>;
+```
+
+### DisabledButtons
+
+> Modal buttons can be disabled
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+
+<Modal
+  title="Modal "
+  content="Each button can be disabled"
+  primaryButtonText="Primary"
+  primaryButtonDisabled
+  secondaryButtonText="Secondary"
+  secondaryButtonDisabled
+>
+  <Button>Try me</Button>
+</Modal>;
+```
+
+### ProgrammaticallyOpened
+
+> Modal can be opened programmatically by setting `open` or `defaultOpen` props
+
+```tsx
+import { useEffect, useState } from 'react';
+import { Modal, Switch, Typography } from '@redislabsdev/redis-ui-components';
+
+function Render() {
+  const [open, setOpen] = useState(false);
+  const [enabled, setEnabled] = useState(false);
+  const [countDown, setCountDown] = useState(5);
+
+  const resetTimer = () => {
+    setCountDown(5);
+  };
+
+  useEffect(() => {
+    if (enabled) {
+      if (countDown > 0) {
+        const timer = setTimeout(() => {
+          setCountDown(countDown - 1);
+        }, 1000);
+
+        return () => clearTimeout(timer);
+      }
+
+      setOpen(true);
+    } else {
+      resetTimer();
+    }
+
+    return undefined;
+  }, [countDown, enabled]);
+
+  return (
+    <>
+      <Switch checked={enabled} onCheckedChange={setEnabled} />
+      {enabled ? (
+        <>
+          <Typography.Heading size="M">
+            Modal will be open in {countDown} seconds
+          </Typography.Heading>
+          <Modal
+            open={open}
+            onOpenChange={(o) => {
+              setOpen(o);
+
+              if (!o) {
+                setEnabled(false);
+              }
+            }}
+            title="Modal headline"
+            content="Feel free to paste any kind of text on me but try to keep it  short and to the point, and as informative as you can :)"
+            primaryButtonText="Submit"
+            secondaryButtonText="Cancel"
+          />
+        </>
+      ) : (
+        <Typography.Heading size="M">Switch timer ON</Typography.Heading>
+      )}
+    </>
+  );
+}
+```
+
+### StackModals
+
+> Multiple modals can be opened in the controlled mode only.
+> Do not use onOpenChanged event to close modal, because it will close the first modal, when opening second one.
+
+```tsx
+import { useState } from 'react';
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+
+function Render() {
+  const [open1, setOpen1] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  const closeAll = () => {
+    setOpen2(false);
+    setOpen1(false);
+  };
+
+  return (
+    <>
+      <Modal
+        open={open1}
+        onOpenChange={(opened) => opened && setOpen1(true)}
+        title="Modal level 1"
+        content="Multiple modals can be opened in the controlled mode only"
+        width="90rem"
+        primaryButtonText="Open 2"
+        secondaryButtonText="Close 1"
+        persistent
+        onPrimaryButtonClick={() => setOpen2(true)}
+        onSecondaryButtonClick={() => setOpen1(false)}
+      >
+        <Button>Try me</Button>
+      </Modal>
+      <Modal
+        open={open2}
+        title="Modal level 2"
+        content="Dialogs can be programmatically closed one by one or all together"
+        width="30rem"
+        primaryButtonText="Close all"
+        secondaryButtonText="Close 2"
+        persistent
+        onPrimaryButtonClick={closeAll}
+        onSecondaryButtonClick={() => setOpen2(false)}
+      />
+    </>
+  );
+}
+```
+
+## Modal.Content
+
+`Modal.Content` defines the dialog look. It exposes the popup-related props used by `Modal` and supports full composition for custom headers, body, and footer layouts.
+
+### Playground
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+
+<Modal.Compose>
+  <Modal.Trigger>
+    <Button>Try me</Button>
+  </Modal.Trigger>
+  <Modal.Content
+    title="Modal headline"
+    description="This is a description text that appears below the title"
+    content={`Modal content defines the dialog look. It has basic definitions for headline, body and 3 action buttons. Also it allows to change the width of the dialog`}
+    primaryButtonText="Submit"
+    secondaryButtonText="Cancel"
+    width="30rem"
+  />
+</Modal.Compose>
+```
+
+### ComplexHeaderAndBody
+
+> Modal Header and Body can receive any elements and text formatting via props
+> without necessity for composition
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+import { StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Modal.Compose>
+  <Modal.Trigger>
+    <Button>Try me</Button>
+  </Modal.Trigger>
+  <Modal.Content
+    title={
+      <>
+        <StarsIcon />
+        <Modal.Content.Header.Title>
+          <em>Custom</em> Header and Body
+        </Modal.Content.Header.Title>
+      </>
+    }
+    content={
+      <>
+        Modal Header and Body can receive <strong>any</strong> elements and text formatting without
+        necessity for composition
+        <br /> <br /> <input type="checkbox" /> <input type="radio" name="a" />
+        <input type="radio" name="a" /> <button type="button">button</button>&nbsp;
+        <Modal.Closable>
+          <button type="button">closable button</button>
+        </Modal.Closable>
+      </>
+    }
+    secondaryButtonText="Close"
+  />
+</Modal.Compose>
+```
+
+### ContentCompose
+
+> Basic `Modal.Content` composition
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+import { DeleteIcon } from '@redislabsdev/redis-ui-icons';
+
+<Modal.Compose>
+  <Modal.Trigger>
+    <Button>Try me</Button>
+  </Modal.Trigger>
+  <Modal.Content.Compose>
+    <Modal.Content.Close icon={DeleteIcon} />
+    <Modal.Content.Header title="Header" />
+    <Modal.Content.Body content="Body text" width="30rem" />
+    <Modal.Content.Footer primaryButtonText="Submit" secondaryButtonText="Cancel" />
+  </Modal.Content.Compose>
+</Modal.Compose>
+```
+
+### ContentHeaderCompose
+
+> Composing `Modal.Content.Header`
+
+```tsx
+import { Button, Modal } from '@redislabsdev/redis-ui-components';
+import { WandIcon } from '@redislabsdev/redis-ui-icons';
+
+<Modal.Compose>
+  <Modal.Trigger>
+    <Button>Try me</Button>
+  </Modal.Trigger>
+  <Modal.Content.Compose>
+    <Modal.Content.Close />
+    <Modal.Content.Header.Compose
+      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+    >
+      <WandIcon customSize="10rem" />
+      <Modal.Content.Header.Title>My Custom Title</Modal.Content.Header.Title>
+    </Modal.Content.Header.Compose>
+    <Modal.Content.Body content="Feel free to paste any kind of text on me but try to keep it  short and to the point, and as informative as you can :)" />
+    <Modal.Content.Footer primaryButtonText="Submit" secondaryButtonText="Cancel" />
+  </Modal.Content.Compose>
+</Modal.Compose>
+```
+
+### ContentBodyCompose
+
+> Composing `Modal.Content.Body`
+
+```tsx
+import { Button, Modal, Typography } from '@redislabsdev/redis-ui-components';
+
+<Modal.Compose>
+  <Modal.Trigger>
+    <Button>Try me</Button>
+  </Modal.Trigger>
+  <Modal.Content.Compose>
+    <Modal.Content.Close />
+    <Modal.Content.Header title="My Custom Content" />
+    <Modal.Content.Body.Compose>
+      <Modal.Content.Body.Text>
+        Here can be any text, <Button variant="secondary-invert">element</Button>, or
+        <input type="text" value="anything you need to render" />
+      </Modal.Content.Body.Text>
+      <Typography.Body style={{ marginTop: '2rem' }} color="primary" size="L">
+        Another paragraph, but can be anything
+      </Typography.Body>
+    </Modal.Content.Body.Compose>
+    <Modal.Content.Footer primaryButtonText="Submit" secondaryButtonText="Cancel" />
+  </Modal.Content.Compose>
+</Modal.Compose>
+```
+
+### ContentFooterCompose
+
+> Basic `Modal.Content.Footer` composition
+
+```tsx
+import { Button, Modal, Typography } from '@redislabsdev/redis-ui-components';
+import { StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+function Render() {
+  return (
+    <Modal.Compose>
+      <Modal.Trigger>
+        <Button>Try me</Button>
+      </Modal.Trigger>
+      <Modal.Content.Compose>
+        <Modal.Content.Close />
+        <Modal.Content.Header title="My Custom Footer" />
+        <Modal.Content.Body
+          content={
+            <>
+              Footer can contain anything.
+              <br />
+              Button should be wrapped with <strong>Modal.Closable</strong> to allow closing Modal
+            </>
+          }
+        />
+        <Modal.Content.Footer.Compose style={{ justifyContent: 'space-between' }}>
+          <Typography.Body>Custom Footer text</Typography.Body>
+          <Modal.Closable>
+            <Button variant="secondary-invert">
+              <Button.Icon icon={StarsIcon} /> Custom Footer Button
+            </Button>
+          </Modal.Closable>
+        </Modal.Content.Footer.Compose>
+      </Modal.Content.Compose>
+    </Modal.Compose>
+  );
+}
+```
+
+### CustomContentCompose
+
+> Completely custom `Modal.Content` composition
+
+```tsx
+import { Button, Modal, TextButton, Typography } from '@redislabsdev/redis-ui-components';
+import { SignoutIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Modal.Compose>
+  <Modal.Trigger>
+    <Button>Try me</Button>
+  </Modal.Trigger>
+  <Modal.Content.Compose>
+    <Modal.Content.Header.Title hidden>hidden accessible title</Modal.Content.Header.Title>
+    <div style={{ textAlign: 'right' }}>
+      <Modal.Closable>
+        <span>
+          <SignoutIcon size="XL" />
+        </span>
+      </Modal.Closable>
+    </div>
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <StarsIcon customSize="15rem" />
+      <Typography.Heading size="XXL">Custom Modal.Content</Typography.Heading>
+      <Typography.Body>Modal content composition can be completely custom</Typography.Body>
+      <Modal.Closable>
+        <TextButton>Close</TextButton>
+      </Modal.Closable>
+    </div>
+  </Modal.Content.Compose>
+</Modal.Compose>
+```
+
+## Notes
+
+- `Modal.Trigger` can use `withButton` to wrap plain text or multiple nodes in an invisible button.
+- `persistent` prevents closing the modal by overlay click, `Esc`, and the close button.
+- `Modal` supports three action buttons, and the tertiary button can include an icon.
+- Each action button can be disabled independently.
+- Programmatic opening works through `open` or `defaultOpen`.
+- Controlled modal stacking should use explicit state updates; do not rely on `onOpenChange` to close the first modal when opening another one.
+- `Modal.Content.Header` must render an accessible title either via the `title` prop or `Modal.Content.Header.Title`.
+- `Modal.Closable` is the wrapper to use when a custom button should close the dialog.
+- `Modal.Content.Description` hides empty content automatically and can also be visually hidden with `hidden`.

package/skills/redis-ui-components/references/MoreInfoIcon.md

@@ -0,0 +1,119 @@
+# MoreInfoIcon
+
+Icon button that wraps a tooltip and renders an info icon by default.
+
+## Import
+
+```tsx
+import { MoreInfoIcon } from '@redislabsdev/redis-ui-components';
+```
+
+> Examples that use custom icons also import them from `@redislabsdev/redis-ui-icons`.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| tooltip | `React.ReactNode` | *required* | Tooltip content. If empty, the icon is not rendered. |
+| tooltipProps | `Omit<TooltipProps, 'children' \| 'content' \| 'text'>` | - | Props passed to the underlying `Tooltip` component. |
+| size | `IconSizeType` | `'L'` | Icon size. |
+| customIcon | `IconType` | `InfoIcon` | Custom icon component to render instead of the default info icon. |
+
+The component also extends native `HTMLAttributes<HTMLSpanElement>` props, excluding `content`, `children`, and `size`.
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { MoreInfoIcon } from '@redislabsdev/redis-ui-components';
+
+<MoreInfoIcon tooltip="Info Tooltip" />
+```
+
+### TooltipContent
+
+> The story shows that empty tooltip content hides the icon. It also demonstrates passing tooltip content and tooltip props for custom placement and view-mode behavior.
+
+```tsx
+import { MoreInfoIcon } from '@redislabsdev/redis-ui-components';
+import { useViewMode } from '../../helpers/useViewMode';
+import * as S from '../Label/Label.style';
+
+const useStoryInfoIconProps = () => ({
+  defaultOpen: useViewMode().inStory
+});
+
+<>
+  <MoreInfoIcon tooltip={<span> </span>} />
+  <MoreInfoIcon tooltip={' '} />
+  <MoreInfoIcon
+    tooltip={
+      <>
+        <S.LabelInfoIconHeading>Custom</S.LabelInfoIconHeading>
+        <S.LabelInfoIconBody>colored content</S.LabelInfoIconBody>
+        <S.LabelInfoIconText>
+          with <strong>textColor</strong> prop
+        </S.LabelInfoIconText>
+      </>
+    }
+    tooltipProps={{
+      placement: 'bottom',
+      ...useStoryInfoIconProps()
+    }}
+  />
+</>
+```
+
+### IconSize
+
+> MoreInfoIcon supports the regular icon sizes. Use `size` to choose `S`, `M`, or `L`.
+
+```tsx
+import { MoreInfoIcon } from '@redislabsdev/redis-ui-components';
+import { useViewMode } from '../../helpers/useViewMode';
+
+const defaultProps = { tooltipProps: { defaultOpen: useViewMode().inStory } };
+
+<>
+  <MoreInfoIcon tooltip="Icon size S" size="S" {...defaultProps} />
+  <MoreInfoIcon tooltip="Icon size M" size="M" {...defaultProps} />
+  <MoreInfoIcon tooltip="Icon size L (default)" size="L" {...defaultProps} />
+</>
+```
+
+### CustomIconAndColor
+
+> MoreInfoIcon can render a custom icon. Use `customIcon` to set it.
+
+```tsx
+import { MoreInfoIcon } from '@redislabsdev/redis-ui-components';
+import { ToastDangerIcon, ToastCheckIcon } from '@redislabsdev/redis-ui-icons';
+import { useTheme } from '@redislabsdev/redis-ui-styles';
+import { useViewMode } from '../../helpers/useViewMode';
+
+const defaultProps = { tooltipProps: { defaultOpen: useViewMode().inStory } };
+const themeColors = useTheme().semantic.color;
+
+<>
+  <MoreInfoIcon
+    tooltip={<span style={{ color: themeColors.text.danger500 }}>Error</span>}
+    customIcon={ToastDangerIcon}
+    style={{ color: themeColors.icon.danger500 }}
+    {...defaultProps}
+  />
+  <MoreInfoIcon
+    tooltip="Success"
+    customIcon={ToastCheckIcon}
+    style={{ color: themeColors.icon.success300 }}
+    {...defaultProps}
+  />
+</>
+```
+
+## Notes
+
+- Empty tooltip content suppresses the icon entirely.
+- The tooltip-content story notes that `tooltipProps` also covers `Tooltip.Content` behavior and icon-related props like `iconColor` and `size`.
+- `tooltipProps` forwards placement and other tooltip behavior to the underlying `Tooltip`.
+- `MoreInfoIcon` renders `InfoIcon` by default and uses `size="L"` when no size is provided.