Skip to content

feat: add PolicySettings presentation component for time-off policy creation#1551

Open
krisxcrash wants to merge 1 commit intomainfrom
kw/feat/sdk-577-policy-settings-presentation
Open

feat: add PolicySettings presentation component for time-off policy creation#1551
krisxcrash wants to merge 1 commit intomainfrom
kw/feat/sdk-577-policy-settings-presentation

Conversation

@krisxcrash
Copy link
Copy Markdown
Contributor

@krisxcrash krisxcrash commented Apr 14, 2026

Summary

  • Adds PolicySettingsPresentation component for the time-off policy settings screen (SDK-577)
  • Implements toggle-controlled number input fields for accrual maximum, balance maximum, carry over limit, waiting period, and payout on dismissal
  • Includes SCSS module with CSS grid layout, scoped theme variable overrides, and responsive toggle alignment
  • Adds i18n translations matching Figma design specs
  • Includes Storybook stories for hours_worked, fixed, and edit mode variants
  • Exports new component and types from the UNSTABLE_TimeOff barrel

Test plan

  • Verify Storybook renders correctly for all three story variants (HoursWorkedVariant, FixedVariant, EditMode)
  • Confirm toggle interactions enable/disable corresponding input fields
  • Verify form submission passes correct data via onContinue callback
  • Visual comparison against Figma design for layout, spacing, and colors
  • Unit tests will follow in a separate PR

Resolves SDK-577 (presentation layer only — wiring/functionality is a follow-up)

…reation

Implements the PolicySettings screen UI including:
- Toggle-controlled number input fields for accrual maximum, balance maximum,
  carry over limit, and waiting period settings
- Payout on dismissal toggle
- CSS grid layout with responsive toggle alignment
- i18n translations matching Figma design specs
- Storybook stories for hours_worked, fixed, and edit mode variants

Part of SDK-577. Follow-up PR will add unit tests.
Comment on lines +15 to +17
.settingField :global(.react-aria-NumberField) {
max-width: toRem(200);
}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: why do we need this aria numberfield style selector? NumberField should already take up the width of the container

additionally, this style would break for component adapters if we are relying on setting the style on the react aria input since partners may not be using that.

all field components should just be assumed to take up the width of the container and then we should be able to size the container for layout

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants