diff --git a/CHANGELOG.md b/CHANGELOG.md index fc22b46..485c9ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## [Unreleased] +### Added + +- Added vertical separators: `
` renders as a 1px line that fills its row. + ### Fixed - Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup. diff --git a/site/src/docs/components/separator.mdx b/site/src/docs/components/separator.mdx new file mode 100644 index 0000000..5277b99 --- /dev/null +++ b/site/src/docs/components/separator.mdx @@ -0,0 +1,134 @@ +# Separator + + + There is no dedicated Separator component in Basecoat. + + + +
+
+
Basecoat
+
Tailwind components for any web stack
+
+
+
A set of components you can drop into any HTML page, styled like shadcn/ui.
+
+ + +## Usage + + + + +Import Tailwind and one full Basecoat style bundle. + +```css +@import "tailwindcss"; +@import "basecoat-css/vega.css"; +``` + +Or import only the base CSS, which styles horizontal and vertical separators. + +```css +@import "tailwindcss"; +@import "basecoat-css/base.css"; +``` + +Separator is a native `
` and has no dedicated component CSS file. + +Using CDN or bundler imports? See the [Installation page](/installation). + + + + +Use an `
` with `role="separator"`. It renders as a 1px line in the `border` color, matching shadcn/ui's Separator. + +```html +
+``` + +If the separator is purely decorative, use `role="none"` instead so assistive technologies skip it. This is what shadcn/ui's `decorative` prop does. + +```html +
+``` + + + + +## Examples + +### Vertical + +Add `aria-orientation="vertical"` for a vertical separator. It fills the height of its row. + + +
+
Blog
+
+
Docs
+
+
Source
+
+ + +### Menu + +Vertical separators between menu items with descriptions. + + +
+
+ Settings + Manage preferences +
+
+
+ Account + Profile & security +
+ + +
+ + +### List + +Horizontal separators between list items. + + +
+
+
Item 1
+
Value 1
+
+
+
+
Item 2
+
Value 2
+
+
+
+
Item 3
+
Value 3
+
+
+ + +### RTL + +Separators follow document direction. Vertical separators use a logical inline-start border, so they need no changes. + + +
+
+
Basecoat
+
مكونات Tailwind لأي بيئة ويب
+
+
+
مجموعة من المكونات يمكنك إضافتها إلى أي صفحة HTML، بتصميم مثل shadcn/ui.
+
+ diff --git a/site/src/docs/docs.json b/site/src/docs/docs.json index d42c2b9..e6dc919 100644 --- a/site/src/docs/docs.json +++ b/site/src/docs/docs.json @@ -94,6 +94,7 @@ "components/radio-group", "components/select", "components/scroll-area", + "components/separator", "components/sidebar", "components/skeleton", "components/slider", diff --git a/src/css/base/base.css b/src/css/base/base.css index ccdc4f2..db18819 100644 --- a/src/css/base/base.css +++ b/src/css/base/base.css @@ -133,4 +133,13 @@ body { @apply bg-background text-foreground overscroll-none; } + hr:where([aria-orientation='vertical']) { + flex-shrink: 0; + align-self: stretch; + inline-size: 1px; + block-size: auto; + margin: 0; + border-block-start-width: 0; + border-inline-start-width: 1px; + } }