From ffe3489345f954b0e4550bf6e15499ec0607ee8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Wed, 12 Aug 2026 00:10:20 +0200 Subject: [PATCH] Rename element list classes to singular and use them in examples (#2853) --- .agents/skills/generate-changeset/SKILL.md | 1 - .agents/skills/mr-description/SKILL.md | 1 - .changeset/badge-tag-list-rename.md | 9 +++++ core/scss/ui/_badges.scss | 4 ++- core/scss/ui/_tags.scss | 4 ++- docs/content/ui/components/avatar.mdx | 26 +++++++------- docs/content/ui/components/badge.mdx | 31 +++++++++++------ docs/content/ui/components/button.mdx | 34 +++++++++---------- docs/content/ui/components/placeholder.mdx | 2 +- docs/content/ui/components/popover.mdx | 2 +- docs/content/ui/components/spinner.mdx | 4 +-- docs/content/ui/components/tag.mdx | 10 +++--- docs/content/ui/components/tooltip.mdx | 2 +- preview/pages/all-elements.astro | 27 ++++++++------- preview/pages/badges.astro | 22 ++++++------ preview/pages/form-layout.astro | 5 +-- preview/pages/job-listing.astro | 5 +-- preview/pages/logs.astro | 15 ++++---- preview/pages/offcanvas.astro | 17 ++++++---- preview/pages/tags.astro | 34 +++++++++---------- shared/components/cards/Card.astro | 2 +- shared/ui/AdvancedTable.astro | 6 ++-- .../ui/{BadgesList.astro => BadgeList.astro} | 4 +-- shared/ui/{TagsList.astro => TagList.astro} | 4 +-- 24 files changed, 150 insertions(+), 121 deletions(-) create mode 100644 .changeset/badge-tag-list-rename.md rename shared/ui/{BadgesList.astro => BadgeList.astro} (55%) rename shared/ui/{TagsList.astro => TagList.astro} (56%) diff --git a/.agents/skills/generate-changeset/SKILL.md b/.agents/skills/generate-changeset/SKILL.md index 0c8fa3c73..29483deef 100644 --- a/.agents/skills/generate-changeset/SKILL.md +++ b/.agents/skills/generate-changeset/SKILL.md @@ -4,7 +4,6 @@ description: >- Creates a Tabler changeset file in `.changeset/` from the current code changes. Use when the user asks for a changeset, version bump, release note entry, or changelog entry for @tabler/core, @tabler/preview, or @tabler/docs. -disable-model-invocation: true --- # Generate changeset diff --git a/.agents/skills/mr-description/SKILL.md b/.agents/skills/mr-description/SKILL.md index 19773df6d..1e932a0a6 100644 --- a/.agents/skills/mr-description/SKILL.md +++ b/.agents/skills/mr-description/SKILL.md @@ -5,7 +5,6 @@ description: >- from the current branch versus origin/dev (Tabler). Use when the user asks for an MR/PR description, GitLab merge request text, or a branch summary for reviewers. -disable-model-invocation: true --- # MR / PR description from branch diff --git a/.changeset/badge-tag-list-rename.md b/.changeset/badge-tag-list-rename.md new file mode 100644 index 000000000..0320d06d4 --- /dev/null +++ b/.changeset/badge-tag-list-rename.md @@ -0,0 +1,9 @@ +--- +'@tabler/core': patch +'@tabler/preview': patch +'@tabler/docs': patch +--- + +Renamed `.badges-list` to `.badge-list` and `.tags-list` to `.tag-list` so every element list follows the same singular naming as `.btn-list` and `.avatar-list`. The old class names still work as deprecated aliases. Documentation examples and preview pages that show several buttons, badges, avatars, or tags in one +row now use the matching list container, including the job listing page, which was using a `badges` +class that had no styles at all. diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss index 32f61d168..abaee5605 100644 --- a/core/scss/ui/_badges.scss +++ b/core/scss/ui/_badges.scss @@ -70,9 +70,11 @@ } // -// Badges list +// Badge list // +.badge-list, .badges-list { + // `.badges-list` is deprecated, use `.badge-list` instead @include elements-list(); } diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss index 1f8a7fd91..10bd09306 100644 --- a/core/scss/ui/_tags.scss +++ b/core/scss/ui/_tags.scss @@ -66,8 +66,10 @@ } // -// Tags list +// Tag list // +.tag-list, .tags-list { + // `.tags-list` is deprecated, use `.tag-list` instead @include elements-list(); } diff --git a/docs/content/ui/components/avatar.mdx b/docs/content/ui/components/avatar.mdx index 990ce57d4..79f429ac8 100644 --- a/docs/content/ui/components/avatar.mdx +++ b/docs/content/ui/components/avatar.mdx @@ -14,7 +14,7 @@ import CodeDocs from '@components/CodeDocs.astro'; Use the `avatar` class to add an avatar to your interface design for greater customization. - JL + JL ## Avatar image @@ -22,7 +22,7 @@ Use the `avatar` class to add an avatar to your interface design for greater cus Set an image as the background to make users easy to indentify and create a personalized experience. - + ## Initials @@ -30,7 +30,7 @@ Set an image as the background to make users easy to indentify and create a pers You can also use initials instead of pictures. -AB CD EF GH IJ + AB CD EF GH IJ ## Avatar icons @@ -38,7 +38,7 @@ You can also use initials instead of pictures. Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal. - + ## Avatar initials color @@ -46,7 +46,7 @@ Besides pictures and initials, you can also use [icons](/ui/components/icon) to Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details. -AB CD EF GH IJ + AB CD EF GH IJ ## Avatar size @@ -54,7 +54,7 @@ Customize the color of the avatars' background. See the [full list of available Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need. - + ## Avatar status @@ -62,7 +62,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o Add a [status indicator](/ui/components/status) to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received. - SA 5 + SA 5 ## Avatar shape @@ -70,7 +70,7 @@ Add a [status indicator](/ui/components/status) to your avatar to show, for inst Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius. - AA + AA ## Avatar upload @@ -80,7 +80,7 @@ Use the `avatar-upload` class together with `avatar` to show an empty avatar slo Put an icon inside to show the action. The variant is often used as a link or a button. - + ## Avatar upload size @@ -88,7 +88,7 @@ Put an icon inside to show the action. The variant is often used as a link or a The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`. - + ## Avatar upload text @@ -96,7 +96,7 @@ The upload avatar uses the same size classes as a normal avatar, from `avatar-xx Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text. - Upload Add photo + Upload Add photo ## Avatar upload in a form @@ -107,9 +107,9 @@ To pick a real file, use a `label` with the upload classes and connect it to a h
Click to upload a new avatar
-## Avatars list +## Avatar list -Create a list of avatars within one parent container. +Use the `.avatar-list` container to create a list of avatars within one parent container. It keeps consistent spacing between items and wraps them when there is not enough space. JL diff --git a/docs/content/ui/components/badge.mdx b/docs/content/ui/components/badge.mdx index f462e624c..7927b7620 100644 --- a/docs/content/ui/components/badge.mdx +++ b/docs/content/ui/components/badge.mdx @@ -4,7 +4,7 @@ summary: A badge is a small count and labeling component used to add extra infor description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context. related: [/ui/components/status, /ui/components/tag] --- -import BadgesList from '@ui/BadgesList.astro'; +import BadgeList from '@ui/BadgeList.astro'; import Example from '@components/Example.astro'; import Badge from '@ui/Badge.astro'; import site from '@data/site.json'; @@ -17,9 +17,20 @@ export const colors = Object.entries(site.colors); The default badges are square and come in the basic set of colors. -{colors.map(([key, val]) => )} +{colors.map(([key, val]) => )} +## Badge list + +Use the `.badge-list` container whenever you show more than one badge next to each other. It keeps consistent spacing between items and wraps them when there is not enough space. + +```html +
+ First + Second +
+``` + ## Headings Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `

` to `

`. The example below shows how to use badges in headings. @@ -35,7 +46,7 @@ You can use the `-lt` classes to create a light version of the badge. This is us For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well. -{colors.map(([key, val]) => )} +{colors.map(([key, val]) => )} ## Pill badges @@ -43,13 +54,13 @@ For example you can use the `bg-blue-lt` class to create a light blue badge. If Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text. -{colors.map(([key, val]) => )} +{colors.map(([key, val]) => )} You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits. -{colors.map(([key, val], i) => )} +{colors.map(([key, val], i) => )} ## Badges with icons @@ -57,13 +68,13 @@ You can use it to create a pill with numbers, for example, to show the number of You can use [icons](/ui/components/icon) in badges to make them more visually appealing. The example below demonstrates how to use icons in badges. - + You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges. - + ## Links @@ -71,7 +82,7 @@ You can also use an icon on the right side of the badge. The example below demon Place the badge within an `` element if you want it to perform the function of a link and make it clickable. -Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan +Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ## Button with badge @@ -81,7 +92,7 @@ Badges can be used as parts of links or [buttons](/ui/components/button) to prov If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button. - +
 ## Animated badges @@ -97,7 +108,7 @@ You can use the `.badge-blink` class to create a blinking effect. This class wil Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above. -
+ diff --git a/docs/content/ui/components/button.mdx b/docs/content/ui/components/button.mdx index ec11869ab..29e89a0cb 100644 --- a/docs/content/ui/components/button.mdx +++ b/docs/content/ui/components/button.mdx @@ -14,7 +14,7 @@ import CodeDocs from '@components/CodeDocs.astro'; As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the ` +
Link
## Default button @@ -30,7 +30,7 @@ The standard button creates a white background and subtle hover animation. It's Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot. -Primary Secondary Success Warning Danger Info Dark Light +
Primary Secondary Success Warning Danger Info Dark Light
## Disabled buttons @@ -38,7 +38,7 @@ Use the button classes that correspond to the function of your button. The big r Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form. -Primary Secondary Success Warning Danger Info Dark Light +
Primary Secondary Success Warning Danger Info Dark Light
## Color variations @@ -46,7 +46,7 @@ Make buttons look inactive to show that an action is possible once the user meet Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose. -Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan +
Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
## Ghost buttons @@ -54,7 +54,7 @@ Choose the right color for your button to make it go well with your design and d Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time. -Primary Secondary Success Warning Danger Info Dark
Light
+
Primary Secondary Success Warning Danger Info Dark
Light
## Square buttons @@ -78,7 +78,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action. -Primary Secondary Success Warning Danger Info Dark Light +
Primary Secondary Success Warning Danger Info Dark Light
## Button size @@ -86,11 +86,11 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions. - +
 - +
 ## Buttons with icons @@ -100,7 +100,7 @@ Label your button with text and add an icon to communicate the action and make i See all icons at [tabler.io/icons](https://tabler.io/icons). - +
 ## Social buttons @@ -108,7 +108,7 @@ See all icons at [tabler.io/icons](https://tabler.io/icons). You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website. - Facebook Twitter Google Youtube Vimeo Dribbble Github Instagram Pinterest VK RSS Flickr Bitbucket Tabler +
Facebook Twitter Google Youtube Vimeo Dribbble Github Instagram Pinterest VK RSS Flickr Bitbucket Tabler
```html @@ -121,7 +121,7 @@ You can use the icons of popular social networking sites, which users are famili You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space. - +
 ```html @@ -135,7 +135,7 @@ You can also add an icon without the name of a social networking site, if you wa Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users. - +
 ```html @@ -149,7 +149,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use Create a [dropdown](/ui/components/dropdown) button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience. -
Action Another action
Action Another action
Action Another action
+
Action Another action
Action Another action
Action Another action
```html @@ -169,7 +169,7 @@ Create a [dropdown](/ui/components/dropdown) button that will encourage users to Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished. - Button Loading button with loooong content +
Button Loading button with loooong content
@@ -217,7 +217,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align Add [badges](/ui/components/badge) to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout. - Notifications 14 Messages 3 Alerts 7 +
Notifications 14 Messages 3 Alerts 7
## Buttons with avatars @@ -225,7 +225,7 @@ Add [badges](/ui/components/badge) to buttons to display additional information Use buttons with [avatars](/ui/components/avatar) to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space. - Avatar Avatar Avatar +
Avatar Avatar Avatar
## Buttons with animations on hover @@ -249,7 +249,7 @@ Use size modifiers to change the size of your buttons. Available sizes: `.btn-xs Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention. -Link button +
Link button
## Action buttons diff --git a/docs/content/ui/components/placeholder.mdx b/docs/content/ui/components/placeholder.mdx index 36c3126f4..188f7bfdf 100644 --- a/docs/content/ui/components/placeholder.mdx +++ b/docs/content/ui/components/placeholder.mdx @@ -46,7 +46,7 @@ You can use a placeholder that will look like an [avatar](/ui/components/avatar) You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks. -
+
 ## Placeholder image diff --git a/docs/content/ui/components/popover.mdx b/docs/content/ui/components/popover.mdx index 129aa09eb..711c60987 100644 --- a/docs/content/ui/components/popover.mdx +++ b/docs/content/ui/components/popover.mdx @@ -20,7 +20,7 @@ To create a default popover use: Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL. - +
 ## Popover on hover diff --git a/docs/content/ui/components/spinner.mdx b/docs/content/ui/components/spinner.mdx index 6969de584..0195500a4 100644 --- a/docs/content/ui/components/spinner.mdx +++ b/docs/content/ui/components/spinner.mdx @@ -51,7 +51,7 @@ Growing spinners also come in a variety of colors to choose from. Use [buttons](/ui/components/button) with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. - Button Button Button Button Button +
Button Button Button Button Button
## Animated dots @@ -65,7 +65,7 @@ Use animated dots to show the loading state of a component. They provide feedbac Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. - Loading Loading +
Loading Loading
## SCSS variables diff --git a/docs/content/ui/components/tag.mdx b/docs/content/ui/components/tag.mdx index e20e7b9e8..1c9ad7bd4 100644 --- a/docs/content/ui/components/tag.mdx +++ b/docs/content/ui/components/tag.mdx @@ -9,7 +9,7 @@ import Example from '@components/Example.astro'; import Flag from '@ui/Flag.astro'; import Icon from '@ui/Icon.astro'; import Payment from '@ui/Payment.astro'; -import TagsList from '@ui/TagsList.astro'; +import TagList from '@ui/TagList.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## Overview @@ -35,7 +35,7 @@ Use `.tag-icon` for a leading icon inside a tag. The icon uses compact size and Use `.tag-avatar`, `.tag-flag`, or `.tag-payment` to add media at the start of the tag. These classes keep spacing aligned with tag content. - AP Alex P. United States Visa + AP Alex P. United States Visa ### With badge @@ -56,12 +56,12 @@ Use `.tag-check` on a checkbox when the tag should be selectable. This variant i ## Examples -### Tags list +### Tag list -Use `.tags-list` for groups of tags. It applies consistent spacing and wrapping between items. +Use `.tag-list` for groups of tags. It applies consistent spacing and wrapping between items. - Alpha Beta Gamma Delta + Alpha Beta Gamma Delta ## Accessibility diff --git a/docs/content/ui/components/tooltip.mdx b/docs/content/ui/components/tooltip.mdx index 27350065b..3a94068cf 100644 --- a/docs/content/ui/components/tooltip.mdx +++ b/docs/content/ui/components/tooltip.mdx @@ -12,7 +12,7 @@ import CodeDocs from '@components/CodeDocs.astro'; Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element. - +
 ## Tooltip with HTML diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index 2d55a0bdf..29fdccdd8 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -12,6 +12,7 @@ import CardBody from '@ui/CardBody.astro' import CardFooter from '@ui/CardFooter.astro' import Alert from '@ui/Alert.astro' import Badge from '@ui/Badge.astro' +import BadgeList from '@ui/BadgeList.astro' import Progress from '@ui/Progress.astro' import Select from '@ui/Select.astro' import Check from '@ui/form/Check.astro' @@ -20,6 +21,7 @@ import Nav from '@ui/Nav.astro' import Breadcrumb from '@ui/Breadcrumb.astro' import Pagination from '@ui/Pagination.astro' import Avatar from '@ui/Avatar.astro' +import AvatarList from '@ui/AvatarList.astro' import Icon from '@ui/Icon.astro' import Dropdown from '@ui/Dropdown.astro' import Accordion from '@ui/Accordion.astro' @@ -32,6 +34,7 @@ import InputIcon from '@ui/form/InputIcon.astro' import InputGroup from '@ui/InputGroup.astro' import Range from '@ui/Range.astro' import Tag from '@ui/Tag.astro' +import TagList from '@ui/TagList.astro' import Ribbon from '@ui/Ribbon.astro' import Flag from '@ui/Flag.astro' import Payment from '@ui/Payment.astro' @@ -181,18 +184,18 @@ function greetUser(name) {
-
+ -
-
+ + -
+
@@ -361,22 +364,22 @@ function greetUser(name) {
-
+ -
-
+ + -
-
+ + -
+
@@ -535,11 +538,11 @@ function greetUser(name) {

Tags

-
+ -
+

Ribbons

diff --git a/preview/pages/badges.astro b/preview/pages/badges.astro index 16343f9fd..1f7090aaa 100644 --- a/preview/pages/badges.astro +++ b/preview/pages/badges.astro @@ -1,7 +1,7 @@ --- // colors = ['default'] + site.colors keys + ['dark', 'light'] -import BadgesList from '@ui/BadgesList.astro' +import BadgeList from '@ui/BadgeList.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Icon from '@ui/Icon.astro' import ButtonList from '@ui/ButtonList.astro' @@ -40,7 +40,7 @@ const sizes = ['sm', 'md', 'lg']
{ sizes.map((size) => ( - + Default Left icon @@ -52,7 +52,7 @@ const sizes = ['sm', 'md', 'lg'] - + )) }
@@ -106,9 +106,9 @@ const sizes = ['sm', 'md', 'lg'] Basic badges - + {colors.map((color) => {ucFirst(color)})} - +
@@ -116,9 +116,9 @@ const sizes = ['sm', 'md', 'lg'] Light badges - + {colors.map((color) => {ucFirst(color)})} - + @@ -126,9 +126,9 @@ const sizes = ['sm', 'md', 'lg'] Outline badges - + {colors.map((color) => {ucFirst(color)})} - + @@ -136,7 +136,7 @@ const sizes = ['sm', 'md', 'lg'] Badges with icons - + { colors.map((color) => ( @@ -145,7 +145,7 @@ const sizes = ['sm', 'md', 'lg'] )) } - + diff --git a/preview/pages/form-layout.astro b/preview/pages/form-layout.astro index 03db0e557..01652a49e 100644 --- a/preview/pages/form-layout.astro +++ b/preview/pages/form-layout.astro @@ -1,6 +1,7 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Button from '@ui/Button.astro' +import ButtonList from '@ui/ButtonList.astro' import InputIcon from '@ui/form/InputIcon.astro' import Check from '@ui/form/Check.astro' import Icon from '@ui/Icon.astro' @@ -191,10 +192,10 @@ const countries = flags as { name: string }[] -
+
+ diff --git a/preview/pages/job-listing.astro b/preview/pages/job-listing.astro index 4c895e1ff..40911bb9a 100644 --- a/preview/pages/job-listing.astro +++ b/preview/pages/job-listing.astro @@ -3,6 +3,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Icon from '@ui/Icon.astro' import Card from '@ui/Card.astro' import Avatar from '@ui/Avatar.astro' +import BadgeList from '@ui/BadgeList.astro' import Check from '@ui/form/Check.astro' import jobsData from '@data/jobs.json' @@ -127,13 +128,13 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
-
+ {job.tags.map((tag) => ( {tag} ))} -
+
diff --git a/preview/pages/logs.astro b/preview/pages/logs.astro index 2bc59aaf4..81678552a 100644 --- a/preview/pages/logs.astro +++ b/preview/pages/logs.astro @@ -1,6 +1,7 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Badge from '@ui/Badge.astro' +import BadgeList from '@ui/BadgeList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardFooter from '@ui/CardFooter.astro' @@ -48,14 +49,12 @@ import { site } from '@shared/lib/site'

Log Levels

-
-
- - - - -
-
+ + + + + +

Log Source

diff --git a/preview/pages/offcanvas.astro b/preview/pages/offcanvas.astro index a934a2aa7..cfc9bbdb6 100644 --- a/preview/pages/offcanvas.astro +++ b/preview/pages/offcanvas.astro @@ -1,6 +1,7 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import { ucFirst as capitalize } from '@shared/lib/string-format' +import ButtonList from '@ui/ButtonList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import Offcanvas from '@ui/Offcanvas.astro' @@ -13,13 +14,15 @@ const directions = ['start', 'end', 'top', 'bottom'] as const - { - directions.map((direction) => ( - - Toggle {direction} offcanvas - - )) - } + + { + directions.map((direction) => ( + + Toggle {direction} offcanvas + + )) + } + diff --git a/preview/pages/tags.astro b/preview/pages/tags.astro index 59da87efd..e10c55cb1 100644 --- a/preview/pages/tags.astro +++ b/preview/pages/tags.astro @@ -1,7 +1,7 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Tag from '@ui/Tag.astro' -import TagsList from '@ui/TagsList.astro' +import TagList from '@ui/TagList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' @@ -26,9 +26,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Default tags - + {range(1, 14).map((i) => )} - + @@ -37,9 +37,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with flag - + {flags9.map((country) => )} - + @@ -48,9 +48,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with icon - + {tagIcons.map((icon) => )} - + @@ -59,9 +59,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with avatar - + {people8.map((person) => )} - + @@ -70,9 +70,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with status - + {colors.map((color) => )} - + @@ -81,9 +81,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with legend - + {colors.map((color) => )} - + @@ -92,10 +92,10 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Default tags - + {range(1, 6).map((i) => )} {range(7, 12).map((i) => )} - + @@ -104,9 +104,9 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Default tags - + {range(1, 12).map((i) => )} - + diff --git a/shared/components/cards/Card.astro b/shared/components/cards/Card.astro index b4ab69cb5..be9c3ed44 100644 --- a/shared/components/cards/Card.astro +++ b/shared/components/cards/Card.astro @@ -156,7 +156,7 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[], Go somewhere ) : footerButtons ? ( -
+
Cancel diff --git a/shared/ui/AdvancedTable.astro b/shared/ui/AdvancedTable.astro index e052b417d..ea8b9595f 100644 --- a/shared/ui/AdvancedTable.astro +++ b/shared/ui/AdvancedTable.astro @@ -1,5 +1,5 @@ --- -import BadgesList from './BadgesList.astro' +import BadgeList from './BadgeList.astro' import Icon from './Icon.astro' import { formatLongDate } from '@shared/lib/date-format' import { randomItem, randomDate } from '@shared/lib/pseudo-random' @@ -124,11 +124,11 @@ const sortKeys = headers.map((header) => header['data-sort']) {status === 'Active' ? Active : status === 'Inactive' ? Inactive : Requested} {date} - + {itemTags.map((tag) => ( {tag} ))} - + {category} diff --git a/shared/ui/BadgesList.astro b/shared/ui/BadgeList.astro similarity index 55% rename from shared/ui/BadgesList.astro rename to shared/ui/BadgeList.astro index 4f28ce966..a43e01fac 100644 --- a/shared/ui/BadgesList.astro +++ b/shared/ui/BadgeList.astro @@ -1,5 +1,5 @@ --- -// Badges list container (.badges-list). +// Badge list container (.badge-list). interface Props { class?: string @@ -8,6 +8,6 @@ interface Props { const { class: className } = Astro.props --- -
+
diff --git a/shared/ui/TagsList.astro b/shared/ui/TagList.astro similarity index 56% rename from shared/ui/TagsList.astro rename to shared/ui/TagList.astro index e22430218..c01e5f6ae 100644 --- a/shared/ui/TagsList.astro +++ b/shared/ui/TagList.astro @@ -1,5 +1,5 @@ --- -// Tags list container (.tags-list). +// Tag list container (.tag-list). interface Props { class?: string @@ -8,6 +8,6 @@ interface Props { const { class: className } = Astro.props --- -
+