-
Notifications
You must be signed in to change notification settings - Fork 268
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The current number editor in Settings > Preferences works, but it has a few drawbacks: - doesn't match current design, and would need updating to light mode. - periodically has some odd 'resets' to a previous number. (this isn't just the input - figured out later this is #7142) - has two error modes - underline for below minimum, icon to the left for invalid value. - after invalid entry (e.g. below minimum), incrementing does a string add vs numerical. - not easily reusable for editing numbers in other places. This creates a NumberInput component that is just an Input with +/- buttons. Key input is restricted to numbers, and increment/decrement are used to disable +/- appropriately. If the user manually enters a number out of bounds, the Input's error is used to display a short warning. Input required some minor changes to support this: - allow inputClass in order to center numbers in the textbox. - passthrough of key events, in order to block non-numerical entry. - boolean to block showing the error in a separate span. Although this is the design for inputs, it felt really out of place in preferences. - reduce padding slightly - it didn't matter in large Inputs, but number inputs tend to be smaller and extraneous padding was obvious. New component is used in Settings > Preferences and max retry count for running an image. Tests added. NumberItem test had to be changed since only numerical inputs work now. Another part of #3234. Signed-off-by: Tim deBoer <git@tdeboer.ca>
- Loading branch information
1 parent
652bb8d
commit 6a36ee4
Showing
7 changed files
with
275 additions
and
140 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| /********************************************************************** | ||
| * Copyright (C) 2024 Red Hat, Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| ***********************************************************************/ | ||
|
|
||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
|
|
||
| import '@testing-library/jest-dom/vitest'; | ||
|
|
||
| import { render, screen } from '@testing-library/svelte'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { expect, test } from 'vitest'; | ||
|
|
||
| import NumberInput from './NumberInput.svelte'; | ||
|
|
||
| function renderInput(name: string, value: number, disabled?: boolean, minimum?: number, maximum?: number): void { | ||
| render(NumberInput, { | ||
| name: name, | ||
| value: value, | ||
| disabled: disabled, | ||
| minimum: minimum, | ||
| maximum: maximum, | ||
| }); | ||
| } | ||
|
|
||
| test('Expect basic styling', async () => { | ||
| renderInput('test', 5); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| expect(input).toBeInTheDocument(); | ||
|
|
||
| const decrement = screen.getByLabelText('decrement'); | ||
| expect(decrement).toBeInTheDocument(); | ||
| expect(decrement).toHaveClass('pr-0.5'); | ||
| expect(decrement).toHaveClass('text-[var(--pd-input-field-stroke)]'); | ||
| expect(decrement).toHaveClass('group-hover:text-[var(--pd-input-field-hover-stroke)]'); | ||
|
|
||
| const increment = screen.getByLabelText('increment'); | ||
| expect(increment).toBeInTheDocument(); | ||
| expect(increment).toHaveClass('pl-0.5'); | ||
| expect(increment).toHaveClass('text-[var(--pd-input-field-stroke)]'); | ||
| expect(increment).toHaveClass('group-hover:text-[var(--pd-input-field-hover-stroke)]'); | ||
| }); | ||
|
|
||
| test('Expect disabled styling', async () => { | ||
| renderInput('test', 5, true); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| expect(input).toBeInTheDocument(); | ||
|
|
||
| const decrement = screen.getByLabelText('decrement'); | ||
| expect(decrement).toBeInTheDocument(); | ||
| expect(decrement).toHaveClass('pr-0.5'); | ||
| expect(decrement).toHaveClass('text-[var(--pd-input-field-disabled-text)]'); | ||
|
|
||
| const increment = screen.getByLabelText('increment'); | ||
| expect(increment).toBeInTheDocument(); | ||
| expect(increment).toHaveClass('pl-0.5'); | ||
| expect(increment).toHaveClass('text-[var(--pd-input-field-disabled-text)]'); | ||
| }); | ||
|
|
||
| test('Expect decrement works', async () => { | ||
| renderInput('test', 5); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveValue('5'); | ||
|
|
||
| const decrement = screen.getByLabelText('decrement'); | ||
| expect(decrement).toBeInTheDocument(); | ||
|
|
||
| await userEvent.click(decrement); | ||
|
|
||
| expect(input).toHaveValue('4'); | ||
| }); | ||
|
|
||
| test('Expect minimum value works', async () => { | ||
| renderInput('test', 11, false, 10, 100); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveValue('11'); | ||
|
|
||
| const decrement = screen.getByLabelText('decrement'); | ||
| expect(decrement).toBeInTheDocument(); | ||
| expect(decrement).toBeEnabled(); | ||
|
|
||
| await userEvent.click(decrement); | ||
|
|
||
| expect(decrement).toBeDisabled(); | ||
| }); | ||
|
|
||
| test('Expect increment works', async () => { | ||
| renderInput('test', 5); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveValue('5'); | ||
|
|
||
| const increment = screen.getByLabelText('increment'); | ||
| expect(increment).toBeInTheDocument(); | ||
|
|
||
| await userEvent.click(increment); | ||
|
|
||
| expect(input).toHaveValue('6'); | ||
| }); | ||
|
|
||
| test('Expect maximum value works', async () => { | ||
| renderInput('test', 99, false, 10, 100); | ||
|
|
||
| const input = screen.getByRole('textbox'); | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveValue('99'); | ||
|
|
||
| const increment = screen.getByLabelText('increment'); | ||
| expect(increment).toBeInTheDocument(); | ||
| expect(increment).toBeEnabled(); | ||
|
|
||
| await userEvent.click(increment); | ||
|
|
||
| expect(increment).toBeDisabled(); | ||
| }); |
Oops, something went wrong.