Skip to content

Update react-core package examples to TypeScript #11952

@thatblindgeye

Description

@thatblindgeye

Describe the enhancement or change
Several examples/demos are either not using tsx files and/or not putting examples in their own individual files (instead using inline codeblocks in the MD files). We should try updating those that remain so that:

  • All example/demo code is in its own individual file
  • All example/demo files are tsx file types
  • The language flag for the codeblock is ts, e.g. ts file="..."

Any files that just need the language flag updated can be combined into fewer PRs, but any updates requiring moving example code to individual files should typically be done in separate PRs, i.e. one PR per component. If there are some updates that are only a few per component, then some can be combined into one.

Updates needed that were found (be sure to double check if any additional updates are needed when working on any of these):

  • Alert (example md is using inline code)
  • Menu toggle (example MD is using inline code)
  • Password generator (demo MD is using inline code)
  • Button ("Progress button" demo is using inline code)
  • Panel (examples are currently inline and using the js flag)
  • Alert group (demo MD is currently using the js flag)
  • Back to top (demo MD is currently using the js flag
  • Banner (demos are inline and using the js flag)
  • Data list (demo MD is usnig js flag)
  • DateTimePicker (MD file "Date and time range picker" demo is inline and using js flag)
  • JumpLinks (demo MD has inline code and using js flag)
  • Nav (demo MD is using js flag)
  • Primary detail (demo MD is using js flag)
  • Progress (demo MD is using inline code and the js flag)
  • Progress stepper (demo MD is using inline code and the js flag)
  • Tabs (demo MD is using inline code and js flag)
  • Toolbar (demo MD is using js flag)
  • CardView (demo MD is using js flag)
  • DatePicker ("Date range picker" demo is inline and using js flag)
  • Description list (demo MD is using js flag)
  • RTL (demo MD is using js flag)
  • Search input (demo MD is using inline code and js flag)
  • OUIA (MD file is using inline code and js flag - under "Developer resources > Open UI Automation" in side nav)
  • Bullseye (example MD is using inline code and js flag)
  • Flex (example MD is using inline code and js flag)
  • Gallery (example MD is using inline code and js flag)
  • Grid (example MD is using inline code and js flag)
  • Level (example MD is using inline code and js flag)
  • Split (example MD is using inline code and js flag)
  • Stack (example MD is using inline code and js flag)
  • react-table Demo MD is using js flag
  • Any documentation on writing an example/demo MD file could also be updated (e.g. the react-docs README file)

Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?

Any other information?

Metadata

Metadata

Assignees

Labels

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions