From 69f2f8af38ae86404ca8f50fa1446bbf0053ce90 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Mon, 17 Aug 2026 11:41:44 +0200 Subject: [PATCH] Add docs for Chat, and document callout, legend, inline list, and footer classes (#2887) --- docs/content/ui/base/prose.mdx | 8 ++++ docs/content/ui/components/chart.mdx | 8 ++++ docs/content/ui/components/chat.mdx | 55 +++++++++++++++++++++++ docs/content/ui/components/list-group.mdx | 16 +++++++ docs/content/ui/layout/page-layouts.mdx | 10 +++++ shared/data/docs.json | 4 ++ 6 files changed, 101 insertions(+) create mode 100644 docs/content/ui/components/chat.mdx diff --git a/docs/content/ui/base/prose.mdx b/docs/content/ui/base/prose.mdx index acc732dc4..1062b1ac3 100644 --- a/docs/content/ui/base/prose.mdx +++ b/docs/content/ui/base/prose.mdx @@ -24,6 +24,14 @@ This example shows typical content wrapped in `.prose`.

Getting started with documentation

Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. Good documentation helps users understand complex concepts quickly and efficiently.

Documentation is a love letter that you write to your future self.

The foundation of great documentation starts with understanding your audience and their needs.

+## Callout + +Wrap a short note in `.callout` to make it stand out from the surrounding text, for example a tip or a warning. It works inside or outside `.prose`. + + +

Tip. Keep a glossary of terms your readers might not know. It saves you from re-explaining the same concept in every article.

+ + ## Inline HTML elements HTML provides a long list of inline tags. These are commonly used inside `.prose`. diff --git a/docs/content/ui/components/chart.mdx b/docs/content/ui/components/chart.mdx index 7620377de..ebfe9c695 100644 --- a/docs/content/ui/components/chart.mdx +++ b/docs/content/ui/components/chart.mdx @@ -86,6 +86,14 @@ For more complex data visualizations, you can create advanced charts with multip +## Legend key + +ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title — for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class. + + +
This year
Last year
+ + ## SCSS variables Use these SCSS variables to customize charts. The default values are: diff --git a/docs/content/ui/components/chat.mdx b/docs/content/ui/components/chat.mdx new file mode 100644 index 000000000..babaad5dc --- /dev/null +++ b/docs/content/ui/components/chat.mdx @@ -0,0 +1,55 @@ +--- +title: Chat +summary: A chat shows a conversation as a column of message bubbles. Use it for direct messages, support conversations, or comments on a record. +description: Build a conversation view with message bubbles, sender info, and a typing indicator. +--- +import Example from '@components/Example.astro'; + +## Overview + +Wrap the conversation in `chat`, and put each message row in `chat-bubbles`. A message itself is a `chat-bubble`, with `chat-bubble-title` for the sender's name and time, and `chat-bubble-body` for the text. + +Add `chat-bubble-me` to bubbles the current user sent. Tabler tints them, and you place them on the other side of the row to tell them apart from replies. + + +
Alice Marlin
10:24

Hey, are you free for a quick call?

You
10:26

Sure, give me five minutes.

+ + +## Usage + +### Message order + +Put the avatar and the bubble in the order you want them to read: avatar first for messages from other people, bubble first for `chat-bubble-me` messages. Add `justify-content-end` to the row for `chat-bubble-me`, so the bubble and avatar move to the far side. + +### Typing indicator + +While you wait for a reply, show a bubble with `animated-dots` after the text — it types itself out and loops. + + +

Alice is typing

+ + +### Image or GIF in a message + +Add an image inside `chat-bubble-body`, below the text. + + +

Check this out

+ + +## Examples + +### Chat window + +A card with a scrollable message list and a message input in the footer. + + +
Alice Marlin
Online

Hey, are you free for a quick call?

Sure, give me five minutes.

+ + +## Accessibility + +- Keep messages in reading order in the markup. Screen reader users go through the conversation top to bottom, the same as sighted users see it top to bottom. +- Do not rely on bubble color or side alone to show who sent a message — keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label. +- Label icon-only controls in the message input, for example the send button, with `aria-label`. +- The typing indicator is an animated "…" — pair it with real text such as "Alice is typing", so the state does not depend on the animation alone. diff --git a/docs/content/ui/components/list-group.mdx b/docs/content/ui/components/list-group.mdx index 0501612da..12df1448a 100644 --- a/docs/content/ui/components/list-group.mdx +++ b/docs/content/ui/components/list-group.mdx @@ -112,6 +112,22 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,

Notifications

Build failed
The last deploy did not finish
New comment
Alice replied in the design thread
+## Inline list + +`list-inline` is a separate, simpler pattern for a row of items — for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them. + +Use `list-inline` on a `ul` and `list-inline-item` on each `li`. + + + + + +Add `list-inline-dots` to separate items with a centered dot instead of relying on spacing alone. Tabler uses this pattern in its own footer. + + + + + ## Accessibility - Pick the right element. Use `ul` or `ol` with `li` for a list of items, `nav` with `a` for navigation, and `button` for actions on the page. diff --git a/docs/content/ui/layout/page-layouts.mdx b/docs/content/ui/layout/page-layouts.mdx index dd79360b1..eb079e1ae 100644 --- a/docs/content/ui/layout/page-layouts.mdx +++ b/docs/content/ui/layout/page-layouts.mdx @@ -76,6 +76,16 @@ To create a sample version of the dashboard, you can use the following code snip +## Footer + +Add a `footer` element with the `footer` class after `.page-wrapper` to close the page. `d-print-none` hides it when the page is printed, the same as the navbar. Use [`list-inline list-inline-dots`](/ui/components/list-group#inline-list) for the footer links. + + + + + +`footer-transparent` drops the footer's own background, so it blends with the page behind it. Remove the class for a footer with a solid background, for example to visually separate it from the page body. + ## Sidebar layout To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header. diff --git a/shared/data/docs.json b/shared/data/docs.json index 8e182f3d8..8a95a03ad 100644 --- a/shared/data/docs.json +++ b/shared/data/docs.json @@ -200,6 +200,10 @@ "title": "Chart", "url": "/ui/components/chart" }, + { + "title": "Chat", + "url": "/ui/components/chat" + }, { "title": "Countup", "url": "/ui/components/countup"