Skip to content

[FEATURE] CSS-Only Hexagonal Grid with Reactive Neighbor Highlighting #82153 - #82246

Closed
Dev1822 wants to merge 2 commits into
SAPTARSHI-coder:mainfrom
Dev1822:feat/hexagonal-reactive-grid-82153
Closed

[FEATURE] CSS-Only Hexagonal Grid with Reactive Neighbor Highlighting #82153#82246
Dev1822 wants to merge 2 commits into
SAPTARSHI-coder:mainfrom
Dev1822:feat/hexagonal-reactive-grid-82153

Conversation

@Dev1822

@Dev1822 Dev1822 commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Feature Overview

This PR implements .ease-hex-grid, a pure CSS honeycomb layout system featuring interlocking clip-path hexagon items and reactive neighbor depth highlighting driven by modern CSS :has() relational selectors.

Key Implementation Details

  1. Honeycomb Grid Architecture:
    • Uses clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) for standard vertical-point hexagon geometry.
    • Rows overlap seamlessly with negative top margin (calc(var(--ease-hex-size) * -0.22)) and staggered horizontal offsets ( ranslateX(...)) on even rows.
  2. Pure CSS :has() State Management:
    • Dims non-hovered tiles (.ease-hex-grid:has(.ease-hex-item:hover) .ease-hex-item:not(:hover)).
    • Highlights preceding sibling (.ease-hex-item:has(+ .ease-hex-item:hover)).
    • Highlights next sibling (.ease-hex-item:hover + .ease-hex-item).
  3. Themes & Customization:
    • Preset modifiers for Gaming Skill Trees (.ease-hex-grid-gold), Cyberpunk Hubs (.ease-hex-grid-cyber), and Emerald Matrix (.ease-hex-grid-emerald).
  4. Submissions & Examples:
    • Added complete documentation and interactive demo in submissions/examples/hexagonal-reactive-grid/.
  5. Testing:
    • Updated ests/smoke.test.js and verified
      pm run build and
      pm test pass cleanly.

Closes #82153

@github-actions github-actions Bot added good first issue Good for newcomers GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions help wanted Extra attention needed level:intermediate Requires moderate project understanding type:feature New functionality or enhancement labels Aug 13, 2026
@SAPTARSHI-coder SAPTARSHI-coder added the invalid This doesn't seem right label Aug 13, 2026
@github-actions github-actions Bot removed help wanted Extra attention needed good first issue Good for newcomers invalid This doesn't seem right GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions labels Aug 13, 2026
@SAPTARSHI-coder

SAPTARSHI-coder commented Aug 13, 2026

Copy link
Copy Markdown
Owner

❌ PR Closed — Files Outside submissions/ Folder

@Dev1822, this PR has been automatically closed because it modifies files outside the allowed submissions/ directory:

  • components/hexagonal-grid.css
  • components/radial-menu.css
  • docs/easemotion.min.css
  • easemotion.css
  • easemotion.min.css
  • tests/radial-menu.test.js
  • tests/smoke.test.js

What to do

Contributions must only add files inside the submissions/ folder. Please:

  1. Create a new branch
  2. Add only your submission files under submissions/examples/your-feature-name/
  3. Open a new PR

See the contribution guide for details.

— EaseMotion CSS Guard

@github-actions github-actions Bot added contribution documentation and removed level:intermediate Requires moderate project understanding type:feature New functionality or enhancement labels Aug 13, 2026
@SAPTARSHI-coder

SAPTARSHI-coder commented Aug 13, 2026

Copy link
Copy Markdown
Owner

🔒 Pull Request Closed: This PR has been automatically closed because it modifies files inside the docs/ directory. The docs/ folder is maintained by the core team only. Contributors must place their work exclusively inside submissions/examples/your-feature-name/. Thank you!

@github-actions

github-actions Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

🔒 PR Closed (Unmerged). This PR was closed without being merged. No GSSoC points or credit awarded.

@github-actions

github-actions Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

📊 CSS Bundle Size Benchmark

This PR changes the size of easemotion.min.css.

Metric Base Branch This PR Difference
Raw 174.09 KB 177.81 KB 📈 +3.72 KB
Gzip 28.61 KB 29.32 KB 📈 +0.71 KB
Brotli 22.66 KB 23.22 KB 📈 +0.56 KB

@SAPTARSHI-coder

SAPTARSHI-coder commented Aug 13, 2026

Copy link
Copy Markdown
Owner

❌ Submission Validation Failed

Thank you for your contribution! However, some required files are missing or incorrect.

📋 Required Structure

submissions/your-category/your-feature-name/ (e.g., submissions/examples/ or submissions/docs/)
├── demo.html     ← Interactive demo with DOCTYPE, html, head, body tags
├── style.css     ← Your original CSS (not copy-pasted from a template)
└── README.md     ← Brief description of your feature

🔍 Issues Found:

🔠 Strict Code Integrity Protection

  • ❌ Repository rule violation: You are not allowed to change existing code. Modified existing files: docs/easemotion.min.css, easemotion.css, easemotion.min.css, tests/smoke.test.js.
  • ❌ Repository rule violation: You are not allowed to delete any code.

🔠 Core Framework Protection

  • ❌ PR modifies core framework/configuration files: components/hexagonal-grid.css, components/radial-menu.css, docs/easemotion.min.css, tests/radial-menu.test.js, tests/smoke.test.js. Contributors may only modify files inside the submissions/ directory.

📝 How to Fix:

  1. Ensure all 3 files exist with real, original content
  2. demo.html must have <!DOCTYPE html>, <html>, <head>, <body> tags
  3. style.css must contain your own CSS (not copy-pasted boilerplate)
  4. Push fixes to this branch — the validator will re-run automatically

📖 See CONTRIBUTING.md for full guidelines.

@SAPTARSHI-coder

SAPTARSHI-coder commented Aug 13, 2026

Copy link
Copy Markdown
Owner

🔒 Pull Request Closed

This PR was automatically closed because it failed the submission validation check.

Please fix the issues listed above, then open a new pull request. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@SAPTARSHI-coder SAPTARSHI-coder Awaiting requested review from SAPTARSHI-coder SAPTARSHI-coder is a code owner

Assignees

@Dev1822 Dev1822

@SAPTARSHI-coder SAPTARSHI-coder

Labels

contribution documentation gssoc:invalid invalid-submission needs-files

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEATURE] CSS-Only Hexagonal Grid with Reactive Neighbor Highlighting

2 participants

@Dev1822 @SAPTARSHI-coder