diff --git a/.changeset/buttons-page-layout.md b/.changeset/buttons-page-layout.md new file mode 100644 index 000000000..463489450 --- /dev/null +++ b/.changeset/buttons-page-layout.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Added a short description and a docs link to each card on the Buttons demo page, grouped into Styles and Colors. diff --git a/.changeset/scroll-spy-content.md b/.changeset/scroll-spy-content.md new file mode 100644 index 000000000..011249413 --- /dev/null +++ b/.changeset/scroll-spy-content.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Replaced lorem ipsum with unique placeholder text on the Scroll spy demo page and fixed its menu highlight. diff --git a/.changeset/stars-rating-page-layout.md b/.changeset/stars-rating-page-layout.md new file mode 100644 index 000000000..ed5a8fa33 --- /dev/null +++ b/.changeset/stars-rating-page-layout.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Reorganized the Star Ratings demo page into Basic/Icons/Sizes and Colors cards with short descriptions. diff --git a/preview/pages/buttons.astro b/preview/pages/buttons.astro index 284873542..f1284626d 100644 --- a/preview/pages/buttons.astro +++ b/preview/pages/buttons.astro @@ -4,9 +4,10 @@ import Icon from '@ui/Icon.astro' import Button from '@ui/Button.astro' import ButtonList from '@ui/ButtonList.astro' import Card from '@ui/Card.astro' -import CardHeader from '@ui/CardHeader.astro' import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' import site from '@data/site.json' +import { getDocsUrl } from '@shared/lib/string-format' type ColorEntry = [string, { title: string; icon?: string }] @@ -18,136 +19,61 @@ const socialColors = Object.entries(site.socialColors) as ColorEntry[] const actions = ['edit', 'copy', 'settings', 'clipboard', 'x'] const sizes = ['sm', 'md', 'lg', 'xl'] as const + +const buttonDocsUrl = getDocsUrl('/ui/components/button') --- - -
-
+ +
+

Buttons

