patternfly / patternfly/react-component-groups

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

Đang mở
#909 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

rehor-ai-patternfly
Ngôn ngữ chính
TypeScript
Star
10
Fork
40
Merge trung bình
3 ngày 22 giờ
Pull request đã merge (30 ngày)
4

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu trong Shortcut.tsx, đặc biệt là các label được hardcode hiện có quanh dòng 38–54 và interface ShortcutProps. Thêm các label tùy chọn nhưng vẫn giữ nguyên các giá trị mặc định hiện tại bằng tiếng Anh, sau đó xác minh rằng mỗi prop boolean cho thao tác chuột đều render label có thể tùy chỉnh tương ứng, đồng thời giữ nguyên cách sử dụng ShortcutGrid hiện tại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend, internationalization
Loại issue
Tính năng
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
58/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.