fix(admin): keep disabled priority stepper hidden until hover

disabled:opacity-30 overrode opacity-0, so the decrement button stayed
faintly visible on every row already at the minimum. Style disabled
buttons via text colour instead, and raise idle icon contrast.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
William Drake
2026-09-27 12:12:39 -04:00
co-authored by Claude Opus 5.5
parent 0da18e4a5e
commit 58d605083e
2 changed files with 5 additions and 2 deletions
@@ -10,7 +10,7 @@
>
<button
type="button"
class="flex h-full w-6 items-center justify-center rounded-l-lg text-gray-400 opacity-0 transition hover:bg-gray-200/70 hover:text-primary-600 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-30 group-hover/priority:opacity-100 group-focus-within/priority:opacity-100 dark:text-dark-400 dark:hover:bg-dark-600 dark:hover:text-primary-400 [@media(hover:none)]:opacity-100"
class="flex h-full w-6 items-center justify-center rounded-l-lg text-gray-500 opacity-0 transition hover:bg-gray-200/70 hover:text-primary-600 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300 dark:disabled:text-dark-600 dark:disabled:hover:text-dark-600 group-hover/priority:opacity-100 group-focus-within/priority:opacity-100 dark:text-gray-400 dark:hover:bg-dark-600 dark:hover:text-primary-400 [@media(hover:none)]:opacity-100"
:class="{ '!opacity-100': editing || dirty }"
:disabled="saving || draft <= MIN_PRIORITY"
:title="t('admin.accounts.priorityQuick.raise')"
@@ -58,7 +58,7 @@
<button
type="button"
class="flex h-full w-6 items-center justify-center rounded-r-lg text-gray-400 opacity-0 transition hover:bg-gray-200/70 hover:text-primary-600 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-30 group-hover/priority:opacity-100 group-focus-within/priority:opacity-100 dark:text-dark-400 dark:hover:bg-dark-600 dark:hover:text-primary-400 [@media(hover:none)]:opacity-100"
class="flex h-full w-6 items-center justify-center rounded-r-lg text-gray-500 opacity-0 transition hover:bg-gray-200/70 hover:text-primary-600 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300 dark:disabled:text-dark-600 dark:disabled:hover:text-dark-600 group-hover/priority:opacity-100 group-focus-within/priority:opacity-100 dark:text-gray-400 dark:hover:bg-dark-600 dark:hover:text-primary-400 [@media(hover:none)]:opacity-100"
:class="{ '!opacity-100': editing || dirty }"
:disabled="saving || draft >= MAX_PRIORITY"
:title="t('admin.accounts.priorityQuick.lower')"
@@ -43,6 +43,9 @@ describe('AccountPriorityCell', () => {
const wrapper = mountCell(account({ priority: 1 }))
const dec = wrapper.get('[data-testid="account-priority-decrement"]')
expect(dec.attributes('disabled')).toBeDefined()
// 到达下限时按钮仍应随悬停显隐,而不是常驻半透明
expect(dec.classes()).toContain('opacity-0')
expect(dec.classes().some(c => c.startsWith('disabled:opacity'))).toBe(false)
await dec.trigger('click')
await vi.runAllTimersAsync()
expect(update).not.toHaveBeenCalled()