Skip to content

Comments

add(sample): added keyboard nav samples#921

Open
tishko0 wants to merge 6 commits intovnextfrom
ttonev/keyboard-nav-sample
Open

add(sample): added keyboard nav samples#921
tishko0 wants to merge 6 commits intovnextfrom
ttonev/keyboard-nav-sample

Conversation

@tishko0
Copy link
Contributor

@tishko0 tishko0 commented Oct 6, 2025

Keyboard nav samples for

  • Grid
  • H Grid
  • T Grid

@MarielaTihova MarielaTihova self-assigned this Feb 3, 2026
@@ -0,0 +1,305 @@

Copy link
Contributor

Choose a reason for hiding this comment

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

You have this folder name for the 3 grids -> keyboard-navigation-guide and then for the hgrid you have one other folder called keyboard-custom-navigation. Why is that? Do we need it?

};

return (
<div className="sample" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 16 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Please put styles in the css file instead

)}
{items.map((c: Item, idx: number) => (
<IgrListItem key={idx} className={`${c.active ? 'active' : 'disabled'}`}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same for styles in css file instead of inline styles in all of the divs above

onColumnSelectionChanging={onColumnSelectionChanging as any}
>
<IgrPaginator />
{/* Toolbar can be conditionally shown if needed */}
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need this commented code?

</div>

{/* Right-side list showing active/available shortcuts */}
<div className="list-sample" style={{ overflow: 'auto', height: '100vh', position: 'sticky', top: 0 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Styles in the css files. Please go through all 3 components and transfer them into css files

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