Kds 463 interval input with period duration picker#427
Draft
Kds 463 interval input with period duration picker#427
Conversation
🦋 Changeset detectedLatest commit: 57d85ce The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new KdsIntervalInput form field component to the KNIME Design System, providing an ISO interval input with a popover-based period/duration picker, plus Storybook documentation and migration guidance.
Changes:
- Added
KdsIntervalInputcomponent with popover picker UI and interval parsing/formatting logic. - Added Storybook stories (incl. play test, design comparator, and combinations) for the new component.
- Updated exports and migration documentation to include
KdsIntervalInput.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
packages/components/src/forms/inputs/KdsIntervalInput/types.ts |
Introduces public prop/model-related types for the interval input. |
packages/components/src/forms/inputs/KdsIntervalInput/KdsIntervalInput.vue |
Implements the interval input field + popover integration and state syncing. |
packages/components/src/forms/inputs/KdsIntervalInput/KdsIntervalInput.stories.ts |
Adds Storybook coverage and interaction test for the new input. |
packages/components/src/forms/inputs/KdsIntervalInput/intervalUtils.ts |
Adds helper utilities for key lists, bounds, defaults, and conversions. |
packages/components/src/forms/inputs/KdsIntervalInput/IntervalInputPopoverContent.vue |
Implements the popover UI for editing period/duration parts. |
packages/components/src/forms/inputs/KdsIntervalInput/index.ts |
Exports the new component, enums, and types. |
packages/components/src/forms/inputs/KdsIntervalInput/enums.ts |
Adds enums for format and directionality. |
packages/components/src/forms/inputs/index.ts |
Re-exports KdsIntervalInput from the inputs barrel. |
.github/agents/wac-to-kds-migrator.md |
Attempts to add a migration mapping entry for the interval input. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new KdsIntervalInput form field to @knime/kds-components, providing an ISO interval text input backed by a period/duration popover picker, and updates migration documentation to map IntervalInput to KdsIntervalInput.
Changes:
- Introduces
KdsIntervalInputcomponent, popover content, enums, and interval conversion helpers. - Adds Storybook stories (including interaction test + design comparator/all combinations).
- Exports the new input from
forms/inputsand updates migration mapping documentation.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
packages/components/src/forms/inputs/KdsIntervalInput/types.ts |
Adds public prop/type definitions for the new input. |
packages/components/src/forms/inputs/KdsIntervalInput/KdsIntervalInput.vue |
Implements the input field + popover integration and state syncing. |
packages/components/src/forms/inputs/KdsIntervalInput/KdsIntervalInput.stories.ts |
Adds Storybook docs, interaction test, and visual coverage stories. |
packages/components/src/forms/inputs/KdsIntervalInput/intervalUtils.ts |
Adds default popover model, bounds, and conversion helpers. |
packages/components/src/forms/inputs/KdsIntervalInput/IntervalInputPopoverContent.vue |
Implements the popover UI for editing period/duration parts. |
packages/components/src/forms/inputs/KdsIntervalInput/index.ts |
Exports component/enums/types for public consumption. |
packages/components/src/forms/inputs/KdsIntervalInput/enums.ts |
Adds format/directionality enums. |
packages/components/src/forms/inputs/index.ts |
Re-exports KdsIntervalInput from the inputs barrel. |
.github/agents/wac-to-kds-migrator.md |
Updates migration mapping table (currently contains unresolved conflict markers). |
jschroeter
requested changes
Apr 16, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new KdsIntervalInput form field component to the KNIME Design System component library, intended to accept ISO 8601 interval strings and provide a period/duration picker in a popover.
Changes:
- Export
IntervalInputfrom theforms/inputspublic entrypoint. - Introduce
KdsIntervalInputcomponent + supporting enums/types/utilities and popover content. - Add Storybook stories and a Changeset entry for publishing.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/forms/inputs/index.ts | Re-exports the new IntervalInput module from the inputs package. |
| packages/components/src/forms/inputs/IntervalInput/types.ts | Defines public prop/types for KdsIntervalInput and the popover model. |
| packages/components/src/forms/inputs/IntervalInput/intervalUtils.ts | Adds helper constants and conversion utilities between popover model and interval utils types. |
| packages/components/src/forms/inputs/IntervalInput/index.ts | Public exports for the component, enums, and types. |
| packages/components/src/forms/inputs/IntervalInput/enums.ts | Defines supported input formats and directionality enums. |
| packages/components/src/forms/inputs/IntervalInput/KdsIntervalInput.vue | Implements the input field, model syncing, and popover integration. |
| packages/components/src/forms/inputs/IntervalInput/KdsIntervalInput.stories.ts | Adds Storybook stories + play test coverage for basic interactions. |
| packages/components/src/forms/inputs/IntervalInput/IntervalInputPopoverContent.vue | Implements the popover UI for editing period/duration components. |
| .changeset/lazy-wolves-knock.md | Declares a patch release for adding the new component. |
Comment on lines
+278
to
+285
| <BaseFormFieldWrapper | ||
| class="kds-interval-field" | ||
| v-bind="props" | ||
| :error="isInputError" | ||
| :validating="isValidatingState" | ||
| :preserve-sub-text-space="preserveSubTextSpace" | ||
| :sub-text="effectiveSubText" | ||
| > |
Comment on lines
+52
to
+67
| export const defaultPopoverModel: KdsIntervalPopoverModel = { | ||
| periodPart: { | ||
| negative: false, | ||
| years: 0, | ||
| months: 0, | ||
| weeks: 0, | ||
| days: 0, | ||
| }, | ||
| durationPart: { | ||
| negative: false, | ||
| hours: 0, | ||
| minutes: 0, | ||
| seconds: 0, | ||
| milliseconds: 0, | ||
| }, | ||
| }; |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new KdsIntervalInput form field component to the KNIME Design System, enabling ISO 8601 interval input with a popover-based period/duration picker, and wires it into public exports + release notes.
Changes:
- Export
IntervalInputfrompackages/components/src/forms/inputs/index.tsso it becomes available via the package’s public API. - Introduce the
IntervalInputcomponent implementation (enums/types/helpers + popover content) and Storybook coverage. - Add a changeset for
@knime/kds-componentsdocumenting the new component.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/forms/inputs/index.ts | Re-exports the new IntervalInput module from the inputs barrel. |
| packages/components/src/forms/inputs/IntervalInput/types.ts | Defines public prop/types for KdsIntervalInput (including popover-related types). |
| packages/components/src/forms/inputs/IntervalInput/intervalUtils.ts | Adds helper utilities for default model creation, bounds, and conversion between picker model and utils types. |
| packages/components/src/forms/inputs/IntervalInput/index.ts | Exports the component, enums, and selected types from the IntervalInput module. |
| packages/components/src/forms/inputs/IntervalInput/enums.ts | Introduces enums for input format and directionality. |
| packages/components/src/forms/inputs/IntervalInput/KdsIntervalInput.vue | Implements the input field with validation, formatting, and popover integration. |
| packages/components/src/forms/inputs/IntervalInput/IntervalInputPopoverContent.vue | Implements the popover UI (mode switch, direction switch, numeric fields) and emits commits to parent. |
| packages/components/src/forms/inputs/IntervalInput/KdsIntervalInput.stories.ts | Adds Storybook stories and a default play test for the new component. |
| .changeset/lazy-wolves-knock.md | Announces the new KdsIntervalInput in a patch changeset. |
Comment on lines
+108
to
+124
| const toggle = canvas.getByRole("button", { name: openPickerAriaLabel }); | ||
|
|
||
| await user.click(toggle); | ||
| await expect( | ||
| canvas.getByRole("spinbutton", { name: "Year" }), | ||
| ).toBeInTheDocument(); | ||
|
|
||
| await user.click(toggle); | ||
| await expect( | ||
| canvas.queryByRole("spinbutton", { name: "Year" }), | ||
| ).not.toBeInTheDocument(); | ||
|
|
||
| toggle.focus(); | ||
| await user.keyboard("{Enter}"); | ||
| await expect( | ||
| canvas.getByRole("spinbutton", { name: "Year" }), | ||
| ).toBeInTheDocument(); |
Comment on lines
+18
to
+29
| const meta: Meta<typeof KdsIntervalInput> = { | ||
| title: "Form Fields/IntervalInput", | ||
| component: KdsIntervalInput, | ||
| tags: ["autodocs"], | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: | ||
| "Input field for ISO interval values with an advanced period/duration popover picker.", | ||
| }, | ||
| }, | ||
| }, |
Comment on lines
+94
to
+99
| const negative = value === kdsIntervalDirectionality.DESCENDING; | ||
| interval.value.periodPart.negative = negative; | ||
| interval.value.durationPart.negative = negative; | ||
| }, | ||
| }); | ||
|
|
Comment on lines
+2
to
+14
| export { | ||
| kdsIntervalDirectionality, | ||
| kdsIntervalDirectionalities, | ||
| kdsIntervalInputFormat, | ||
| kdsIntervalInputFormats, | ||
| } from "./enums"; | ||
| export type { | ||
| KdsIntervalDirectionality, | ||
| KdsIntervalInputFormat, | ||
| KdsIntervalInputProps, | ||
| KdsIntervalInputUsedFormat, | ||
| KdsIntervalPopoverModel, | ||
| } from "./types"; |
jschroeter
reviewed
Apr 17, 2026
jschroeter
reviewed
Apr 17, 2026
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new KdsIntervalInput form-field component to @knime/kds-components to support ISO 8601 interval entry with a period/duration popover picker, and wires it into public exports + Storybook documentation.
Changes:
- Introduce
KdsIntervalInputwith popover editing (date/time modes, optional descending intervals). - Add Storybook stories for the input and its popover content, plus a changeset for release.
- Export
IntervalInputfrom the inputs barrel.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/forms/inputs/index.ts | Exposes IntervalInput from the inputs barrel. |
| packages/components/src/forms/inputs/IntervalInput/types.ts | Adds public prop + model types for KdsIntervalInput. |
| packages/components/src/forms/inputs/IntervalInput/intervalUtils.ts | Adds helpers for popover model defaults, bounds, and conversions. |
| packages/components/src/forms/inputs/IntervalInput/index.ts | Component barrel export + enums/types export surface. |
| packages/components/src/forms/inputs/IntervalInput/enums.ts | Defines supported formats and directionality enums. |
| packages/components/src/forms/inputs/IntervalInput/KdsIntervalInput.vue | Implements the input + popover integration and model syncing. |
| packages/components/src/forms/inputs/IntervalInput/KdsIntervalInput.stories.ts | Adds component stories and play tests. |
| packages/components/src/forms/inputs/IntervalInput/IntervalInputPopoverContent.vue | Implements popover UI for editing interval parts. |
| packages/components/src/forms/inputs/IntervalInput/IntervalInputPopover.stories.ts | Adds stories/tests for the popover content. |
| packages/components/src/forms/inputs/DateTimeFormatInput/KdsDateTimeFormatInput.stories.ts | Minor key rename inside designsToCompare. |
| .changeset/lazy-wolves-knock.md | Declares a patch release for adding KdsIntervalInput. |
Comment on lines
+52
to
+56
|
|
||
| return { | ||
| type: "DATE" as const, | ||
| interval: { ...createDefaultPopoverModel().periodPart }, | ||
| }; |
Comment on lines
+83
to
+88
| if (!props.allowDescending) { | ||
| return kdsIntervalDirectionality.ASCENDING; | ||
| } | ||
| const isNegative = isDateMode.value | ||
| ? interval.value.periodPart.negative | ||
| : interval.value.durationPart.negative; |
| margin-right: var(--kds-spacing-container-0-37x); | ||
| } | ||
|
|
||
| .kds-interval-popover-actions { |
Comment on lines
+22
to
+29
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: | ||
| "Input field for ISO interval values with an advanced period/duration popover picker.", | ||
| }, | ||
| }, | ||
| }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.