@skyhook-io/k8s-ui 1.7.14 → 1.8.0

package/src/components/checks/ChecksView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { ChevronDown, ChevronRight, ExternalLink, EyeOff, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
-import { ClusterName, EmptyState, FilterPill } from '../ui'
+import { ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip } from '../ui'
 import type { CheckMeta, CheckReference } from '../audit'
 import { CHECK_SEVERITIES, CHECK_SEVERITY_RANK, type Check, type CheckSeverity, type EffectiveCheckFinding, type CheckResourceRef } from './types'
 import {
@@ -367,35 +367,24 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
 }
 
 export function CheckSeverityBar({ totals }: { totals: Record<CheckSeverity, number> }) {
-  const sum = CHECK_SEVERITIES.reduce((n, s) => n + totals[s], 0)
   return (
-    <div className="flex h-1.5 overflow-hidden rounded-full bg-theme-elevated" role="img" aria-label="Severity distribution">
-      {sum === 0
-        ? null
-        : CHECK_SEVERITIES.map((s) =>
-            totals[s] > 0 ? (
-              <div key={s} className={`${SEVERITY_FILL_CLASS[s]} transition-[width] duration-500 ease-out`} style={{ width: `${(totals[s] / sum) * 100}%` }} />
-            ) : null,
-          )}
-    </div>
+    <DistributionBar
+      ariaLabel="Severity distribution"
+      segments={CHECK_SEVERITIES.map((s) => ({ key: s, count: totals[s], fillClass: SEVERITY_FILL_CLASS[s] }))}
+    />
   )
 }
 
 export function CheckSeverityChip({ severity, count, active, onClick }: { severity: CheckSeverity; count: number; active: boolean; onClick: () => void }) {
   return (
-    <button
-      type="button"
+    <DistributionLegendChip
+      label={SEVERITY_LABEL[severity]}
+      count={count}
+      fillClass={SEVERITY_FILL_CLASS[severity]}
+      textClass={SEVERITY_TEXT_CLASS[severity]}
+      active={active}
       onClick={onClick}
-      aria-pressed={active}
-      className={[
-        'group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors',
-        active ? 'border-theme-border bg-theme-elevated text-theme-text-primary' : 'border-transparent text-theme-text-secondary hover:bg-theme-hover/60',
-      ].join(' ')}
-    >
-      <span className={`h-2 w-2 rounded-full ${SEVERITY_FILL_CLASS[severity]} ${count === 0 ? 'opacity-30' : ''}`} />
-      <span className={`font-semibold tabular-nums ${count > 0 ? SEVERITY_TEXT_CLASS[severity] : 'text-theme-text-tertiary'}`}>{count}</span>
-      <span>{SEVERITY_LABEL[severity]}</span>
-    </button>
+    />
   )
 }
 

package/src/components/checks/severity.ts

@@ -1,12 +1,9 @@
 import type { CheckSeverity } from './types'
+import { BADGE_SEVERITY_COLORS as sev } from '../ui/Badge'
 
-// The visual language for the 4-tier Checks severity ladder. Pale-pastel tints
-// with hand-rolled dark variants (no theme token covers these). One hue per
-// tier: red=critical, orange=high, amber=medium, slate=low — read the queue's
-// left rail top-to-bottom and severity is obvious without reading a word.
-//
-// Class strings are literal so each consuming app's Tailwind @source scan emits
-// them.
+// The visual language for the 4-tier Checks severity ladder. One hue per tier:
+// red=critical, orange=high, amber=medium, neutral=low — read the queue's left
+// rail top-to-bottom and severity is obvious without reading a word.
 
 export const SEVERITY_LABEL: Record<CheckSeverity, string> = {
   critical: 'Critical',
@@ -16,11 +13,14 @@ export const SEVERITY_LABEL: Record<CheckSeverity, string> = {
 }
 
 // Pill badge — the loud, explicit severity signal on rows + drawer header.
+// Uses the canonical Badge severity tones (BADGE_SEVERITY_COLORS) so the queue's
+// severity pills read identically to status badges everywhere else (rendered
+// with `badge-sm`).
 export const SEVERITY_BADGE_CLASS: Record<CheckSeverity, string> = {
-  critical: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-950/50 dark:text-red-300 dark:ring-red-900',
-  high: 'bg-orange-50 text-orange-700 ring-1 ring-orange-200 dark:bg-orange-950/50 dark:text-orange-300 dark:ring-orange-900',
-  medium: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:ring-amber-900',
-  low: 'bg-slate-100 text-slate-600 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:text-slate-300 dark:ring-slate-700',
+  critical: sev.error,
+  high: sev.alert,
+  medium: sev.warning,
+  low: sev.neutral,
 }
 
 // Solid fill — dots + the proportional distribution bar segments.