Rename element list classes to singular and use them in examples (#2853)

Author: codecalm

.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

.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

.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.

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();
 }
 

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();
 }

docs/content/ui/components/avatar.mdx

@@ -14,63 +14,63 @@ import CodeDocs from '@components/CodeDocs.astro';
 Use the `avatar` class to add an avatar to your interface design for greater customization.
 
 <Example centered>
-<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar">JL</span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
+<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar">JL</span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span> </AvatarList>
 </Example>
 
 ## Avatar image
 
 Set an image as the background to make users easy to indentify and create a personalized experience.
 
 <Example centered>
-<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
+<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span> </AvatarList>
 </Example>
 
 ## Initials
 
 You can also use initials instead of pictures.
 
 <Example centered>
-<span class="avatar">AB</span> <span class="avatar">CD</span> <span class="avatar">EF</span> <span class="avatar">GH</span> <span class="avatar">IJ</span>
+<AvatarList> <span class="avatar">AB</span> <span class="avatar">CD</span> <span class="avatar">EF</span> <span class="avatar">GH</span> <span class="avatar">IJ</span> </AvatarList>
 </Example>
 
 ## Avatar icons
 
 Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal.
 
 <Example centered>
-<span class="avatar"> <Icon name="user" /> </span> <span class="avatar"> <Icon name="plus" /> </span> <span class="avatar"> <Icon name="settings" /> </span>
+<AvatarList> <span class="avatar"> <Icon name="user" /> </span> <span class="avatar"> <Icon name="plus" /> </span> <span class="avatar"> <Icon name="settings" /> </span> </AvatarList>
 </Example>
 
 ## Avatar initials color
 
 Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
 
 <Example centered>
-<span class="avatar bg-green-lt">AB</span> <span class="avatar bg-red-lt">CD</span> <span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-purple-lt">IJ</span>
+<AvatarList> <span class="avatar bg-green-lt">AB</span> <span class="avatar bg-red-lt">CD</span> <span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-purple-lt">IJ</span> </AvatarList>
 </Example>
 
 ## Avatar size
 
 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.
 
 <Example centered>
-<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
+<AvatarList> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span> </AvatarList>
 </Example>
 
 ## Avatar status
 
 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.
 
 <Example centered>
-<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="badge bg-danger"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-success"></span> </span> <span class="avatar"> <span class="badge bg-warning"></span>SA </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-info"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="badge bg-gray">5</span> </span>
+<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="badge bg-danger"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-success"></span> </span> <span class="avatar"> <span class="badge bg-warning"></span>SA </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-info"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="badge bg-gray">5</span> </span> </AvatarList>
 </Example>
 
 ## Avatar shape
 
 Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
 
 <Example centered>
-<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar rounded-circle">AA</span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
+<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar rounded-circle">AA</span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span> </AvatarList>
 </Example>
 
 ## Avatar upload
@@ -80,23 +80,23 @@ 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.
 
 <Example centered>
-<a href="#" class="avatar avatar-upload"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded-0"> <Icon name="camera" /> </a>
+<AvatarList> <a href="#" class="avatar avatar-upload"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded-0"> <Icon name="camera" /> </a> </AvatarList>
 </Example>
 
 ## Avatar upload size
 
 The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
 
 <Example centered>
-<a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-lg rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-sm rounded"> <Icon name="plus" /> </a>
+<AvatarList> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-lg rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-sm rounded"> <Icon name="plus" /> </a> </AvatarList>
 </Example>
 
 ## Avatar upload text
 
 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.
 
 <Example centered>
