Skip to content

feat: add the components Strata's foundation needs - #6

Merged
AmrMsCLL merged 1 commit into
mainfrom
feat/strata-components
Oct 1, 2026
Merged

AmrMsCLL merged 1 commit into
mainfrom
feat/strata-components

Conversation

@AmrMsCLL

@AmrMsCLL AmrMsCLL commented Oct 1, 2026

Copy link
Copy Markdown
Member

What changed

New components for Strata's phase 2 foundation:

  • Tabs: route tabs using the existing tab-link style, with aria-current on the active tab.
  • TagChip: a coloured chip from a fixed palette (tagColors: gray, red, orange, yellow, green, teal, blue, purple, pink). It can be a link or a plain label, with an optional named remove button.
  • Avatar: the initial, in two sizes, with an optional presence dot that is announced to screen readers.
  • CodeInput: a one-time-code field (autocomplete="one-time-code", numeric input mode, length and pattern), built on TextField.
  • Sidebar: labelled sections of links with icons and capped badges.
  • AppShell: a new optional sidebar prop. The sidebar sticks beside the page from md up.
  • CommandPalette:
    • a modal combobox with grouped results;
    • arrow keys that wrap across groups, Enter runs the active result, Escape closes it, and focus returns to whatever opened it;
    • a bottom sheet on phones;
    • useCommandShortcut opens it with Ctrl+K or Cmd+K.
  • The search icon is added.

Verification

  • npm run lint, npm test (7 files, 33 tests) and npm run build pass. The build includes the type-check and the preview.
  • New specs cover every component's ARIA and keyboard behaviour, plus AppShell with a sidebar.
  • In the local preview, I checked the tabs and tag chips by eye. For the avatars, code input, sidebar and command palette, I checked their computed sizes, colours and active states.

Checklist

  • The change is focused and contains no credentials or generated secrets.
  • Documentation and tests were updated when behavior changed.
  • Deployment or rollback considerations are described when relevant. Nothing deploys; release 0.2.0 follows as its own PR.

Adds Tabs, TagChip with a fixed set of tag colours, Avatar with a presence dot, CodeInput for
one-time codes, Sidebar, and CommandPalette with a Ctrl+K and Cmd+K shortcut hook. AppShell
takes an optional sidebar that sits beside the page on wider screens. The search icon joins the
icon set, and the preview shows every new component.
@github-actions github-actions Bot added the size/xl Over 600 changed lines, excluding lockfiles label Oct 1, 2026
@AmrMsCLL
AmrMsCLL merged commit c5f14e9 into main Oct 1, 2026
4 checks passed
@AmrMsCLL
AmrMsCLL deleted the feat/strata-components branch October 1, 2026 20:16
@AmrMsCLL AmrMsCLL mentioned this pull request Oct 1, 2026
3 tasks done
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size/xl Over 600 changed lines, excluding lockfiles

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant