@redis-ui/components 42.8.0 → 43.2.1

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

@@ -0,0 +1,323 @@
+# Typography
+
+Typography is the text primitive namespace for headings, body text, inline code, and the lower-level base wrapper with ellipsis tooltip support.
+
+## Import
+
+```tsx
+import { Typography, typographyColors } from '@redislabsdev/redis-ui-components';
+```
+
+## Sub-components
+
+- `Typography.Heading` - Display heading text with size-based hierarchy and optional color/variant control.
+- `Typography.Body` - Body text primitive with size, variant, and color control.
+- `Typography.Code` - Inline code primitive with monospace styling.
+- `Typography.Base` - Low-level shared wrapper that provides ellipsis and tooltip-on-overflow behavior.
+
+## Props
+
+### Typography.Base
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Text or nodes rendered inside the typography primitive |
+| component | `string \| ComponentType` | - | Underlying element or custom component to render as |
+| ellipsis | `boolean` | `false` | Truncate text with an ellipsis when it overflows |
+| tooltipOnEllipsis | `boolean \| string` | - | Show a tooltip only when the text overflows; pass a string to override tooltip content |
+
+Typography.Base also inherits standard `HTMLAttributes<HTMLElement>` props, except `children` and `color`.
+
+### Typography.Body
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| component | `'p' \| 'span' \| 'div'` | `'p'` | Element used to render the body text |
+| size | `'XL' \| 'L' \| 'M' \| 'S' \| 'XS' \| 'auto'` | `'M'` | Body text size |
+| variant | `'regular' \| 'semiBold' \| 'italic'` | `'regular'` | Font style/weight variant |
+| color | `TypographyColor` | - | Theme typography color token |
+
+Typography.Body inherits all `Typography.Base` props.
+
+### Typography.Code
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | `'S' \| 'M' \| 'L'` | `'L'` | Inline code size |
+| variant | `'regular' \| 'semiBold'` | `'regular'` | Font weight variant |
+| color | `TypographyColor` | - | Theme typography color token |
+
+Typography.Code inherits all `Typography.Base` props and always renders as `<code>`.
+
+### Typography.Heading
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | `'XXL' \| 'XL' \| 'L' \| 'M' \| 'S' \| 'XS'` | `'XL'` | Heading size and semantic level mapping |
+| color | `TypographyColor` | - | Theme typography color token |
+| variant | `'bold' \| 'semiBold'` | - | Font weight variant |
+| component | `'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'div'` | Element used to render the heading |
+
+Typography.Heading inherits all `Typography.Base` props.
+
+## Examples
+
+### Body
+
+#### Playground
+
+```tsx
+<Typography.Body tooltipOnEllipsis>Typography.Body</Typography.Body>
+```
+
+#### Sizes
+
+```tsx
+<>
+  {(['XL', 'L', 'M', 'S', 'XS'] as const).map((size) => (
+    <Typography.Body key={size} size={size}>
+      Typography.Body {size === 'M' && '(default)'}
+    </Typography.Body>
+  ))}
+</>
+```
+
+#### Variants
+
+```tsx
+<>
+  {(['regular', 'italic', 'semiBold'] as const).map((variant) => (
+    <Typography.Body variant={variant} key={variant} size="XL">
+      {variant}
+    </Typography.Body>
+  ))}
+</>
+```
+
+#### Color
+
+```tsx
+<>
+  {typographyColors.map((color) => (
+    <Typography.Body color={color} key={color} size="XL">
+      {color}
+    </Typography.Body>
+  ))}
+</>
+```
+
+#### Ellipsis and Tooltip
+
+```tsx
+<>
+  <Typography.Body tooltipOnEllipsis ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Body>
+
+  <Typography.Body
+    tooltipOnEllipsis
+    style={{
+      overflow: 'auto',
+      whiteSpace: 'nowrap'
+    }}
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Body>
+
+  <Typography.Body tooltipOnEllipsis="This is custom tooltipOnEllipsis text" ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Body>
+
+  <Typography.Body tooltipOnEllipsis ellipsis>
+    Lorem ipsum dolor sit amet
+  </Typography.Body>
+
+  <Typography.Body tooltipOnEllipsis={false} ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Body>
+
+  <Typography.Body tooltipOnEllipsis title="title text">
+    Lorem ipsum dolor sit amet
+  </Typography.Body>
+</>
+```
+
+### Code
+
+#### Playground
+
+```tsx
+<Typography.Code tooltipOnEllipsis>Typography.Code</Typography.Code>
+```
+
+#### Sizes
+
+```tsx
+<>
+  {(['L', 'M', 'S'] as const).map((size) => (
+    <Typography.Code key={size} size={size}>
+      Typography.Code {size === 'L' && '(default)'}
+    </Typography.Code>
+  ))}
+</>
+```
+
+#### Variants
+
+```tsx
+<>
+  {(['regular', 'semiBold'] as const).map((variant) => (
+    <Typography.Code variant={variant} key={variant} size="L">
+      {variant}
+    </Typography.Code>
+  ))}
+</>
+```
+
+#### Color
+
+```tsx
+<>
+  {typographyColors.map((color) => (
+    <Typography.Code color={color} key={color} size="L">
+      {color}
+    </Typography.Code>
+  ))}
+</>
+```
+
+#### Ellipsis and Tooltip
+
+```tsx
+<>
+  <Typography.Code tooltipOnEllipsis ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Code>
+
+  <Typography.Code
+    tooltipOnEllipsis
+    style={{
+      overflow: 'auto',
+      whiteSpace: 'nowrap'
+    }}
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Code>
+
+  <Typography.Code tooltipOnEllipsis="This is custom tooltipOnEllipsis text" ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Code>
+
+  <Typography.Code tooltipOnEllipsis ellipsis>
+    Lorem ipsum dolor sit amet
+  </Typography.Code>
+
+  <Typography.Code tooltipOnEllipsis={false} ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Code>
+
+  <Typography.Code tooltipOnEllipsis title="title text">
+    Lorem ipsum dolor sit amet
+  </Typography.Code>
+</>
+```
+
+### Heading
+
+#### Playground
+
+```tsx
+<Typography.Heading tooltipOnEllipsis>Typography.Heading</Typography.Heading>
+```
+
+#### Sizes
+
+```tsx
+<>
+  {(['XXL', 'XL', 'L', 'M', 'S', 'XS'] as const).map((size, i) => (
+    <Typography.Heading key={size} size={size}>
+      h{i + 1}. Typography.Heading {size === 'XL' && '(default)'}
+    </Typography.Heading>
+  ))}
+</>
+```
+
+#### Color
+
+```tsx
+<>
+  {typographyColors.map((color) => (
+    <Typography.Heading color={color} key={color} size="XL">
+      {color}
+    </Typography.Heading>
+  ))}
+</>
+```
+
+#### Ellipsis and Tooltip
+
+```tsx
+<>
+  <Typography.Heading tooltipOnEllipsis ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Heading>
+
+  <Typography.Heading
+    tooltipOnEllipsis
+    style={{
+      overflow: 'auto hidden',
+      whiteSpace: 'nowrap'
+    }}
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Heading>
+
+  <Typography.Heading tooltipOnEllipsis="This is custom tooltipOnEllipsis text" ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Heading>
+
+  <Typography.Heading tooltipOnEllipsis ellipsis>
+    Lorem ipsum dolor sit amet
+  </Typography.Heading>
+
+  <Typography.Heading tooltipOnEllipsis={false} ellipsis>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua.
+  </Typography.Heading>
+
+  <Typography.Heading tooltipOnEllipsis title="title text">
+    Lorem ipsum dolor sit amet
+  </Typography.Heading>
+</>
+```
+
+### Gallery
+
+> The gallery story renders the preview set defined in `Gallery.tsx`.
+
+```tsx
+import { StoriesGallery } from '../../../helpers/StoriesGallery';
+import { items } from './Gallery';
+
+<StoriesGallery columns={1} items={items} />
+```
+
+## Notes
+
+- `Typography.Body` defaults to `p`, `Typography.Code` always renders `code`, and `Typography.Heading` defaults to `div`.
+- `Typography.Body` uses size `M` by default, `Typography.Code` uses size `L`, and `Typography.Heading` uses size `XL`.
+- `tooltipOnEllipsis` only shows a tooltip when the rendered text actually overflows.
+- Passing a string to `tooltipOnEllipsis` customizes the tooltip text.
+- A `title` prop overrides ellipsis tooltip behavior.
+- Valid typography colors are `primary`, `secondary`, `notice`, `success`, `attention`, `danger`, `upsell`, and `informative`.