Skip to content

feat: legg til NumberInput med stepper#5933

Merged
lmfaole merged 1 commit intomainfrom
minor/number-input
Apr 16, 2026
Merged

feat: legg til NumberInput med stepper#5933
lmfaole merged 1 commit intomainfrom
minor/number-input

Conversation

@lmfaole
Copy link
Copy Markdown
Contributor

@lmfaole lmfaole commented Apr 9, 2026

💬 Endringer

  • Legger til NumberInput i Jøkul med støtte for native input type="number" og valgfri stepper.
  • Eksponerer relevante props på komponenten, inkludert data-testautoid, align og width.
  • Legger til styling, Storybook-stories og et eget eksempel under Komponenter/NumberInput/Eksempler.
  • Legger til enhetstester og integrasjonstester/snapshots for både vanlig input og stepper-variant.

🩹 Løser følgende issues

  • Ingen koblede issues.

@fremtind-bot
Copy link
Copy Markdown
Collaborator

fremtind-bot commented Apr 9, 2026

Forhåndsvisning: https://jokul.fremtind.no/preview/minor/number-input/
🔍 Commit: 4e8b5c1

Forhåndsvisningen blir tilgjengelig innen et par minutter. Den fjernes automatisk når pull requesten lukkes.

fremtind-bot added a commit that referenced this pull request Apr 9, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Denne PR-en introduserer en ny NumberInput-komponent i @fremtind/jokul, basert på native input type="number" og med en valgfri stepper-variant (egne +/- knapper som bruker native stepping).

Changes:

  • Lagt til ny NumberInput React-komponent med props, styles, Storybook-stories og dev-eksempel.
  • Lagt til en stepper-modus som bruker stepUp/stepDown og trigger React onChange via input-event.
  • Lagt til unit/integrasjonstester (Vitest + Playwright) og snapshots, samt package exports og changeset.

Reviewed changes

Copilot reviewed 14 out of 22 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/jokul/src/styles/styles.scss Inkluderer NumberInput-styles i samlet styles-entry.
packages/jokul/src/components/number-input/types.ts Definerer NumberInputProps inkl. stepper, align, width.
packages/jokul/src/components/number-input/styles/number-input.scss Ny komponentstyling, inkl. invalid-state og stepper-layout.
packages/jokul/src/components/number-input/styles/_index.scss Styles-entry med avhengigheter til button/text-input styles.
packages/jokul/src/components/number-input/stories/NumberInputExamples.stories.tsx Storybook “skjembilde”-eksempel + play test.
packages/jokul/src/components/number-input/stories/NumberInput.stories.tsx Storybook hovedstories (inkl. stepper og play tests).
packages/jokul/src/components/number-input/NumberInput.tsx Implementasjon av NumberInput med optional stepper-knapper.
packages/jokul/src/components/number-input/NumberInput.test.tsx Vitest unit/a11y tester for komponenten.
packages/jokul/src/components/number-input/integration/number-input.spec.ts Playwright integrasjonstester for komponenten.
packages/jokul/src/components/number-input/integration/screenshots/renders-correctly-chromium-default.png Ny/oppdatert snapshot (light, default).
packages/jokul/src/components/number-input/integration/screenshots/renders-correctly-chromium-default-dark.png Ny/oppdatert snapshot (dark, default).
packages/jokul/src/components/number-input/integration/screenshots/renders-correctly-chromium-compact-light.png Ny/oppdatert snapshot (light, compact).
packages/jokul/src/components/number-input/integration/screenshots/renders-correctly-chromium-compact-dark.png Ny/oppdatert snapshot (dark, compact).
packages/jokul/src/components/number-input/integration/screenshots/renders-allthethings-correctly-chromium-compact-light.png Ny/oppdatert snapshot (light, allthethings).
packages/jokul/src/components/number-input/integration/screenshots/renders-allthethings-correctly-chromium-compact-dark.png Ny/oppdatert snapshot (dark, allthethings).
packages/jokul/src/components/number-input/index.ts Ny public entry for subpath export.
packages/jokul/src/components/number-input/development/NumberInputExample.tsx DevExample for lokal utvikling (knobs + summary).
packages/jokul/src/components/number-input/development/Example.tsx Kobler NumberInput inn i dev-example runner.
packages/jokul/package.json Legger til subpath exports for ./number-input og styles.
.changeset/little-moose-think.md Changeset (minor) for ny komponent.

