fix(structure): preserve selected row control styling

Closes #9946
This commit is contained in:
t8y2
2026-09-27 12:36:33 +00:00
parent 0882ac1eff
commit add378d643
2 changed files with 24 additions and 5 deletions
@@ -6637,11 +6637,6 @@ watch(
inset 0 1px 0 color-mix(in oklab, var(--primary) 55%, transparent),
inset 0 -1px 0 color-mix(in oklab, var(--primary) 55%, transparent);
}
/* Inputs are bg-transparent; give them a solid surface on the selected row so fields stay readable. */
.structure-column-search-current :is(input, button, [role="combobox"], [data-slot="select-trigger"]) {
background-color: var(--background);
}
</style>
<style>
@@ -0,0 +1,24 @@
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
const source = readFileSync(new URL("../TableStructureEditor.vue", import.meta.url), "utf8");
const scopedStyleStart = source.indexOf("<style scoped>");
const scopedStyleEnd = source.indexOf("</style>", scopedStyleStart);
const scopedStyle = source.slice(scopedStyleStart, scopedStyleEnd).replace(/\/\*[\s\S]*?\*\//g, "");
const rules = [...scopedStyle.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map((match) => ({
selectors: match[1]!.split(",").map((selector) => selector.trim()),
declarations: match[2]!,
}));
describe("TableStructureEditor selected-row styles", () => {
it("keeps the highlight on cells without repainting descendant controls", () => {
const selectedBackgroundRules = rules.filter(({ selectors, declarations }) => selectors.some((selector) => selector.includes(".structure-column-search-current")) && /background(?:-color)?\s*:/.test(declarations));
expect(selectedBackgroundRules).toHaveLength(1);
expect(selectedBackgroundRules[0]?.selectors).toEqual([".structure-column-search-current > td"]);
expect(selectedBackgroundRules[0]?.declarations).toContain("var(--primary)");
const gridControlRule = rules.find(({ selectors }) => selectors.includes(".structure-edit-grid :deep(.structure-grid-control)"));
expect(gridControlRule?.declarations).toContain("background-color: transparent;");
});
});