-<a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> <span class="avatar-upload-text">Upload</span> </a> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="camera" /> <span class="avatar-upload-text">Add photo</span> </a>
+<AvatarList> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> <span class="avatar-upload-text">Upload</span> </a> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="camera" /> <span class="avatar-upload-text">Add photo</span> </a> </AvatarList>
 </Example>
 
 ## 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
 <div class="row align-items-end" style="width: 100%;"> <div class="col-auto"> <label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer"> <Icon name="plus" /> </label> <input type="file" id="avatar-file" class="visually-hidden" accept="image/*" /> </div> <div class="col"> <label class="form-label" for="avatar-file">Avatar</label> <div class="text-secondary">Click to upload a new avatar</div> </div> </div>
 </Example>
 
-## 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.
 
 <Example centered>
 <AvatarList> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </AvatarList>

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.
 
 <Example centered>
-<BadgesList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgesList>
+<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgeList>
 </Example>
 
+## 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
+<div class="badge-list">
+  <span class="badge">First</span>
+  <span class="badge">Second</span>
+</div>
+```
+
 ## Headings
 
 Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
@@ -35,43 +46,43 @@ 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.
 
 <Example centered>
-{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)}
+<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)}</BadgeList>
 </Example>
 
 ## Pill badges
 
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
 <Example centered>
-{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}
+<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}</BadgeList>
 </Example>
 
 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.
 
 <Example centered>
-{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}
+<BadgeList>{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}</BadgeList>
 </Example>
 
 ## Badges with icons
 
 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.
 
 <Example centered>
-<Badge text="Star" icon="star" /> <Badge text="Heart" icon="heart" /> <Badge text="Check" icon="check" /> <Badge text="X" icon="x" /> <Badge text="Plus" icon="plus" /> <Badge text="Minus" icon="minus" />
+<BadgeList><Badge text="Star" icon="star" /> <Badge text="Heart" icon="heart" /> <Badge text="Check" icon="check" /> <Badge text="X" icon="x" /> <Badge text="Plus" icon="plus" /> <Badge text="Minus" icon="minus" /></BadgeList>
 </Example>
 
 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.
 
 <Example centered>
-<Badge text="Star" icon-end="arrow-right" /> <Badge text="Heart" icon-end="arrow-right" /> <Badge text="Check" icon-end="arrow-right" /> <Badge text="X" icon-end="arrow-right" /> <Badge text="Plus" icon-end="arrow-right" /> <Badge text="Minus" icon-end="arrow-right" />
+<BadgeList><Badge text="Star" icon-end="arrow-right" /> <Badge text="Heart" icon-end="arrow-right" /> <Badge text="Check" icon-end="arrow-right" /> <Badge text="X" icon-end="arrow-right" /> <Badge text="Plus" icon-end="arrow-right" /> <Badge text="Minus" icon-end="arrow-right" /></BadgeList>
 </Example>
 
 ## Links
 
 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
 
 <Example centered>
-<a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-cyan-lt">Cyan</a>
+<BadgeList><a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-cyan-lt">Cyan</a></BadgeList>
 </Example>
 
 ## 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.
 
 <Example centered>
-<button type="button" class="btn"> Notifications <Badge text="2" color="red" class="ms-2" /> </button> <button type="button" class="btn"> Inbox <Badge text="4" color="red" class="badge-notification" /> </button> <button type="button" class="btn"> Profile <Badge text="" color="red" class="badge-notification" /> </button>
+<div class="btn-list"> <button type="button" class="btn"> Notifications <Badge text="2" color="red" class="ms-2" /> </button> <button type="button" class="btn"> Inbox <Badge text="4" color="red" class="badge-notification" /> </button> <button type="button" class="btn"> Profile <Badge text="" color="red" class="badge-notification" /> </button> </div>
 </Example>
 
 ## 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.
 
 <Example centered vertical>
-<div> <Badge color="primary" scale="sm" text="New" class="badge-sm" /> <Badge color="primary" scale="sm" text="1" class="badge-pill" /> </div> <div> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </div> <div> <Badge color="primary" scale="lg" text="New" class="badge-sm" /> <Badge color="primary" scale="lg" text="1" class="badge-pill" /> </div>
+<BadgeList> <Badge color="primary" scale="sm" text="New" class="badge-sm" /> <Badge color="primary" scale="sm" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" scale="lg" text="New" class="badge-sm" /> <Badge color="primary" scale="lg" text="1" class="badge-pill" /> </BadgeList>
 </Example>