patternfly / patternfly/patternfly-react

Bug - Password Generator - Inconsistent Demo Layout in Docs (HTML vs TSX Demos)

Ouverte
#11,633 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Stale
Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
9

Description

Describe the problem

In the docs for Password Generator, there is an issue with the layout of the demo.

The HTML demo uses a FormGroup component, which renders the demo at the correct width (with a max-width of 825px set in the docs framework).

The TSX demo uses the InputGroup component, which seems to be the new recommended React component for this functionality. However the InputGroup demo is rendered at a very small width, making the code editor and the demo code difficult to read:

Image Image

How do you reproduce the problem?

  1. Go to the React docs for Password Generator
  2. See the TSX demo using InputGroup, which is collapsed and has a narrow width.
  3. Compare to the HTML demo using FormGroup which has the proper layout.

Expected behavior

TSX demo for the Password Generator should be displayed with the same layout and width as the HTML demo.

Screenshots

See above

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Chrome

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la page de documentation de React Password Generator et comparez la démo TSX InputGroup avec la démo HTML FormGroup. Examinez ensuite le template lié du framework de documentation dans packages/documentation-framework/templates/mdx.js, puis vérifiez que la démo TSX a la même largeur lisible et la même mise en page que la démo HTML.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
documentation, frontend
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.