Show the story sort headings as chips on narrow screens

2026-10-03 11:53:47 +02:00
parent 60424e8e74
commit d28f69d93a
2 changed files with 54 additions and 3 deletions
@@ -114,6 +114,30 @@ test('sortable headings show direction and remain usable above story cards on na
  assert.doesNotMatch(css, /\.stories-table thead\s*\{[^}]*clip-path/);
 });

+test('on narrow screens the headings are sort chips, and only the sorted chip is tinted with an arrow', () => {
+  const start = css.indexOf('@media (max-width: 600px)', css.indexOf('.stories-table th button'));
+  const mobile = css.slice(start);
+  assert.equal(declarations('.stories-table thead tr', mobile)['flex-wrap'], 'wrap');
+  const caption = declarations('.stories-table thead tr::before', mobile);
+  assert.equal(caption.content, "'Sort by'");
+  assert.equal(caption['flex-basis'], '100%');
+  const chip = declarations('.stories-table th button', mobile);
+  assert.equal(chip['border-radius'], '999px');
+  assert.equal(chip['inline-size'], 'auto');
+  assert.equal(chip.padding, '3px 10px');
+  assert.equal(chip['font-size'], 'var(--text-sm)');
+  assert.equal(chip.background, 'var(--surface)');
+  assert.equal(declarations(".stories-table th[aria-sort='none'] button::after", mobile).display, 'none');
+  const sorted = declarations(".stories-table th:not([aria-sort='none']) button", mobile);
+  assert.equal(sorted.background, 'var(--info-bg)');
+  assert.equal(sorted.color, 'var(--info)');
+  assert.equal(sorted['border-color'], undefined, 'The sorted chip keeps the soft border');
+  // The wide layout keeps plain headings.
+  const wide = css.slice(0, start);
+  assert.doesNotMatch(wide, /\.stories-table thead tr::before/);
+  assert.equal(declarations('.stories-table th button', wide).border, '0');
+});
+
 test('sortable headings fill the column with one clickable highlight without shifting layout', () => {
  assert.equal(declarations('.stories-table th').padding, '0');
  const button = declarations('.stories-table th button');