+ + Docs + +
+ +
+
- + Basic +
Add an icon to the left, the right, or drop the label for an icon-only button.
- { - themeColors.map(([name, color]) => ( - - {color.icon && } {color.title} - - )) - } +
-
+
- + Shapes +
Round the corners with .btn-pill, or square them off with .btn-square.
- { - themeColors.map(([name, color]) => ( - - {color.icon && } {color.title} - - )) - } + Default + Pill + Square + + + + + + + + +
-
+
- - - - { - themeColors.map(([name, color]) => ( - - {color.icon && } {color.title} - - )) - } - - - -
-
- - - - - { - themeColors.map(([name, color]) => ( - - {color.icon && } {color.title} - - )) - } - - - -
-
- - - - - { - themeColors.map(([name, color]) => ( - - {color.icon && } {color.title} - - )) - } - - - -
-
- - - - - { - colors.map(([name, color]) => ( - - {color.icon && } {color.title} - - )) - } - - - -
-
- - - - - {socialColors.map(([name, app]) => {app.icon && })} - - - -
-
- - - - - { - socialColors.map(([name, app]) => ( - - {app.icon && } {app.title} - - )) - } - - - -
-
- - + Action buttons +
Compact, icon-only buttons for card headers and toolbars.
{ actions.map((action) => ( @@ -160,28 +86,11 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
-
+
- - - - Save - Add - Notifications - Settings - Love - Close - Confirm - Next - Previous - - - -
-
- - + Sizes +
Scale a button from sm to xl without changing its icon layout.
{ sizes.map((size) => ( @@ -197,5 +106,170 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
+
+ + + Animated icon +
Small hover animations draw attention to the icon.
+ + + Save + + + Add + + + Notifications + + + Settings + + + Love + + + Close + + + Confirm + + + Next + + + Previous + + + + +
+
+ + + Standard +
Fill a button with a theme color to mark its purpose.
+ + { + themeColors.map(([name, color]) => ( + + {color.icon && } {color.title} + + )) + } + + + +
+
+ + + Outline +
Keep the border colored and the background transparent for a subtler action.
+ + { + themeColors.map(([name, color]) => ( + + {color.icon && } {color.title} + + )) + } + + + +
+
+ + + Ghost +
Drop the border too — color appears only on hover.
+ + { + themeColors.map(([name, color]) => ( + + {color.icon && } {color.title} + + )) + } + + + +
+
+ + + Pill +
Combine .btn-pill with a theme color.
+ + { + themeColors.map(([name, color]) => ( + + {color.icon && } {color.title} + + )) + } + + + +
+
+ + + Square +
Combine .btn-square with a theme color.
+ + { + themeColors.map(([name, color]) => ( + + {color.icon && } {color.title} + + )) + } + + + +
+
+ + + Extra colors +
The full Tabler palette, beyond the eight theme colors.
+ + { + colors.map(([name, color]) => ( + + {color.icon && } {color.title} + + )) + } + + + +
+
+ + + Social colors +
Brand colors for linking out to social networks.
+ + { + socialColors.map(([name, app]) => ( + + {app.icon && } {app.title} + + )) + } + + + +
+
+ + + Icon buttons +
Social brand colors without a label, for compact toolbars.
+ {socialColors.map(([name, app]) => {app.icon && })} + + +
diff --git a/preview/pages/scroll-spy.astro b/preview/pages/scroll-spy.astro index 67428dec8..c5b1495c2 100644 --- a/preview/pages/scroll-spy.astro +++ b/preview/pages/scroll-spy.astro @@ -2,20 +2,75 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import { slugifyWord as slug } from '@shared/lib/string-format' -const headers = ['Home', 'Profile', 'Messages', 'Settings', 'About', 'Contact', 'Services', 'Team', 'Work'] - -const lorem = - 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, alias autem beatae blanditiis corporis debitis eligendi, enim error excepturi exercitationem odit porro quasi reiciendis saepe sapiente veritatis? Aliquam assumenda beatae, cumque delectus dolorem enim, eveniet facere fugit harum illum iure magnam nemo neque nisi omnis, pariatur tenetur vel? Accusantium aut cum deleniti dolor doloribus eum, molestiae nulla officiis quasi. At cupiditate dolor explicabo id nesciunt placeat unde voluptates. Asperiores cum doloremque esse fugit labore quia reprehenderit similique. Architecto est ipsum maiores odio perferendis quibusdam tempore velit? Accusantium aliquid consequatur corporis dignissimos distinctio eos eum fugiat impedit nam obcaecati officiis, porro, quia quibusdam repellendus sapiente suscipit temporibus ullam velit vitae voluptates? Aliquam consectetur consequatur consequuntur deleniti dicta dolores ducimus, excepturi ipsam iure molestias necessitatibus numquam optio quaerat quasi quo repudiandae sed. Ad aliquam animi beatae culpa delectus esse excepturi in incidunt ipsam iusto labore laboriosam minima, nam, nemo nisi nobis, nulla praesentium provident quae quaerat qui quia quibusdam quis quisquam quos repellendus sint suscipit tempora vero vitae! Animi assumenda dolorum eaque, explicabo laborum officia praesentium quia repudiandae. Aliquam asperiores cupiditate deserunt nobis nostrum reprehenderit voluptates? Dolorem doloremque ducimus magni, maxime sint tenetur totam. Accusamus atque beatae consequatur corporis, dignissimos dolore dolores dolorum earum error eum eveniet, facere impedit incidunt minima molestias nemo non nostrum placeat quasi qui ratione repudiandae suscipit tenetur ullam vel velit voluptatibus. Accusantium alias assumenda blanditiis consectetur cupiditate delectus dolor dolores dolorum, ducimus eaque enim, error esse eum fugiat fugit id ipsam ipsum laboriosam laudantium minus modi molestias mollitia necessitatibus nihil odio officia praesentium quaerat quis quisquam quos reiciendis tempora tempore ut velit vitae voluptas voluptatem! Accusantium adipisci architecto assumenda atque aut consectetur consequuntur cum, deserunt doloribus ea excepturi exercitationem expedita explicabo facere fuga fugit impedit iste iusto laboriosam molestiae nihil officiis perferendis porro possimus provident quae quaerat qui quibusdam quos reiciendis repellendus vel vero, voluptatem! Ab amet aperiam assumenda aut error eveniet, id inventore laudantium molestias mollitia natus neque nulla officiis, porro quam quas quisquam repellendus repudiandae saepe sapiente ut voluptas, voluptate. Ab ad alias, aliquam atque consequatur culpa deserunt distinctio eius, enim est ex exercitationem facere facilis itaque magni maiores modi nemo neque perferendis placeat quam quas quia quis quod quos reiciendis sequi sunt tempore vero vitae! Earum explicabo nam quaerat quam quos sed voluptatem. Asperiores debitis dolorum, eaque eligendi optio ullam velit? Aperiam beatae cumque earum et explicabo maxime modi molestias odit, omnis placeat quasi quibusdam, ratione sapiente vel voluptas? A, aliquid beatae dolore eaque eos excepturi expedita facere facilis fugit ipsam iure molestiae molestias natus necessitatibus, nesciunt nulla, numquam obcaecati officia officiis pariatur quaerat quas quisquam rerum sapiente veniam. A aperiam beatae distinctio et illum laboriosam necessitatibus obcaecati porro sed vero. Accusantium at aut consequatur corporis culpa cupiditate delectus dolores eius eligendi, enim error esse est, et excepturi fugit id ipsam ipsum itaque modi mollitia necessitatibus neque non nulla obcaecati officia placeat qui quia saepe sit temporibus totam ut voluptas voluptatibus? Ad consectetur eos est illum laboriosam minus molestiae officia placeat quas tenetur.' +const articles: [string, string[]][] = [ + [ + 'Home', + [ + "Welcome back. Here's a quick look at what's new since your last visit — three updates shipped, two conversations are waiting for a reply, and your weekly summary is ready below.", + 'The dashboard pulls together everything you touched this week: recent files, comments left on your work, and the tasks you marked to revisit. Nothing here requires action unless you want it to.', + ], + ], + [ + 'Profile', + [ + "Your profile is what teammates see when they open your card — name, role, and a short line about what you're working on. Keep it current; it's the first thing a new collaborator checks before reaching out.", + "Profile photos update automatically from your workspace avatar. If you'd rather use a different image, upload one from the settings page and it will sync across every app connected to this account.", + ], + ], + [ + 'Messages', + [ + 'Conversations are grouped by project, so a thread never gets lost between unrelated channels. Mentions are highlighted, and anything addressed directly to you moves to the top of the list.', + "Replies you haven't read yet are marked with a dot. Archiving a conversation doesn't delete it — it just clears it from the active list until someone posts in it again.", + ], + ], + [ + 'Settings', + [ + 'Most defaults here are fine for everyday use, but a few are worth reviewing: notification frequency, default timezone, and who can see your activity status.', + "Changes save immediately — there's no separate 'apply' step. If something looks wrong after a change, the history tab keeps the last ten versions of your settings so you can roll back.", + ], + ], + [ + 'About', + [ + 'This project started as an internal tool for a five-person team and grew from there. The goal has stayed the same the whole time: make the boring parts of daily work take less time.', + 'We ship small updates often rather than large releases a few times a year. That means the product changes gradually, but it also means feedback turns into fixes faster.', + ], + ], + [ + 'Contact', + [ + 'The fastest way to reach the team is the in-app chat — most questions get a reply within a few hours during business days. For anything urgent, use the priority line in your account settings.', + 'Bug reports and feature requests both go to the same inbox, so include a short description of what you expected versus what happened. Screenshots help more than long explanations.', + ], + ], + [ + 'Services', + [ + 'Onboarding, migration, and training are available as add-ons for teams moving from another tool. A specialist walks through your existing setup and maps it to the equivalent here before anything is switched over.', + "Ongoing support plans include a monthly check-in call, priority responses, and early access to features still in testing. Most teams start on the standard plan and upgrade once they've settled in.", + ], + ], + [ + 'Team', + [ + 'The team is spread across four time zones, which means someone is usually online to help. Each person owns a specific part of the product, listed on their profile.', + "We hire slowly and keep the team small on purpose — it's easier to keep quality high and response times short when fewer people need to stay in sync.", + ], + ], + ['Work', ['A selection of recent projects is listed below, newest first. Each entry links to a short write-up covering the problem, the approach, and what changed as a result.', 'Older work is archived rather than deleted, so nothing here disappears — it just moves further down the list as new projects are added.']], +] --- - +

Menu