From 890baf36f66348459b7238a7d6b113607bd52e29 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Mon, 3 Oct 2022 00:55:00 -0400 Subject: [PATCH 1/4] chore(TextInput): converted examples to typescript --- .../TextInput/examples/TextInput.md | 239 +----------------- .../TextInput/examples/TextInputBasic.tsx | 7 + .../TextInput/examples/TextInputDisabled.tsx | 6 + .../TextInput/examples/TextInputIcon.tsx | 39 +++ .../examples/TextInputIconSprite.tsx | 39 +++ .../examples/TextInputLeftTruncated.tsx | 17 ++ .../TextInput/examples/TextInputReadOnly.tsx | 6 + .../TextInput/examples/TextInputSelectAll.tsx | 16 ++ .../TextInput/examples/TextinputInvalid.tsx | 16 ++ 9 files changed, 154 insertions(+), 231 deletions(-) create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputDisabled.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx create mode 100644 packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md index 8618439b399..241c2844841 100644 --- a/packages/react-core/src/components/TextInput/examples/TextInput.md +++ b/packages/react-core/src/components/TextInput/examples/TextInput.md @@ -9,265 +9,42 @@ propComponents: ['TextInput'] ### Basic -```js -import React from 'react'; -import { TextInput } from '@patternfly/react-core'; - -class SimpleTextInput extends React.Component { - constructor(props) { - super(props); - this.state = { - value: '' - }; - this.handleTextInputChange = value => { - this.setState({ value }); - }; - } - - render() { - const { value } = this.state; - - return ( - - ); - } -} +```ts file="./TextInputBasic.tsx" ``` ### Disabled -```js -import React from 'react'; -import { TextInput } from '@patternfly/react-core'; - -; +```ts file="./TextInputDisabled.tsx" ``` ### Truncated on Left -```js -import React from 'react'; -import { TextInput } from '@patternfly/react-core'; - -class LeftTruncatedTextInput extends React.Component { - -constructor(props) { - super(props); - this.state = { - value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' - }; - this.handleTextInputChange = value => { - this.setState({ value }); - }; - } - - render() { - const { value } = this.state; - return ( - - ); - } -} +```ts file="./TextInputLeftTruncated.tsx" ``` ### Read only -```js -import React from 'react'; -import { Checkbox, TextInput } from '@patternfly/react-core'; - -const ReadOnlyTextArea = () => { - const [isPlainChecked, setIsPlainChecked] = React.useState(false); - - return ( - -
- setIsPlainChecked(checked)} - /> -
- - - ); -}; +```ts file="./TextInputReadOnly.tsx" ``` ### Invalid -```js -import React from 'react'; -import { TextInput, ValidatedOptions } from '@patternfly/react-core'; - -class InvalidTextInput extends React.Component { - constructor(props) { - super(props); - this.state = { - value: '' - }; - this.handleInvalidTextInputChange = value => { - this.setState({ value }); - }; - } - - render() { - const { value } = this.state; - - return ( - - ); - } -} +```ts file="./TextInputInvalid.tsx" ``` ### Select text using ref -```js -import React from 'react'; -import { TextInput } from '@patternfly/react-core'; - -TextInputSelectAll = () => { - const [value, setValue] = React.useState('select all on click'); - const ref = React.useRef(null); - return ( - ref && ref.current && ref.current.select()} - onChange={value => setValue(value)} - aria-label="select-all" - /> - ); -}; +```ts file="./TextInputSelectAll.tsx" ``` ### Icon variants -```js -import React from 'react'; -import { TextInput } from '@patternfly/react-core'; - -SimpleTextInput = () => { - const [calendar, setCalendar] = React.useState(''); - const [clock, setClock] = React.useState(''); - const [custom, setCustom] = React.useState(''); - - return ( - <> - setCalendar(value)} - aria-label="text input example" - /> -
-
- setClock(value)} - aria-label="text input example" - /> -
-
- setCustom(value)} - aria-label="text input example" - /> - - ); -}; +```ts file="./TextInputIcon.tsx" ``` ### Icon sprite variants **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons. -```js isBeta -import React from 'react'; -import { TextInput } from '@patternfly/react-core'; - -IconSpriteTextInputs = () => { - const [success, setSuccess] = React.useState(''); - const [warning, setWarning] = React.useState(''); - const [error, setError] = React.useState(''); - const [calendar, setCalendar] = React.useState(''); - const [clock, setClock] = React.useState(''); - - return ( - <> - setSuccess(value)} - aria-label="success icon sprite text input example" - /> -
-
- setWarning(value)} - aria-label="warning icon sprite text input example" - /> -
-
- setError(value)} - aria-label="error icon sprite text input example" - /> -
-
- setCalendar(value)} - aria-label="calendar icon sprite text input example" - /> -
-
- setClock(value)} - aria-label="clock icon sprite text input example" - /> - - ); -}; +```ts isBeta file="./TextInputIconSprite.tsx" ``` diff --git a/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx b/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx new file mode 100644 index 00000000000..5fdefea7b9d --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const TextInputBasic: React.FunctionComponent = () => { + const [value, setValue] = React.useState(''); + return setValue(value)} aria-label="text input example" />; +}; diff --git a/packages/react-core/src/components/TextInput/examples/TextInputDisabled.tsx b/packages/react-core/src/components/TextInput/examples/TextInputDisabled.tsx new file mode 100644 index 00000000000..52580a22062 --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputDisabled.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const TextInputBasic: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx b/packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx new file mode 100644 index 00000000000..4ac710553fe --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const TextInputIcon: React.FunctionComponent = () => { + const [calendar, setCalendar] = React.useState(''); + const [clock, setClock] = React.useState(''); + const [custom, setCustom] = React.useState(''); + + return ( + <> + setCalendar(value)} + aria-label="text input example" + /> +
+
+ setClock(value)} + aria-label="text input example" + /> +
+
+ setCustom(value)} + aria-label="text input example" + /> + + ); +}; diff --git a/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx b/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx new file mode 100644 index 00000000000..71eac47e5bc --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const TextInputIconSprite: React.FunctionComponent = () => { + const [calendar, setCalendar] = React.useState(''); + const [clock, setClock] = React.useState(''); + + return ( + <> + +
+
+ +
+
+ +
+
+ setCalendar(value)} + aria-label="calendar icon sprite text input example" + /> +
+
+ setClock(value)} + aria-label="clock icon sprite text input example" + /> + + ); +}; diff --git a/packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx b/packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx new file mode 100644 index 00000000000..e1c9ab72b99 --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const LeftTruncatedTextInput: React.FunctionComponent = () => { + const [value, setValue] = React.useState( + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' + ); + return ( + setValue(value)} + aria-label="left-truncated text input example" + /> + ); +}; diff --git a/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx b/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx new file mode 100644 index 00000000000..966e48a03bf --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputReadOnly.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const TextInputReadOnly: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx b/packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx new file mode 100644 index 00000000000..720d54c9342 --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { TextInput } from '@patternfly/react-core'; + +export const TextInputSelectAll: React.FunctionComponent = () => { + const [value, setValue] = React.useState('select all on click'); + const ref = React.useRef(null); + return ( + ref && ref.current && ref.current.select()} + onChange={value => setValue(value)} + aria-label="select-all" + /> + ); +}; diff --git a/packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx b/packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx new file mode 100644 index 00000000000..b76a0e78463 --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { TextInput, ValidatedOptions } from '@patternfly/react-core'; + +export const TextInputInvalid: React.FunctionComponent = () => { + const [value, setValue] = React.useState(''); + return ( + setValue(value)} + isRequired + validated={ValidatedOptions.error} + type="text" + aria-label="invalid text input example" + /> + ); +}; From c0b5c14ee03067a1165070ee85edcae6734b543f Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Mon, 3 Oct 2022 01:18:15 -0400 Subject: [PATCH 2/4] fix(TextInput): removed problematic file --- .../TextInput/examples/TextinputInvalid.tsx | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx diff --git a/packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx b/packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx deleted file mode 100644 index b76a0e78463..00000000000 --- a/packages/react-core/src/components/TextInput/examples/TextinputInvalid.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { TextInput, ValidatedOptions } from '@patternfly/react-core'; - -export const TextInputInvalid: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - return ( - setValue(value)} - isRequired - validated={ValidatedOptions.error} - type="text" - aria-label="invalid text input example" - /> - ); -}; From 42738a8b5075f87b003fccf8a2786aa4d6064000 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Mon, 3 Oct 2022 01:18:36 -0400 Subject: [PATCH 3/4] fix(TextInput): added file back with correct name --- .../TextInput/examples/TextInputInvalid.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx diff --git a/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx b/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx new file mode 100644 index 00000000000..b76a0e78463 --- /dev/null +++ b/packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { TextInput, ValidatedOptions } from '@patternfly/react-core'; + +export const TextInputInvalid: React.FunctionComponent = () => { + const [value, setValue] = React.useState(''); + return ( + setValue(value)} + isRequired + validated={ValidatedOptions.error} + type="text" + aria-label="invalid text input example" + /> + ); +}; From e1da12c151b6768803605da89a5e6529315e3cd7 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Thu, 6 Oct 2022 12:36:48 -0400 Subject: [PATCH 4/4] fix(TextInput): fixed requested changes --- .../TextInput/examples/TextInput.md | 2 +- .../examples/TextInputIconSprite.tsx | 30 +++++++++++++++++-- .../TextInput/examples/TextInputReadOnly.tsx | 27 ++++++++++++++--- ...ectAll.tsx => TextInputSelectUsingRef.tsx} | 6 ++-- 4 files changed, 54 insertions(+), 11 deletions(-) rename packages/react-core/src/components/TextInput/examples/{TextInputSelectAll.tsx => TextInputSelectUsingRef.tsx} (63%) diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md index 241c2844841..6702d09ce38 100644 --- a/packages/react-core/src/components/TextInput/examples/TextInput.md +++ b/packages/react-core/src/components/TextInput/examples/TextInput.md @@ -34,7 +34,7 @@ propComponents: ['TextInput'] ### Select text using ref -```ts file="./TextInputSelectAll.tsx" +```ts file="./TextInputSelectUsingRef.tsx" ``` ### Icon variants diff --git a/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx b/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx index 71eac47e5bc..89b39fc6406 100644 --- a/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx +++ b/packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx @@ -4,16 +4,40 @@ import { TextInput } from '@patternfly/react-core'; export const TextInputIconSprite: React.FunctionComponent = () => { const [calendar, setCalendar] = React.useState(''); const [clock, setClock] = React.useState(''); + const [success, setSuccess] = React.useState(''); + const [warning, setWarning] = React.useState(''); + const [error, setError] = React.useState(''); return ( <> - + setSuccess(value)} + aria-label="success icon sprite text input example" + />

- + setWarning(value)} + aria-label="warning icon sprite text input example" + />

- + setError(value)} + aria-label="error icon sprite text input example" + />

( - -); +export const TextInputReadOnly: React.FunctionComponent = () => { + const [isPlainChecked, setIsPlainChecked] = React.useState(false); + return ( + <> +
+ setIsPlainChecked(checked)} + /> +
+ + + ); +}; diff --git a/packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx b/packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx similarity index 63% rename from packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx rename to packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx index 720d54c9342..b5bf30d7aa3 100644 --- a/packages/react-core/src/components/TextInput/examples/TextInputSelectAll.tsx +++ b/packages/react-core/src/components/TextInput/examples/TextInputSelectUsingRef.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { TextInput } from '@patternfly/react-core'; -export const TextInputSelectAll: React.FunctionComponent = () => { +export const TextInputSelectUsingRef: React.FunctionComponent = () => { const [value, setValue] = React.useState('select all on click'); - const ref = React.useRef(null); + const ref = React.useRef(null); return ( ref && ref.current && ref.current.select()} + onFocus={() => ref?.current?.select()} onChange={value => setValue(value)} aria-label="select-all" />