patternfly / patternfly/react-component-groups

ShortcutGrid: Add internationalization (i18n) support for Shortcut grid component

Offen
#909 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

rehor-ai-patternfly
Vorherrschende Sprache
TypeScript
Sterne
10
Forks
40
Ø Merge
3 T. 22 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Describe the problem

The Shortcut component (used by ShortcutGrid) currently has hardcoded English strings for mouse action labels with no way to internationalize them for applications that need to support multiple languages.

Current hardcoded strings

  • "Hover" (line 38 of Shortcut.tsx)

  • "Click" (line 45)

  • "Right click" (line 48)

  • "Drag" (line 51)

  • "Drag + Drop" (line 54)

These are rendered inside Label components alongside a MouseIcon when the corresponding boolean props (hover, click, rightClick, drag, dragAndDrop) are set to true.

Proposed solution

Add optional label props for each mouse action to allow customization of all user-facing strings:

export interface ShortcutProps {
  // ... existing props

  /** Custom label for "Hover" mouse action */
  hoverLabel?: string;
  /** Custom label for "Click" mouse action */
  clickLabel?: string;
  /** Custom label for "Right click" mouse action */
  rightClickLabel?: string;
  /** Custom label for "Drag" mouse action */
  dragLabel?: string;
  /** Custom label for "Drag + Drop" mouse action */
  dragAndDropLabel?: string;
}

These would default to the current English strings for backwards compatibility.

Example usage

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <ShortcutGrid
      shortcuts={[
        {
          keys: ['ctrl'],
          drag: true,
          dragLabel: t('Drag'),
          description: t('Move object'),
        },
        {
          keys: [],
          rightClick: true,
          rightClickLabel: t('Right click'),
          description: t('Open context menu'),
        },
      ]}
    />
  );
};

Impact

Applications using Shortcut or ShortcutGrid that need to support non-English languages currently have to either:

  • Accept English-only mouse action labels

  • Avoid the boolean mouse action props entirely and lose the MouseIcon + Label badge rendering

  • Build their own shortcut component from scratch

Related

This would align ShortcutGrid with other PatternFly components that support i18n.


Jira Issue: PF-3867

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne in Shortcut.tsx, insbesondere bei den bestehenden hartcodierten Labels in der Nähe der Zeilen 38–54 und der ShortcutProps-Schnittstelle. Füge optionale Labels hinzu, die die aktuellen englischen Standardwerte beibehalten, und überprüfe anschließend, dass jede boolesche Mausaktions-Prop ihr anpassbares Label rendert, während die bestehende Verwendung von ShortcutGrid erhalten bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend, internationalization
Issue-Typ
Feature
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Ruhig
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
58/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.