mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Remove the badge-outline class (#3022)
This commit is contained in:
Bartosz-Do authored and Bartek committed
1 parent
69fffc7de5
commit
5f28a1df75
9 files changed
+38
-41
No files matched your search
@@ -41,7 +41,7 @@ sits in an exempt file.
|
||||
| Drawer classes | `\.drawer(-[a-z-]+)?\b` | `.offcanvas`, `.offcanvas-start/end/top/bottom`, `.offcanvas-header/body/title` |
|
||||
| Menu classes | `\.menu(-item|-header|-divider)?\b`, `\.submenu\b` | `.dropdown-menu`, `.dropdown-item`, `.dropdown-header`, `.dropdown-divider` |
|
||||
| Button composition | `\.btn-(solid|subtle|text|styled)\b` (`.btn-outline` alone is an existing Tabler class — not a hit) | `.btn-primary`, `.btn-outline-primary`, `.btn-ghost-*` (Tabler) |
|
||||
| Badge composition | `\.badge-subtle\b` (`.badge-outline` is an existing Tabler class — not a hit) | `.badge.bg-*`, Tabler badge variants |
|
||||
| Badge composition | `\.badge-subtle\b` | `.badge.bg-*`, Tabler badge variants |
|
||||
| Data attributes | `data-bs-toggle="(dialog|drawer|menu|toggler)"`, `data-bs-dismiss="(dialog|drawer)"`, `data-bs-(autoplay|ends|validate|bubble)\b`, `data-bs-modal=` | `modal`, `offcanvas`, `dropdown`; `data-bs-ride`, `data-bs-wrap`, `.needs-validation` |
|
||||
| Events | `\.bs\.(dialog|drawer|menu|chips|otpInput|strength|range|datepicker)\b` | `.bs.modal`, `.bs.offcanvas`, `.bs.dropdown` |
|
||||
| JS exports | `\b(Dialog|Drawer|Menu|DialogBase)\b` as a class or import in `core/js/` | `Modal`, `Offcanvas`, `Dropdown` |
|
||||
|
||||
@@ -352,7 +352,6 @@ Places where the code contradicts its own rules, found on 2026-09-08 and decided
|
||||
| 9 | `icon-md` 40px and `icon-lg` 56px drop the stroke to 1; `icon-sm` keeps 1.5. | `ui/_icons.scss` | **Intended.** Rule: stroke 1.5 up to 24px, stroke 1 from 40px. Recorded in section 8. | closed, exception |
|
||||
| 10 | Table hover uses `--emphasis-color` at 7.5% while every other hover uses `$hover-bg` (`--secondary` at 8%). | `_variables.scss` table block | **Fix in 2.0.** `$table-hover-bg: $hover-bg`. Short section 5 entry. | planned 2.0 |
|
||||
| 13 | Demo pages nest example cards inside a section card (`SectionCard` > `SectionCardBody` > `Card`), and `cards.astro` documents "Cards inside card"; rule 12 forbids a card in a card body. | `preview/pages/cards.astro` and every `SectionCard` page | **Intended.** The demo section wrapper is exempt from rule 12: it frames the examples, it is not product markup. The "cards inside card" demo stays. | closed, exception |
|
||||
| 14 | `badge-outline` is forbidden by `.agents/rules/main.mdc` but shipped by `core/scss/ui/_badges.scss` and shown as the "Outline" demo on `badges.astro`. | `_badges.scss`, `badges.astro`, `job-listing.astro` | **Fix in 2.0.** The class is removed: it duplicates the soft `-lt` variant. Deprecate, section 5 entry, upgrade-guide line. | tracked, #3011 |
|
||||
| 15 | Brand colour as UI chrome: the sponsor heart is `text-pink` inside `.btn` (`NavbarSide.astro`, `Sponsor.astro`), the marketing footer uses filled `btn-facebook` / `btn-x` / `btn-instagram` / `btn-linkedin`, and `SmallStats color="facebook"` fills a stat avatar. | `shared/components/**`, `shared/layouts/MarketingLayout.astro` | **Intended, for the brand only.** The sponsor heart and the social follow buttons keep their brand colour; everything else obeys rule 21. The one real violation was a decorative icon at rest, the favourite star in `ProfileContact`, which now inherits. A toggle's on-state (`.switch-icon-b`) is a separate, allowed pattern: it carries a state colour, not decoration. | closed, exception |
|
||||
| 16 | Scroll containers carry an inline height: `ActivityCard` `height: 28rem`, `UsersListHeaders` `max-height: 35rem`, `NavbarSideApps` `max-height: 50vh`. | `shared/components/cards/ActivityCard.astro`, `UsersListHeaders.astro`, `navbar/NavbarSideApps.astro` | **Intended.** A scroll container's height is a per-instance layout choice, not a scale value, so it stays inline. Rule 18 records the exception. | closed, exception |
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@tabler/core": major
|
||||
"@tabler/preview": patch
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Removed the `.badge-outline` class; use a soft `.badge` with `.bg-{color}-lt` instead.
|
||||
@@ -480,6 +480,10 @@ Decided:
|
||||
9. Cascade `@layer` lands as phase 3b, one PR after the token scales: flat Bootstrap v6 layer
|
||||
names (no `tabler.*` nesting), `:root` tokens inside the `root` layer, utilities without
|
||||
`!important` and `$enable-important-utilities` removed (decided 2026-09-08).
|
||||
14. `.badge-outline` is removed in 2.0, not aliased (#3011, decided 2026-09-08). It duplicated the
|
||||
soft `.badge.bg-{color}-lt` variant without a role of its own, and `.agents/rules/main.mdc`
|
||||
already forbade it. This is a deliberate exception to "every 1.x class stays": upgrade-guide
|
||||
line, no replacement class — markup moves to `.badge.bg-{color}-lt`.
|
||||
|
||||
Open:
|
||||
|
||||
|
||||
+22
-2
@@ -1,5 +1,25 @@
|
||||
# Upgrading to Tabler 1.5
|
||||
# Upgrading Tabler
|
||||
|
||||
The upgrade guide lives in the documentation: [Upgrade to 1.5](https://docs.tabler.io/ui/getting-started/upgrade/).
|
||||
## Upgrading to Tabler 2.0
|
||||
|
||||
Tabler 2.0 adopts Bootstrap v6's architecture while keeping the Bootstrap v5 class
|
||||
names and public API. The full guide is written phase by phase on `v2-dev` and will
|
||||
move into the documentation before the release. The plan and the per-phase breaking
|
||||
changes live in [`BOOTSTRAP-V6-MIGRATION.md`](BOOTSTRAP-V6-MIGRATION.md).
|
||||
|
||||
### Removed classes
|
||||
|
||||
| Removed | Use instead |
|
||||
| --- | --- |
|
||||
| `.badge-outline` | A soft `.badge` with a `.bg-{color}-lt` fill, for example `<span class="badge bg-secondary-lt">`. It duplicated the soft variant without a role of its own. |
|
||||
|
||||
```diff
|
||||
- <span class="badge badge-outline text-secondary">Label</span>
|
||||
+ <span class="badge bg-secondary-lt">Label</span>
|
||||
```
|
||||
|
||||
## Upgrading to Tabler 1.5
|
||||
|
||||
The 1.4 to 1.5 upgrade guide lives in the documentation: [Upgrade to 1.5](https://docs.tabler.io/ui/getting-started/upgrade/).
|
||||
|
||||
It covers every breaking change between 1.4 and 1.5, with a before and after example for each one.
|
||||
@@ -66,13 +66,7 @@ $badge-tokens: defaults(
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
}
|
||||
|
||||
//
|
||||
// Outline badge
|
||||
//
|
||||
.badge-outline {
|
||||
background-color: transparent;
|
||||
border: var(--border-width) var(--border-style) currentColor;
|
||||
}
|
||||
// `.badge-outline` was removed in 2.0 — use a soft `.badge.bg-{color}-lt` badge instead.
|
||||
|
||||
//
|
||||
// Pill badge
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Badge
|
||||
summary: A badge is a small label for a count, a status or a tag. It comes in colors, light and outline styles, pills, dots and notification badges.
|
||||
description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.
|
||||
summary: A badge is a small label for a count, a status or a tag. It comes in colors, light styles, pills, dots and notification badges.
|
||||
description: Add badges to show counts, labels, or statuses. Use colors, pill styles, links, and notification dots to add context.
|
||||
related: [/ui/components/status, /ui/components/tag]
|
||||
source: core/scss/ui/_badges.scss
|
||||
css-vars: badge
|
||||
@@ -18,9 +18,6 @@ classnames:
|
||||
desc: Positions the badge over the corner of its parent
|
||||
- class: badge-list
|
||||
desc: Wrapper that spaces several badges in a row
|
||||
style:
|
||||
- class: badge-outline
|
||||
desc: Transparent fill with a colored border
|
||||
modifier:
|
||||
- class: badge-pill
|
||||
desc: Fully rounded ends
|
||||
@@ -189,19 +186,6 @@ Use `.badge-sm` or `.badge-lg` to change the size. The examples above use the de
|
||||
</BadgeList>
|
||||
</Example>
|
||||
|
||||
|
||||
## Outline badges
|
||||
|
||||
Use `.badge-outline` for a badge with a border and no fill. Add a `text-*` class to set its color - the border follows the text.
|
||||
|
||||
<Example centered>
|
||||
<BadgeList>
|
||||
{colors.map(([name]) => (
|
||||
<span class={`badge badge-outline text-${name}`}>{name}</span>
|
||||
))}
|
||||
</BadgeList>
|
||||
</Example>
|
||||
|
||||
## Dot badges
|
||||
|
||||
Use `.badge-dot` for a small dot with no text. It marks a state next to a label, so always keep that label readable next to it.
|
||||
|
||||
@@ -185,17 +185,6 @@ const sizes = ['sm', 'md', 'lg']
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Outline</CardTitle>
|
||||
<CardSubtitle>A colored border with a transparent background.</CardSubtitle>
|
||||
<BadgeList>
|
||||
{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
|
||||
</BadgeList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardBody>
|
||||
|
||||
@@ -132,7 +132,7 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
|
||||
<div class="col-md-auto">
|
||||
<BadgeList class="mt-3">
|
||||
{job.tags.map((tag) => (
|
||||
<a href="#" class="badge badge-outline text-secondary fw-normal badge-pill">
|
||||
<a href="#" class="badge bg-secondary-lt fw-normal badge-pill">
|
||||
{tag}
|
||||
</a>
|
||||
))}
|
||||
|
||||
Reference in new issue
Block a user