From 088cf795aa121740bd4cda6f9e9b2ceeb6649254 Mon Sep 17 00:00:00 2001 From: gitdallas Date: Mon, 8 Aug 2022 15:54:31 -0500 Subject: [PATCH 01/14] feat(NumberInput): add status validate icons --- .../components/NumberInput/NumberInput.tsx | 19 +- .../__tests__/NumberInput.test.tsx | 15 + .../__snapshots__/NumberInput.test.tsx.snap | 259 ++++++++++++++++-- .../NumberInput/examples/NumberInput.md | 5 + .../NumberInput/examples/WithStatus.tsx | 48 ++++ 5 files changed, 326 insertions(+), 20 deletions(-) create mode 100644 packages/react-core/src/components/NumberInput/examples/WithStatus.tsx diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index 2af531ba82c..9ae7e69075b 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/NumberInput/number-input'; +import formControlStyles from '@patternfly/react-styles/css/components/FormControl/form-control'; import { css } from '@patternfly/react-styles'; +import { ValidatedOptions } from '../../helpers/constants'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import { InputGroup } from '../InputGroup'; @@ -16,6 +18,11 @@ export interface NumberInputProps extends React.HTMLProps { widthChars?: number; /** Indicates the whole number input should be disabled */ isDisabled?: boolean; + /** Value to indicate if the input is modified to show that validation state. + * If set to success, input will be modified to indicate valid state. + * If set to error, input will be modified to indicate error state. + */ + validated?: 'success' | 'warning' | 'default' | 'error'; /** Callback for the minus button */ onMinus?: (event: React.MouseEvent, name?: string) => void; /** Callback for the text input changing */ @@ -66,6 +73,7 @@ export const NumberInput: React.FunctionComponent = ({ className, widthChars, isDisabled = false, + validated = 'default' as 'success' | 'warning' | 'default' | 'error', onMinus = () => {}, onChange, onBlur, @@ -99,7 +107,9 @@ export const NumberInput: React.FunctionComponent = ({ return (
= ({ { expect(asFragment()).toMatchSnapshot(); }); + test('renders success validated', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }) + + test('renders error validated', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }) + + test('renders warning validated', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }) + test('renders value', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap index 9141e2f0927..0693af576b9 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap @@ -12,7 +12,7 @@ exports[`numberInput disables lower threshold 1`] = ` aria-disabled="true" aria-label="Minus" class="pf-c-button pf-m-control pf-m-disabled" - data-ouia-component-id="OUIA-Generated-Button-control-7" + data-ouia-component-id="OUIA-Generated-Button-control-13" data-ouia-component-type="PF4/Button" data-ouia-safe="true" disabled="" @@ -47,7 +47,7 @@ exports[`numberInput disables lower threshold 1`] = ` aria-disabled="false" aria-label="Plus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-8" + data-ouia-component-id="OUIA-Generated-Button-control-14" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -87,7 +87,7 @@ exports[`numberInput disables upper threshold 1`] = ` aria-disabled="false" aria-label="Minus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-9" + data-ouia-component-id="OUIA-Generated-Button-control-15" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -121,7 +121,7 @@ exports[`numberInput disables upper threshold 1`] = ` aria-disabled="true" aria-label="Plus" class="pf-c-button pf-m-control pf-m-disabled" - data-ouia-component-id="OUIA-Generated-Button-control-10" + data-ouia-component-id="OUIA-Generated-Button-control-16" data-ouia-component-type="PF4/Button" data-ouia-safe="true" disabled="" @@ -162,7 +162,7 @@ exports[`numberInput passes button props successfully 1`] = ` aria-disabled="false" aria-label="Minus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-19" + data-ouia-component-id="OUIA-Generated-Button-control-25" data-ouia-component-type="PF4/Button" data-ouia-safe="true" id="minus-id" @@ -197,7 +197,7 @@ exports[`numberInput passes button props successfully 1`] = ` aria-disabled="false" aria-label="Plus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-20" + data-ouia-component-id="OUIA-Generated-Button-control-26" data-ouia-component-type="PF4/Button" data-ouia-safe="true" id="plus-id" @@ -238,7 +238,7 @@ exports[`numberInput passes input props successfully 1`] = ` aria-disabled="false" aria-label="Minus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-17" + data-ouia-component-id="OUIA-Generated-Button-control-23" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -272,7 +272,7 @@ exports[`numberInput passes input props successfully 1`] = ` aria-disabled="false" aria-label="Plus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-18" + data-ouia-component-id="OUIA-Generated-Button-control-24" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -313,7 +313,7 @@ exports[`numberInput renders custom width 1`] = ` aria-disabled="false" aria-label="Minus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-15" + data-ouia-component-id="OUIA-Generated-Button-control-21" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -347,7 +347,7 @@ exports[`numberInput renders custom width 1`] = ` aria-disabled="false" aria-label="Plus" class="pf-c-button pf-m-control" - data-ouia-component-id="OUIA-Generated-Button-control-16" + data-ouia-component-id="OUIA-Generated-Button-control-22" data-ouia-component-type="PF4/Button" data-ouia-safe="true" type="button" @@ -462,7 +462,7 @@ exports[`numberInput renders disabled 1`] = ` aria-disabled="true" aria-label="Minus" class="pf-c-button pf-m-control pf-m-disabled" - data-ouia-component-id="OUIA-Generated-Button-control-5" + data-ouia-component-id="OUIA-Generated-Button-control-11" data-ouia-component-type="PF4/Button" data-ouia-safe="true" disabled="" @@ -498,7 +498,7 @@ exports[`numberInput renders disabled 1`] = ` aria-disabled="true" aria-label="Plus" class="pf-c-button pf-m-control pf-m-disabled" - data-ouia-component-id="OUIA-Generated-Button-control-6" + data-ouia-component-id="OUIA-Generated-Button-control-12" data-ouia-component-type="PF4/Button" data-ouia-safe="true" disabled="" @@ -527,6 +527,155 @@ exports[`numberInput renders disabled 1`] = ` `; +exports[`numberInput renders error validated 1`] = ` + +
+
+ + + +
+
+ +`; + +exports[`numberInput renders success validated 1`] = ` + +
+
+ + + +
+
+ +`; + exports[`numberInput renders unit & position 1`] = `
+ + + + +
+
+ +`; + +exports[`numberInput renders warning validated 1`] = ` + +
+
+ + + - onChange(e) })} onBlur={handleBlur} {...(!onChange && { readOnly: true })} - {...inputProps} onKeyDown={keyDownHandler} + validated={validated} + {...inputProps} /> @@ -111,9 +114,12 @@ exports[`numberInput disables upper threshold 1`] = ` @@ -187,9 +193,13 @@ exports[`numberInput passes button props successfully 1`] = ` @@ -262,8 +272,12 @@ exports[`numberInput passes input props successfully 1`] = ` @@ -412,9 +429,12 @@ exports[`numberInput renders defaults & extra props 1`] = ` @@ -487,10 +507,13 @@ exports[`numberInput renders disabled 1`] = ` @@ -566,7 +589,9 @@ exports[`numberInput renders error validated 1`] = ` aria-invalid="true" aria-label="Input" class="pf-c-form-control" - readonly="" + data-ouia-component-id="OUIA-Generated-TextInputBase-3" + data-ouia-component-type="PF4/TextInput" + data-ouia-safe="true" type="number" value="0" /> @@ -638,9 +663,12 @@ exports[`numberInput renders success validated 1`] = ` @@ -717,9 +745,12 @@ exports[`numberInput renders unit & position 1`] = ` @@ -791,9 +822,12 @@ exports[`numberInput renders unit 1`] = ` @@ -870,9 +904,12 @@ exports[`numberInput renders value 1`] = ` @@ -944,9 +981,12 @@ exports[`numberInput renders warning validated 1`] = ` diff --git a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx index 8ae4e84faa7..cdb13b5632b 100644 --- a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx @@ -2,8 +2,11 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const WithStatus: React.FunctionComponent = () => { + const max = 10; + const min = 0; + const [validated, setValidated] = React.useState<'success' | 'error' | 'warning'>('success'); - const [value, setValue] = React.useState(5); + const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5); const onPlus = () => { const newVal = value + 1; @@ -17,6 +20,12 @@ export const WithStatus: React.FunctionComponent = () => { validate(newVal); }; + const onChange = event => { + const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value); + setValue(newVal); + validate(newVal); + }; + const validate = newVal => { const diff = Math.abs(5 - newVal); if (diff > 3) { @@ -38,6 +47,7 @@ export const WithStatus: React.FunctionComponent = () => { max={10} onMinus={onMinus} onPlus={onPlus} + onChange={onChange} inputName="input" inputAriaLabel="number input" minusBtnAriaLabel="minus" From 37f06f6b8e711b9948b9e2fea5fe9feb72850a49 Mon Sep 17 00:00:00 2001 From: gitdallas Date: Thu, 11 Aug 2022 10:27:01 -0500 Subject: [PATCH 04/14] fix readonly prop passed from numberinput to textinput --- .../src/components/NumberInput/NumberInput.tsx | 2 +- .../__snapshots__/NumberInput.test.tsx.snap | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index 0308f6d26a9..b2521b9d029 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -137,7 +137,7 @@ export const NumberInput: React.FunctionComponent = ({ {...(isDisabled && { isDisabled })} {...(onChange && { onChange: (v, e) => onChange(e) })} onBlur={handleBlur} - {...(!onChange && { readOnly: true })} + {...(!onChange && { isReadOnly: true })} onKeyDown={keyDownHandler} validated={validated} {...inputProps} diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap index c55d5b09281..511d29f8624 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap @@ -43,6 +43,7 @@ exports[`numberInput disables lower threshold 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-7" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="0" /> @@ -120,6 +121,7 @@ exports[`numberInput disables upper threshold 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-8" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="100" /> @@ -200,6 +202,7 @@ exports[`numberInput passes button props successfully 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-13" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="5" /> @@ -357,6 +360,7 @@ exports[`numberInput renders custom width 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-11" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="5" /> @@ -435,6 +439,7 @@ exports[`numberInput renders defaults & extra props 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-1" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="0" /> @@ -514,6 +519,7 @@ exports[`numberInput renders disabled 1`] = ` data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" disabled="" + readonly="" type="number" value="90" /> @@ -592,6 +598,7 @@ exports[`numberInput renders error validated 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-3" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="0" /> @@ -669,6 +676,7 @@ exports[`numberInput renders success validated 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-2" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="0" /> @@ -751,6 +759,7 @@ exports[`numberInput renders unit & position 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-10" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="5" /> @@ -828,6 +837,7 @@ exports[`numberInput renders unit 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-9" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="5" /> @@ -910,6 +920,7 @@ exports[`numberInput renders value 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-5" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="90" /> @@ -987,6 +998,7 @@ exports[`numberInput renders warning validated 1`] = ` data-ouia-component-id="OUIA-Generated-TextInputBase-4" data-ouia-component-type="PF4/TextInput" data-ouia-safe="true" + readonly="" type="number" value="0" /> From bb63f5f216f6582c1b8a07a06082c190c9ace34a Mon Sep 17 00:00:00 2001 From: gitdallas Date: Thu, 11 Aug 2022 14:23:24 -0500 Subject: [PATCH 05/14] preventing inputgroup from adding describedby to button ids --- .../src/components/InputGroup/InputGroup.tsx | 3 +- .../InputGroup/__tests__/InputGroup.test.tsx | 12 +++--- .../__snapshots__/NumberInput.test.tsx.snap | 1 - .../NumberInput/examples/NumberInput.md | 43 +++++++++++++++++++ 4 files changed, 51 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/InputGroup/InputGroup.tsx b/packages/react-core/src/components/InputGroup/InputGroup.tsx index 1872146594a..4cd352c06fb 100644 --- a/packages/react-core/src/components/InputGroup/InputGroup.tsx +++ b/packages/react-core/src/components/InputGroup/InputGroup.tsx @@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles'; import { FormSelect } from '../FormSelect'; import { TextArea } from '../TextArea'; import { TextInput } from '../TextInput'; +import { Button } from '../Button'; export interface InputGroupProps extends React.HTMLProps { /** Additional classes added to the input group. */ @@ -20,7 +21,7 @@ export const InputGroup: React.FunctionComponent = ({ innerRef, ...props }: InputGroupProps) => { - const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName); + const formCtrls = [FormSelect, TextArea, TextInput, Button].map(comp => comp.displayName); const idItem = React.Children.toArray(children).find( (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id ) as React.ReactElement<{ id: string }>; diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx index 7580d6d0070..274816a41a2 100644 --- a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx +++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx @@ -3,21 +3,21 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { InputGroup } from '../InputGroup'; -import { Button } from '../../Button'; import { TextInput } from '../../TextInput'; +import { Label } from '@patternfly/react-core'; describe('InputGroup', () => { test('add aria-describedby to form-control if one of the non form-controls has id', () => { - // In this test, TextInput is a form-control component and Button is not. - // If Button has an id props, this should be used in aria-describedby. + // In this test, TextInput is a form-control component and Label is not. + // If Label has an id props, this should be used in aria-describedby. render( - + ); - expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id'); + expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'label-id'); }); }); diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap index 511d29f8624..4bfe2cc676b 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap @@ -195,7 +195,6 @@ exports[`numberInput passes button props successfully 1`] = ` { + this.setState({ + value: this.state.value - 1 + }); + }; + + this.onPlus = () => { + this.setState({ + value: this.state.value + 1 + }); + }; + } + + render() { + const { value } = this.state; + return ( + + ); + } +} +``` + ### With unit ```js From 48baf76d2190e6f97cd5b3c0b3b9d51c67036651 Mon Sep 17 00:00:00 2001 From: gitdallas Date: Tue, 16 Aug 2022 14:46:02 -0500 Subject: [PATCH 06/14] preventing inputgroup from overriding form control aria-describedby --- .../src/components/InputGroup/InputGroup.tsx | 11 ++--- .../InputGroup/__tests__/InputGroup.test.tsx | 42 ++++++++++++++++--- .../__tests__/NumberInput.test.tsx | 1 + 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/packages/react-core/src/components/InputGroup/InputGroup.tsx b/packages/react-core/src/components/InputGroup/InputGroup.tsx index 4cd352c06fb..499ae7ad92b 100644 --- a/packages/react-core/src/components/InputGroup/InputGroup.tsx +++ b/packages/react-core/src/components/InputGroup/InputGroup.tsx @@ -4,7 +4,6 @@ import { css } from '@patternfly/react-styles'; import { FormSelect } from '../FormSelect'; import { TextArea } from '../TextArea'; import { TextInput } from '../TextInput'; -import { Button } from '../Button'; export interface InputGroupProps extends React.HTMLProps { /** Additional classes added to the input group. */ @@ -21,7 +20,7 @@ export const InputGroup: React.FunctionComponent = ({ innerRef, ...props }: InputGroupProps) => { - const formCtrls = [FormSelect, TextArea, TextInput, Button].map(comp => comp.displayName); + const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName); const idItem = React.Children.toArray(children).find( (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id ) as React.ReactElement<{ id: string }>; @@ -32,9 +31,11 @@ export const InputGroup: React.FunctionComponent = ({
{idItem ? React.Children.map(children, (child: any) => - formCtrls.includes(child.type.displayName) - ? React.cloneElement(child, { 'aria-describedby': idItem.props.id }) - : child + !formCtrls.includes(child.type.displayName) || child.props['aria-describedby'] + ? child + : React.cloneElement(child, { + 'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id + }) ) : children}
diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx index 274816a41a2..7311b3654c8 100644 --- a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx +++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx @@ -4,20 +4,50 @@ import { render, screen } from '@testing-library/react'; import { InputGroup } from '../InputGroup'; import { TextInput } from '../../TextInput'; -import { Label } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core'; describe('InputGroup', () => { test('add aria-describedby to form-control if one of the non form-controls has id', () => { - // In this test, TextInput is a form-control component and Label is not. - // If Label has an id props, this should be used in aria-describedby. + // In this test, TextInput is a form-control component and Button is not. + // If Button has an id props, this should be used in aria-describedby. render( - ); - expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'label-id'); + expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id'); + }); + + test('wont add aria-describedby to form-control if describedby is empty string', () => { + // In this test, TextInput is a form-control component and Button is not. + // If Button has an id props, this should be used in aria-describedby, but this + // example has an empty aria-describedby to prevent that from happening. + render( + + + + + ); + expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby'); + }); + + test('wont override aria-describedby in form-control if describedby has value', () => { + // In this test, TextInput is a form-control component and Button is not. + // If Button has an id props, this should be used in aria-describedby, but this + // example has a predefined aria-describedby to prevent that from happening + render( + + + + + ); + expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself'); }); }); diff --git a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx index 99b6bb79e3b..6b1a3fbf3e7 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx +++ b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx @@ -69,6 +69,7 @@ describe('numberInput', () => { Date: Tue, 16 Aug 2022 14:50:52 -0500 Subject: [PATCH 07/14] making import format the same --- .../src/components/InputGroup/__tests__/InputGroup.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx index 7311b3654c8..d91a03091fd 100644 --- a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx +++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { InputGroup } from '../InputGroup'; +import { Button } from '../../Button'; import { TextInput } from '../../TextInput'; -import { Button } from '@patternfly/react-core'; describe('InputGroup', () => { test('add aria-describedby to form-control if one of the non form-controls has id', () => { @@ -13,7 +13,7 @@ describe('InputGroup', () => { render( - From bdae67bca612e49cccfbf40270b2afabef87342f Mon Sep 17 00:00:00 2001 From: gitdallas Date: Wed, 17 Aug 2022 10:15:08 -0500 Subject: [PATCH 08/14] remove without onchange example --- .../NumberInput/examples/NumberInput.md | 43 ------------------- 1 file changed, 43 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md index 2e7f7218bbb..dec8b098ab3 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md +++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md @@ -57,49 +57,6 @@ class BasicNumberInput extends React.Component { } ``` -### Without onChange - -```js -import React from 'react'; -import { NumberInput } from '@patternfly/react-core'; - -class BasicNumberInput extends React.Component { - constructor(props) { - super(props); - this.state = { - value: 90 - }; - - this.onMinus = () => { - this.setState({ - value: this.state.value - 1 - }); - }; - - this.onPlus = () => { - this.setState({ - value: this.state.value + 1 - }); - }; - } - - render() { - const { value } = this.state; - return ( - - ); - } -} -``` - ### With unit ```js From 2a2690ffed9d40afcc81d22c97756592d278221d Mon Sep 17 00:00:00 2001 From: gitdallas Date: Wed, 17 Aug 2022 10:36:03 -0500 Subject: [PATCH 09/14] using validatedOptions type in numberinput example --- .../src/components/NumberInput/examples/WithStatus.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx index cdb13b5632b..2abf18af671 100644 --- a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; +import { ValidatedOptions } from '../../../helpers'; export const WithStatus: React.FunctionComponent = () => { const max = 10; const min = 0; - const [validated, setValidated] = React.useState<'success' | 'error' | 'warning'>('success'); + const [validated, setValidated] = React.useState(ValidatedOptions.success); const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5); const onPlus = () => { @@ -29,11 +30,11 @@ export const WithStatus: React.FunctionComponent = () => { const validate = newVal => { const diff = Math.abs(5 - newVal); if (diff > 3) { - setValidated('error'); + setValidated(ValidatedOptions.error); } else if (diff > 1) { - setValidated('warning'); + setValidated(ValidatedOptions.warning); } else { - setValidated('success'); + setValidated(ValidatedOptions.success); } }; return ( From 3ec16c8e18518c8843665ed44efb5e0d6989db3b Mon Sep 17 00:00:00 2001 From: gitdallas Date: Wed, 17 Aug 2022 10:54:22 -0500 Subject: [PATCH 10/14] changing import path for doc build --- .../src/components/NumberInput/examples/WithStatus.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx index 2abf18af671..a1b50f6c284 100644 --- a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { NumberInput } from '@patternfly/react-core'; -import { ValidatedOptions } from '../../../helpers'; +import { NumberInput, ValidatedOptions } from '@patternfly/react-core'; export const WithStatus: React.FunctionComponent = () => { const max = 10; From b08b3baf67e665c7466060fd915a20eedbdb3aa6 Mon Sep 17 00:00:00 2001 From: gitdallas Date: Thu, 18 Aug 2022 09:55:03 -0500 Subject: [PATCH 11/14] add validatedOptions to the validated prop type --- .../react-core/src/components/NumberInput/NumberInput.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index b2521b9d029..43a52c80bec 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -5,7 +5,7 @@ import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import { InputGroup } from '../InputGroup'; import { Button, ButtonProps } from '../Button'; -import { KEY_CODES } from '../../helpers'; +import { KEY_CODES, ValidatedOptions } from '../../helpers'; import { TextInput } from '../TextInput'; export interface NumberInputProps extends React.HTMLProps { @@ -22,7 +22,7 @@ export interface NumberInputProps extends React.HTMLProps { * If set to success, input will be modified to indicate valid state. * If set to error, input will be modified to indicate error state. */ - validated?: 'success' | 'warning' | 'default' | 'error'; + validated?: 'default' | 'error' | 'warning' | 'success' | ValidatedOptions; /** Callback for the minus button */ onMinus?: (event: React.MouseEvent, name?: string) => void; /** Callback for the text input changing */ @@ -73,7 +73,7 @@ export const NumberInput: React.FunctionComponent = ({ className, widthChars, isDisabled = false, - validated = 'default' as 'success' | 'warning' | 'default' | 'error', + validated = ValidatedOptions.default, onMinus = () => {}, onChange, onBlur, From 4d5e6a89c80a141727f504ba1a495a099f39ac32 Mon Sep 17 00:00:00 2001 From: gitdallas Date: Fri, 19 Aug 2022 10:09:17 -0500 Subject: [PATCH 12/14] fixing erics pr comments/nits --- .../src/components/NumberInput/NumberInput.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index 43a52c80bec..a3da0f3fa17 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -17,10 +17,8 @@ export interface NumberInputProps extends React.HTMLProps { widthChars?: number; /** Indicates the whole number input should be disabled */ isDisabled?: boolean; - /** Value to indicate if the input is modified to show that validation state. - * If set to warning, input will be modified to indicate warning state. - * If set to success, input will be modified to indicate valid state. - * If set to error, input will be modified to indicate error state. + /** Value to indicate if the input is modified to show that validation state + * @beta */ validated?: 'default' | 'error' | 'warning' | 'success' | ValidatedOptions; /** Callback for the minus button */ @@ -107,7 +105,7 @@ export const NumberInput: React.FunctionComponent = ({ return (
= ({ name={inputName} aria-label={inputAriaLabel} {...(isDisabled && { isDisabled })} - {...(onChange && { onChange: (v, e) => onChange(e) })} + {...(onChange && { onChange: (value, event) => onChange(event) })} onBlur={handleBlur} {...(!onChange && { isReadOnly: true })} onKeyDown={keyDownHandler} From d671aae9583d28f564b7fff0c327883a395cb5bf Mon Sep 17 00:00:00 2001 From: Dallas Date: Fri, 19 Aug 2022 10:10:41 -0500 Subject: [PATCH 13/14] update withstatus example description Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../src/components/NumberInput/examples/WithStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx index a1b50f6c284..af8f909169e 100644 --- a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx @@ -38,7 +38,7 @@ export const WithStatus: React.FunctionComponent = () => { }; return ( <> - Status will change to warning/error depending on how far from 5. +In the following example, the validated status will update based on the value of the number input and how far from the number 5 it is.
Date: Fri, 19 Aug 2022 10:47:43 -0500 Subject: [PATCH 14/14] fixing lint --- .../src/components/NumberInput/examples/WithStatus.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx index af8f909169e..88584de1ab2 100644 --- a/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/WithStatus.tsx @@ -38,7 +38,8 @@ export const WithStatus: React.FunctionComponent = () => { }; return ( <> -In the following example, the validated status will update based on the value of the number input and how far from the number 5 it is. + In the following example, the validated status will update based on the value of the number input and how far from + the number 5 it is.