Comment thread packages/jokul/src/components/number-input/NumberInput.tsx
Comment thread packages/jokul/src/components/number-input/styles/number-input.scss
@lmfaole lmfaole force-pushed the minor/number-input branch from 677b966 to f46270d Compare April 9, 2026 09:59
Copilot AI review requested due to automatic review settings April 9, 2026 10:01
@lmfaole lmfaole force-pushed the minor/number-input branch from f46270d to 6ec2db4 Compare April 9, 2026 10:01
fremtind-bot added a commit that referenced this pull request Apr 9, 2026
@fremtind-bot
Copy link
Copy Markdown
Collaborator

fremtind-bot commented Apr 9, 2026

Warning

@lmfaole, Figma Code Connect feilet.

Warning

@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.
[!WARNING]
@lmfaole, Figma Code Connect feilet.

fremtind-bot added a commit that referenced this pull request Apr 9, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 14 out of 22 changed files in this pull request and generated 3 comments.

Comment thread packages/jokul/src/components/number-input/NumberInput.tsx Outdated
@lmfaole lmfaole force-pushed the minor/number-input branch from 6ec2db4 to c32e15d Compare April 9, 2026 11:11
Copilot AI review requested due to automatic review settings April 9, 2026 11:12
@lmfaole lmfaole force-pushed the minor/number-input branch from c32e15d to 4db5c61 Compare April 9, 2026 11:12
fremtind-bot added a commit that referenced this pull request Apr 9, 2026
fremtind-bot added a commit that referenced this pull request Apr 9, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

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

Comment thread packages/jokul/src/components/number-input/types.ts Outdated
Comment thread packages/jokul/src/components/number-input/styles/number-input.scss Outdated
@lmfaole lmfaole force-pushed the minor/number-input branch from 4db5c61 to 6be441a Compare April 9, 2026 11:31
fremtind-bot added a commit that referenced this pull request Apr 9, 2026
Copilot AI review requested due to automatic review settings April 10, 2026 07:16
@lmfaole lmfaole force-pushed the minor/number-input branch from 6be441a to 88056f6 Compare April 10, 2026 07:16
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 14 out of 22 changed files in this pull request and generated 2 comments.

Comment thread packages/jokul/src/components/number-input/stories/NumberInput.stories.tsx Outdated
@lmfaole lmfaole force-pushed the minor/number-input branch 2 times, most recently from e4f05fb to c741551 Compare April 16, 2026 10:18
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
@lmfaole lmfaole force-pushed the minor/number-input branch from c741551 to b5fc997 Compare April 16, 2026 10:21
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
Copilot AI review requested due to automatic review settings April 16, 2026 10:36
@lmfaole lmfaole force-pushed the minor/number-input branch from b5fc997 to 2f6db45 Compare April 16, 2026 10:36
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 14 out of 22 changed files in this pull request and generated 1 comment.

Comment thread packages/jokul/src/components/number-input/NumberInput.tsx Outdated
@lmfaole lmfaole force-pushed the minor/number-input branch from 2f6db45 to c78efcc Compare April 16, 2026 10:43
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
Copilot AI review requested due to automatic review settings April 16, 2026 10:55
@lmfaole lmfaole force-pushed the minor/number-input branch from c78efcc to ac8b1b1 Compare April 16, 2026 10:55
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
Legger til NumberInput, en skjemakomponent for numeriske verdier som
bruker native input type="number" med Jøkul-styling og InputGroup-støtte.

Komponenten støtter en stepper-variant med knapper på hver side av feltet
for å øke og senke verdien med nettleserens native stepping, slik at min,
max og step respekteres. Stepper-knappene deaktiveres automatisk når
verdien når min eller max.
@lmfaole lmfaole force-pushed the minor/number-input branch from ac8b1b1 to bdf5b5e Compare April 16, 2026 10:58
fremtind-bot added a commit that referenced this pull request Apr 16, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 14 out of 22 changed files in this pull request and generated 2 comments.

Comment thread packages/jokul/src/components/number-input/types.ts
Comment thread packages/jokul/src/components/number-input/NumberInput.tsx
@lmfaole lmfaole enabled auto-merge April 16, 2026 12:34
@lmfaole lmfaole added this pull request to the merge queue Apr 16, 2026
Merged via the queue into main with commit c86e3dc Apr 16, 2026
9 checks passed
@lmfaole lmfaole deleted the minor/number-input branch April 16, 2026 12:38
github-actions bot pushed a commit that referenced this pull request Apr 16, 2026
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.

5 participants