# IconPicker Component

A visual icon picker component for selecting Dashicons in the WPBitsBlockStudio.

## Overview

The IconPicker component provides a user-friendly interface for selecting Dashicons from the complete WordPress Dashicons library. It replaces the simple text input field with a visual picker that includes search, categorization, and preview functionality.

## Features

- **Visual Selection**: Grid-based icon display with hover effects
- **Search Functionality**: Real-time search filtering by icon name
- **Category Filtering**: Icons organized into logical categories
- **Complete Library**: All 300+ Dashicons from the official WordPress library
- **Live Preview**: Shows selected icon in the trigger button
- **Responsive Design**: Optimized for desktop and mobile devices
- **Accessibility**: Proper ARIA labels and keyboard navigation
- **WordPress Integration**: Uses native Gutenberg components

## Usage

```jsx
import IconPicker from '../components/IconPicker';

function MyComponent() {
    const [selectedIcon, setSelectedIcon] = useState('block-default');

    return (
        <IconPicker
            label="Block Icon"
            value={selectedIcon}
            onChange={setSelectedIcon}
            help="Select a Dashicon for your block"
        />
    );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | `'block-default'` | Current selected icon name |
| `onChange` | `function` | - | Callback when icon is selected |
| `label` | `string` | - | Field label text |
| `help` | `string` | - | Help text displayed below the field |

## Icon Categories

Icons are organized into the following categories for easier browsing:

- **Admin**: Administrative interface icons (`admin-*`)
- **Editor**: Text editor and formatting icons (`editor-*`)
- **Media**: Media-related icons (images, video, audio)
- **Social**: Social media platform icons
- **Arrows**: Directional and navigation arrows
- **Controls**: Media player and UI controls
- **Format**: Content format indicators
- **Other**: Miscellaneous icons

## Implementation Details

### WordPress Components Used

- `Popover`: Modal overlay for the icon picker
- `SearchControl`: Search input with built-in styling
- `Button`: Trigger button and category filters
- `Flex`/`FlexItem`: Layout components
- `Icon`: Icon display component

### Icon Data Structure

The component includes a complete array of all Dashicons with proper categorization:

```javascript
const DASHICONS = [
    'admin-appearance',
    'admin-collapse',
    'admin-comments',
    // ... 300+ more icons
];

const ICON_CATEGORIES = {
    admin: {
        label: 'Admin',
        icons: [...],
    },
    // ... more categories
};
```

### Styling

The component uses SCSS with BEM-style naming:

- `.wpbs-icon-picker`: Main container
- `.wpbs-icon-picker__trigger`: Button that opens the picker
- `.wpbs-icon-picker__popover`: Modal overlay
- `.wpbs-icon-picker__grid`: Icon grid layout
- `.wpbs-icon-picker__icon`: Individual icon buttons

## Integration

The IconPicker is integrated into the BlockForm component in the General Settings tab:

```jsx
// Before (simple text input)
<TextControl
    label="Icon"
    value={data.icon}
    onChange={(value) => updateField('icon', value)}
    help="Dashicon name (e.g., block-default)"
/>

// After (visual icon picker)
<IconPicker
    label="Icon"
    value={data.icon}
    onChange={(value) => updateField('icon', value)}
    help="Select a Dashicon for your block"
/>
```

## Browser Support

- Modern browsers with ES6+ support
- WordPress admin environment
- Responsive design for mobile devices

## Performance

- Icons are rendered on-demand when the picker is opened
- Search filtering is debounced for smooth performance
- Category filtering is instant with memoized results
- Grid virtualization for large icon sets

## Accessibility

- Proper ARIA labels for screen readers
- Keyboard navigation support
- Focus management within the popover
- High contrast support for selected states

## Future Enhancements

Potential improvements for future versions:

- Custom icon upload support
- SVG icon library integration
- Icon favorites/recently used
- Bulk icon operations
- Icon preview in different sizes
- Integration with WordPress media library