Adding TextFieldSearch component
#16296
Merged
Conversation
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
georgewrmarshall
added
area-UI
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
georgewrmarshall
changed the title
georgewrmarshall
requested review from
adonesky1,
garrettbear and
NidhiKJha
and removed request for
adonesky1
georgewrmarshall
changed the title
|
I see that this is |
NidhiKJha
requested changes
Nov 8, 2022
ui/components/component-library/text-field-search/text-field-search.stories.js
Outdated
Show resolved
Hide resolved
ui/components/component-library/text-field-search/text-field-search.test.js
Outdated
Show resolved
Hide resolved
georgewrmarshall
changed the title
TextFieldSearch component
georgewrmarshall
force-pushed
the
feat/15100/text-field-search-component
branch
from
0c295a3 to
bb619cb
Compare
| @@ -75,7 +73,7 @@ TextField.propTypes = { | |||
| /** | |||
| * The props to pass to the clear button | |||
| */ | |||
| clearButtonProps: PropTypes.shape(Box.PropTypes), | |||
| clearButtonProps: PropTypes.shape(ButtonIcon.PropTypes), | |||
| /** | |||
| * TextField accepts all the props from TextFieldBase and Box | |||
| */ | |||
There was a problem hiding this comment.
Missed this update, but these no longer need to be required because this can operate as an uncontrolled component. It is only when showClearButton is true that these are required
| @@ -16,7 +16,7 @@ function setup(jsx) { | |||
|
|
|||
| // Custom userEvent setup function that renders the component in a controlled environment. | |||
| // This is used for the showClearButton and related props as the clearButton will only show in a controlled environment. | |||
| function setupControlled(FormComponent, props) { | |||
| export default function setupControlled(FormComponent, props) { | |||
| const ControlledWrapper = () => { | |||
| const [value, setValue] = useState(''); | |||
| return ( | |||
There was a problem hiding this comment.
Use this function in the ui/components/component-library/text-field-search/text-field-search.test.js
| ); | ||
| }; | ||
| return { user: userEvent.setup(), ...render(<ControlledWrapper />) }; | ||
| } |
There was a problem hiding this comment.
Moving the controlled render setup function to testing utils
Comment on lines
-17
to
-32
| // Custom userEvent setup function that renders the component in a controlled environment. | ||
| // This is used for the showClearButton and related props as the clearButton will only show in a controlled environment. | ||
| function setupControlled(FormComponent, props) { | ||
| const ControlledWrapper = () => { | ||
| const [value, setValue] = useState(''); | ||
| return ( | ||
| <FormComponent | ||
| value={value} | ||
| onChange={(e) => setValue(e.target.value)} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }; | ||
| return { user: userEvent.setup(), ...render(<ControlledWrapper />) }; | ||
| } | ||
|
|
There was a problem hiding this comment.
Moving to test/lib/render-helpers.js
garrettbear
reviewed
Nov 14, 2022
ui/components/component-library/text-field-search/text-field-search.js
Outdated
Show resolved
Hide resolved
garrettbear
reviewed
Nov 14, 2022
ui/components/component-library/text-field-search/text-field-search.js
Outdated
Show resolved
Hide resolved
garrettbear
previously approved these changes
Nov 14, 2022
georgewrmarshall
dismissed stale reviews from garrettbear and ghost
via
d7fa159
Builds ready [d7fa159]
Page Load Metrics (2314 ± 147 ms)
Bundle size diffs
highlights:storybook
|
garrettbear
approved these changes
Nov 15, 2022
NidhiKJha
approved these changes
Nov 15, 2022
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Explanation
Adding
TextFieldSearchcomponent to be used for all search inputsMore Information
Screenshots/Screencaps
After
textfieldsearch.mov
Manual Testing Steps
TextFieldSearchin the search barPre-Merge Checklist
+ If there are functional changes:
Acceptance Criteria
classNameprop and the PropType descriptions are all the samesizeand are suggesting the use of the generalizeddesign-system.jsconstants e.g.SIZESas the primary option but noting the component consts in the documentation and using them for propType validation and storybook controls onlyimgSrc,imgAlt(html element + attribute) (needs audit)sizeprop would beexport const Size = (args) => (sizeprop would be### Sizemm-prefix to all classNames// TODO:comment so we can search for them at a later date e.g. blocking components etc