Skip to content

Conversation

@wise-king-sullyman
Copy link
Collaborator

What: Closes #6715

Additional issues:

@patternfly-build
Copy link
Collaborator

patternfly-build commented Dec 22, 2021

export const AccordionDefinitionList = () => {
const [expanded, setExpanded] = React.useState('ex-toggle2');

const onToggle = (id: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

This might turn into a broader discussion, but we might want to consider optimizing examples as they're converted to typescript.

Using this as an example, we could consider memoizing this function and including the anonymous callback used on line 19 as well.

@nicolethoen has added this as a topic to discuss in our next retro.

Copy link
Collaborator Author

@wise-king-sullyman wise-king-sullyman Jan 4, 2022

Choose a reason for hiding this comment

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

I'll save most of my thoughts for the discussion tomorrow. Overall though I worry that would be jamming too many different things into one PR, unless I drop the functional conversion or extraction that I'm currently doing with these TS conversions.

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.

As per today's discussion, let's make sure each functional component has an explicit return type.

@thatblindgeye
Copy link
Contributor

Similar to the comment left on the TextInputGroup PR: 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].

Instead of BorderedAccordian, we have AccordianBordered, 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.

In terms of the updated example/file names, looks good!

@jpuzz0
Copy link
Contributor

jpuzz0 commented Jan 7, 2022

Suggestion for naming convention/directory structure:

Accordion/
  Accordion.md
  Accordion.tsx
  examples/
    Bordered.tsx
    DefinitionList.tsx

What I mentioned in standup doesn't look like it's necessary, but my thought was that if these needed to be used in other places within this codebase, you could add a export * from "./examples" to Accordion/index.ts, and if this was a use-case, you could; import * as AccordionExamples from "components/Accordion/examples".

Since it seems these would only ever be used within the confines of /Accordion, the context of what kind of examples they are can be implied, so my vote would still be to omit the prepending of Accordion. My approval still stands regardless.

@wise-king-sullyman
Copy link
Collaborator Author

@jeffpuzzo a key part of why we thought including the component and example names would be useful is that it allows instant finding/identification of exactly what example is being worked on based on the file name alone.

Additionally, it's a pattern that was already somewhat established for components, i.e. we have Accordion, AccordionContent, AccordionContext, AccordionExpandedContentBody, etc.

That being said I wouldn't be opposed to that direction, as I recognize component/filename length could become an issue. I just wanted to clarify the reasoning that we used.

@tlabaj tlabaj merged commit 3b1fcd3 into patternfly:main Jan 7, 2022
@wise-king-sullyman wise-king-sullyman deleted the accordion-examples-ts-conversion branch January 7, 2022 17:38
@patternfly-build
Copy link
Collaborator

Your changes have been released in:

  • eslint-plugin-patternfly-react@4.22.7
  • @patternfly/react-catalog-view-extension@4.34.7
  • @patternfly/react-charts@6.36.7
  • @patternfly/react-code-editor@4.24.7
  • @patternfly/react-console@4.34.7
  • @patternfly/react-core@4.183.7
  • @patternfly/react-docs@5.44.7
  • @patternfly/react-icons@4.34.7
  • @patternfly/react-inline-edit-extension@4.28.7
  • demo-app-ts@4.143.7
  • @patternfly/react-integration@4.145.7
  • @patternfly/react-log-viewer@4.28.7
  • @patternfly/react-styles@4.33.7
  • @patternfly/react-table@4.52.7
  • @patternfly/react-tokens@4.35.7
  • @patternfly/react-topology@4.30.7
  • @patternfly/react-virtualized-extension@4.30.7
  • transformer-cjs-imports@4.21.7

Thanks for your contribution! 🎉

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.

Accordion: Convert examples to TypeScript

6 participants