From b49903ae201653f171fa3b231ad36b7bdb54a50c Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 14 Dec 2021 16:45:33 -0500 Subject: [PATCH 1/5] chore(TextInputGroup): convert examples and demos to typescript= --- .../examples/BasicTextInputGroup.tsx | 8 ++ .../examples/DisabledTextInputGroup.tsx | 8 ++ .../TextInputGroup/examples/TextInputGroup.md | 127 +----------------- .../examples/TextInputGroupWithChips.tsx | 69 ++++++++++ .../examples/TextInputGroupWithIcons.tsx | 34 +++++ .../src/demos/TextInputGroupDemo.md | 4 +- ...ltering.js => AttributeValueFiltering.tsx} | 38 +++--- ...mpleteSearch.js => AutoCompleteSearch.tsx} | 34 ++--- 8 files changed, 163 insertions(+), 159 deletions(-) create mode 100644 packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx create mode 100644 packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx create mode 100644 packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx create mode 100644 packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx rename packages/react-core/src/demos/examples/TextInputGroup/{AttributeValueFiltering.js => AttributeValueFiltering.tsx} (85%) rename packages/react-core/src/demos/examples/TextInputGroup/{AutoCompleteSearch.js => AutoCompleteSearch.tsx} (83%) diff --git a/packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx new file mode 100644 index 00000000000..2c0b6150c83 --- /dev/null +++ b/packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core'; + +export const BasicTextInputGroup: React.FunctionComponent = () => ( + + + +); diff --git a/packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx new file mode 100644 index 00000000000..d52008904f8 --- /dev/null +++ b/packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core'; + +export const DisabledTextInputGroup: React.FunctionComponent = () => ( + + + +); diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md index bff99c2a2fe..c9df13f9385 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md @@ -13,139 +13,20 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; ### Basic -```js -import React from 'react'; -import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core'; - -const BasicTextInputGroup = () => ( - - - -); +```ts file="./BasicTextInputGroup.tsx" ``` ### Disabled -```js -import React from 'react'; -import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core'; - -const DisabledTextInputGroup = () => ( - - - -); +```ts file="./DisabledTextInputGroup.tsx" ``` ### Utilities and icon -```js -import React from 'react'; -import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; -import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; - -const TextInputGroupWithIcons = () => { - const [inputValue, setInputValue] = React.useState(''); - - /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value, _event) => { - setInputValue(value); - }; - - /** show the input clearing button only when the input is not empty */ - const showClearButton = inputValue; - - /** callback for clearing the text input */ - const clearInput = () => { - setInputValue(''); - }; - - return ( - - } value={inputValue} onChange={handleInputChange} /> - - {showClearButton && ( - - )} - - - ); -}; +```ts file="./TextInputGroupWithIcons.tsx" ``` ### Filters -```js -import React from 'react'; -import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; -import { Chip, ChipGroup } from '@patternfly/react-core'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; -import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; - -const TextInputGroupWithChips = () => { - const [inputValue, setInputValue] = React.useState(''); - const [currentChips, setCurrentChips] = React.useState([ - 'chip one', - 'chip two', - 'chip three', - 'chip four', - 'chip five', - 'chip six', - 'chip seven', - 'chip eight', - 'chip nine', - 'chip ten', - 'chip eleven', - 'chip twelve', - 'chip thirteen', - 'chip fourteen' - ]); - - /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */ - const showSearchIcon = !currentChips.length; - - /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value, _event) => { - setInputValue(value); - }; - - /** callback for removing a chip from the chip selections */ - const deleteChip = chipToDelete => { - const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete)); - setCurrentChips(newChips); - }; - - /** show the input/chip clearing button only when either the text input or chip group are not empty */ - const showClearButton = inputValue || !!currentChips.length; - - /** callback for clearing all selected chips and the text input */ - const clearChipsAndInput = () => { - setCurrentChips([]); - setInputValue(''); - }; - - return ( - - } value={inputValue} onChange={handleInputChange}> - - {currentChips.map(currentChip => ( - deleteChip(currentChip)}> - {currentChip} - - ))} - - - - {showClearButton && ( - - )} - - - ); -}; +```ts file="./TextInputGroupWithChips.tsx" ``` diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx new file mode 100644 index 00000000000..3d51bd60177 --- /dev/null +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; +import { Chip, ChipGroup } from '@patternfly/react-core'; +import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; + +export const TextInputGroupWithChips = () => { + const [inputValue, setInputValue] = React.useState(''); + const [currentChips, setCurrentChips] = React.useState([ + 'chip one', + 'chip two', + 'chip three', + 'chip four', + 'chip five', + 'chip six', + 'chip seven', + 'chip eight', + 'chip nine', + 'chip ten', + 'chip eleven', + 'chip twelve', + 'chip thirteen', + 'chip fourteen' + ]); + + /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */ + const showSearchIcon = !currentChips.length; + + /** callback for updating the inputValue state in this component so that the input can be controlled */ + const handleInputChange = (value: string, _event: React.FormEvent) => { + setInputValue(value); + }; + + /** callback for removing a chip from the chip selections */ + const deleteChip = (chipToDelete: string) => { + const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete)); + setCurrentChips(newChips); + }; + + /** show the input/chip clearing button only when either the text input or chip group are not empty */ + const showClearButton = !!inputValue || !!currentChips.length; + + /** callback for clearing all selected chips and the text input */ + const clearChipsAndInput = () => { + setCurrentChips([]); + setInputValue(''); + }; + + return ( + + } value={inputValue} onChange={handleInputChange}> + + {currentChips.map(currentChip => ( + deleteChip(currentChip)}> + {currentChip} + + ))} + + + + {showClearButton && ( + + )} + + + ); +}; diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx new file mode 100644 index 00000000000..ffadce79d6d --- /dev/null +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core'; +import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; + +export const TextInputGroupWithIcons: React.FunctionComponent = () => { + const [inputValue, setInputValue] = React.useState(''); + + /** callback for updating the inputValue state in this component so that the input can be controlled */ + const handleInputChange = (value: string, _event: React.FormEvent) => { + setInputValue(value); + }; + + /** show the input clearing button only when the input is not empty */ + const showClearButton = !!inputValue; + + /** callback for clearing the text input */ + const clearInput = () => { + setInputValue(''); + }; + + return ( + + } value={inputValue} onChange={handleInputChange} /> + + {showClearButton && ( + + )} + + + ); +}; diff --git a/packages/react-core/src/demos/TextInputGroupDemo.md b/packages/react-core/src/demos/TextInputGroupDemo.md index f18377f51c4..548ff4dfcce 100644 --- a/packages/react-core/src/demos/TextInputGroupDemo.md +++ b/packages/react-core/src/demos/TextInputGroupDemo.md @@ -24,7 +24,7 @@ Additionally, attributes can be selected by typing the full (case sensitive) nam Attributes can be deselected (returning you to attribute selection mode) by hitting `escape`, or by hitting `backspace` when the only text in the text input is the attribute. -```js file="./examples/TextInputGroup/AttributeValueFiltering.js" +```js file="./examples/TextInputGroup/AttributeValueFiltering.tsx" ``` ### Auto-complete search @@ -36,5 +36,5 @@ Hitting `escape` while focused on the input or menu will close the menu, and the When only one item remains in the suggestion list, tab can be used to auto-complete the typing of that item. -```js file="./examples/TextInputGroup/AutoCompleteSearch.js" +```js file="./examples/TextInputGroup/AutoCompleteSearch.tsx" ``` diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.js b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx similarity index 85% rename from packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.js rename to packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx index ee83712e92f..a6aefcde5ed 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.js +++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx @@ -20,10 +20,14 @@ export const AttributeValueFiltering = () => { const [inputValue, setInputValue] = React.useState(''); const [selectedKey, setSelectedKey] = React.useState(''); const [menuIsOpen, setMenuIsOpen] = React.useState(false); - const [currentChips, setCurrentChips] = React.useState([]); + const [currentChips, setCurrentChips] = React.useState([]); + + interface attributeValueData { + [attribute: string]: string[]; + } /** key and value data to be shown in the menu */ - const data = { + const data: attributeValueData = { Cluster: ['acmeqe-managed-1', 'local-cluster'], Kind: ['Template', 'ReplicationController', 'ReplicaSet', 'Deployment'], Label: ['release', 'environment', 'partition'], @@ -33,19 +37,19 @@ export const AttributeValueFiltering = () => { }; const keyNames = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status']; const [menuItemsText, setMenuItemsText] = React.useState(keyNames); - const [menuItems, setMenuItems] = React.useState([]); + const [menuItems, setMenuItems] = React.useState([]); /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */ - const menuRef = React.useRef(); - const textInputGroupRef = React.useRef(); + const menuRef = React.useRef(); + const textInputGroupRef = React.useRef(); /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value, _event) => { + const handleInputChange = (value: string, _event: React.FormEvent) => { setInputValue(value); }; /** callback for removing a chip from the chip selections */ - const deleteChip = chipToDelete => { + const deleteChip = (chipToDelete: string) => { const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete)); setCurrentChips(newChips); }; @@ -106,13 +110,13 @@ export const AttributeValueFiltering = () => { }, [inputValue]); /** add selected key/value pair as a chip in the chip group */ - const selectValue = selectedValue => { + const selectValue = (selectedValue: string) => { setCurrentChips([...currentChips, `${selectedKey}: ${selectedValue}`]); clearSelectedKey(); }; /** update the input to show the selected key and the menu to show the values associated with that specific key */ - const selectKey = selectedText => { + const selectKey = (selectedText: string) => { setInputValue(`${selectedText}: `); setSelectedKey(selectedText); setMenuItemsText(data[selectedText]); @@ -150,13 +154,13 @@ export const AttributeValueFiltering = () => { /** allow the user to focus on the menu and navigate using the arrow keys */ const handleArrowKey = () => { if (menuRef.current) { - const firstElement = menuRef.current.querySelector('li > button:not(:disabled)'); + const firstElement = menuRef.current.querySelector('li > button:not(:disabled)'); firstElement && firstElement.focus(); } }; /** enable keyboard only usage */ - const handleTextInputKeyDown = event => { + const handleTextInputKeyDown = (event: React.KeyboardEvent) => { switch (event.key) { case 'Enter': handleEnter(); @@ -178,8 +182,8 @@ export const AttributeValueFiltering = () => { }; /** perform the proper key or value selection when a menu item is selected */ - const onSelect = (event, _itemId) => { - const selectedText = event.target.innerText; + const onSelect = (event: React.MouseEvent, _itemId: string | number) => { + const selectedText = (event.target as HTMLElement).innerText; if (selectedKey.length) { selectValue(selectedText); @@ -191,11 +195,11 @@ export const AttributeValueFiltering = () => { }; /** close the menu when a click occurs outside of the menu or text input group */ - const handleClick = event => { + const handleClick = (event: MouseEvent) => { if ( menuRef.current && - !menuRef.current.contains(event.target) && - !textInputGroupRef.current.contains(event.target) + !menuRef.current.contains(event.target as Node) && + !textInputGroupRef.current.contains(event.target as Node) ) { setMenuIsOpen(false); } @@ -205,7 +209,7 @@ export const AttributeValueFiltering = () => { const showSearchIcon = !currentChips.length; /** only show the clear button when there is something that can be cleared */ - const showClearButton = inputValue || !!currentChips.length; + const showClearButton = !!inputValue || !!currentChips.length; const inputGroup = (
diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.js b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx similarity index 83% rename from packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.js rename to packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx index 90226d7b967..53e8bf8f7ad 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.js +++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx @@ -19,23 +19,23 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; export const AutoCompleteSearch = () => { const [inputValue, setInputValue] = React.useState(''); const [menuIsOpen, setMenuIsOpen] = React.useState(false); - const [currentChips, setCurrentChips] = React.useState([]); + const [currentChips, setCurrentChips] = React.useState([]); /** auto-completing suggestion text items to be shown in the menu */ const suggestionItems = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status']; - const [menuItems, setMenuItems] = React.useState([]); + const [menuItems, setMenuItems] = React.useState([]); /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */ - const menuRef = React.useRef(); - const textInputGroupRef = React.useRef(); + const menuRef = React.useRef(); + const textInputGroupRef = React.useRef(); /** callback for updating the inputValue state in this component so that the input can be controlled */ - const handleInputChange = (value, _event) => { + const handleInputChange = (value: string, _event: React.FormEvent) => { setInputValue(value); }; /** callback for removing a chip from the chip selections */ - const deleteChip = chipToDelete => { + const deleteChip = (chipToDelete: string) => { const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete)); setCurrentChips(newChips); }; @@ -80,7 +80,7 @@ export const AutoCompleteSearch = () => { }, [inputValue]); /** add the given string as a chip in the chip group and clear the input */ - const addChip = newChipText => { + const addChip = (newChipText: string) => { setCurrentChips([...currentChips, `${newChipText}`]); setInputValue(''); }; @@ -92,7 +92,7 @@ export const AutoCompleteSearch = () => { } }; - const handleTab = event => { + const handleTab = (event: React.KeyboardEvent) => { if (menuItems.length === 3) { setInputValue(menuItems[2].props.children); event.preventDefault(); @@ -107,7 +107,7 @@ export const AutoCompleteSearch = () => { /** allow the user to focus on the menu and navigate using the arrow keys */ const handleArrowKey = () => { if (menuRef.current) { - const firstElement = menuRef.current.querySelector('li > button:not(:disabled)'); + const firstElement = menuRef.current.querySelector('li > button:not(:disabled)'); firstElement && firstElement.focus(); } }; @@ -120,7 +120,7 @@ export const AutoCompleteSearch = () => { }; /** enable keyboard only usage while focused on the text input */ - const handleTextInputKeyDown = event => { + const handleTextInputKeyDown = (event: React.KeyboardEvent) => { switch (event.key) { case 'Enter': handleEnter(); @@ -146,26 +146,26 @@ export const AutoCompleteSearch = () => { }; /** add the text of the selected item as a new chip */ - const onSelect = (event, _itemId) => { - const selectedText = event.target.innerText; + const onSelect = (event: React.MouseEvent, _itemId: string | number) => { + const selectedText = (event.target as HTMLElement).innerText; addChip(selectedText); event.stopPropagation(); focusTextInput(); }; /** close the menu when a click occurs outside of the menu or text input group */ - const handleClick = event => { + const handleClick = (event: MouseEvent) => { if ( menuRef.current && - !menuRef.current.contains(event.target) && - !textInputGroupRef.current.contains(event.target) + !menuRef.current.contains(event.target as Node) && + !textInputGroupRef.current.contains(event.target as Node) ) { setMenuIsOpen(false); } }; /** enable keyboard only usage while focused on the menu */ - const handleMenuKeyDown = event => { + const handleMenuKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Escape') { setInputValue(''); focusTextInput(); @@ -177,7 +177,7 @@ export const AutoCompleteSearch = () => { const showSearchIcon = !currentChips.length; /** only show the clear button when there is something that can be cleared */ - const showClearButton = inputValue || !!currentChips.length; + const showClearButton = !!inputValue || !!currentChips.length; const inputGroup = (
From 3c43dae037ab09bd0ba9a34abd4f101b3b23983b Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 20 Dec 2021 16:08:23 -0500 Subject: [PATCH 2/5] specifies that files being imported are ts rather than js --- packages/react-core/src/demos/TextInputGroupDemo.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/demos/TextInputGroupDemo.md b/packages/react-core/src/demos/TextInputGroupDemo.md index 548ff4dfcce..8bc088c7097 100644 --- a/packages/react-core/src/demos/TextInputGroupDemo.md +++ b/packages/react-core/src/demos/TextInputGroupDemo.md @@ -24,7 +24,7 @@ Additionally, attributes can be selected by typing the full (case sensitive) nam Attributes can be deselected (returning you to attribute selection mode) by hitting `escape`, or by hitting `backspace` when the only text in the text input is the attribute. -```js file="./examples/TextInputGroup/AttributeValueFiltering.tsx" +```ts file="./examples/TextInputGroup/AttributeValueFiltering.tsx" ``` ### Auto-complete search @@ -36,5 +36,5 @@ Hitting `escape` while focused on the input or menu will close the menu, and the When only one item remains in the suggestion list, tab can be used to auto-complete the typing of that item. -```js file="./examples/TextInputGroup/AutoCompleteSearch.tsx" +```ts file="./examples/TextInputGroup/AutoCompleteSearch.tsx" ``` From 72bd005149e013e7d61794ca75943a714bc273f0 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 20 Dec 2021 16:16:46 -0500 Subject: [PATCH 3/5] updates event.target type assertions to be more specific --- .../demos/examples/TextInputGroup/AttributeValueFiltering.tsx | 4 ++-- .../src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx index a6aefcde5ed..9ec32892ece 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx @@ -198,8 +198,8 @@ export const AttributeValueFiltering = () => { const handleClick = (event: MouseEvent) => { if ( menuRef.current && - !menuRef.current.contains(event.target as Node) && - !textInputGroupRef.current.contains(event.target as Node) + !menuRef.current.contains(event.target as HTMLElement) && + !textInputGroupRef.current.contains(event.target as HTMLElement) ) { setMenuIsOpen(false); } diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx index 53e8bf8f7ad..274186bc39f 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx @@ -157,8 +157,8 @@ export const AutoCompleteSearch = () => { const handleClick = (event: MouseEvent) => { if ( menuRef.current && - !menuRef.current.contains(event.target as Node) && - !textInputGroupRef.current.contains(event.target as Node) + !menuRef.current.contains(event.target as HTMLElement) && + !textInputGroupRef.current.contains(event.target as HTMLElement) ) { setMenuIsOpen(false); } From 2636c5c78c71ebdca0c285f1df51fe2d6a7a467c Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 6 Jan 2022 12:55:35 -0500 Subject: [PATCH 4/5] explicitly types function component return values --- .eslintrc.json | 2 +- .../TextInputGroup/examples/TextInputGroupWithChips.tsx | 2 +- .../demos/examples/TextInputGroup/AttributeValueFiltering.tsx | 2 +- .../src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 623da7fbeec..1266039a489 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -123,7 +123,7 @@ }, "overrides": [ { - "files": ["**/examples/*"], + "files": ["**/examples/*", "**/demos/examples/**/*"], "rules": { "patternfly-react/no-anonymous-functions": "off" } diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx index 3d51bd60177..e94ccbdb24c 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx @@ -4,7 +4,7 @@ import { Chip, ChipGroup } from '@patternfly/react-core'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const TextInputGroupWithChips = () => { +export const TextInputGroupWithChips: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); const [currentChips, setCurrentChips] = React.useState([ 'chip one', diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx index 9ec32892ece..b2b2cc053ff 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx @@ -16,7 +16,7 @@ import { import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const AttributeValueFiltering = () => { +export const AttributeValueFiltering: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); const [selectedKey, setSelectedKey] = React.useState(''); const [menuIsOpen, setMenuIsOpen] = React.useState(false); diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx index 274186bc39f..475e29b5a30 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx @@ -16,7 +16,7 @@ import { import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const AutoCompleteSearch = () => { +export const AutoCompleteSearch: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); const [menuIsOpen, setMenuIsOpen] = React.useState(false); const [currentChips, setCurrentChips] = React.useState([]); From 419f60c0d19573ac48e056e9f9aced64d6e97f23 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 6 Jan 2022 14:58:04 -0500 Subject: [PATCH 5/5] refactors extracted example names for consistency --- .../components/TextInputGroup/examples/TextInputGroup.md | 8 ++++---- .../{BasicTextInputGroup.tsx => TextInputGroupBasic.tsx} | 2 +- ...abledTextInputGroup.tsx => TextInputGroupDisabled.tsx} | 2 +- ...tInputGroupWithChips.tsx => TextInputGroupFilters.tsx} | 2 +- ...upWithIcons.tsx => TextInputGroupUtilitiesAndIcon.tsx} | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) rename packages/react-core/src/components/TextInputGroup/examples/{BasicTextInputGroup.tsx => TextInputGroupBasic.tsx} (73%) rename packages/react-core/src/components/TextInputGroup/examples/{DisabledTextInputGroup.tsx => TextInputGroupDisabled.tsx} (81%) rename packages/react-core/src/components/TextInputGroup/examples/{TextInputGroupWithChips.tsx => TextInputGroupFilters.tsx} (97%) rename packages/react-core/src/components/TextInputGroup/examples/{TextInputGroupWithIcons.tsx => TextInputGroupUtilitiesAndIcon.tsx} (93%) diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md index c9df13f9385..603143d311c 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md @@ -13,20 +13,20 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; ### Basic -```ts file="./BasicTextInputGroup.tsx" +```ts file="./TextInputGroupBasic.tsx" ``` ### Disabled -```ts file="./DisabledTextInputGroup.tsx" +```ts file="./TextInputGroupDisabled.tsx" ``` ### Utilities and icon -```ts file="./TextInputGroupWithIcons.tsx" +```ts file="./TextInputGroupUtilitiesAndIcon.tsx" ``` ### Filters -```ts file="./TextInputGroupWithChips.tsx" +```ts file="./TextInputGroupFilters.tsx" ``` diff --git a/packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx similarity index 73% rename from packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx rename to packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx index 2c0b6150c83..6504c418b0d 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/BasicTextInputGroup.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupBasic.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core'; -export const BasicTextInputGroup: React.FunctionComponent = () => ( +export const TextInputGroupBasic: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupDisabled.tsx similarity index 81% rename from packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx rename to packages/react-core/src/components/TextInputGroup/examples/TextInputGroupDisabled.tsx index d52008904f8..e9f49256b40 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/DisabledTextInputGroup.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupDisabled.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core'; -export const DisabledTextInputGroup: React.FunctionComponent = () => ( +export const TextInputGroupDisabled: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx similarity index 97% rename from packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx rename to packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx index e94ccbdb24c..ebc86cd6c28 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithChips.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx @@ -4,7 +4,7 @@ import { Chip, ChipGroup } from '@patternfly/react-core'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const TextInputGroupWithChips: React.FunctionComponent = () => { +export const TextInputGroupFilters: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); const [currentChips, setCurrentChips] = React.useState([ 'chip one', diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx similarity index 93% rename from packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx rename to packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx index ffadce79d6d..d1266aea05f 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithIcons.tsx +++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx @@ -3,7 +3,7 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } f import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export const TextInputGroupWithIcons: React.FunctionComponent = () => { +export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => { const [inputValue, setInputValue] = React.useState(''); /** callback for updating the inputValue state in this component so that the input can be controlled */