feat(2/5): add SelectEmployees presentational component (SDK-563) by jeffredodd · Pull Request #1613 · Gusto/embedded-react-sdk

jeffredodd · 2026-04-27T17:13:26Z

Summary

Add SelectEmployeesPresentation — shared stateless UI consumed by both the time-off and holiday container components
Renders employee table with search, multi-select, optional starting-balance column, optional reassignment warning, and Back/Continue actions
Add translations (Company.TimeOff.SelectEmployees)
Storybook stories: default, partial/full selection, search filtered, empty results, with/without reassignment warning, pagination

Depends on: #1611

Test plan

npm run test -- --run src/components/UNSTABLE_TimeOff/TimeOffManagement/SelectEmployees/SelectEmployeesPresentation
npm run storybook → Domain/TimeOff/SelectEmployees — all 7 stories render correctly

🤖 Generated with Claude Code

serikjensen · 2026-04-29T20:11:20Z

+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { useI18n } from '@/i18n'
+
+export function SelectEmployeesPresentation({


Nit: Does this really need to be called "Presentation"? Seems like presentation is usually the counterpart to a SelectEmployees but in this case that's not here since this is just a UI component?

serikjensen · 2026-04-29T20:12:09Z

+        pagination={pagination}
+        additionalColumns={[
+          {
+            key: 'department' as keyof EmployeeItem,


Nit: Can we edit the EmployeeItems we are getting instead of needing to cast these?

Copilot

Pull request overview

Adds the new Time Off “Select Employees” presentational screen and supporting infrastructure (translations + table/input enhancements) so both Time-Off and Holiday flows can reuse the same stateless UI.

Changes:

Introduces SelectEmployees presentational component with optional reassignment warning, optional starting-balance column, and Back/Continue actions.
Extends shared EmployeeTable to support better a11y labeling for per-row inputs and adjusts search behavior to use a type="search" input.
Adds i18n namespace/types for Company.TimeOff.SelectEmployees and Storybook/test coverage for the new component.

Reviewed changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/types/i18next.d.ts	Adds TS typing for the new `Company.TimeOff.SelectEmployees` translation namespace.
src/i18n/en/Company.TimeOff.SelectEmployees.json	Adds English strings used by the new Select Employees screen.
src/components/UNSTABLE_TimeOff/shared/EmployeeTable/EmployeeTableTypes.ts	Requires `uuid` on table items to support stable per-row IDs for labeling.
src/components/UNSTABLE_TimeOff/shared/EmployeeTable/EmployeeTable.tsx	Adds per-row name `id` hooks for `aria-labelledby` and updates search handling.
src/components/UNSTABLE_TimeOff/shared/EmployeeTable/EmployeeTable.test.tsx	Updates tests for the revised search clear behavior.
src/components/UNSTABLE_TimeOff/shared/EmployeeTable/EmployeeTable.stories.tsx	Adds a “SearchActive” story for the new search behavior.
src/components/UNSTABLE_TimeOff/shared/EmployeeTable/EmployeeTable.module.scss	Removes styles for the removed explicit clear button.
src/components/UNSTABLE_TimeOff/TimeOffManagement/SelectEmployees/SelectEmployeesTypes.ts	Defines props/types for the new presentational component (including optional balances/pagination).
src/components/UNSTABLE_TimeOff/TimeOffManagement/SelectEmployees/SelectEmployees.tsx	Implements the Select Employees presentational layout and table wiring.
src/components/UNSTABLE_TimeOff/TimeOffManagement/SelectEmployees/SelectEmployees.test.tsx	Adds unit tests for screen rendering, selection, search, and pagination.
src/components/UNSTABLE_TimeOff/TimeOffManagement/SelectEmployees/SelectEmployees.stories.tsx	Adds Storybook scenarios (selection states, warning, pagination, filtering, empty).
src/components/Common/UI/TextInput/TextInputTypes.ts	Adds `aria-labelledby` passthrough typing for TextInput.
src/components/Common/UI/TextInput/TextInput.tsx	Wires `aria-labelledby` down to the underlying Input.
src/components/Common/UI/Input/InputTypes.ts	Adds `aria-labelledby` passthrough typing for Input.
e2e/package-lock.json	Adds an e2e lockfile that currently references a missing local tarball dependency.
docs/component-adapter/component-inventory.md	Documents `aria-labelledby` as a supported TextInput prop.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+        <Text variant="supporting">
+          {showReassignmentWarning ? t('description') : t('holidayDescription')}
+        </Text>


+  showReassignmentWarning: boolean
+  balances?: Record<string, string>
+  onBalanceChange?: (uuid: string, value: string) => void
+  pagination?: PaginationControlProps


+    "": {
+      "name": "embedded-react-sdk-e2e",
+      "dependencies": {
+        "@gusto/embedded-react-sdk": "file:gusto-embedded-react-sdk-0.36.0.tgz"


+import { defaultComponents } from '@/contexts/ComponentAdapter/adapters/defaultComponentAdapter'
+import { mockUseContainerBreakpoints } from '@/test/setup'
+
+vi.mock('@/i18n/I18n', () => ({


…arch - Add min, max, maxLength passthrough props to Input and TextInput - Add search input with inline clear button to EmployeeTable - Add isFetching loading state and pagination support to EmployeeTable Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Removes the absolutely-positioned custom clear button and its SCSS. The browser's built-in search cancel button is now used, which works naturally with component adapter overrides since type is a standard HTML attribute forwarded by any TextInput implementation. Bridges native clear (fires onChange('')) to onSearchClear so pagination resets in consumers remain intact. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Shared stateless UI consumed by both the time-off and holiday container components. Renders the employee table with search, multi-select, optional starting-balance column, reassignment warning, and Back/Continue actions. Storybook stories cover: default, partial/full selection, search filtered, empty results, with/without reassignment warning, pagination. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…emove redundant casts

Addresses Copilot review feedback: balances was optional even when onBalanceChange was provided, which would cause balance inputs to appear stuck at empty if a caller forgot to pass balances. Default to {} in destructuring to make the controlled contract explicit.

jeffredodd mentioned this pull request Apr 27, 2026

feat(3/5): add SelectEmployees container for time-off/sick policies (SDK-565) #1614

Merged

1 task

jeffredodd changed the title ~~feat: add SelectEmployees presentational component (SDK-563)~~ feat(2/5): add SelectEmployees presentational component (SDK-563) Apr 27, 2026

jeffredodd force-pushed the feat/select-employees-presentation branch 3 times, most recently from 1bd2878 to 16ed8ed Compare April 27, 2026 21:55

jeffredodd marked this pull request as ready for review April 27, 2026 22:56

jeffredodd requested review from dmortal, hukid, krisxcrash and serikjensen as code owners April 27, 2026 22:56

jeffredodd force-pushed the feat/text-input-employee-table-search branch from 1e664dd to d906aa0 Compare April 28, 2026 19:22

Base automatically changed from feat/text-input-employee-table-search to main April 28, 2026 19:24

serikjensen approved these changes Apr 29, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings April 29, 2026 21:06

Copilot started reviewing on behalf of jeffredodd April 29, 2026 21:06 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

jeffredodd force-pushed the feat/select-employees-presentation branch from 2118eeb to f503451 Compare April 29, 2026 21:14

jeffredodd and others added 9 commits April 29, 2026 14:19

fix: correct endpoint inventory to reflect only PR 1 scope

059a59e

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: apply prettier formatting to EmployeeTable stories

a24848b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: apply prettier formatting to SelectEmployees presentation files

856e8f4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: update SelectEmployeesPresentation test for native search clear

0649655

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor: rename SelectEmployeesPresentation to SelectEmployees and r…

44d6258

…emove redundant casts

fix: apply prettier formatting and update i18next.d.ts from main

0826592

jeffredodd force-pushed the feat/select-employees-presentation branch from 24dcbf6 to 0826592 Compare April 29, 2026 21:22

jeffredodd merged commit d8bd5d4 into main Apr 29, 2026
12 checks passed

jeffredodd deleted the feat/select-employees-presentation branch April 29, 2026 21:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(2/5): add SelectEmployees presentational component (SDK-563)#1613

feat(2/5): add SelectEmployees presentational component (SDK-563)#1613
jeffredodd merged 10 commits intomainfrom
feat/select-employees-presentation

jeffredodd commented Apr 27, 2026

Uh oh!

serikjensen Apr 29, 2026

Uh oh!

serikjensen Apr 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

jeffredodd commented Apr 27, 2026

Summary

Test plan

Uh oh!

serikjensen Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

serikjensen Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants