Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. @@ -52,7 +52,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ

@@ -80,7 +80,7 @@ Scrolling the `` element is disabled when an offcanvas and its backdrop ar

Try scrolling the rest of the page to see this option in action.

@@ -96,7 +96,7 @@ You can also enable `` scrolling with a visible backdrop.

Try scrolling the rest of the page to see this option in action.

@@ -114,7 +114,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi

@@ -130,7 +130,7 @@ Change the appearance of offcanvases with utilities to better match them to diff

Place offcanvas content here.

@@ -157,7 +157,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo

This is content within an .offcanvas-lg.

@@ -180,7 +180,7 @@ Try the top, right, and bottom examples out below.

... @@ -192,7 +192,7 @@ Try the top, right, and bottom examples out below.

... @@ -204,7 +204,7 @@ Try the top, right, and bottom examples out below.

... diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx index 3b5da8da00..0330eb2073 100644 --- a/site/src/content/docs/components/toasts.mdx +++ b/site/src/content/docs/components/toasts.mdx @@ -28,7 +28,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi Bootstrap 11 mins ago - +

Hello, world! This is a toast message. @@ -49,7 +49,7 @@ Click the button below to show a toast (positioned with our utilities in the low Bootstrap 11 mins ago - +

Hello, world! This is a toast message. @@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low

Bootstrap 11 mins ago - +

Hello, world! This is a toast message. @@ -92,7 +92,7 @@ Toasts are slightly translucent to blend in with whatâs below them. Bootstrap 11 mins ago - +

Hello, world! This is a toast message. @@ -109,7 +109,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall Bootstrap just now - +

See? Just like this. @@ -121,7 +121,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall Bootstrap 2 seconds ago - +

Heads up, toasts will stack automatically @@ -138,7 +138,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]

Hello, world! This is a toast message.

- +

`} /> @@ -156,14 +156,14 @@ Alternatively, you can also add additional controls and components to toasts. ### Color schemes -Building on the above example, you can create different toast color schemes with our [color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utilities. Here weâve added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. +Building on the above example, you can create different toast color schemes with our [color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utilities. Here weâve added `.text-bg-primary` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.

Hello, world! This is a toast message.

- +

`} /> @@ -218,7 +218,7 @@ For systems that generate more notifications, consider using a wrapping element Bootstrap just now - +

See? Just like this. @@ -230,7 +230,7 @@ For systems that generate more notifications, consider using a wrapping element Bootstrap 2 seconds ago - +

Heads up, toasts will stack automatically @@ -250,7 +250,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o Bootstrap 11 mins ago - +

Hello, world! This is a toast message. @@ -281,7 +281,7 @@ When using `autohide: false`, you must add a close button to allow users to dism Bootstrap 11 mins ago - +

Hello, world! This is a toast message. diff --git a/site/src/libs/placeholder.ts b/site/src/libs/placeholder.ts index 2bae6e1cad..e0269bb283 100644 --- a/site/src/libs/placeholder.ts +++ b/site/src/libs/placeholder.ts @@ -3,6 +3,12 @@ import * as htmlparser2 from 'htmlparser2' import { getData } from './data' const placeholderRegex = /]+)\/>/g +const closeButtonRegex = /]*?)\/>/g + +// Close button SVG icon +const CLOSE_BUTTON_SVG = `` /** * Generates all the placeholder attributes and options required to render a placeholder. @@ -56,8 +62,25 @@ export function getPlaceholder(userOptions: Partial): Placeh } } +/** + * Renders a CloseButton component to its HTML string representation. + * Supports optional `dismiss` and `class` attributes. + */ +function renderCloseButtonToString(attributes: Record): string { + const dismiss = attributes.dismiss + const extraClass = attributes.class + const dismissAttr = dismiss ? ` data-bs-dismiss="${dismiss}"` : '' + const classValue = extraClass ? `btn-close ${extraClass}` : 'btn-close' + + return `` +} + /** * Replaces placeholders described using the `` component in HTML markup with the expected HTML content. + * Also replaces `` components with the full close button HTML. + * * This is useful to render examples that have a pretty large set of constraints: * * - The provided HTML code is not valid MDX (e.g. unclosed void elements like ) but can contain the @@ -72,6 +95,24 @@ export function getPlaceholder(userOptions: Partial): Placeh * If you are not sure if you need to use this function, you probably don't. */ export function replacePlaceholdersInHtml(html: string) { + // Replace CloseButton components + html = html.replace(closeButtonRegex, (match) => { + const document = htmlparser2.parseDocument(match, { xmlMode: true }) + const closeButtonElement = document.firstChild + + if ( + document.children.length > 1 || + !closeButtonElement || + closeButtonElement.type !== htmlparser2.ElementType.Tag || + closeButtonElement.name !== 'CloseButton' + ) { + throw new Error('Invalid CloseButton element.') + } + + return renderCloseButtonToString(closeButtonElement.attribs as Record) + }) + + // Replace Placeholder components return html.replace(placeholderRegex, (match) => { const document = htmlparser2.parseDocument(match, { xmlMode: true }) const placeholderElement = document.firstChild diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts index 17195966ce..7525e22d1d 100644 --- a/site/src/types/auto-import.d.ts +++ b/site/src/types/auto-import.d.ts @@ -11,6 +11,7 @@ export declare global { export const CSSVariables: typeof import('@shortcodes/CSSVariables.astro').default export const Callout: typeof import('@shortcodes/Callout.astro').default export const CalloutDeprecatedDarkVariants: typeof import('@shortcodes/CalloutDeprecatedDarkVariants.astro').default + export const CloseButton: typeof import('@shortcodes/CloseButton.astro').default export const Code: typeof import('@shortcodes/Code.astro').default export const DeprecatedIn: typeof import('@shortcodes/DeprecatedIn.astro').default export const Details: typeof import('@shortcodes/Details.astro').default

Dialog title

Dialog title

Static backdrop

Scrolling dialog

Scrollable body

Scrollable body

Overflow dialog

First dialog

Second dialog

Non-modal dialog

Extra large dialog

Large dialog

Small dialog

Fullscreen dialog

Fullscreen below lg

Offcanvas

Dark offcanvas

Offcanvas

Offcanvas

Offcanvas with body scrolling

Backdrop with scrolling

Offcanvas

Offcanvas

Responsive offcanvas

Offcanvas top

Offcanvas right

Offcanvas bottom