feat: Add React Filter Chip Group with Smooth Select Transitions (#28…

[realtushartyagi]

Pull Request Description

Adds a new React Component: Filter Chip Group with Smooth Select Transitions.
This submission provides a highly interactive, accessible React component that renders a group of multi-selectable filter chips (pill tags). The component strictly manages its selection state natively via React hooks (useState), ensuring reliable array updates. Visually, when a chip toggles into the selected state (.ease-chip-selected), it relies entirely on hardware-accelerated CSS to dynamically transition the background color. Furthermore, it triggers a sophisticated, bouncy cubic-bezier transition on the child SVG wrapper's width and margin properties. This creates a tactile, premium "push-aside" entrance for the checkmark icon without relying on heavy JavaScript animation libraries.

Fixes #28028
Fixes #27360

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/react/react-filter-chip-group-with-smooth-select-transitions-realtushartyagi-28028/
• Includes demo.html — (N/A: React Component Submission)
• Includes style.css — (N/A: Uses component-scoped .css instead)
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A React-powered Filter Chip Group that manages multi-selection state while utilizing complex, native CSS width/margin transitions to smoothly reveal checkmark icons inside the pill boundaries.

How does a developer use it?

import React, { useState } from 'react';
import FilterChipGroup from './components/FilterChipGroup';

const App = () => {
  const [activeFilters, setActiveFilters] = useState(['tag-react']);

  const blogTags = [
    { id: 'tag-react', label: 'React' },
    { id: 'tag-css', label: 'CSS Animations' },
    { id: 'tag-ui', label: 'UI Design' },
    { id: 'tag-a11y', label: 'Accessibility' }
  ];

  return (
    <div style={{ padding: '2rem' }}>
      <FilterChipGroup 
        filters={blogTags} 
        initialSelected={['tag-react']}
        onChange={(newSelection) => setActiveFilters(newSelection)} 
      />
    </div>
  );
};

export default App;

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[SAPTARSHI-coder]

✅ React/SCSS Submission Validated!

Great work @realtushartyagi! 🎉 Your react submission passed all quality checks.

⚛️ Folder: submissions/react/react-filter-chip-group-with-smooth-select-transitions-realtushartyagi-28028

• ✅ React component file (.jsx/.tsx)
• ✅ README.md
• ✅ CSS/SCSS stylesheet

🚀 What happens next?

• A maintainer will review your React component
• Respond promptly to any feedback
• Once approved, it will be merged into main!

Thank you for contributing to EaseMotion CSS! ⚡

[SAPTARSHI-coder]

🔒 Pull Request Closed: Stale/Duplicate Submission 🔒

Hi @realtushartyagi! 👋

This pull request has been closed because the linked issue (#28028) is already resolved and closed. Another contributor's pull request was accepted and merged for this task first. Thank you for your contribution!

[SAPTARSHI-coder]

✅ React/SCSS Submission Validated!

Great work @realtushartyagi! 🎉 Your react submission passed all quality checks.

⚛️ Folder: submissions/react/react-filter-chip-group-with-smooth-select-transitions-realtushartyagi-28028

• ✅ React component file (.jsx/.tsx)
• ✅ README.md
• ✅ CSS/SCSS stylesheet

🚀 What happens next?

• A maintainer will review your React component
• Respond promptly to any feedback
• Once approved, it will be merged into main!

Thank you for contributing to EaseMotion CSS! ⚡