Skip to content

kbd: Add KbdGroup component.#2313

Open
elcoosp wants to merge 1 commit intolongbridge:mainfrom
elcoosp:feat/kbd-group
Open

kbd: Add KbdGroup component.#2313
elcoosp wants to merge 1 commit intolongbridge:mainfrom
elcoosp:feat/kbd-group

Conversation

@elcoosp
Copy link
Copy Markdown
Contributor

@elcoosp elcoosp commented Apr 28, 2026

Description

Add KbdGroup component

Problem: There was no built‑in way to display a sequence of keyboard shortcuts with a visual separator between them (e.g., Ctrl + C or Cmd + Shift + P). Developers had to assemble this manually.

Solution:

  • Introduced KbdGroup, which accepts one or more existing Kbd elements and renders them with a “+” separator.
  • Added a gallery story to show usage examples (single, multiple, and styled groups).
  • Added unit tests ensuring the component creates successfully with one and several children.
  • Added documentation page that mirrors the structure of the Kbd page (imports, usage, platform-adaptive output, examples, styling).
  • Fixed the documentation sidebar to sort alphabetically so KbdGroup appears directly after Kbd.
  • Cleaned up a duplicate gallery entry that was accidentally inserted during the scripted creation.

All changes are purely additive and do not affect existing functionality.

Screenshot

Before After
[Put Before Screenshot here] kbd-group

Break Changes

None.

How to Test

Ran doc story and test

Checklist

  • I have read the CONTRIBUTING document and followed the guidelines.
  • Reviewed the changes in this PR and confirmed AI generated code (If any) is accurate.
  • Passed cargo run for story tests related to the changes.
  • Tested macOS, Windows and Linux platforms performance (if the change is platform-specific)

- New  component to group keyboard shortcuts
- Gallery story for manual testing
- Documentation page matching Kbd structure
- Fix sidebar sorting to alphabetical
- Remove duplicate gallery entry from sed
- Tests for single and multiple Kbd elements
Copy link
Copy Markdown
Member

@huacnlee huacnlee left a comment

Choose a reason for hiding this comment

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

This not need a single story, please merge into kbd_story.rs

@huacnlee huacnlee changed the title feat: add KbdGroup component with story, docs kbd: Add KbdGroup May 3, 2026
@huacnlee huacnlee changed the title kbd: Add KbdGroup kbd: Add KbdGroup component. May 3, 2026
use crate::{ActiveTheme, StyledExt, h_flex, kbd::Kbd};

/// A group of `Kbd` elements, rendered with a "+" separator between them.
#[derive(IntoElement)]
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Merge this file into kbd.rs


A component for grouping multiple `Kbd` elements, automatically inserting a \"+\" separator between them. This mimics the visual style of key‑binding instructions like **Ctrl+C** or **Cmd+Shift+P**.

## Import
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Merge into kbd.md

Comment thread justfile
test:
cargo nextest run

# -----------------------------------------------------------------------
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Please not add this, I don't like it.

Makefile can handle that, please submit another PR.

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.

2 participants