shadowdaoandClaude Opus 4.8
b3e5009aec
PresetButtonGrid rendered every preset set into a fixed 4-column .preset-grid, so 5-item sets (RADIUS_PRESETS, SPACING_PRESETS, IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, NavStylePanel's GAP_PRESETS) wrapped a single lone button onto its own row, and the 6-item TEXT_SIZES split unevenly (4+2). PresetButtonGrid now derives a column count from presets.length via defaultPresetGridColumns() -- 5-item sets get a single row of 5, 6-item sets split into two even rows of 3, and anything else keeps the classic 4-column grid -- with an optional `columns` prop for explicit overrides. This fixes every existing call site automatically rather than threading an explicit count through each one. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { defaultPresetGridColumns } from './shared';
|
|
import { RADIUS_PRESETS, SPACING_PRESETS, IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, TEXT_SIZES, FONT_FAMILIES } from '../../../constants/presets';
|
|
|
|
/*
|
|
* Regression: 5-item preset sets (RADIUS_PRESETS, SPACING_PRESETS,
|
|
* IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, and NavStylePanel's ad-hoc
|
|
* GAP_PRESETS) left a lone orphan button on its own row under the old
|
|
* fixed 4-column .preset-grid. PresetButtonGrid now derives a column
|
|
* count from the preset length instead.
|
|
*/
|
|
describe('defaultPresetGridColumns', () => {
|
|
it('gives 5-item sets their own single row (no orphan)', () => {
|
|
expect(defaultPresetGridColumns(RADIUS_PRESETS.length)).toBe(5);
|
|
expect(defaultPresetGridColumns(SPACING_PRESETS.length)).toBe(5);
|
|
expect(defaultPresetGridColumns(IMAGE_RADIUS_PRESETS.length)).toBe(5);
|
|
expect(defaultPresetGridColumns(FONT_WEIGHTS.length)).toBe(5);
|
|
expect(defaultPresetGridColumns(5)).toBe(5); // NavStylePanel's GAP_PRESETS
|
|
});
|
|
|
|
it('splits 6-item sets into two even rows of 3 (was 4+2 uneven)', () => {
|
|
expect(defaultPresetGridColumns(TEXT_SIZES.length)).toBe(3);
|
|
});
|
|
|
|
it('keeps the classic 4-column grid for sets that already divide evenly', () => {
|
|
expect(defaultPresetGridColumns(FONT_FAMILIES.length)).toBe(4); // 8 items
|
|
expect(defaultPresetGridColumns(4)).toBe(4);
|
|
expect(defaultPresetGridColumns(3)).toBe(4);
|
|
});
|
|
|
|
it('never leaves a single orphan on the final row for any count 1-12', () => {
|
|
for (let n = 1; n <= 12; n++) {
|
|
const cols = defaultPresetGridColumns(n);
|
|
const isLoneOrphan = n > cols && n % cols === 1;
|
|
expect(isLoneOrphan).toBe(false);
|
|
}
|
|
});
|
|
});
|