Skip to content

Conversation

@wise-king-sullyman
Copy link
Collaborator

What: Closes #6679

Additional issues:

@patternfly-build
Copy link
Collaborator

patternfly-build commented Dec 15, 2021

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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ts file I think

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm... it may work both ways? aren't .ts files just for files with type declarations? I think .tsx could be correct? Now I'm second guessing everything lol

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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ts file here too

menuRef.current &&
!menuRef.current.contains(event.target) &&
!textInputGroupRef.current.contains(event.target)
!menuRef.current.contains(event.target as Node) &&
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not used to seeing this type. Does it work if it's React.ReactNode? Maybe that's what I'm more used to seeing?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may also be HTMLElement? It may not be wrong either - I think we just tend to be a little more specific...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TypeScript complains about React.ReactNode, but HTMLElement does work since it's an extension of an extension of Node. Pushing this change shortly.

Copy link
Contributor

@nicolethoen nicolethoen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wise-king-sullyman
Copy link
Collaborator Author

wise-king-sullyman commented Jan 6, 2022

After the conversation about these conversions yesterday I went to update all of the examples and demos in this component to have explicit function component return types, and in doing so ran into an issue with eslint when it comes to the demos.

For the demos specifically, eslint throws an error for the no-anonymous-functions rule. It's specifically for the demos because an override was previously added which disables that rule in examples folders, but the demos folder is structured differently.

The clearest solution to this issue in my opinion is to extend the eslint override to ignore files in the demo folder, so that's what I will do unless anyone objects.

Other approaches would be to disable-next-line in the files, or to add display names. Because the last declaration is what's going into the markdown though this would require default exporting the component at the bottom of the file which is a bit of a departure from our current practices.

@thatblindgeye
Copy link
Contributor

As was discussed, and in regards to consistency that was mentioned during Wednesday's stand up, I'm thinking the file names for these separated examples should follow a consistent format such as ComponentName[exampleName].

So instead of BasicTextInputGroup, we'd have TextInputGroupBasic and so on.

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good in terms of the updated example/file names!

Copy link
Contributor

@kmcfaul kmcfaul left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@nicolethoen nicolethoen merged commit 19ba8be into patternfly:main Jan 10, 2022
@patternfly-build
Copy link
Collaborator

Your changes have been released in:

  • eslint-plugin-patternfly-react@4.22.9
  • @patternfly/react-catalog-view-extension@4.34.9
  • @patternfly/react-charts@6.36.9
  • @patternfly/react-code-editor@4.24.9
  • @patternfly/react-console@4.34.9
  • @patternfly/react-core@4.183.9
  • @patternfly/react-docs@5.44.9
  • @patternfly/react-icons@4.34.9
  • @patternfly/react-inline-edit-extension@4.28.9
  • demo-app-ts@4.143.9
  • @patternfly/react-integration@4.145.9
  • @patternfly/react-log-viewer@4.28.9
  • @patternfly/react-styles@4.33.9
  • @patternfly/react-table@4.52.9
  • @patternfly/react-tokens@4.35.9
  • @patternfly/react-topology@4.30.9
  • @patternfly/react-virtualized-extension@4.30.9
  • transformer-cjs-imports@4.21.9

Thanks for your contribution! 🎉

@wise-king-sullyman wise-king-sullyman deleted the tig-ts-conversion branch January 10, 2022 14:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TextInputGroup: Convert examples/demos from JS to TS

5 participants