Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Fix combobox markup classes without styles

Browse Source 
Drop the unused icon-2 class and add styles for dropdown-item-label and
combobox-search-input so the markup classes check passes.
This commit is contained in:
Bartek committed 2026-09-29 14:27:11 +02:00
1 parent 61593efe40
commit 9f13141115
6 files changed
+36 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

core/js/src/combobox.ts
+1 -1
View File
@@ -81,7 +81,7 @@ const SELECTOR_VALUE = '.combobox-value'
const SELECTOR_SEARCH_INPUT = '.combobox-search-input'
const SELECTOR_NO_RESULTS = '.combobox-no-results'
const CHECK_ICON = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
const CHECK_ICON = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
const Default: ComponentConfig = {
boundary: 'clippingParents',
core/scss/ui/forms/_combobox.scss
+10
View File
@@ -121,6 +121,16 @@
background-color: var(--dropdown-bg);
}
.combobox-search-input {
width: 100%;
}
.dropdown-item-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.combobox-no-results {
padding: $spacer;
color: var(--tertiary);
docs/content/ui/forms/combobox.mdx
+22 -22
View File
@@ -105,21 +105,21 @@ Use `.dropdown-item-content` with `.dropdown-item-description` for secondary tex
<span>Admin</span>
<small class="dropdown-item-description">Full access to all resources</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="editor">
<span class="dropdown-item-content">
<span>Editor</span>
<small class="dropdown-item-description">Can edit and publish content</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="viewer">
<span class="dropdown-item-content">
<span>Viewer</span>
<small class="dropdown-item-description">Read-only access</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
</div>
</div>
@@ -182,16 +182,16 @@ Add `data-bs-multiple="true"`. Items toggle on click and the menu stays open. Th
<span class="combobox-value"></span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item selected" type="button" data-bs-value="html" aria-selected="true">HTML<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="css" aria-selected="true">CSS<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="js" aria-selected="true">JavaScript<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="py" aria-selected="true">Python<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="rb">Ruby<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="go">Go<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="php">PHP<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="java">Java<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="rust">Rust<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="swift">Swift<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="html" aria-selected="true">HTML<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="css" aria-selected="true">CSS<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="js" aria-selected="true">JavaScript<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item selected" type="button" data-bs-value="py" aria-selected="true">Python<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="rb">Ruby<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="go">Go<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="php">PHP<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="java">Java<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="rust">Rust<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
<button class="dropdown-item" type="button" data-bs-value="swift">Swift<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg></button>
</div>
</div>
</Example>
@@ -500,7 +500,7 @@ Add a name and a role with `.dropdown-item-content` and `.dropdown-item-descript
<span>Paweł Kuna</span>
<small class="dropdown-item-description">Product designer</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="2">
<span class="dropdown-item-indicator"><span class="avatar avatar-xs" style="background-image: url(/static/avatars/001f.jpg)"></span></span>
@@ -508,7 +508,7 @@ Add a name and a role with `.dropdown-item-content` and `.dropdown-item-descript
<span>Jeffie Lewzey</span>
<small class="dropdown-item-description">Front-end developer</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="3">
<span class="dropdown-item-indicator"><span class="avatar avatar-xs" style="background-image: url(/static/avatars/002m.jpg)"></span></span>
@@ -516,7 +516,7 @@ Add a name and a role with `.dropdown-item-content` and `.dropdown-item-descript
<span>Mallory Hulme</span>
<small class="dropdown-item-description">Project manager</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="4">
<span class="dropdown-item-indicator"><span class="avatar avatar-xs" style="background-image: url(/static/avatars/003f.jpg)"></span></span>
@@ -524,7 +524,7 @@ Add a name and a role with `.dropdown-item-content` and `.dropdown-item-descript
<span>Dunn Slane</span>
<small class="dropdown-item-description">QA engineer</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
</div>
</div>
@@ -608,7 +608,7 @@ Put an image in `.dropdown-item-indicator` and a second line in `.dropdown-item-
<span>Bitcoin</span>
<small class="dropdown-item-description">BTC</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="ethereum">
<span class="dropdown-item-indicator"><img src="/static/crypto-currencies/ethereum.svg" width="20" height="20" alt="" /></span>
@@ -616,7 +616,7 @@ Put an image in `.dropdown-item-indicator` and a second line in `.dropdown-item-
<span>Ethereum</span>
<small class="dropdown-item-description">ETH</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="litecoin">
<span class="dropdown-item-indicator"><img src="/static/crypto-currencies/litecoin.svg" width="20" height="20" alt="" /></span>
@@ -624,7 +624,7 @@ Put an image in `.dropdown-item-indicator` and a second line in `.dropdown-item-
<span>Litecoin</span>
<small class="dropdown-item-description">LTC</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="ripple">
<span class="dropdown-item-indicator"><img src="/static/crypto-currencies/ripple.svg" width="20" height="20" alt="" /></span>
@@ -632,7 +632,7 @@ Put an image in `.dropdown-item-indicator` and a second line in `.dropdown-item-
<span>Ripple</span>
<small class="dropdown-item-description">XRP</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
<button class="dropdown-item" type="button" data-bs-value="cardano">
<span class="dropdown-item-indicator"><img src="/static/crypto-currencies/cardano.svg" width="20" height="20" alt="" /></span>
@@ -640,7 +640,7 @@ Put an image in `.dropdown-item-indicator` and a second line in `.dropdown-item-
<span>Cardano</span>
<small class="dropdown-item-description">ADA</small>
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>
</button>
</div>
</div>
preview/pages/combobox.astro
+1 -1
View File
@@ -66,7 +66,7 @@ const team = people.slice(0, 8)
const photo = (person: { photo?: string }) => `${assetRoot}/${person.photo}`
const avatar = (person: { photo?: string }) => `<span class='avatar avatar-xs' style='background-image: url(${photo(person)})'></span>`
const checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
const checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
---
<DefaultLayout title="Combobox" pageMenu="form.combobox" description="A combobox is a select-like field with a searchable menu, rich options, tags and full keyboard support.">
screenshots/pages/combobox-field.astro
+1 -1
View File
@@ -15,7 +15,7 @@ const countries: [string, string][] = [
['es', 'Spain'],
['jp', 'Japan'],
]
const check = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
const check = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
---
<ScreenshotLayout title="Combobox field" columns={1.5} zoom={1.4} cssPlugins={['flags']}>
screenshots/pages/combobox.astro
+1 -1
View File
@@ -16,7 +16,7 @@ import { personById } from '@shared/lib/people'
const team = [1, 4, 2, 6].map((id) => personById(id))
const labels = ['Bug', 'Backend', 'Urgent', 'Design', 'Docs']
const check = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon icon-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
const check = '<svg xmlns="http://www.w3.org/2000/svg" class="dropdown-item-check icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10" /></svg>'
---
<ScreenshotLayout title="Combobox" columns={2}>